mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-18 05:50:43 -07:00
Deploying to gh-pages from @ harttle/liquidjs@8db6c7b28d 🚀
This commit is contained in:
harttle
@@ -77,7 +77,7 @@
|
||||
<div id="content-inner">
|
||||
<aside id="sidebar" role="navigation">
|
||||
<div class="inner">
|
||||
<strong class="sidebar-title">开始使用</strong><a href="intro-to-liquid.html" class="sidebar-link">Liquid 简介</a><a href="setup.html" class="sidebar-link">安装</a><a href="options.html" class="sidebar-link current">选项</a><a href="render-file.html" class="sidebar-link">文件渲染</a><a href="partials-and-layouts.html" class="sidebar-link">引用/继承</a><a href="use-in-expressjs.html" class="sidebar-link">Express.js 中使用</a><strong class="sidebar-title">高级主题</strong><a href="caching.html" class="sidebar-link">缓存</a><a href="register-filters-tags.html" class="sidebar-link">注册标签/过滤器</a><a href="access-scope-in-filters.html" class="sidebar-link">过滤器里访问上下文</a><a href="parse-parameters.html" class="sidebar-link">参数解析</a><a href="sync-and-async.html" class="sidebar-link">同步和异步</a><a href="whitespace-control.html" class="sidebar-link">换行和缩进</a><a href="plugins.html" class="sidebar-link">插件</a><a href="operators.html" class="sidebar-link">运算符</a><a href="truthy-and-falsy.html" class="sidebar-link">真和假</a><strong class="sidebar-title">其他</strong><a href="migrate-to-9.html" class="sidebar-link">迁移到 LiquidJS 9</a><a href="changelog.html" class="sidebar-link">更新日志</a><a href="differences.html" class="sidebar-link">与 Shopify/liquid 的不同</a><a href="contribution-guidelines.html" class="sidebar-link">贡献指南</a>
|
||||
<strong class="sidebar-title">开始使用</strong><a href="intro-to-liquid.html" class="sidebar-link">Liquid 简介</a><a href="setup.html" class="sidebar-link">安装</a><a href="options.html" class="sidebar-link current">选项</a><a href="render-file.html" class="sidebar-link">文件渲染</a><a href="partials-and-layouts.html" class="sidebar-link">引用/继承</a><a href="use-in-expressjs.html" class="sidebar-link">Express.js 中使用</a><strong class="sidebar-title">高级主题</strong><a href="caching.html" class="sidebar-link">缓存</a><a href="register-filters-tags.html" class="sidebar-link">注册标签/过滤器</a><a href="access-scope-in-filters.html" class="sidebar-link">过滤器里访问上下文</a><a href="parse-parameters.html" class="sidebar-link">参数解析</a><a href="render-tag-content.html" class="sidebar-link">渲染标签内容</a><a href="sync-and-async.html" class="sidebar-link">同步和异步</a><a href="whitespace-control.html" class="sidebar-link">换行和缩进</a><a href="plugins.html" class="sidebar-link">插件</a><a href="operators.html" class="sidebar-link">运算符</a><a href="truthy-and-falsy.html" class="sidebar-link">真和假</a><strong class="sidebar-title">其他</strong><a href="migrate-to-9.html" class="sidebar-link">迁移到 LiquidJS 9</a><a href="changelog.html" class="sidebar-link">更新日志</a><a href="differences.html" class="sidebar-link">与 Shopify/liquid 的不同</a><a href="contribution-guidelines.html" class="sidebar-link">贡献指南</a>
|
||||
</div>
|
||||
</aside>
|
||||
<article class="article-container" itemscope itemtype="http://schema.org/Article">
|
||||
@@ -92,7 +92,10 @@
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p><a href="../api/classes/liquid_.liquid.html">Liquid</a> 构造函数接受一个参数对象，用来定义各种模板引擎行为。这些参数都是可选的，比如我可以指定其中一个参数 <code>cache</code>：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>)</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">cache</span>: <span class="literal">true</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
|
||||
<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>
|
||||
cache<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>
|
||||
@@ -107,10 +110,10 @@
|
||||
<p>注意由于历史原因这个选项叫做 dynamicPartials，但它对 layout 也起作用。</p>
|
||||
</blockquote>
|
||||
<p><strong>dynamicPartials</strong> 表示是否把传给 <a href="../tags/include.html">include</a>, <a href="../tags/render.html">render</a>, <a href="../tags/layout.html">layout</a> 标签的文件名当做变量处理。默认为 <code>true</code>。例如用上下文 <code>{ file: 'foo.html' }</code> 渲染下面的模板将会引入文件 <code>foo.html</code>：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% include file %}</span><br></pre></td></tr></table></figure>
|
||||
<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> <span class="token keyword">include</span> file <span class="token delimiter punctuation">%}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>设置 <code>dynamicPartials: false</code> 后 LiquidJS 将会尝试去读取 <code>file</code>。当你的模板之间都是静态引入关系时会很有用：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% liquid foo.html %}</span><br></pre></td></tr></table></figure>
|
||||
<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> <span class="token keyword">liquid</span> foo<span class="token punctuation">.</span>html <span class="token delimiter punctuation">%}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<blockquote class="note warn"><strong class="note-title">常见陷阱</strong><p>LiquidJS 把这个选项默认值设为 <code>true</code> 以兼容于 shopify/liquid，但如果你在使用 <a href="https://github.com/11ty/eleventy" rel="external nofollow noreferrer" target="_blank">eleventy</a> 它会设置默认值 <code>false</code> （参考 <a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths" rel="external nofollow noreferrer" target="_blank">Quoted Include Paths</a>）以兼容于 Jekyll。</p>
|
||||
</blockquote>
|
||||
@@ -124,10 +127,18 @@
|
||||
<li>参数放到了 <code>include</code> 变量下，而非当前作用域。</li>
|
||||
</ul>
|
||||
<p>例如下面的模板中，<code>name.html</code> 没有带引号，<code>header</code> 和 <code>"HEADER"</code> 以 <code>=</code> 分隔，<code>header</code> 参数通过 <code>include.header</code> 来引用。更多详情请参考 <a href="../tags/include.html">include</a>。</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">// entry template</span><br><span class="line">{% include article.html header="HEADER" content="CONTENT" %}</span><br><span class="line"></span><br><span class="line">// article.html</span><br><span class="line"><article></span><br><span class="line"> <header>{{include.header}}</header></span><br><span class="line"> {{include.content}}</span><br><span class="line"></article></span><br></pre></td></tr></table></figure>
|
||||
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid">// entry template
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">include</span> <span class="token object">article</span><span class="token punctuation">.</span>html header<span class="token operator">=</span><span class="token string">"HEADER"</span> content<span class="token operator">=</span><span class="token string">"CONTENT"</span> <span class="token delimiter punctuation">%}</span></span>
|
||||
|
||||
// article.html
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token keyword">include</span><span class="token punctuation">.</span>header<span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token keyword">include</span><span class="token punctuation">.</span>content<span class="token delimiter punctuation">}}</span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></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></code></pre>
|
||||
|
||||
<h2 id="extname" class="article-heading"><a href="#extname" class="headerlink" title="extname"></a>extname<a class="article-anchor" href="#extname" aria-hidden="true"></a></h2><p><strong>extname</strong> 定义了默认的文件后缀，当传入文件名不包含后缀时自动追加。默认值是 <code>''</code> 也就是说默认是禁用的。如果设置为 <code>.liquid</code>：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% render "foo" %} 没有后缀，添加 ".liquid" 并加载 foo.liquid</span><br><span class="line">{% render "foo.html" %} 已经有后缀了，直接加载 foo.html</span><br></pre></td></tr></table></figure>
|
||||
<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> <span class="token keyword">render</span> <span class="token string">"foo"</span> <span class="token delimiter punctuation">%}</span></span> 没有后缀，添加 ".liquid" 并加载 foo.liquid
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">render</span> <span class="token string">"foo.html"</span> <span class="token delimiter punctuation">%}</span></span> 已经有后缀了，直接加载 foo.html<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>在 2.0.1 之前，<code>extname</code> 默认值为 <code>.liquid</code>。要禁用它需要明确设置为 <code>extname: ''</code>。详情参考 <a href="https://github.com/harttle/liquidjs/issues/41" rel="external nofollow noreferrer" target="_blank">#41</a>。</p>
|
||||
</blockquote>
|
||||
@@ -140,7 +151,7 @@
|
||||
<p><strong>preserveTimezones</strong> 是一个布尔值，只影响时间戳字面量。当设置为 <code>true</code> 时，所有字面量的时间戳字符串会在输出时保持原状，即不论输入时采取怎样的时区，输出时仍然采用那一时区（和 Shopify Liquid 的行为一致）。注意这是一个解析器参数，渲染时传入的数据中的日期的输出不会受此参数影响。注意 <code>preserveTimezones</code> 比 <code>timezoneOffset</code> 的优先级更高。</p>
|
||||
<h2 id="换行和缩进" class="article-heading"><a href="#换行和缩进" class="headerlink" title="换行和缩进"></a>换行和缩进<a class="article-anchor" href="#换行和缩进" aria-hidden="true"></a></h2><p><strong>greedy</strong>, <strong>trimOutputLeft</strong>, <strong>trimOutputRight</strong>, <strong>trimTagLeft</strong>, <strong>trimTagRight</strong> 选项用来移除 Liquid 语法周围的换行和缩进，详情请参考 <a href="./whitespace-control.html">Whitespace Control</a>。</p>
|
||||
<h2 id="自定义分隔符" class="article-heading"><a href="#自定义分隔符" class="headerlink" title="自定义分隔符"></a>自定义分隔符<a class="article-anchor" href="#自定义分隔符" aria-hidden="true"></a></h2><p><strong>outputDelimiterLeft</strong>, <strong>outputDelimiterRight</strong>, <strong>tagDelimiterLeft</strong>, <strong>tagDelimiterRight</strong> 用来自定义 LiquidJS 中 <a href="./intro-to-liquid.html">标签和过滤器</a> 的分隔符。例如设置了 <code>outputDelimiterLeft: <%=, outputDelimiterRight: %></code> 后我们可以避免跟其他模板引擎冲突：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><%= username | append: ", welcome to LiquidJS!" %></span><br></pre></td></tr></table></figure>
|
||||
<pre class="line-numbers language-ejs" data-language="ejs"><code class="language-ejs"><span class="token ejs language-ejs"><span class="token delimiter punctuation"><%=</span><span class="token language-javascript"> username <span class="token operator">|</span> append<span class="token operator">:</span> <span class="token string">", welcome to LiquidJS!"</span> </span><span class="token delimiter punctuation">%></span></span><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><strong>strictFilters</strong> 用来启用过滤器的严格模式，如果设置为 <code>true</code> 过滤器不存在时解析会抛出异常。默认为 <code>false</code>，这时会跳过不存在的过滤器。</p>
|
||||
<p><strong>strictVariables</strong> 用来启用变量严格模式。如果设置为 <code>true</code> 变量不存在时渲染会抛出异常，默认为 <code>false</code> 这时不存在的变量会被渲染为空字符串。</p>
|
||||
@@ -151,7 +162,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2022-01-22T16:03:03.368Z" itemprop="dateModified">上次更新：2022-01-22</time>
|
||||
<time class="article-footer-updated" datetime="2022-01-23T06:25:32.650Z" itemprop="dateModified">上次更新：2022-01-23</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>
|
||||
@@ -198,7 +209,7 @@
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
<strong class="mobile-nav-title">开始使用</strong><a href="intro-to-liquid.html" class="mobile-nav-link">Liquid 简介</a><a href="setup.html" class="mobile-nav-link">安装</a><a href="options.html" class="mobile-nav-link current">选项</a><a href="render-file.html" class="mobile-nav-link">文件渲染</a><a href="partials-and-layouts.html" class="mobile-nav-link">引用/继承</a><a href="use-in-expressjs.html" class="mobile-nav-link">Express.js 中使用</a><strong class="mobile-nav-title">高级主题</strong><a href="caching.html" class="mobile-nav-link">缓存</a><a href="register-filters-tags.html" class="mobile-nav-link">注册标签/过滤器</a><a href="access-scope-in-filters.html" class="mobile-nav-link">过滤器里访问上下文</a><a href="parse-parameters.html" class="mobile-nav-link">参数解析</a><a href="sync-and-async.html" class="mobile-nav-link">同步和异步</a><a href="whitespace-control.html" class="mobile-nav-link">换行和缩进</a><a href="plugins.html" class="mobile-nav-link">插件</a><a href="operators.html" class="mobile-nav-link">运算符</a><a href="truthy-and-falsy.html" class="mobile-nav-link">真和假</a><strong class="mobile-nav-title">其他</strong><a href="migrate-to-9.html" class="mobile-nav-link">迁移到 LiquidJS 9</a><a href="changelog.html" class="mobile-nav-link">更新日志</a><a href="differences.html" class="mobile-nav-link">与 Shopify/liquid 的不同</a><a href="contribution-guidelines.html" class="mobile-nav-link">贡献指南</a>
|
||||
<strong class="mobile-nav-title">开始使用</strong><a href="intro-to-liquid.html" class="mobile-nav-link">Liquid 简介</a><a href="setup.html" class="mobile-nav-link">安装</a><a href="options.html" class="mobile-nav-link current">选项</a><a href="render-file.html" class="mobile-nav-link">文件渲染</a><a href="partials-and-layouts.html" class="mobile-nav-link">引用/继承</a><a href="use-in-expressjs.html" class="mobile-nav-link">Express.js 中使用</a><strong class="mobile-nav-title">高级主题</strong><a href="caching.html" class="mobile-nav-link">缓存</a><a href="register-filters-tags.html" class="mobile-nav-link">注册标签/过滤器</a><a href="access-scope-in-filters.html" class="mobile-nav-link">过滤器里访问上下文</a><a href="parse-parameters.html" class="mobile-nav-link">参数解析</a><a href="render-tag-content.html" class="mobile-nav-link">渲染标签内容</a><a href="sync-and-async.html" class="mobile-nav-link">同步和异步</a><a href="whitespace-control.html" class="mobile-nav-link">换行和缩进</a><a href="plugins.html" class="mobile-nav-link">插件</a><a href="operators.html" class="mobile-nav-link">运算符</a><a href="truthy-and-falsy.html" class="mobile-nav-link">真和假</a><strong class="mobile-nav-title">其他</strong><a href="migrate-to-9.html" class="mobile-nav-link">迁移到 LiquidJS 9</a><a href="changelog.html" class="mobile-nav-link">更新日志</a><a href="differences.html" class="mobile-nav-link">与 Shopify/liquid 的不同</a><a href="contribution-guidelines.html" class="mobile-nav-link">贡献指南</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user