Labyricorn/liquidjs
1
0
Fork 0
mirror of https://github.com/harttle/liquidjs.git synced 2026-09-18 05:50:43 -07:00
Code Issues Packages Projects Releases Wiki Activity

Deploying to gh-pages from @ harttle/liquidjs@5b1658c823 🚀

Browse Source
This commit is contained in:
harttle
2024-08-19 19:37:14 +00:00
parent 4757bef033
commit 3fd671b610
239 changed files with 1693 additions and 1641 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zh-cn/tutorials/access-scope-in-filters.html
+1 -1
View File
@@ -105,7 +105,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="register-filters-tags.html" class="article-footer-prev" title="注册标签/过滤器"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="parse-parameters.html" class="article-footer-next" title="参数解析"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/caching.html
+1 -1
View File
@@ -108,7 +108,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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="escaping.html" class="article-footer-next" title="转义"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/changelog.html
+1 -1
View File
@@ -746,7 +746,7 @@
</script></li></ul>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:45:11.071Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:37:03.734Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="migrate-to-9.html" class="article-footer-prev" title="迁移到 LiquidJS 9"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="differences.html" class="article-footer-next" title="与 Shopify/liquid 的不同"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/contribution-guidelines.html
+1 -1
View File
@@ -102,7 +102,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="differences.html" class="article-footer-prev" title="与 Shopify/liquid 的不同"><i class="icon-chevron-left"></i><span>上一页</span></a>
</footer>
</div>
zh-cn/tutorials/differences.html
+1 -1
View File
@@ -126,7 +126,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/dos.html
+1 -1
View File
@@ -110,7 +110,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="truthy-and-falsy.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>
zh-cn/tutorials/drops.html
+1 -1
View File
@@ -141,7 +141,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="render-tag-content.html" class="article-footer-prev" title="渲染标签内容"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="sync-and-async.html" class="article-footer-next" title="同步和异步"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/escaping.html
+1 -1
View File
@@ -129,7 +129,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="caching.html" class="article-footer-prev" title="缓存"><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>
zh-cn/tutorials/intro-to-liquid.html
+1 -1
View File
@@ -121,7 +121,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="setup.html" class="article-footer-next" title="安装"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/migrate-to-9.html
+1 -1
View File
@@ -116,7 +116,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="dos.html" class="article-footer-prev" title="DoS"><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>
zh-cn/tutorials/operators.html
+1 -1
View File
@@ -106,7 +106,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/options.html
+1 -1
View File
@@ -160,7 +160,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/parse-parameters.html
+2 -2
View File
@@ -113,11 +113,11 @@
<p>上面的例子用来产生 [2, max] 范围内的随机数。我们要用 <code>Hash</code> 来解析 <code>from</code> 和 <code>to</code> 参数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">Liquid</span>, <span class="title class_">Hash</span> &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>)</span><br><span class="line"></span><br><span class="line">engine.<span class="title function_">registerTag</span>(<span class="string">&#x27;random&#x27;</span>, &#123;</span><br><span class="line"> <span class="title function_">parse</span>(<span class="params">tagToken</span>) &#123;</span><br><span class="line"> <span class="comment">// 解析参数结果，存到 `this.args` 里</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">args</span> = <span class="keyword">new</span> <span class="title class_">Hash</span>(tagToken.<span class="property">args</span>)</span><br><span class="line"> &#125;,</span><br><span class="line"> * <span class="title function_">render</span>(<span class="params">context, emitter</span>) &#123;</span><br><span class="line"> <span class="comment">// 在当前 `context` 下计算参数的值</span></span><br><span class="line"> <span class="keyword">const</span> &#123;<span class="keyword">from</span>, to&#125; = <span class="keyword">yield</span> <span class="variable language_">this</span>.<span class="property">args</span>.<span class="title function_">render</span>(context)</span><br><span class="line"> <span class="keyword">const</span> length = to - <span class="keyword">from</span> + <span class="number">1</span></span><br><span class="line"> <span class="keyword">const</span> value = <span class="keyword">from</span> + <span class="title class_">Math</span>.<span class="title function_">floor</span>(length * <span class="title class_">Math</span>.<span class="title function_">random</span>())</span><br><span class="line"> emitter.<span class="title function_">write</span>(value)</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在 <code>&#123; max: 10 &#125;</code> 上下文上渲染 <code>&#123;% random from:2, to:max %&#125;</code> 将会得到 [2, 10] 范围内的随机数。见这个 JSFiddle：<a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/ctj364up/4/">http://jsfiddle.net/ctj364up/4/</a>。</p>
<p>在 <code>&#123; max: 10 &#125;</code> 上下文上渲染 <code>{% random from:2, to:max %}</code> 将会得到 [2, 10] 范围内的随机数。见这个 JSFiddle：<a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/ctj364up/4/">http://jsfiddle.net/ctj364up/4/</a>。</p>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="access-scope-in-filters.html" class="article-footer-prev" title="过滤器里访问上下文"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="render-tag-content.html" class="article-footer-next" title="渲染标签内容"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/partials-and-layouts.html
+1 -1
View File
@@ -114,7 +114,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/plugins.html
+1 -1
View File
@@ -111,7 +111,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/register-filters-tags.html
+1 -1
View File
@@ -115,7 +115,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="escaping.html" class="article-footer-prev" title="转义"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="access-scope-in-filters.html" class="article-footer-next" title="过滤器里访问上下文"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/render-file.html
+1 -1
View File
@@ -135,7 +135,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/render-tag-content.html
+30 -4
View File
@@ -99,14 +99,40 @@
<p>期望输出：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;wrapper&#x27;</span>&gt;</span></span><br><span class="line"> Hello world!</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>首先 [注册][register-tags] 一个名为 <code>wrap</code> 的标签，把内容解析到 <code>this.tpls</code> 数组里。<code>parse(tagToken, remainTokens)</code> 中，</p>
<p>首先 <a href="./register-filters-tags.html">注册</a> 一个名为 <code>wrap</code> 的标签，把内容解析到 <code>this.tpls</code> 数组里。<code>parse(tagToken, remainTokens)</code> 中，</p>
<ul>
<li><code>tagToken</code> 是当前 <em>Token</em> `</li>
<li><code>tagToken</code> 是当前 <em>Token</em> <code>{% wrap %}</code>，</li>
<li><code>remainTokens</code> 是当前模板中后续所有 <em>Token</em> 的数组。</li>
</ul>
<p>我们要做的是从 <code>remainTokens</code> 里拿出来/<code>.shift()</code> 足够的标签直到遇到 <code>endwrap</code>（其实可以是任意名字，但按照惯例应该叫 <code>endwrap</code>）。如果到模板结尾都没遇到 <code>endwrap</code>，需要抛出一个标签未关闭的 <code>Error</code>。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">engine.<span class="title function_">registerTag</span>(<span class="string">&#x27;wrap&#x27;</span>, &#123;</span><br><span class="line"> <span class="title function_">parse</span>(<span class="params">tagToken, remainTokens</span>) &#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">tpls</span> = []</span><br><span class="line"> <span class="keyword">let</span> closed = <span class="literal">false</span></span><br><span class="line"> <span class="keyword">while</span>(remainTokens.<span class="property">length</span>) &#123;</span><br><span class="line"> <span class="keyword">let</span> token = remainTokens.<span class="title function_">shift</span>()</span><br><span class="line"> <span class="comment">// 得到了结束标签，停止解析</span></span><br><span class="line"> <span class="keyword">if</span> (token.<span class="property">name</span> === <span class="string">&#x27;endwrap&#x27;</span>) &#123;</span><br><span class="line"> closed = <span class="literal">true</span></span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> &#125;</span><br><span class="line"> <span class="comment">// 把 Token 解析成 Template</span></span><br><span class="line"> <span class="comment">// parseToken() 可能会消耗多个 Token</span></span><br><span class="line"> <span class="comment">// 例如 &#123;% if %&#125;...&#123;% endif %&#125;</span></span><br><span class="line"> <span class="keyword">let</span> tpl = <span class="variable language_">this</span>.<span class="property">liquid</span>.<span class="property">parser</span>.<span class="title function_">parseToken</span>(token, remainTokens)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">tpls</span>.<span class="title function_">push</span>(tpl)</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (!closed) <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">`tag <span class="subst">$&#123;tagToken.getText()&#125;</span> not closed`</span>)</span><br><span class="line"> &#125;,</span><br><span class="line"> * <span class="title function_">render</span>(<span class="params">context, emitter</span>) &#123;</span><br><span class="line"> emitter.<span class="title function_">write</span>(<span class="string">&quot;&lt;div class=&#x27;wrapper&#x27;&gt;&quot;</span>)</span><br><span class="line"> <span class="keyword">yield</span> <span class="variable language_">this</span>.<span class="property">liquid</span>.<span class="property">renderer</span>.<span class="title function_">renderTemplates</span>(<span class="variable language_">this</span>.<span class="property">tpls</span>, context, emitter)</span><br><span class="line"> emitter.<span class="title function_">write</span>(<span class="string">&quot;&lt;/div&gt;&quot;</span>)</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><code>.renderTemplates()</code> 可能是异步的，因此需要 <code>yield</code> 来等它完成。更多关于 LiquidJS 异步的信息可以参考 <a href="./sync-and-async.html">同步和异步</a>。<code>render()</code> 的其他部分比较直观，这是 JSFiddle 版本：<a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/por0zcn1/3/">http://jsfiddle.net/por0zcn1/3/</a>。</p>
<h2 id="使用-ParseStream" class="article-heading"><a href="#使用-ParseStream" class="headerlink" title="使用 ParseStream"></a>使用 ParseStream<a class="article-anchor" href="#使用-ParseStream" aria-hidden="true"></a></h2><p>对于像 <a href="../tags/for.html">for</a> 和 <a href="../tags/if.html">if</a> 这样的复杂标签，<code>parse()</code> 会变得很复杂。使用 <a href="/api/classes/ParseStream.html">ParseStream</a> 工具可以按事件风格来组织 <code>parse()</code> 的逻辑。下面是用 <code>ParseStream</code> 重写过的 <code>parse()</code>，实现了和上面例子中完全一样的功能。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">parse</span>(<span class="params">tagToken, remainTokens</span>) &#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">tpls</span> = []</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">liquid</span>.<span class="property">parser</span>.<span class="title function_">parseStream</span>(remainTokens)</span><br><span class="line"> .<span class="title function_">on</span>(<span class="string">&#x27;template&#x27;</span>, <span class="function"><span class="params">tpl</span> =&gt;</span> <span class="variable language_">this</span>.<span class="property">tpls</span>.<span class="title function_">push</span>(tpl))</span><br><span class="line"> <span class="comment">// 注意这里不能用箭头函数，因为我们需要 `this`</span></span><br><span class="line"> .<span class="title function_">on</span>(<span class="string">&#x27;tag:endwrap&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="variable language_">this</span>.<span class="title function_">stop</span>() &#125;)</span><br><span class="line"> .<span class="title function_">on</span>(<span class="string">&#x27;end&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">`tag <span class="subst">$&#123;tagToken.getText()&#125;</span> not closed`</span>) &#125;)</span><br><span class="line"> .<span class="title function_">start</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这是 JSFiddle 链接：<a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/por0zcn1/4/">http://jsfiddle.net/por0zcn1/4/</a>。简单起见，下面的例子都借助 <code>ParseStream</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>wrap</code> 标签看起来没什么用，反正没它也可以很容易地渲染那部分内容。我们现在来实现一个 <code>repeat</code> 标签，把内容渲染两次（还可以<a href="./parse-parameters.html">加个参数</a>让它渲染任意次）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% repeat %&#125;</span><br><span class="line"> &#123;&#123; repeat.i &#125;&#125;. &#123;&#123; &quot;hello world!&quot; | capitalize &#125;&#125;</span><br><span class="line">&#123;% endrepeat %&#125;`</span><br></pre></td></tr></table></figure>
<p>期望输出：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1. Hello world!</span><br><span class="line">2. Hello world!</span><br></pre></td></tr></table></figure>
<p>你可能注意到了在 <code>repeat</code> 上下文里有个额外的变量 <code>repeat.i</code>，这就需要我们操作 <em>上下文</em>。</p>
<blockquote class="note info"><strong class="note-title">上下文</strong><p><em>上下文</em> 定义了 Liquid 模板中每个变量的值。在 LiquidJS 中，<code>Context</code> 由一个 <code>Scope</code> 的栈组成。<em>Scope</em> 就是一个普通对象，就像传给 <code>engine.render(tpl, scope)</code> 的 <code>scope</code> 一样。</p>
</blockquote>
<p>每次进入新的 <em>上下文</em> 时，我们需要 <code>push</code> 一个新的 <code>Scope</code>。当结束渲染并退出 <em>上下文</em> 时，再把 <code>Scope</code> 从 <em>上下文</em> <code>pop</code> 出来。见下面的实现：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">engine.<span class="title function_">registerTag</span>(<span class="string">&#x27;repeat&#x27;</span>, &#123;</span><br><span class="line"> <span class="title function_">parse</span>(<span class="params">tagToken, remainTokens</span>) &#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">tpls</span> = []</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">liquid</span>.<span class="property">parser</span>.<span class="title function_">parseStream</span>(remainTokens)</span><br><span class="line"> .<span class="title function_">on</span>(<span class="string">&#x27;template&#x27;</span>, <span class="function"><span class="params">tpl</span> =&gt;</span> <span class="variable language_">this</span>.<span class="property">tpls</span>.<span class="title function_">push</span>(tpl))</span><br><span class="line"> .<span class="title function_">on</span>(<span class="string">&#x27;tag:endrepeat&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123; <span class="variable language_">this</span>.<span class="title function_">stop</span>() &#125;)</span><br><span class="line"> .<span class="title function_">on</span>(<span class="string">&#x27;end&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">`tag <span class="subst">$&#123;tagToken.getText()&#125;</span> not closed`</span>) &#125;)</span><br><span class="line"> .<span class="title function_">start</span>()</span><br><span class="line"> &#125;,</span><br><span class="line"> * <span class="title function_">render</span>(<span class="params">context, emitter</span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> repeat = &#123; <span class="attr">i</span>: <span class="number">1</span> &#125;</span><br><span class="line"> context.<span class="title function_">push</span>(&#123; repeat &#125;)</span><br><span class="line"> <span class="keyword">yield</span> <span class="variable language_">this</span>.<span class="property">liquid</span>.<span class="property">renderer</span>.<span class="title function_">renderTemplates</span>(<span class="variable language_">this</span>.<span class="property">tpls</span>, context, emitter)</span><br><span class="line"> repeat.<span class="property">i</span>++</span><br><span class="line"> <span class="keyword">yield</span> <span class="variable language_">this</span>.<span class="property">liquid</span>.<span class="property">renderer</span>.<span class="title function_">renderTemplates</span>(<span class="variable language_">this</span>.<span class="property">tpls</span>, context, emitter)</span><br><span class="line"> context.<span class="title function_">pop</span>()</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><code>parse()</code> 部分和 <code>wrap</code> 标签完全相同，在 <code>render()</code> 部分我们通过调用两次 <code>.renderTemplates(this.tpls)</code> 来重复渲染内容。这是 JSFiddle 链接：<a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/por0zcn1/2/">http://jsfiddle.net/por0zcn1/2/</a>。</p>
<blockquote class="note warn"><strong class="note-title">成对使用 Push 和 Pop</strong><p>必须成对地使用 <code>context.push()</code> 和 <code>context.pop()</code>。如果忘记 <code>pop()</code> 会导致 <code>Scope</code> 泄露给后面的模板内容，也可能损坏 <em>上下文</em> 栈。.</p>
</blockquote>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="parse-parameters.html" class="article-footer-prev" title="参数解析"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="drops.html" class="article-footer-next" title="Liquid Drop"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
@@ -115,7 +141,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="#%E6%B8%B2%E6%9F%93%E6%A0%87%E7%AD%BE%E5%86%85%E5%AE%B9"><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%E6%A0%87%E7%AD%BE%E5%86%85%E5%AE%B9"><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-ParseStream"><span class="toc-text">使用 ParseStream</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="toc-text">操作上下文</span></a></li></ol>
</div>
<a href="#" id="article-toc-top">回到顶部</a>
</div>
zh-cn/tutorials/setup.html
+1 -1
View File
@@ -126,7 +126,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/sync-and-async.html
+1 -1
View File
@@ -131,7 +131,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="drops.html" class="article-footer-prev" title="Liquid Drop"><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>
zh-cn/tutorials/truthy-and-falsy.html
+1 -1
View File
@@ -226,7 +226,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="operators.html" class="article-footer-prev" title="运算符"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="dos.html" class="article-footer-next" title="DoS"><span>下一页</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
zh-cn/tutorials/use-in-expressjs.html
+1 -1
View File
@@ -114,7 +114,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</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>
zh-cn/tutorials/whitespace-control.html
+1 -1
View File
@@ -118,7 +118,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.723Z" itemprop="dateModified">上次更新：2024-08-18</time>
<time class="article-footer-updated" datetime="2024-08-19T19:36:26.430Z" itemprop="dateModified">上次更新：2024-08-19</time>
<a href="sync-and-async.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>