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="搜索...">
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user