mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-16 21:00:40 -07:00
Deploying to gh-pages from @ harttle/liquidjs@b69e62c2fd 🚀
This commit is contained in:
harttle
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -115,7 +115,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -155,7 +155,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -95,7 +95,7 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>在典型的网站项目中，同一个模板文件可能会反复地用不同数据去渲染。在生产环境下模板文件的内容不太会发生变化（除非重新部署了服务），因此可以把从磁盘读取的文件内容和解析得到的模板结构（AST）缓存下来重复使用来节省渲染时间。</p>
|
||||
<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>
|
||||
<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.html#parse">.parse()</a>, <a href="/api/classes/Liquid.html#parseFile">.parseFile()</a>, <a href="/api/classes/Liquid.html#parseFileSync">.parseFileSync()</a> API 可以用来把字符串或文件解析成模板。得到的模板可以用不同的数据去重复地渲染得到不同的 HTML。</p>
|
||||
<p>从字符串解析：</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> tpl <span class="token operator">=</span> engine<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token string">'{{name | capitalize}}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -109,7 +109,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
engine<span class="token punctuation">.</span><span class="token function">renderSync</span><span class="token punctuation">(</span>tpl<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bob'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 'Bob'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<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>
|
||||
<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> 也可以直接设置 <a href="/api/interfaces/LiquidOptions.html#cache">cache</a> 选项，LiquidJS 会帮你缓存。</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'liquidjs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
@@ -124,7 +124,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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="register-filters-tags.html" class="article-footer-next" title="注册标签/过滤器"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -164,7 +164,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -647,7 +647,7 @@
|
||||
</script></li></ul>
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:43:32.589Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:52:09.620Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -687,7 +687,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -110,7 +110,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<a href="differences.html" class="article-footer-prev" title="与 Shopify/liquid 的不同"><i class="icon-chevron-left"></i><span>上一页</span></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -150,7 +150,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -121,7 +121,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -161,7 +161,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="" class="main-nav-link active">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="" class="main-nav-link active">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -126,7 +126,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<a href="setup.html" class="article-footer-next" title="安装"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -166,7 +166,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="" class="mobile-nav-link active">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="" class="mobile-nav-link active">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -117,7 +117,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</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>
|
||||
@@ -157,7 +157,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -107,7 +107,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -147,7 +147,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -93,13 +93,13 @@
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p><a href="../api/classes/liquid_.liquid.html">Liquid</a> 构造函数接受一个参数对象，用来定义各种模板引擎行为。这些参数都是可选的，比如我可以指定其中一个参数 <code>cache</code>：</p>
|
||||
<p><a href="/api/classes/Liquid.html">Liquid</a> 构造函数接受一个参数对象，用来定义各种模板引擎行为。这些参数都是可选的，比如我可以指定其中一个参数 <code>cache</code>：</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'liquidjs'</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<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 class="note info"><strong class="note-title">API 文档</strong><p>下面的所有选项的概述，希望了解具体的类型和签名，请前往 <a href="https://liquidjs.com/api/interfaces/LiquidOptions.html" target="_self">LiquidOptions | API</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><strong>cache</strong> 用来指定是否缓存曾经读取和处理过的模板来提升性能。在生产环境模板会重复渲染的情况会很有用。</p>
|
||||
@@ -122,7 +122,7 @@
|
||||
|
||||
<h2 id="Jekyll-include" class="article-heading"><a href="#Jekyll-include" class="headerlink" title="Jekyll include"></a>Jekyll include<a class="article-anchor" href="#Jekyll-include" aria-hidden="true"></a></h2><p class="since">v9.33.0</p>
|
||||
|
||||
<p><a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-jekyllInclude">jekyllInclude</a> 用来启用 Jekyll-like include 语法。默认为 <code>false</code>，当设置为 <code>true</code> 时：</p>
|
||||
<p><a href="/api/interfaces/LiquidOptions.html#jekyllInclude">jekyllInclude</a> 用来启用 Jekyll-like include 语法。默认为 <code>false</code>，当设置为 <code>true</code> 时：</p>
|
||||
<ul>
|
||||
<li>默认启用静态文件名：<code>dynamicPartials</code> 的默认值变为 <code>false</code>（而非 <code>true</code>）。但你也可以把它设置回 <code>true</code>。</li>
|
||||
<li>参数的键和值之间由 <code>=</code> 分隔（本来是 <code>:</code>）。</li>
|
||||
@@ -166,7 +166,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -206,7 +206,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -114,7 +114,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<p>下面是修改过的模板，也包含三个值用来随机。但它们表示的是值而不是静态的字符串。第一个是字符串字面量，第二个是标识符（表示变量），第三个是属性访问表达式，包含两个标识符。</p>
|
||||
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> random <span class="token string">"foo"</span> bar obj<span class="token punctuation">.</span>coo <span class="token delimiter punctuation">%}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>解析这么多种情况会很麻烦，但 LiquidJS 提供了 <a href="/api/classes/parser_tokenizer_.tokenizer.html">Tokenizer</a> 类来处理这种情况。</p>
|
||||
<p>解析这么多种情况会很麻烦，但 LiquidJS 提供了 <a href="/api/classes/Tokenizer.html">Tokenizer</a> 类来处理这种情况。</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token punctuation">{</span> Liquid<span class="token punctuation">,</span> Tokenizer<span class="token punctuation">,</span> evalToken <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'liquidjs'</span><span class="token punctuation">)</span>
|
||||
|
||||
engine<span class="token punctuation">.</span><span class="token function">registerTag</span><span class="token punctuation">(</span><span class="token string">'random'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@@ -139,7 +139,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<blockquote class="note info"><strong class="note-title">异步和 Promise</strong><p>在 LiquidJS 里异步用生成器实现，这样同样一份标签的实现也可以用于同步的 API 比如 <code>renderSync()</code>，<code>parseAndRenderSync()</code>，<code>renderFileSync()</code>。如果要在标签实现里等待 Promise，只需要把 <code>await somePromise</code> 换成 <code>yield somePromise</code>，并保留 <code>* render()</code> 不要改成 <code>async render()</code>。更多细节请参考 <a href="/tutorials/sync-and-async.html">Sync and Async</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/classes/template_tag_hash_.hash.html">Hash</a> 类就是来处理这种情况的。</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/Hash.html">Hash</a> 类就是来处理这种情况的。</p>
|
||||
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> random from<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span> to<span class="token operator">:</span>max <span class="token delimiter punctuation">%}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>上面的例子用来产生 [2, max] 范围内的随机数。我们要用 <code>Hash</code> 来解析 <code>from</code> 和 <code>to</code> 参数。</p>
|
||||
@@ -163,7 +163,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -203,7 +203,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -133,7 +133,7 @@ Footer<span aria-hidden="true" class="line-numbers-rows"><span></span><span></sp
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -173,7 +173,7 @@ Footer<span aria-hidden="true" class="line-numbers-rows"><span></span><span></sp
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -94,7 +94,7 @@
|
||||
</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>
|
||||
<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.html">Liquid 类</a>，其中的 <code>this</code> 是它被注册到的 Liquid 实例。可以通过 <code>this</code> 来调用 Liquid API，比如 <a href="./register-filters-tags.html">注册标签和过滤器</a>。</p>
|
||||
<p>现在我们来写一个插件并在其中注册一个过滤器，来把输入字符串转换为大写：</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||||
* Inside the plugin function, `this` refers to the Liquid instance.
|
||||
@@ -122,7 +122,7 @@ engine<span class="token punctuation">.</span><span class="token function">parse
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -162,7 +162,7 @@ engine<span class="token punctuation">.</span><span class="token function">parse
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -167,7 +167,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<a href="caching.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>
|
||||
@@ -207,7 +207,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
</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>
|
||||
<p>一个典型的项目会有一个目录下都是模板，最方便的方式就是设置 LiquidJS 的 <a href="/api/interfaces/LiquidOptions.html#root">root</a> 然后调用 <a href="/api/classes/Liquid.html#renderFile">.renderFile()</a> 或 <a href="/api/classes/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>
|
||||
<pre class="line-numbers language-none"><code class="language-none">.
|
||||
├── index.js
|
||||
@@ -115,7 +115,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
<p>执行 <code>node index.js</code> 你将会得到类似这样的输出：</p>
|
||||
<pre class="line-numbers language-none"><code class="language-none">name: alice<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<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>
|
||||
<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.html#renderFile">.renderFile()</a>, <a href="/api/classes/Liquid.html#parseFile">.parseFile()</a> <a href="/api/classes/Liquid.html#renderFileSync">.renderFileSync()</a>, <a href="/api/classes/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/LiquidOptions.html#root">root</a> 选项来查找。</p>
|
||||
<p><code>root</code> 可以设置为 <code>string</code> 类型的路径（见上面的例子）， 也可以设置为一个字符串数组表示路径列表，这时 LiquidJS 将会按顺序去查找。例如：</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'views/'</span><span class="token punctuation">,</span> <span class="token string">'views/partials/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
@@ -142,7 +142,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
<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 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>
|
||||
<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/FS.html">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/fs-impl.ts">src/fs/node.ts</a>，在浏览器打包文件中的默认实现是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/fs-impl-browser.ts">src/fs/browser.ts</a>。<br>你可以通过创建 <code>Liquid</code> 时的 <a href="/api/interfaces/LiquidOptions.html#fs">fs</a> 参数来指定一个自定义实现来指定如何读取模板文件。比如从数据库里读取：</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">fs</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">readFileSync</span> <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -167,7 +167,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -207,7 +207,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -100,7 +100,7 @@
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endwrap <span class="token delimiter punctuation">%}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>期望输出：</p>
|
||||
<pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>wrapper<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
|
||||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>wrapper<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
|
||||
Hello world!
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<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/parser_parse_stream_.parsestream.html">ParseStream</a> 工具可以按事件风格来组织 <code>parse()</code> 的逻辑。下面是用 <code>ParseStream</code> 重写过的 <code>parse()</code>，实现了和上面例子中完全一样的功能。</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>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">parse</span><span class="token punctuation">(</span><span class="token parameter">tagToken<span class="token punctuation">,</span> remainTokens</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>tpls <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>liquid<span class="token punctuation">.</span>parser<span class="token punctuation">.</span><span class="token function">parseStream</span><span class="token punctuation">(</span>remainTokens<span class="token punctuation">)</span>
|
||||
@@ -155,7 +155,7 @@
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endrepeat <span class="token delimiter punctuation">%}</span></span>`<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>期望输出：</p>
|
||||
<pre class="line-numbers language-html" data-language="html"><code class="language-html">1. Hello world!
|
||||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">1. Hello world!
|
||||
2. Hello world!<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>你可能注意到了在 <code>repeat</code> 上下文里有个额外的变量 <code>repeat.i</code>，这就需要我们操作 <em>上下文</em>。</p>
|
||||
@@ -189,7 +189,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<a href="parse-parameters.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>
|
||||
@@ -229,7 +229,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -95,7 +95,7 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>如果你还不了解 Liquid 模板语言，请参考 <a href="./intro-to-liquid.html">Liquid 模板语言简介</a>。</p>
|
||||
<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>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save liquidjs<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> liquidjs<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'liquidjs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -119,7 +119,7 @@ engine
|
||||
</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>
|
||||
<pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token comment"><!--生产环境--></span>
|
||||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token comment"><!--生产环境--></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token comment"><!--开发环境--></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
|
||||
<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>
|
||||
@@ -138,7 +138,7 @@ engine
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -178,7 +178,7 @@ engine
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -94,7 +94,7 @@
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>LiquidJS 支持同步调用也支持异步调用，支持 Promise。为了同异步复用一套标签和过滤器，LiquidJS 标签用生成器来实现。</p>
|
||||
<h2 id="同异步-API" class="article-heading"><a href="#同异步-API" class="headerlink" title="同异步 API"></a>同异步 API<a class="article-anchor" href="#同异步-API" aria-hidden="true"></a></h2><p><a href="/api/classes/liquid_.liquid.html">Liquid</a> 上主要的方法都支持同步和异步，下面这些方法返回 <code>Promise</code>：</p>
|
||||
<h2 id="同异步-API" class="article-heading"><a href="#同异步-API" class="headerlink" title="同异步 API"></a>同异步 API<a class="article-anchor" href="#同异步-API" aria-hidden="true"></a></h2><p><a href="/api/classes/Liquid.html">Liquid</a> 上主要的方法都支持同步和异步，下面这些方法返回 <code>Promise</code>：</p>
|
||||
<ul>
|
||||
<li><code>render()</code></li>
|
||||
<li><code>renderFile()</code></li>
|
||||
@@ -141,7 +141,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>现在 <code>* render()</code> 调用了一个返回 Promise 的 API，它就不再兼容同步了。不兼容同步的标签也仍然是合法标签，在异步 API 下也会正常运行。被同步调用时，返回 <code>Promise</code> 的标签会被渲染成 <code>[object Promise]</code>。</p>
|
||||
<h2 id="把-LiquidJS-生成器转换成-Promise" class="article-heading"><a href="#把-LiquidJS-生成器转换成-Promise" class="headerlink" title="把 LiquidJS 生成器转换成 Promise"></a>把 LiquidJS 生成器转换成 Promise<a class="article-anchor" href="#把-LiquidJS-生成器转换成-Promise" aria-hidden="true"></a></h2><p>有些 LiquidJS API 会返回 <code>Promise</code>，有些会返回生成器。你可以用 <a href="/api/modules/liquid_.html#toPromise">toPromise</a> 来把生成器转换为 <code>Promise</code>，比如：</p>
|
||||
<h2 id="把-LiquidJS-生成器转换成-Promise" class="article-heading"><a href="#把-LiquidJS-生成器转换成-Promise" class="headerlink" title="把 LiquidJS 生成器转换成 Promise"></a>把 LiquidJS 生成器转换成 Promise<a class="article-anchor" href="#把-LiquidJS-生成器转换成-Promise" aria-hidden="true"></a></h2><p>有些 LiquidJS API 会返回 <code>Promise</code>，有些会返回生成器。你可以用 <a href="/api/functions/toPromise.html">toPromise</a> 来把生成器转换为 <code>Promise</code>，比如：</p>
|
||||
<pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">import</span> <span class="token punctuation">{</span> TagToken<span class="token punctuation">,</span> Context<span class="token punctuation">,</span> Emitter<span class="token punctuation">,</span> TopLevelToken<span class="token punctuation">,</span> Value<span class="token punctuation">,</span> Tag<span class="token punctuation">,</span> Liquid<span class="token punctuation">,</span> toPromise <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'liquidjs'</span>
|
||||
|
||||
<span class="token comment">// Usage: {% upper "alice" %}</span>
|
||||
@@ -178,7 +178,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<a href="render-tag-content.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>
|
||||
@@ -218,7 +218,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -227,7 +227,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-19</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>
|
||||
@@ -267,7 +267,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -105,7 +105,7 @@ app<span class="token punctuation">.</span><span class="token function">set</spa
|
||||
<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 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>
|
||||
<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/LiquidOptions.html#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>
|
||||
<pre class="line-numbers language-none"><code class="language-none">.
|
||||
├── views1/
|
||||
│ └── hello.liquid
|
||||
@@ -126,17 +126,17 @@ app<span class="token punctuation">.</span><span class="token function">set</spa
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
|
||||
res<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">'world'</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
|
||||
<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>
|
||||
<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/LiquidOptions.html#cache">cache 选项</a> 设为 <code>true</code> 即可开启模板缓存，参考 <a href="./caching.html">缓存</a> 一文。推荐在生产环境中开启缓存，可以用如下代码：</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'liquidjs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">cache</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'production'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p><code>cache</code> 还可以是一个数字表示最大缓存的模板数量，也可以是一个自定义的缓存实现，详情请参考 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-cache">cache 选项</a>。</p>
|
||||
<p><code>cache</code> 还可以是一个数字表示最大缓存的模板数量，也可以是一个自定义的缓存实现，详情请参考 <a href="/api/interfaces/LiquidOptions.html#cache">cache 选项</a>。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -176,7 +176,7 @@ res<span class="token punctuation">.</span><span class="token function">render</
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -117,12 +117,12 @@ harttle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></s
|
||||
<li><code>trimValueRight</code></li>
|
||||
<li><code>trimValueRight</code></li>
|
||||
</ul>
|
||||
<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>
|
||||
<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/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="2023-03-19T15:42:58.537Z" itemprop="dateModified">上次更新：2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.945Z" itemprop="dateModified">上次更新：2023-03-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>
|
||||
@@ -162,7 +162,7 @@ harttle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></s
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
Reference in New Issue
Block a user