mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-18 14:00:39 -07:00
Deploying to gh-pages from @ harttle/liquidjs@70fdb7af48 🚀
This commit is contained in:
harttle
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,7 +87,7 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">缓存</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/caching.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/caching.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
@@ -95,19 +95,19 @@
|
||||
<p>LiquidJS 在这一方面比较灵活，提供了多种不同的方式来达到提升性能的目的。</p>
|
||||
<h2 id="手动缓存" class="article-heading"><a href="#手动缓存" class="headerlink" title="手动缓存"></a>手动缓存<a class="article-anchor" href="#手动缓存" aria-hidden="true"></a></h2><p><a href="../../api/classes/liquid_.liquid.html#parse">.parse()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFile">.parseFile()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFileSync">.parseFileSync()</a> API 可以用来把字符串或文件解析成模板。得到的模板可以用不同的数据去重复地渲染得到不同的 HTML。</p>
|
||||
<p>从字符串解析：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parse(<span class="string">'{{name | capitalize}}'</span>);</span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'alice'</span>}) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'bob'</span>}) <span class="comment">// 'Bob'</span></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parse(<span class="string">'{{name | capitalize}}'</span>);</span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'alice'</span>}) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'bob'</span>}) <span class="comment">// 'Bob'</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>从文件解析：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parseFileSync(<span class="string">'hello'</span>); <span class="comment">// contents of `hello.liquid`: {{name}}</span></span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'alice'</span>}) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'bob'</span>}) <span class="comment">// 'Bob'</span></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parseFileSync(<span class="string">'hello'</span>); <span class="comment">// contents of `hello.liquid`: {{name}}</span></span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'alice'</span>}) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, {<span class="attr">name</span>: <span class="string">'bob'</span>}) <span class="comment">// 'Bob'</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>上述代码中字符串或文件只被解析了一次，可以反复利用去渲染不同的数据。有很多模板文件时可以把 <code>tpl</code> 变量存在 <code>Map</code> 中，后续再 <code>.render()</code> 时直接从 Map 中拿出解析好的模板去渲染。</p>
|
||||
<h2 id="cache-选项" class="article-heading"><a href="#cache-选项" class="headerlink" title="cache 选项"></a><code>cache</code> 选项<a class="article-anchor" href="#cache-选项" aria-hidden="true"></a></h2><p>如果你只用 <code>.renderFile()</code> 和 <code>.renderFileSync()</code> 也可以直接设置 [cache][cache] 选项，LiquidJS 会帮你缓存。</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> cache: <span class="literal">true</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 将会解析 hello.liquid 然后用 {name: 'alice'} 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>})</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 会找到上次 hello.liquid 解析的结果模板，再用 {name: 'bob'} 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, {<span class="attr">name</span>: <span class="string">'bob'</span>})</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">cache</span>: <span class="literal">true</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 将会解析 hello.liquid 然后用 {name: 'alice'} 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>})</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 会找到上次 hello.liquid 解析的结果模板，再用 {name: 'bob'} 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, {<span class="attr">name</span>: <span class="string">'bob'</span>})</span><br></pre></td></tr></table></figure>
|
||||
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="use-in-expressjs.html" class="article-footer-prev" title="Express.js 中使用"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="register-filters-tags.html" class="article-footer-next" title="注册标签/过滤器"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -116,7 +116,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#手动缓存"><span class="toc-text">手动缓存</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cache-选项"><span class="toc-text">cache 选项</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%8B%E5%8A%A8%E7%BC%93%E5%AD%98"><span class="toc-text">手动缓存</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cache-%E9%80%89%E9%A1%B9"><span class="toc-text">cache 选项</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,25 +87,26 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">贡献指南</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/contribution-guidelines.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/contribution-guidelines.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<h2 id="Star-on-Github-👉" class="article-heading"><a href="#Star-on-Github-👉" class="headerlink" title="Star on Github 👉 "></a>Star on Github 👉 <a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square" alt="harttle/liquidjs"></a><a class="article-anchor" href="#Star-on-Github-👉" aria-hidden="true"></a></h2><p>Star 是支持 LiquidJS 最重要的方式，也是最简单的方式：通过提升排名来让更多人了解 LiquidJS，让它得到更好的改进。</p>
|
||||
<h2 id="发起-Pull-Request" class="article-heading"><a href="#发起-Pull-Request" class="headerlink" title="发起 Pull Request"></a>发起 Pull Request<a class="article-anchor" href="#发起-Pull-Request" aria-hidden="true"></a></h2><p><strong>代码风格</strong>：LiquidJS 采用 <a href="https://github.com/standard/eslint-config-standard" target="_blank" rel="noopener external nofollow noreferrer">standard</a> 和 <a href="https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json" target="_blank" rel="noopener external nofollow noreferrer">@typescript-eslint/recommended</a> 规则，提交前确保可以通过风格检查：</p>
|
||||
<h2 id="Star-on-Github-👉" class="article-heading"><a href="#Star-on-Github-👉" class="headerlink" title="Star on Github 👉 "></a>Star on Github 👉 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs"><img src="https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square" alt="harttle/liquidjs"></a><a class="article-anchor" href="#Star-on-Github-👉" aria-hidden="true"></a></h2><p>Star 是支持 LiquidJS 最重要的方式，也是最简单的方式：通过提升排名来让更多人了解 LiquidJS，让它得到更好的改进。</p>
|
||||
<h2 id="发起-Pull-Request" class="article-heading"><a href="#发起-Pull-Request" class="headerlink" title="发起 Pull Request"></a>发起 Pull Request<a class="article-anchor" href="#发起-Pull-Request" aria-hidden="true"></a></h2><p><strong>代码风格</strong>：LiquidJS 采用 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/standard/eslint-config-standard">standard</a> 和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json">@typescript-eslint/recommended</a> 规则，提交前确保可以通过风格检查：</p>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm run lint</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><strong>测试</strong>：确保你改动之后测试仍然可以通过：</p>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm <span class="built_in">test</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><strong>提交消息</strong>：请遵守 <a href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits" target="_blank" rel="noopener external nofollow noreferrer">Angular 提交消息规范</a>，尤其注意 <a href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type" target="_blank" rel="noopener external nofollow noreferrer">type 标识</a>，semantic-release 机器人依赖这个标识自动发布。</p>
|
||||
<h2 id="成为赞助者！" class="article-heading"><a href="#成为赞助者！" class="headerlink" title="成为赞助者！"></a>成为赞助者！<a class="article-anchor" href="#成为赞助者！" aria-hidden="true"></a></h2><p>LiquidJS 是开源的、免费的，并且 <strong>没有</strong> 商业支持，也 <strong>没有</strong> 任何广告。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 <a href="https://opencollective.com/liquidjs/" target="_blank" rel="noopener external nofollow noreferrer">Open Collective</a> 或 <a href="https://www.patreon.com/harttle" target="_blank" rel="noopener external nofollow noreferrer">Patreon</a> 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里和 <a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">Github README</a>。</p>
|
||||
<p><strong>提交消息</strong>：请遵守 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits">Angular 提交消息规范</a>，尤其注意 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type">type 标识</a>，semantic-release 机器人依赖这个标识自动发布。</p>
|
||||
<p><strong>向后兼容</strong>：请考虑向后（之前的旧的版本）兼容。LiquidJS 被用于很多层的软件，包括底层库、编译器、站点生成器、 Web 服务器。对多数最终用户来说，驱动或请求整个系统做一次主版本升级是很难办到的。</p>
|
||||
<h2 id="成为赞助者！" class="article-heading"><a href="#成为赞助者！" class="headerlink" title="成为赞助者！"></a>成为赞助者！<a class="article-anchor" href="#成为赞助者！" aria-hidden="true"></a></h2><p>LiquidJS 是开源的、免费的，并且 <strong>没有</strong> 商业支持，也 <strong>没有</strong> 任何广告。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://opencollective.com/liquidjs/">Open Collective</a> 或 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.patreon.com/harttle">Patreon</a> 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">Github README</a>。</p>
|
||||
<p><object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object></p>
|
||||
<p><a href="https://www.patreon.com/bePatron?u=32321060" target="_blank" rel="noopener external nofollow noreferrer"><img src="../../icon/[email protected]" alt="Become a Patron!"></a></p>
|
||||
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.patreon.com/bePatron?u=32321060"><img src="../../icon/[email protected]" alt="Become a Patron!"></a></p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="differences.html" class="article-footer-prev" title="与 Shopify/liquid 的不同"><i class="icon-chevron-left"></i><span>上一页</span></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -114,7 +115,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Star-on-Github-👉"><span class="toc-text">Star on Github 👉 </span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#发起-Pull-Request"><span class="toc-text">发起 Pull Request</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#成为赞助者！"><span class="toc-text">成为赞助者！</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Star-on-Github-%F0%9F%91%89"><span class="toc-text">Star on Github 👉 </span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%91%E8%B5%B7-Pull-Request"><span class="toc-text">发起 Pull Request</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%88%90%E4%B8%BA%E8%B5%9E%E5%8A%A9%E8%80%85%EF%BC%81"><span class="toc-text">成为赞助者！</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,24 +87,24 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">和 Shopify/liquid 的区别</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/differences.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/differences.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p><a href="https://github.com/Shopify/liquid" target="_blank" rel="noopener external nofollow noreferrer">Shopify/liquid</a> 中的所有标签和过滤器 LiquidJS 都支持，但不包括 Shopify 主题中业务逻辑相关的标签和过滤器（如果你在找这些标签可以参考 <a href="./plugins.html#插件列表">插件列表</a>，也欢迎把你的插件添加到列表中）。尽管原则上我们尽力兼容于 Shopify/liquid，但仍然存在一些区别：</p>
|
||||
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">Shopify/liquid</a> 中的所有标签和过滤器 LiquidJS 都支持，但不包括 Shopify 主题中业务逻辑相关的标签和过滤器（如果你在找这些标签可以参考 <a href="./plugins.html#插件列表">插件列表</a>，也欢迎把你的插件添加到列表中）。尽管原则上我们尽力兼容于 Shopify/liquid，但仍然存在一些区别：</p>
|
||||
<ul>
|
||||
<li>真和假。在 LiquidJS 中 <code>undefined</code>, <code>null</code>, <code>false</code> 是假，之外的都是真；在 Ruby 中 <code>nil</code> 和 <code>false</code> 是假，其他都是真。见 <a href="https://github.com/harttle/liquidjs/pull/26" target="_blank" rel="noopener external nofollow noreferrer">#26</a>。</li>
|
||||
<li>数字。JavaScript 不区分浮点数和整数，因此缺失一部分整数算术，见 <a href="https://github.com/harttle/liquidjs/issues/59" target="_blank" rel="noopener external nofollow noreferrer">#59</a>。此外 <code>size</code> 过滤器作用于数字时总是返回零，而不是 Ruby 中的浮点数或整数的内存大小。</li>
|
||||
<li>Drop 中的 <a href="https://github.com/Shopify/liquid/wiki/Introduction-to-Drops" target="_blank" rel="noopener external nofollow noreferrer">.to_liquid()</a> 替换为 <code>.toLiquid()</code>。</li>
|
||||
<li>数据的 <a href="https://www.rubydoc.info/gems/liquid/Liquid/Drop" target="_blank" rel="noopener external nofollow noreferrer">.to_s()</a> 替换为 <code>.toString()</code>。</li>
|
||||
<li>真和假。在 LiquidJS 中 <code>undefined</code>, <code>null</code>, <code>false</code> 是假，之外的都是真；在 Ruby 中 <code>nil</code> 和 <code>false</code> 是假，其他都是真。见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/26">#26</a>。</li>
|
||||
<li>数字。JavaScript 不区分浮点数和整数，因此缺失一部分整数算术，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/59">#59</a>。此外 <code>size</code> 过滤器作用于数字时总是返回零，而不是 Ruby 中的浮点数或整数的内存大小。</li>
|
||||
<li>Drop 中的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/wiki/Introduction-to-Drops">.to_liquid()</a> 替换为 <code>.toLiquid()</code>。</li>
|
||||
<li>数据的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.rubydoc.info/gems/liquid/Liquid/Drop">.to_s()</a> 替换为 <code>.toString()</code>。</li>
|
||||
<li>对象的迭代顺序。JavaScript 对象的迭代顺序是插入顺序和数字键递增顺序的组合，但 Ruby Hash 中只是插入顺序（JavaScript 字面量 Object 和 Ruby 字面量 Hash 的插入顺序解释也不同）。</li>
|
||||
<li>排序稳定性。shopify/liquid 和 LiquidJS 都没有定义 <a href="https://liquidjs.com/filters/sort.html">sort</a> 过滤器的稳定性在，它取决于 Ruby/JavaScript 内置的排序算法，在 Node.js 12+ 和 Google Chrome 70+ LiquidJS 的排序是 <a href="https://v8.dev/features/stable-sort" target="_blank" rel="noopener external nofollow noreferrer">稳定的</a>。</li>
|
||||
<li>shopify/liquid 允许过滤器尾部的未匹配字符，但 LiquidJS 不允许。这就是说如果过滤器参数前忘记写冒号比如 <code>{{ "a b" | split " "}}</code> LiquidJS 会抛出异常。这是为了提升 Liquid 模板的易用性，参考 <a href="https://github.com/harttle/liquidjs/issues/208" target="_blank" rel="noopener external nofollow noreferrer">#208</a> 和 <a href="https://github.com/harttle/liquidjs/issues/212" target="_blank" rel="noopener external nofollow noreferrer">#212</a>。</li>
|
||||
<li>排序稳定性。shopify/liquid 和 LiquidJS 都没有定义 <a href="https://liquidjs.com/filters/sort.html">sort</a> 过滤器的稳定性在，它取决于 Ruby/JavaScript 内置的排序算法，在 Node.js 12+ 和 Google Chrome 70+ LiquidJS 的排序是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://v8.dev/features/stable-sort">稳定的</a>。</li>
|
||||
<li>shopify/liquid 允许过滤器尾部的未匹配字符，但 LiquidJS 不允许。这就是说如果过滤器参数前忘记写冒号比如 <code>{{ "a b" | split " "}}</code> LiquidJS 会抛出异常。这是为了提升 Liquid 模板的易用性，参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/208">#208</a> 和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/212">#212</a>。</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="changelog.html" class="article-footer-prev" title="更新日志"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="contribution-guidelines.html" class="article-footer-next" title="贡献指南"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,37 +87,37 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">Liquid 模板语言简介</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/intro-to-liquid.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/intro-to-liquid.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。这个项目的目的是为 JavaScript 社区提供一个 Liquid 模板引擎的实现。Liquid 最初用 Ruby 实现并用于 Github Pages, Jekyll 和 Shopify，参考 <a href="./differences.html">和 Shopify/liquid 的区别</a>。</p>
|
||||
<p>LiquidJS 语法相对简单。LiquidJS 中有两种标记：</p>
|
||||
<ul>
|
||||
<li><strong>标签</strong>。标签由标签名和参数构成，由 <code>{%</code> 和 <code>%}</code> 包裹。</li>
|
||||
<li><strong>输出</strong>。输出由一个值和一组可选的过滤器构成，由 <code>{{</code> 和 <code>}}</code> 包裹。</li>
|
||||
<li><strong>标签</strong>。标签由标签名和参数构成，由 <code>{%</code> 和 <code>%}</code> 包裹。</li>
|
||||
<li><strong>输出</strong>。输出由一个值和一组可选的过滤器构成，由 <code>{{` 和 `}}</code> 包裹。</li>
|
||||
</ul>
|
||||
<h2 id="输出" class="article-heading"><a href="#输出" class="headerlink" title="输出"></a>输出<a class="article-anchor" href="#输出" aria-hidden="true"></a></h2><p><strong>输出</strong> 用于转换和输出变量到 HTMl。下面的模板将会把 <code>username</code> 的值插入到 input 的 <code>value</code>：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><input type="text" name="user" value="{{username}}"></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><input type="text" name="user" value="{{username}}"></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><em>输出</em> 里的值可以在输出之前经过若干个 <strong>过滤器</strong> 的转换。比如在变量后面追加一个字符串：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{{ username | append: ", welcome to LiquidJS!" }}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{{ username | append: ", welcome to LiquidJS!" }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>过滤器可以级联，用起来像管道一样：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{{ username | append: ", welcome to LiquidJS!" | capitalize }}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{{ username | append: ", welcome to LiquidJS!" | capitalize }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><a href="../filters/overview.html">这里</a> 是 LiquidJS 支持的完整的过滤器列表。</p>
|
||||
<h2 id="标签" class="article-heading"><a href="#标签" class="headerlink" title="标签"></a>标签<a class="article-anchor" href="#标签" aria-hidden="true"></a></h2><p><strong>标签</strong> 用于控制模板渲染过程，操作模板变量，和其他模板交互等。例如 <code>assign</code> 可以用来定义一个模板中可以使用的变量：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% assign foo = "FOO" %}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% assign foo = "FOO" %}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>一般标签成对地出现，一个开始标签和一个对应的结束标签，比如：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% if foo == "FOO" %}</span><br><span class="line"> Variable `foo` equals "FOO"</span><br><span class="line">{% else %}</span><br><span class="line"> Variable `foo` not equals "FOO"</span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% if foo == "FOO" %}</span><br><span class="line"> Variable `foo` equals "FOO"</span><br><span class="line">{% else %}</span><br><span class="line"> Variable `foo` not equals "FOO"</span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><a href="../tags/overview.html">这里</a> 是 LiquidJS 支持的完整的标签列表。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="setup.html" class="article-footer-next" title="安装"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -126,7 +126,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#输出"><span class="toc-text">输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#标签"><span class="toc-text">标签</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BE%93%E5%87%BA"><span class="toc-text">输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-text">标签</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,7 +87,7 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">迁移到 LiquidJS 9</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/migrate-to-9.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/migrate-to-9.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
@@ -97,25 +97,25 @@
|
||||
<li>新的工具：Expression 和 Tokenizer</li>
|
||||
</ul>
|
||||
<h2 id="修复" class="article-heading"><a href="#修复" class="headerlink" title="修复"></a>修复<a class="article-anchor" href="#修复" aria-hidden="true"></a></h2><ul>
|
||||
<li>布尔逻辑运算顺序，见 <a href="https://github.com/harttle/liquidjs/issues/130" target="_blank" rel="noopener external nofollow noreferrer">#130</a>；</li>
|
||||
<li><code>break</code> 和 <code>continue</code> 会忽略它们之前的代码，见 <a href="https://github.com/harttle/liquidjs/issues/123" target="_blank" rel="noopener external nofollow noreferrer">#123</a>；</li>
|
||||
<li>React.js 示例无法正确 yarn install，见 <a href="https://github.com/harttle/liquidjs/issues/145" target="_blank" rel="noopener external nofollow noreferrer">#145</a>；</li>
|
||||
<li>布尔逻辑运算顺序，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/130">#130</a>；</li>
|
||||
<li><code>break</code> 和 <code>continue</code> 会忽略它们之前的代码，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/123">#123</a>；</li>
|
||||
<li>React.js 示例无法正确 yarn install，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/145">#145</a>；</li>
|
||||
<li>有时没有正确地等待 Promise 类型的 Drops。</li>
|
||||
</ul>
|
||||
<h2 id="性能" class="article-heading"><a href="#性能" class="headerlink" title="性能"></a>性能<a class="article-anchor" href="#性能" aria-hidden="true"></a></h2><ul>
|
||||
<li>目标平台提升到 Node.js 8 引起的性能提升（去掉了一些 Polyfill），见 <a href="https://github.com/harttle/liquidjs/issues/137" target="_blank" rel="noopener external nofollow noreferrer">#137</a>；</li>
|
||||
<li>内存使用降低了 57.5%，见 <a href="https://github.com/harttle/liquidjs/pull/202" target="_blank" rel="noopener external nofollow noreferrer">#202</a>；</li>
|
||||
<li>渲染性能提升了 100.3%，见 <a href="https://github.com/harttle/liquidjs/pull/205" target="_blank" rel="noopener external nofollow noreferrer">#205</a>。</li>
|
||||
<li>目标平台提升到 Node.js 8 引起的性能提升（去掉了一些 Polyfill），见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/137">#137</a>；</li>
|
||||
<li>内存使用降低了 57.5%，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/202">#202</a>；</li>
|
||||
<li>渲染性能提升了 100.3%，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/205">#205</a>。</li>
|
||||
</ul>
|
||||
<h2 id="不兼容的变更" class="article-heading"><a href="#不兼容的变更" class="headerlink" title="不兼容的变更"></a>不兼容的变更<a class="article-anchor" href="#不兼容的变更" aria-hidden="true"></a></h2><ul>
|
||||
<li>LiquidJS 不再有默认导出了，以后要使用 <code>import {Liquid} from 'liquidjs'</code> 语法。使用 UMD 包里的 <code>window.Liquid</code> 也需要改为 <code>window.liquidjs.Liquid</code>；</li>
|
||||
<li>LiquidJS 不再有默认导出了，以后要使用 <code>import {Liquid} from 'liquidjs'</code> 语法。使用 UMD 包里的 <code>window.Liquid</code> 也需要改为 <code>window.liquidjs.Liquid</code>；</li>
|
||||
<li>移除了重复的静态方法 <code>Liquid.evalValue</code>，统一使用示例方法 <code>liquid.evalValue</code>；</li>
|
||||
<li>支持的最低目标平台为 Node.js 8，CJS 包（Node.js 下的主入口）不再支持 Node.js ≤ 6 了，ESM（dist/liquid.browser.esm.js）和 UMD（dist/liquid.browser.umd.js, dist/liquid.browser.min.js）包不受影响。</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="truthy-and-falsy.html" class="article-footer-prev" title="真和假"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="changelog.html" class="article-footer-next" title="更新日志"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -124,7 +124,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#新特性"><span class="toc-text">新特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#修复"><span class="toc-text">修复</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#性能"><span class="toc-text">性能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#不兼容的变更"><span class="toc-text">不兼容的变更</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E7%89%B9%E6%80%A7"><span class="toc-text">新特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BF%AE%E5%A4%8D"><span class="toc-text">修复</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%A7%E8%83%BD"><span class="toc-text">性能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8D%E5%85%BC%E5%AE%B9%E7%9A%84%E5%8F%98%E6%9B%B4"><span class="toc-text">不兼容的变更</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,7 +87,7 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">运算符</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/operators.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/operators.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
@@ -101,11 +101,11 @@
|
||||
<li>比较运算符。所有比较运算符具有同样的优先级，且高于逻辑运算符。</li>
|
||||
<li>逻辑运算符。所有逻辑运算符具有同样的有衔接。</li>
|
||||
</ol>
|
||||
<h2 id="结合性" class="article-heading"><a href="#结合性" class="headerlink" title="结合性"></a>结合性<a class="article-anchor" href="#结合性" aria-hidden="true"></a></h2><p>逻辑运算符是又结合的，所以连续的逻辑运算时计算顺序是从右向左，参考 <a href="https://help.shopify.com/en/themes/liquid/basics/operators#order-of-operations" target="_blank" rel="noopener external nofollow noreferrer">Shopify</a> 的文档。</p>
|
||||
<h2 id="结合性" class="article-heading"><a href="#结合性" class="headerlink" title="结合性"></a>结合性<a class="article-anchor" href="#结合性" aria-hidden="true"></a></h2><p>逻辑运算符是又结合的，所以连续的逻辑运算时计算顺序是从右向左，参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/en/themes/liquid/basics/operators#order-of-operations">Shopify</a> 的文档。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="plugins.html" class="article-footer-prev" title="插件"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="truthy-and-falsy.html" class="article-footer-next" title="真和假"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -114,7 +114,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#优先级"><span class="toc-text">优先级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#结合性"><span class="toc-text">结合性</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-text">优先级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%93%E5%90%88%E6%80%A7"><span class="toc-text">结合性</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,51 +87,54 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">选项</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/options.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/options.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p><a href="../api/classes/liquid_.liquid.html">Liquid</a> 构造函数接受一个参数对象，用来定义各种模板引擎行为。这些参数都是可选的，比如我可以指定其中一个参数 <code>cache</code>：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>)</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> cache: <span class="literal">true</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>)</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">cache</span>: <span class="literal">true</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">API 文档</strong><p>下面的所有选项的概述，希望了解具体的类型和签名，请前往 <a href="https://liquidjs.com/api/interfaces/liquid_options_.liquidoptions.html" target="_self">LiquidOptions | API</a>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="cache" class="article-heading"><a href="#cache" class="headerlink" title="cache"></a>cache<a class="article-anchor" href="#cache" aria-hidden="true"></a></h2><p><strong>cache</strong> 用来指定是否缓存曾经读取和处理过的模板来提升性能。在生产环境模板会重复渲染的情况会很有用。</p>
|
||||
<p>默认是 <code>false</code>，当设置为 <code>true</code> 时会启用一个大小为 1024 的 LRU 缓存。当然也可以传一个数字来指定缓存大小。此外还可以是一个自定义的缓存实现，LiquidJS 会通过它来查找和读写文件。详情请参考 <a href="./caching.html">Caching</a>。</p>
|
||||
<h2 id="dynamicPartials" class="article-heading"><a href="#dynamicPartials" class="headerlink" title="dynamicPartials"></a>dynamicPartials<a class="article-anchor" href="#dynamicPartials" aria-hidden="true"></a></h2><p><strong>dynamicPartials</strong> 表示是否把传给 <a href="../tags/include.html">include</a>, <a href="../tags/render.html">render</a>, <a href="../tags/layout.html">layout</a> 标签的文件名当做变量处理。默认为 <code>true</code>。例如用上下文 <code>{ file: 'foo.html' }</code> 渲染下面的模板将会引入文件 <code>foo.html</code>：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% include file %}</span><br></pre></td></tr></table></figure>
|
||||
<h2 id="dynamicPartials" class="article-heading"><a href="#dynamicPartials" class="headerlink" title="dynamicPartials"></a>dynamicPartials<a class="article-anchor" href="#dynamicPartials" aria-hidden="true"></a></h2><p><strong>dynamicPartials</strong> 表示是否把传给 <a href="../tags/include.html">include</a>, <a href="../tags/render.html">render</a>, <a href="../tags/layout.html">layout</a> 标签的文件名当做变量处理。默认为 <code>true</code>。例如用上下文 <code>{ file: 'foo.html' }</code> 渲染下面的模板将会引入文件 <code>foo.html</code>：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% include file %}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>设置 <code>dynamicPartials: false</code> 后 LiquidJS 将会尝试去读取 <code>file</code>。当你的模板之间都是静态引入关系时会很有用：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% liquid foo.html %}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% liquid foo.html %}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note warn"><strong class="note-title">Common Pitfall</strong><p>LiquidJS 把这个选项默认值设为 <code>true</code> 以兼容于 shopify/liquid，但如果你在使用 <a href="https://github.com/11ty/eleventy" rel="external nofollow noreferrer" target="_blank">eleventy</a> 它会设置默认值 <code>false</code> （参考 <a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths" rel="external nofollow noreferrer" target="_blank">Quoted Include Paths</a>）以兼容于 Jekyll。</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="extname" class="article-heading"><a href="#extname" class="headerlink" title="extname"></a>extname<a class="article-anchor" href="#extname" aria-hidden="true"></a></h2><p><strong>extname</strong> 定义了默认的文件后缀，当传入文件名不包含后缀时自动追加。默认值是 <code>''</code> 也就是说默认是禁用的。如果设置为 <code>.liquid</code>：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% render "foo" %} 没有后缀，添加 ".liquid" 并加载 foo.liquid</span><br><span class="line">{% render "foo.html" %} 已经有后缀了，直接加载 foo.html</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% render "foo" %} 没有后缀，添加 ".liquid" 并加载 foo.liquid</span><br><span class="line">{% render "foo.html" %} 已经有后缀了，直接加载 foo.html</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">旧版行为</strong><p>在 2.0.1 之前，<code>extname</code> 默认值为 <code>.liquid</code>。要禁用它需要明确设置为 <code>extname: ''</code>。详情参考 <a href="https://github.com/harttle/liquidjs/issues/41" rel="external nofollow noreferrer" target="_blank">#41</a>。</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="root" class="article-heading"><a href="#root" class="headerlink" title="root"></a>root<a class="article-anchor" href="#root" aria-hidden="true"></a></h2><p><strong>root</strong> 用来指定 LiquidJS 查找和读取模板的根目录。可以是单个字符串，也可以是一个数组 LiquidJS 会顺序查找。详情请参考 <a href="./render-file.html">Render Files</a>。</p>
|
||||
<h2 id="fs" class="article-heading"><a href="#fs" class="headerlink" title="fs"></a>fs<a class="article-anchor" href="#fs" aria-hidden="true"></a></h2><p><strong>fs</strong> 用来自定义文件系统实现，详情请参考 <a href="./render-file.html#Abstract-File-System">Abstract File System</a>。</p>
|
||||
<h2 id="globals" class="article-heading"><a href="#globals" class="headerlink" title="globals"></a>globals<a class="article-anchor" href="#globals" aria-hidden="true"></a></h2><p><strong>globals</strong> 用来定义对所有模板可见的全局变量。包括 <a href="../tags/render.html">render tag</a> 引入的子模板，见 <a href="https://github.com/harttle/liquidjs/issues/185" target="_blank" rel="noopener external nofollow noreferrer">3185</a>。</p>
|
||||
<h2 id="globals" class="article-heading"><a href="#globals" class="headerlink" title="globals"></a>globals<a class="article-anchor" href="#globals" aria-hidden="true"></a></h2><p><strong>globals</strong> 用来定义对所有模板可见的全局变量。包括 <a href="../tags/render.html">render tag</a> 引入的子模板，见 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/185">3185</a>。</p>
|
||||
<h2 id="jsTruthy" class="article-heading"><a href="#jsTruthy" class="headerlink" title="jsTruthy"></a>jsTruthy<a class="article-anchor" href="#jsTruthy" aria-hidden="true"></a></h2><p><strong>jsTruthy</strong> 用来使用 Javascript 的真值判断，默认为 <code>false</code> 使用 Shopify 方式。</p>
|
||||
<p>例如，空字符串在 JavaScript 中为假（<code>jsTruthy</code> 为 <code>true</code> 时），在 Shopify 真值表中为真。</p>
|
||||
<h2 id="时间日期和时区" class="article-heading"><a href="#时间日期和时区" class="headerlink" title="时间日期和时区"></a>时间日期和时区<a class="article-anchor" href="#时间日期和时区" aria-hidden="true"></a></h2><p><strong>timezoneOffset</strong> 用来指定一个和你当地时区不同的时区，所有日期和时间输出时都转换到这个指定的时区。例如设置 <code>timezoneOffset: 0</code> 将会把所有日期按照 UTC/GMT 00:00 来输出。</p>
|
||||
<p><strong>preserveTimezones</strong> 是一个布尔值，只影响时间戳字面量。当设置为 <code>true</code> 时，所有字面量的时间戳字符串会在输出时保持原状，即不论输入时采取怎样的时区，输出时仍然采用那一时区（和 Shopify Liquid 的行为一致）。注意这是一个解析器参数，渲染时传入的数据中的日期的输出不会受此参数影响。</p>
|
||||
<h2 id="换行和缩进" class="article-heading"><a href="#换行和缩进" class="headerlink" title="换行和缩进"></a>换行和缩进<a class="article-anchor" href="#换行和缩进" aria-hidden="true"></a></h2><p><strong>greedy</strong>, <strong>trimOutputLeft</strong>, <strong>trimOutputRight</strong>, <strong>trimTagLeft</strong>, <strong>trimTagRight</strong> 选项用来移除 Liquid 语法周围的换行和缩进，详情请参考 <a href="./whitespace-control.html">Whitespace Control</a>。</p>
|
||||
<h2 id="自定义分隔符" class="article-heading"><a href="#自定义分隔符" class="headerlink" title="自定义分隔符"></a>自定义分隔符<a class="article-anchor" href="#自定义分隔符" aria-hidden="true"></a></h2><p><strong>outputDelimiterLeft</strong>, <strong>outputDelimiterRight</strong>, <strong>tagDelimiterLeft</strong>, <strong>tagDelimiterRight</strong> 用来自定义 LiquidJS 中 <a href="./intro-to-liquid.html">标签和过滤器</a> 的分隔符。例如设置了 <code>outputDelimiterLeft: <%=, outputDelimiterRight: %></code> 后我们可以避免跟其他模板引擎冲突：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><%= username | append: ", welcome to LiquidJS!" %></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><%= username | append: ", welcome to LiquidJS!" %></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="严格模式" class="article-heading"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式<a class="article-anchor" href="#严格模式" aria-hidden="true"></a></h2><p><strong>strictFilters</strong> 用来启用过滤器的严格模式，如果设置为 <code>true</code> 过滤器不存在时解析会抛出异常。默认为 <code>false</code>，这时会跳过不存在的过滤器。</p>
|
||||
<p><strong>strictVariables</strong> 用来启用变量严格模式。如果设置为 <code>true</code> 变量不存在时渲染会抛出异常，默认为 <code>false</code> 这时不存在的变量会被渲染为空字符串。</p>
|
||||
<blockquote class="note info"><strong class="note-title">不存在的标签</strong><p>不存在的标签总是会抛出一个解析异常，这一行为无法自定义。</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="参数顺序" class="article-heading"><a href="#参数顺序" class="headerlink" title="参数顺序"></a>参数顺序<a class="article-anchor" href="#参数顺序" aria-hidden="true"></a></h2><p>默认会忽略参数出现的顺序，例如 <code>{% for i in (1..8) reversed limit:3 %}</code> 里总是会先执行 <code>limit</code> 再执行 <code>reversed</code>，虽然 <code>reversed</code> 先出现。为了让 LiquidJS 按顺序执行参数，需要设置 <strong>orderedFilterParameters</strong> 为 <code>true</code>。它的默认值为 <code>false</code>。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="setup.html" class="article-footer-prev" title="安装"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="render-file.html" class="article-footer-next" title="文件渲染"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -140,7 +143,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#cache"><span class="toc-text">cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dynamicPartials"><span class="toc-text">dynamicPartials</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extname"><span class="toc-text">extname</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#root"><span class="toc-text">root</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#fs"><span class="toc-text">fs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#globals"><span class="toc-text">globals</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jsTruthy"><span class="toc-text">jsTruthy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#换行和缩进"><span class="toc-text">换行和缩进</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#自定义分隔符"><span class="toc-text">自定义分隔符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#严格模式"><span class="toc-text">严格模式</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#cache"><span class="toc-text">cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dynamicPartials"><span class="toc-text">dynamicPartials</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extname"><span class="toc-text">extname</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#root"><span class="toc-text">root</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#fs"><span class="toc-text">fs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#globals"><span class="toc-text">globals</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jsTruthy"><span class="toc-text">jsTruthy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E5%8C%BA"><span class="toc-text">时间日期和时区</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8D%A2%E8%A1%8C%E5%92%8C%E7%BC%A9%E8%BF%9B"><span class="toc-text">换行和缩进</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%86%E9%9A%94%E7%AC%A6"><span class="toc-text">自定义分隔符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F"><span class="toc-text">严格模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E9%A1%BA%E5%BA%8F"><span class="toc-text">参数顺序</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,24 +87,24 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">引用和继承</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/partials-and-layouts.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/partials-and-layouts.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<h2 id="引用模板片段" class="article-heading"><a href="#引用模板片段" class="headerlink" title="引用模板片段"></a>引用模板片段<a class="article-anchor" href="#引用模板片段" aria-hidden="true"></a></h2><p>对于如下两个模板文件：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 文件：color.liquid</span><br><span class="line">color: '{{ color }}' shape: '{{ shape }}'</span><br><span class="line"></span><br><span class="line">// 文件：theme.liquid</span><br><span class="line">{% assign shape = 'circle' %}</span><br><span class="line">{% include 'color' %}</span><br><span class="line">{% include 'color' with 'red' %}</span><br><span class="line">{% include 'color', color: 'yellow', shape: 'square' %}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">// 文件：color.liquid</span><br><span class="line">color: '{{ color }}' shape: '{{ shape }}'</span><br><span class="line"></span><br><span class="line">// 文件：theme.liquid</span><br><span class="line">{% assign shape = 'circle' %}</span><br><span class="line">{% include 'color' %}</span><br><span class="line">{% include 'color' with 'red' %}</span><br><span class="line">{% include 'color', color: 'yellow', shape: 'square' %}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>输出为：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">color: '' shape: 'circle'</span><br><span class="line">color: 'red' shape: 'circle'</span><br><span class="line">color: 'yellow' shape: 'square'</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">color: '' shape: 'circle'</span><br><span class="line">color: 'red' shape: 'circle'</span><br><span class="line">color: 'yellow' shape: 'square'</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note tip"><strong class="note-title">".liquid" 文件扩展名</strong><p>如果设置了 <code>extname: ".liquid"</code> 选项，就可以省略 <code>layout</code>, <code>render</code> 和 <code>include</code> 里面文件名的 “.liquid” 后缀。详情请参考 <a href="./options.html#extname">extname 选项</a>。</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="布局模板（模板继承）" class="article-heading"><a href="#布局模板（模板继承）" class="headerlink" title="布局模板（模板继承）"></a>布局模板（模板继承）<a class="article-anchor" href="#布局模板（模板继承）" aria-hidden="true"></a></h2><p>对于如下两个模板文件：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 文件：default-layout.liquid</span><br><span class="line">Header</span><br><span class="line">{% block content %}My default content{% endblock %}</span><br><span class="line">Footer</span><br><span class="line"></span><br><span class="line">// 文件：page.liquid</span><br><span class="line">{% layout "default-layout" %}</span><br><span class="line">{% block content %}My page content{% endblock %}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">// 文件：default-layout.liquid</span><br><span class="line">Header</span><br><span class="line">{% block content %}My default content{% endblock %}</span><br><span class="line">Footer</span><br><span class="line"></span><br><span class="line">// 文件：page.liquid</span><br><span class="line">{% layout "default-layout" %}</span><br><span class="line">{% block content %}My page content{% endblock %}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>渲染 <code>page.liquid</code> 将会输出：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Header</span><br><span class="line">My page content</span><br><span class="line">Footer</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Header</span><br><span class="line">My page content</span><br><span class="line">Footer</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note tip"><strong class="note-title">Block</strong><ul>
|
||||
<li>布局文件（父模板）中可以定义多个 block；</li>
|
||||
@@ -113,7 +113,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="render-file.html" class="article-footer-prev" title="文件渲染"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="use-in-expressjs.html" class="article-footer-next" title="Express.js 中使用"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -122,7 +122,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#引用模板片段"><span class="toc-text">引用模板片段</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#布局模板（模板继承）"><span class="toc-text">布局模板（模板继承）</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E6%A8%A1%E6%9D%BF%E7%89%87%E6%AE%B5"><span class="toc-text">引用模板片段</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%83%E5%B1%80%E6%A8%A1%E6%9D%BF%EF%BC%88%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF%EF%BC%89"><span class="toc-text">布局模板（模板继承）</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,30 +87,30 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">插件</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/plugins.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/plugins.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>一组标签和过滤器可以封装为一个 <strong>插件</strong>，通常发包到 NPM 来方便使用。本文介绍如何创建和使用插件。</p>
|
||||
<h2 id="编写插件" class="article-heading"><a href="#编写插件" class="headerlink" title="编写插件"></a>编写插件<a class="article-anchor" href="#编写插件" aria-hidden="true"></a></h2><p>LiquidJS 插件就是一个简单的函数，它的第一个参数是 <a href="../../api/classes/liquid_.liquid.html">Liquid 类</a>，其中的 <code>this</code> 是它被注册到的 Liquid 实例。可以通过 <code>this</code> 来调用 Liquid API，比如 <a href="./register-filters-tags.html">注册标签和过滤器</a>。</p>
|
||||
<p>现在我们来写一个插件并在其中注册一个过滤器，来把输入字符串转换为大写：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Inside the plugin function, `this` refers to the Liquid instance.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>Liquid: provides facilities to implement tags and filters.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">Liquid</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.registerFilter(<span class="string">'upup'</span>, x => x.toUpperCase());</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Inside the plugin function, `this` refers to the Liquid instance.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>Liquid: provides facilities to implement tags and filters.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">Liquid</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.registerFilter(<span class="string">'upup'</span>, <span class="function"><span class="params">x</span> =></span> x.toUpperCase());</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>把上述代码保存为 <code>upup.js</code>。</p>
|
||||
<h2 id="使用插件" class="article-heading"><a href="#使用插件" class="headerlink" title="使用插件"></a>使用插件<a class="article-anchor" href="#使用插件" aria-hidden="true"></a></h2><p>把插件传递给 <code>.plugin()</code> 方法即可注册插件，例如：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"></span><br><span class="line">engine.plugin(<span class="built_in">require</span>(<span class="string">'./upup.js'</span>));</span><br><span class="line">engine.parseAndRender(<span class="string">'{{ "foo" | upup }}'</span>).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"></span><br><span class="line">engine.plugin(<span class="built_in">require</span>(<span class="string">'./upup.js'</span>));</span><br><span class="line">engine.parseAndRender(<span class="string">'{{ "foo" | upup }}'</span>).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>上述代码将会输出 <code>"FOO"</code>。</p>
|
||||
<h2 id="插件列表" class="article-heading"><a href="#插件列表" class="headerlink" title="插件列表"></a>插件列表<a class="article-anchor" href="#插件列表" aria-hidden="true"></a></h2><p>由于本仓库只包含 <a href="https://github.com/Shopify/liquid/" target="_blank" rel="noopener external nofollow noreferrer">Shopify/liquid</a> 核心仓库的标签和插件（参考 <a href="https://github.com/harttle/liquidjs#differences-and-limitations" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs#differences-and-limitations</a>），Shopify 平台上特有的插件只能通过插件来使用。</p>
|
||||
<h2 id="插件列表" class="article-heading"><a href="#插件列表" class="headerlink" title="插件列表"></a>插件列表<a class="article-anchor" href="#插件列表" aria-hidden="true"></a></h2><p>由于本仓库只包含 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/">Shopify/liquid</a> 核心仓库的标签和插件（参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs#differences-and-limitations">https://github.com/harttle/liquidjs#differences-and-limitations</a>），Shopify 平台上特有的插件只能通过插件来使用。</p>
|
||||
<p>这里是一个插件列表，欢迎添加你的插件（点击右上角编辑按钮）：</p>
|
||||
<ul>
|
||||
<li>Sections 标签（开发中）： <a href="https://github.com/harttle/liquidjs-section-tags" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs-section-tags</a></li>
|
||||
<li>颜色过滤器： <a href="https://github.com/harttle/liquidjs-color-filters" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs-color-filters</a></li>
|
||||
<li>Sections 标签（开发中）： <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs-section-tags">https://github.com/harttle/liquidjs-section-tags</a></li>
|
||||
<li>颜色过滤器： <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs-color-filters">https://github.com/harttle/liquidjs-color-filters</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="whitespace-control.html" class="article-footer-prev" title="换行和缩进"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="operators.html" class="article-footer-next" title="运算符"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -119,7 +119,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#编写插件"><span class="toc-text">编写插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用插件"><span class="toc-text">使用插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件列表"><span class="toc-text">插件列表</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E6%8F%92%E4%BB%B6"><span class="toc-text">编写插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6"><span class="toc-text">使用插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6%E5%88%97%E8%A1%A8"><span class="toc-text">插件列表</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,29 +87,29 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">注册标签和过滤器</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/register-filters-tags.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/register-filters-tags.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<h2 id="注册标签" class="article-heading"><a href="#注册标签" class="headerlink" title="注册标签"></a>注册标签<a class="article-anchor" href="#注册标签" aria-hidden="true"></a></h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用方式: {% upper name %}</span></span><br><span class="line">engine.registerTag(<span class="string">'upper'</span>, {</span><br><span class="line"> parse: <span class="function"><span class="keyword">function</span>(<span class="params">tagToken, remainTokens</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.str = tagToken.args; <span class="comment">// name</span></span><br><span class="line"> },</span><br><span class="line"> render: <span class="keyword">async</span> <span class="function"><span class="keyword">function</span>(<span class="params">scope, hash</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> str = <span class="keyword">await</span> <span class="keyword">this</span>.liquid.evalValue(<span class="keyword">this</span>.str, scope); <span class="comment">// 'alice'</span></span><br><span class="line"> <span class="keyword">return</span> str.toUpperCase() <span class="comment">// 'Alice'</span></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<h2 id="注册标签" class="article-heading"><a href="#注册标签" class="headerlink" title="注册标签"></a>注册标签<a class="article-anchor" href="#注册标签" aria-hidden="true"></a></h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用方式: {% upper name %}</span></span><br><span class="line">engine.registerTag(<span class="string">'upper'</span>, {</span><br><span class="line"> <span class="attr">parse</span>: <span class="function"><span class="keyword">function</span>(<span class="params">tagToken, remainTokens</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.str = tagToken.args; <span class="comment">// name</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">render</span>: <span class="keyword">async</span> <span class="function"><span class="keyword">function</span>(<span class="params">scope, hash</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> str = <span class="keyword">await</span> <span class="built_in">this</span>.liquid.evalValue(<span class="built_in">this</span>.str, scope); <span class="comment">// 'alice'</span></span><br><span class="line"> <span class="keyword">return</span> str.toUpperCase() <span class="comment">// 'Alice'</span></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<ul>
|
||||
<li><code>parse</code>: 从 <code>remainTokens</code> 中读取后续的标签/输出/HTML，直到找到你期望的结束标签。</li>
|
||||
<li><code>render</code>: 把 scope 数据和此前解析得到的 Token 结合，输出 HTML 字符串。</li>
|
||||
</ul>
|
||||
<p>查看已有的标签实现：<a href="https://github.com/harttle/liquidjs/tree/master/src/builtin/tags" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs/tree/master/src/builtin/tags</a></p>
|
||||
<h2 id="注册过滤器" class="article-heading"><a href="#注册过滤器" class="headerlink" title="注册过滤器"></a>注册过滤器<a class="article-anchor" href="#注册过滤器" aria-hidden="true"></a></h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用方式: {{ name | upper }}</span></span><br><span class="line">engine.registerFilter(<span class="string">'upper'</span>, v => v.toUpperCase())</span><br></pre></td></tr></table></figure>
|
||||
<p>查看已有的标签实现：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/src/builtin/tags">https://github.com/harttle/liquidjs/tree/master/src/builtin/tags</a></p>
|
||||
<h2 id="注册过滤器" class="article-heading"><a href="#注册过滤器" class="headerlink" title="注册过滤器"></a>注册过滤器<a class="article-anchor" href="#注册过滤器" aria-hidden="true"></a></h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用方式: {{ name | upper }}</span></span><br><span class="line">engine.registerFilter(<span class="string">'upper'</span>, <span class="function"><span class="params">v</span> =></span> v.toUpperCase())</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>过滤器的参数将会传递给上面注册的过滤器函数，从第二个参数开始（第一个参数是过滤器左侧的输入），例如：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: {{ 1 | add: 2, 3 }}</span></span><br><span class="line">engine.registerFilter(<span class="string">'add'</span>, (initial, arg1, arg2) => initial + arg1 + arg2)</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: {{ 1 | add: 2, 3 }}</span></span><br><span class="line">engine.registerFilter(<span class="string">'add'</span>, <span class="function">(<span class="params">initial, arg1, arg2</span>) =></span> initial + arg1 + arg2)</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>查看已有的过滤器实现：<a href="https://github.com/harttle/liquidjs/tree/master/src/builtin/filters" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs/tree/master/src/builtin/filters</a></p>
|
||||
<h2 id="反注册标签-过滤器" class="article-heading"><a href="#反注册标签-过滤器" class="headerlink" title="反注册标签/过滤器"></a>反注册标签/过滤器<a class="article-anchor" href="#反注册标签-过滤器" aria-hidden="true"></a></h2><p>有时可能需要禁用一些标签/过滤器（比如 <a href="https://github.com/harttle/liquidjs/issues/324" target="_blank" rel="noopener external nofollow noreferrer">#324</a>），注册一个假的标签/过滤器并在里面抛出相应的错误即可。</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 禁用标签</span></span><br><span class="line"><span class="keyword">const</span> disabledTag = {</span><br><span class="line"> parse: <span class="function"><span class="keyword">function</span>(<span class="params">token</span>) </span>{</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`tag "<span class="subst">${token.name}</span>" disabled`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">engine.registerTag(<span class="string">'include'</span>, disabledTag);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 禁用过滤器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">disabledFilter</span>(<span class="params">name</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`filter "<span class="subst">${name}</span>" disabled`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">engine.registerFilter(<span class="string">'plus'</span>, disabledFilter(<span class="string">'plus'</span>));</span><br></pre></td></tr></table></figure>
|
||||
<p>查看已有的过滤器实现：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/src/builtin/filters">https://github.com/harttle/liquidjs/tree/master/src/builtin/filters</a></p>
|
||||
<h2 id="反注册标签-过滤器" class="article-heading"><a href="#反注册标签-过滤器" class="headerlink" title="反注册标签/过滤器"></a>反注册标签/过滤器<a class="article-anchor" href="#反注册标签-过滤器" aria-hidden="true"></a></h2><p>有时可能需要禁用一些标签/过滤器（比如 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/324">#324</a>），注册一个假的标签/过滤器并在里面抛出相应的错误即可。</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 禁用标签</span></span><br><span class="line"><span class="keyword">const</span> disabledTag = {</span><br><span class="line"> <span class="attr">parse</span>: <span class="function"><span class="keyword">function</span>(<span class="params">token</span>) </span>{</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`tag "<span class="subst">${token.name}</span>" disabled`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">engine.registerTag(<span class="string">'include'</span>, disabledTag);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 禁用过滤器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">disabledFilter</span>(<span class="params">name</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`filter "<span class="subst">${name}</span>" disabled`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">engine.registerFilter(<span class="string">'plus'</span>, disabledFilter(<span class="string">'plus'</span>));</span><br></pre></td></tr></table></figure>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="caching.html" class="article-footer-prev" title="缓存"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="whitespace-control.html" class="article-footer-next" title="换行和缩进"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -118,7 +118,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#注册标签"><span class="toc-text">注册标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#注册过滤器"><span class="toc-text">注册过滤器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#反注册标签-过滤器"><span class="toc-text">反注册标签/过滤器</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C%E6%A0%87%E7%AD%BE"><span class="toc-text">注册标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-text">注册过滤器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%8D%E6%B3%A8%E5%86%8C%E6%A0%87%E7%AD%BE-%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-text">反注册标签/过滤器</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,55 +87,54 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">渲染文件</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/render-file.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/render-file.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>一个典型的项目会有一个目录下都是模板，最方便的方式就是设置 LiquidJS 的 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 然后调用 <a href="../../api/classes/liquid_.liquid.html#renderFile">.renderFile()</a> 或 <a href="../../api/classes/liquid_.liquid.html#renderFilesync">.renderFileSync()</a> 来渲染其中的一个模板文件。</p>
|
||||
<h2 id="渲染一个文件" class="article-heading"><a href="#渲染一个文件" class="headerlink" title="渲染一个文件"></a>渲染一个文件<a class="article-anchor" href="#渲染一个文件" aria-hidden="true"></a></h2><p>例如你有如下的目录结构：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>其中 <code>hello.liquid</code> 内容为：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">name: {{name}}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">name: {{name}}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>在 <code>index.js</code> 中可以这样渲染 <code>hello.liquid</code>:</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// 设置模板查找目录</span></span><br><span class="line"> extname: <span class="string">'.liquid'</span> <span class="comment">// 添加后缀，默认为 "" 表示不添加后缀</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// 将会读取并渲染 `views/hello.liquid`</span></span><br><span class="line">engine.renderFile(<span class="string">"hello"</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>}).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// 设置模板查找目录</span></span><br><span class="line"> <span class="attr">extname</span>: <span class="string">'.liquid'</span> <span class="comment">// 添加后缀，默认为 "" 表示不添加后缀</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// 将会读取并渲染 `views/hello.liquid`</span></span><br><span class="line">engine.renderFile(<span class="string">"hello"</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>}).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>执行 <code>node index.js</code> 你将会得到类似这样的输出：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">name: alice</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">name: alice</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="模板查找" class="article-heading"><a href="#模板查找" class="headerlink" title="模板查找"></a>模板查找<a class="article-anchor" href="#模板查找" aria-hidden="true"></a></h2><p>传递给 <a href="../../api/classes/liquid_.liquid.html#renderFile">.renderFile()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFile">.parseFile()</a> <a href="../../api/classes/liquid_.liquid.html#renderFilesync">.renderFileSync()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFileSync">.parseFileSync()</a> 这些 API 的模板名，<br>以及传递给 <a href="https://help.shopify.com/themes/liquid/tags/theme-tags#include" target="_blank" rel="noopener external nofollow noreferrer">include</a>, <a href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout" target="_blank" rel="noopener external nofollow noreferrer">layout</a> 这些标签的模板名，将会根据 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 选项来查找。</p>
|
||||
<h2 id="模板查找" class="article-heading"><a href="#模板查找" class="headerlink" title="模板查找"></a>模板查找<a class="article-anchor" href="#模板查找" aria-hidden="true"></a></h2><p>传递给 <a href="../../api/classes/liquid_.liquid.html#renderFile">.renderFile()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFile">.parseFile()</a> <a href="../../api/classes/liquid_.liquid.html#renderFilesync">.renderFileSync()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFileSync">.parseFileSync()</a> 这些 API 的模板名，<br>以及传递给 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/themes/liquid/tags/theme-tags#include">include</a>, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout">layout</a> 这些标签的模板名，将会根据 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 选项来查找。</p>
|
||||
<p><code>root</code> 可以设置为 <code>string</code> 类型的路径（见上面的例子）， 也可以设置为一个字符串数组表示路径列表，这时 LiquidJS 将会按顺序去查找。例如：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> extname: <span class="string">'.liquid'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> <span class="attr">extname</span>: <span class="string">'.liquid'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note tip"><strong class="note-title">相对路径</strong><p><code>root</code> 中使用相对路径将会被解释为相对于 <code>cwd()</code>（当前工作目录）。</p>
|
||||
</blockquote>
|
||||
|
||||
当模板中引入子模板时（`{% render "foo" %}`），或者调用 `.renderFile('foo')` 时，LiquidJS 会依次查看如下几个文件，并渲染第一个存在的文件：
|
||||
|
||||
- `cwd()`/views/foo.liquid
|
||||
- `cwd()`/views/partials/foo.liquid
|
||||
|
||||
如果上述文件都不存在，将会抛出一个 `ENOENT` 错误。
|
||||
|
||||
<p>当模板中引入子模板时（<code>{% render "foo" %}</code>），或者调用 <code>.renderFile('foo')</code> 时，LiquidJS 会依次查看如下几个文件，并渲染第一个存在的文件：</p>
|
||||
<ul>
|
||||
<li><code>cwd()</code>/views/foo.liquid</li>
|
||||
<li><code>cwd()</code>/views/partials/foo.liquid</li>
|
||||
</ul>
|
||||
<p>如果上述文件都不存在，将会抛出一个 <code>ENOENT</code> 错误。</p>
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>在 Node.js 示例中展示了怎么渲染一个文件 <a href="https://github.com/harttle/liquidjs/blob/master/demo/nodejs/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/nodejs/</a>。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>在浏览器中使用 LiquidJS 时，比如当前路径为 <a href="https://example.com/bar/index.html" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/index.html</a>，只会去 <code>root</code> 数组中的第一个路径下获取，也就是这个文件：</p>
|
||||
<p>在浏览器中使用 LiquidJS 时，比如当前路径为 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/index.html">https://example.com/bar/index.html</a>，只会去 <code>root</code> 数组中的第一个路径下获取，也就是这个文件：</p>
|
||||
<ul>
|
||||
<li><a href="https://example.com/bar/foo.liquid" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/foo.liquid</a></li>
|
||||
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/foo.liquid">https://example.com/bar/foo.liquid</a></li>
|
||||
</ul>
|
||||
<p>如果获取失败（比如得到一个 404/500 错误）或网络错误，将会抛出一个 <code>ENOENT</code> 错误。</p>
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>在这个示例中展示了如何从网络获取并渲染一个模板文件 <a href="https://github.com/harttle/liquidjs/blob/master/demo/browser/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/browser/</a>。</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="文件系统接口" class="article-heading"><a href="#文件系统接口" class="headerlink" title="文件系统接口"></a>文件系统接口<a class="article-anchor" href="#文件系统接口" aria-hidden="true"></a></h2><p>LiquidJS 定义了一个文件系统接口（<a href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/ifs.ts</a>），在 Node.js 下的默认实现是 <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/node.ts</a>，在浏览器打包文件中的默认实现是 <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/browser.ts</a>。<br>你可以通过创建 <code>Liquid</code> 时的 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-fs">fs</a> 参数来指定一个自定义实现来指定如何读取模板文件。比如从数据库里读取：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> fs: {</span><br><span class="line"> readFileSync (file) {</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> readFile (file) {</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> },</span><br><span class="line"> existsSync () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> exists () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> resolve(root, file, ext) {</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<h2 id="文件系统接口" class="article-heading"><a href="#文件系统接口" class="headerlink" title="文件系统接口"></a>文件系统接口<a class="article-anchor" href="#文件系统接口" aria-hidden="true"></a></h2><p>LiquidJS 定义了一个文件系统接口（<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts">src/fs/ifs.ts</a>），在 Node.js 下的默认实现是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts">src/fs/node.ts</a>，在浏览器打包文件中的默认实现是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts">src/fs/browser.ts</a>。<br>你可以通过创建 <code>Liquid</code> 时的 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-fs">fs</a> 参数来指定一个自定义实现来指定如何读取模板文件。比如从数据库里读取：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">fs</span>: {</span><br><span class="line"> readFileSync (file) {</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> readFile (file) {</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> },</span><br><span class="line"> existsSync () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> exists () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">resolve</span>(<span class="params">root, file, ext</span>)</span> {</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="options.html" class="article-footer-prev" title="选项"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="partials-and-layouts.html" class="article-footer-next" title="引用/继承"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -144,7 +143,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#渲染一个文件"><span class="toc-text">渲染一个文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#模板查找"><span class="toc-text">模板查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文件系统接口"><span class="toc-text">文件系统接口</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6"><span class="toc-text">渲染一个文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E6%9F%A5%E6%89%BE"><span class="toc-text">模板查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F%E6%8E%A5%E5%8F%A3"><span class="toc-text">文件系统接口</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
+13
-14
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,7 +87,7 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">安装和使用</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/setup.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/setup.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
@@ -95,20 +95,19 @@
|
||||
<h2 id="在-Node-js-里使用" class="article-heading"><a href="#在-Node-js-里使用" class="headerlink" title="在 Node.js 里使用"></a>在 Node.js 里使用<a class="article-anchor" href="#在-Node-js-里使用" aria-hidden="true"></a></h2><p>通过 NPM 安装：</p>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install --save liquidjs</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'{{name | capitalize}}'</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>})</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// 输出 'Alice'</span></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'{{name | capitalize}}'</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>})</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// 输出 'Alice'</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>这里有一个 LiquidJS 在 Node.js 里使用的例子：<a href="https://github.com/harttle/liquidjs/blob/master/demo/nodejs/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/nodejs/</a>.</p>
|
||||
</blockquote>
|
||||
|
||||
LiquidJS 的类型定义也导出并发布到了 NPM 包里，写 TypeScript 的项目可以直接这样使用：
|
||||
|
||||
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { Liquid } <span class="keyword">from</span> <span class="string">'liquidjs'</span>;</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'{{name | capitalize}}'</span>, {name: <span class="string">'alice'</span>})</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// 输出 'Alice'</span></span><br></pre></td></tr></table></figure>
|
||||
<p>LiquidJS 的类型定义也导出并发布到了 NPM 包里，写 TypeScript 的项目可以直接这样使用：</p>
|
||||
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { Liquid } <span class="keyword">from</span> <span class="string">'liquidjs'</span>;</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'{{name | capitalize}}'</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>})</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// 输出 'Alice'</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>这里有一个 LiquidJS 在 TypeScript 下的例子：<a href="https://github.com/harttle/liquidjs/blob/master/demo/typescript/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/typescript/</a>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="在浏览器里使用" class="article-heading"><a href="#在浏览器里使用" class="headerlink" title="在浏览器里使用"></a>在浏览器里使用<a class="article-anchor" href="#在浏览器里使用" aria-hidden="true"></a></h2><p>LiquidJS 预先构建了 UMD Bundle，可以通过 jsDelivr CDN 来引用：</p>
|
||||
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span> <span class="comment"><!--生产环境--></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js"</span>></span><span class="tag"></<span class="name">script</span>></span> <span class="comment"><!--开发环境--></span></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span> <span class="comment"><!--生产环境--></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js"</span>></span><span class="tag"></<span class="name">script</span>></span> <span class="comment"><!--开发环境--></span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>这里有一个 jsFiddle 上的在线例子：<a href="https://jsfiddle.net/x43eb0z6/" rel="external nofollow noreferrer" target="_blank">jsfiddle.net/x43eb0z6</a>，其源码也可以在 <a href="https://github.com/harttle/liquidjs/blob/master/demo/browser/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/browser/</a> 找到。</p>
|
||||
</blockquote>
|
||||
@@ -117,16 +116,16 @@ LiquidJS 的类型定义也导出并发布到了 NPM 包里，写 TypeScript 的
|
||||
</blockquote>
|
||||
|
||||
<h2 id="在命令行里使用" class="article-heading"><a href="#在命令行里使用" class="headerlink" title="在命令行里使用"></a>在命令行里使用<a class="article-anchor" href="#在命令行里使用" aria-hidden="true"></a></h2><p>你还可以在命令行里使用 LiquidJS：</p>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'{{"hello" | capitalize}}'</span> | npx liquidjs</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'{{"hello" | capitalize}}'</span> | npx liquidjs</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>模板来自标准输入，数据则来自参数，这个参数可以是一个 JSON 文件的路径，也可以是一个 JSON 字符串：</p>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'Hello, {{ name }}.'</span> | npx liquidjs <span class="string">'{"name": "Snake"}'</span></span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'Hello, {{ name }}.'</span> | npx liquidjs <span class="string">'{"name": "Snake"}'</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="其他" class="article-heading"><a href="#其他" class="headerlink" title="其他"></a>其他<a class="article-anchor" href="#其他" aria-hidden="true"></a></h2><p><a href="https://github.com/stevenanthonyrevo" target="_blank" rel="noopener external nofollow noreferrer">@stevenanthonyrevo</a> 还提供了一个 ReactJS demo，请参考 <a href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/" target="_blank" rel="noopener external nofollow noreferrer">liquidjs/demo/reactjs/</a>。</p>
|
||||
<h2 id="其他" class="article-heading"><a href="#其他" class="headerlink" title="其他"></a>其他<a class="article-anchor" href="#其他" aria-hidden="true"></a></h2><p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/stevenanthonyrevo">@stevenanthonyrevo</a> 还提供了一个 ReactJS demo，请参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/">liquidjs/demo/reactjs/</a>。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="intro-to-liquid.html" class="article-footer-prev" title="Liquid 简介"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="options.html" class="article-footer-next" title="选项"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -135,7 +134,7 @@ LiquidJS 的类型定义也导出并发布到了 NPM 包里，写 TypeScript 的
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#在-Node-js-里使用"><span class="toc-text">在 Node.js 里使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在浏览器里使用"><span class="toc-text">在浏览器里使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在命令行里使用"><span class="toc-text">在命令行里使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#其他"><span class="toc-text">其他</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8-Node-js-%E9%87%8C%E4%BD%BF%E7%94%A8"><span class="toc-text">在 Node.js 里使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E9%87%8C%E4%BD%BF%E7%94%A8"><span class="toc-text">在浏览器里使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E9%87%8C%E4%BD%BF%E7%94%A8"><span class="toc-text">在命令行里使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96"><span class="toc-text">其他</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,12 +87,12 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">真和假</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/truthy-and-falsy.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/truthy-and-falsy.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>虽然我们希望 <a href="https://www.npmjs.com/package/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">Liquid</a> 是平台无关的，但 JavaScript 版本和 <a href="https://shopify.github.io/liquid" target="_blank" rel="noopener external nofollow noreferrer">Ruby 版本</a> 仍然有<a href="https://github.com/harttle/liquidjs#differences-and-limitations" target="_blank" rel="noopener external nofollow noreferrer">很多区别</a>，真值就是其中之一。</p>
|
||||
<h2 id="真值表" class="article-heading"><a href="#真值表" class="headerlink" title="真值表"></a>真值表<a class="article-anchor" href="#真值表" aria-hidden="true"></a></h2><p>根据 <a href="https://shopify.github.io/liquid/basics/truthy-and-falsy/" target="_blank" rel="noopener external nofollow noreferrer">Shopify 的文档</a>，Ruby 版本除了 <code>false</code> 和 <code>nil</code> 之外的所有值都是真，但 JavaScript 有完全不同的类型系统，比如我们有 <code>undefined</code> 类型，以及不区分 <code>integer</code> 和 <code>float</code>，因此有些不同：</p>
|
||||
<p>虽然我们希望 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.npmjs.com/package/liquidjs">Liquid</a> 是平台无关的，但 JavaScript 版本和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shopify.github.io/liquid">Ruby 版本</a> 仍然有<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs#differences-and-limitations">很多区别</a>，真值就是其中之一。</p>
|
||||
<h2 id="真值表" class="article-heading"><a href="#真值表" class="headerlink" title="真值表"></a>真值表<a class="article-anchor" href="#真值表" aria-hidden="true"></a></h2><p>根据 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shopify.github.io/liquid/basics/truthy-and-falsy/">Shopify 的文档</a>，Ruby 版本除了 <code>false</code> 和 <code>nil</code> 之外的所有值都是真，但 JavaScript 有完全不同的类型系统，比如我们有 <code>undefined</code> 类型，以及不区分 <code>integer</code> 和 <code>float</code>，因此有些不同：</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -225,7 +225,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="operators.html" class="article-footer-prev" title="运算符"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="migrate-to-9.html" class="article-footer-next" title="迁移到 LiquidJS 9"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#真值表"><span class="toc-text">真值表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用-JavaScript-真值"><span class="toc-text">使用 JavaScript 真值</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9C%9F%E5%80%BC%E8%A1%A8"><span class="toc-text">真值表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-JavaScript-%E7%9C%9F%E5%80%BC"><span class="toc-text">使用 JavaScript 真值</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,33 +87,33 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">在 Express.js 里使用</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/use-in-expressjs.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/use-in-expressjs.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>LiquidJS 可以用来作为 <a href="https://expressjs.com/en/resources/template-engines.html" target="_blank" rel="noopener external nofollow noreferrer">Express 的模板引擎</a>。可以把 Liquid 设置到 <a href="http://expressjs.com/en/guide/using-template-engines.html" target="_blank" rel="noopener external nofollow noreferrer">view engine</a> 选项上即可：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册为 liquid 文件的模板引擎</span></span><br><span class="line">app.engine(<span class="string">'liquid'</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">'views'</span>, <span class="string">'./views'</span>); <span class="comment">// 指定模板目录</span></span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'liquid'</span>); <span class="comment">// 把 liquid 文件设为默认模板</span></span><br></pre></td></tr></table></figure>
|
||||
<p>LiquidJS 可以用来作为 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://expressjs.com/en/resources/template-engines.html">Express 的模板引擎</a>。可以把 Liquid 设置到 <a target="_blank" rel="noopener external nofollow noreferrer" href="http://expressjs.com/en/guide/using-template-engines.html">view engine</a> 选项上即可：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册为 liquid 文件的模板引擎</span></span><br><span class="line">app.engine(<span class="string">'liquid'</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">'views'</span>, <span class="string">'./views'</span>); <span class="comment">// 指定模板目录</span></span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'liquid'</span>); <span class="comment">// 把 liquid 文件设为默认模板</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>这是一个在 Express.js 中使用 LiquidJS 的例子：<a href="https://github.com/harttle/liquidjs/blob/master/demo/express/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/express/</a>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="模板查找" class="article-heading"><a href="#模板查找" class="headerlink" title="模板查找"></a>模板查找<a class="article-anchor" href="#模板查找" aria-hidden="true"></a></h2><p>LiquidJS 仍然会去 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 指定的目录查找（参考 <a href="./render-a-file.html">Render A Template File</a>），也会去 Express.js 的 <a href="http://expressjs.com/en/guide/using-template-engines.html" target="_blank" rel="noopener external nofollow noreferrer"><code>views</code></a> 选项指定的目录里（上述例子中是 <code>./views</code>）去查找。例如你有这样的目录结构：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── views1/</span><br><span class="line">│ └── hello.liquid</span><br><span class="line">└── views2/</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
<h2 id="模板查找" class="article-heading"><a href="#模板查找" class="headerlink" title="模板查找"></a>模板查找<a class="article-anchor" href="#模板查找" aria-hidden="true"></a></h2><p>LiquidJS 仍然会去 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 指定的目录查找（参考 <a href="./render-a-file.html">Render A Template File</a>），也会去 Express.js 的 <a target="_blank" rel="noopener external nofollow noreferrer" href="http://expressjs.com/en/guide/using-template-engines.html"><code>views</code></a> 选项指定的目录里（上述例子中是 <code>./views</code>）去查找。例如你有这样的目录结构：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── views1/</span><br><span class="line">│ └── hello.liquid</span><br><span class="line">└── views2/</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>LiquidJS 的模板 root 设置到了 <code>views1</code>，Express.js 的 views 设置到了 <code>views2</code>：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: <span class="string">'./views1/'</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">app.engine(<span class="string">'liquid'</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">'views'</span>, <span class="string">'./views2'</span>);</span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'liquid'</span>);</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: <span class="string">'./views1/'</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">app.engine(<span class="string">'liquid'</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">'views'</span>, <span class="string">'./views2'</span>);</span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'liquid'</span>);</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><code>hello.liquid</code> 和 <code>world.liquid</code> 两个文件都可以找到并且成功渲染：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">res.render(<span class="string">'hello'</span>)</span><br><span class="line">res.render(<span class="string">'world'</span>)</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">res.render(<span class="string">'hello'</span>)</span><br><span class="line">res.render(<span class="string">'world'</span>)</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="缓存" class="article-heading"><a href="#缓存" class="headerlink" title="缓存"></a>缓存<a class="article-anchor" href="#缓存" aria-hidden="true"></a></h2><p>直接把 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-cache">cache 选项</a> 设为 <code>true</code> 即可开启模板缓存，参考 <a href="./caching.html">缓存</a> 一文。推荐在生产环境中开启缓存，可以用如下代码：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> cache: process.env.NODE_ENV === <span class="string">'production'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">cache</span>: process.env.NODE_ENV === <span class="string">'production'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><code>cache</code> 还可以是一个数字表示最大缓存的模板数量，也可以是一个自定义的缓存实现，详情请参考 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-cache">cache 选项</a>。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="partials-and-layouts.html" class="article-footer-prev" title="引用/继承"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="caching.html" class="article-footer-next" title="缓存"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -122,7 +122,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#模板查找"><span class="toc-text">模板查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#缓存"><span class="toc-text">缓存</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E6%9F%A5%E6%89%BE"><span class="toc-text">模板查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-text">缓存</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,24 +87,24 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">空白字符控制</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/whitespace-control.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/whitespace-control.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>为了让源代码缩进好看，我们会加很多空白字符比如把不会产生输出的标签也单独一行。LiquidJS 提供了空白字符控制机制，可以避免这些多余的空白字符输出到 HTML 中。</p>
|
||||
<h2 id="通过标记的方式" class="article-heading"><a href="#通过标记的方式" class="headerlink" title="通过标记的方式"></a>通过标记的方式<a class="article-anchor" href="#通过标记的方式" aria-hidden="true"></a></h2><p>默认所有标签和输出的行，都会在行尾产生一个换行（<code>\n</code>），如果有缩进的话还会产生很多前导空格。例如：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% author = "harttle" %}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% author = "harttle" %}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>将会输出（注意前面的空行）：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>可以在标签和输出的标记里面加横线（<code>{{-</code>, <code>-}}</code>, <code>{%-</code>, <code>-%}</code>）来移除左侧/右侧的空白。例如：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% assign author = "harttle" -%}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
<p>可以在标签和输出的标记里面加横线（<code>{{-`, `-}}`, `{%-</code>, <code>-%}</code>）来移除左侧/右侧的空白。例如：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% assign author = "harttle" -%}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>将会输出：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>这个例子中 <code>-%}</code> 移除了 <code>assign</code> 标签右侧的空白。</p>
|
||||
<p>这个例子中 <code>-%}</code> 移除了 <code>assign</code> 标签右侧的空白。</p>
|
||||
<h2 id="通过选项" class="article-heading"><a href="#通过选项" class="headerlink" title="通过选项"></a>通过选项<a class="article-anchor" href="#通过选项" aria-hidden="true"></a></h2><p>此外 LiquidJS 还提供了一系列选项来帮助扫代码式地移除空白：</p>
|
||||
<ul>
|
||||
<li><code>trimTagLeft</code></li>
|
||||
@@ -112,12 +112,12 @@
|
||||
<li><code>trimValueRight</code></li>
|
||||
<li><code>trimValueRight</code></li>
|
||||
</ul>
|
||||
<p><a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">LiquidJS</a> 默认 <strong>不会</strong> 移除任何空白字符，也就是说上面几个选项的默认值都为 <code>false</code>。这几个选项的详情请参考 <a href="../../api/interfaces/liquid_options_.liquidoptions.html">LiquidJS 选项</a>。</p>
|
||||
<h2 id="贪婪模式" class="article-heading"><a href="#贪婪模式" class="headerlink" title="贪婪模式"></a>贪婪模式<a class="article-anchor" href="#贪婪模式" aria-hidden="true"></a></h2><p>上述几个设置默认情况下会跨越换行（<code>\n</code>），如果你希望保留上下空行可以把 <a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">greedy 选项</a> 关掉，这样遇到 <code>\n</code> 就会停止。为了和 <a href="https://github.com/Shopify/liquid" target="_blank" rel="noopener external nofollow noreferrer">shopify/liquid</a> 一致该选项默认是打开的。</p>
|
||||
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">LiquidJS</a> 默认 <strong>不会</strong> 移除任何空白字符，也就是说上面几个选项的默认值都为 <code>false</code>。这几个选项的详情请参考 <a href="../../api/interfaces/liquid_options_.liquidoptions.html">LiquidJS 选项</a>。</p>
|
||||
<h2 id="贪婪模式" class="article-heading"><a href="#贪婪模式" class="headerlink" title="贪婪模式"></a>贪婪模式<a class="article-anchor" href="#贪婪模式" aria-hidden="true"></a></h2><p>上述几个设置默认情况下会跨越换行（<code>\n</code>），如果你希望保留上下空行可以把 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">greedy 选项</a> 关掉，这样遇到 <code>\n</code> 就会停止。为了和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">shopify/liquid</a> 一致该选项默认是打开的。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="register-filters-tags.html" class="article-footer-prev" title="注册标签/过滤器"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="plugins.html" class="article-footer-next" title="插件"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -126,7 +126,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#通过标记的方式"><span class="toc-text">通过标记的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#通过选项"><span class="toc-text">通过选项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#贪婪模式"><span class="toc-text">贪婪模式</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E6%A0%87%E8%AE%B0%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-text">通过标记的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E9%80%89%E9%A1%B9"><span class="toc-text">通过选项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B4%AA%E5%A9%AA%E6%A8%A1%E5%BC%8F"><span class="toc-text">贪婪模式</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user