mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-16 21:00:40 -07:00
Deploying to gh-pages from @ harttle/liquidjs@70fdb7af48 🚀
This commit is contained in:
harttle
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,55 +87,54 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">渲染文件</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/render-file.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/render-file.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>一个典型的项目会有一个目录下都是模板，最方便的方式就是设置 LiquidJS 的 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 然后调用 <a href="../../api/classes/liquid_.liquid.html#renderFile">.renderFile()</a> 或 <a href="../../api/classes/liquid_.liquid.html#renderFilesync">.renderFileSync()</a> 来渲染其中的一个模板文件。</p>
|
||||
<h2 id="渲染一个文件" class="article-heading"><a href="#渲染一个文件" class="headerlink" title="渲染一个文件"></a>渲染一个文件<a class="article-anchor" href="#渲染一个文件" aria-hidden="true"></a></h2><p>例如你有如下的目录结构：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>其中 <code>hello.liquid</code> 内容为：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">name: {{name}}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">name: {{name}}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>在 <code>index.js</code> 中可以这样渲染 <code>hello.liquid</code>:</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// 设置模板查找目录</span></span><br><span class="line"> extname: <span class="string">'.liquid'</span> <span class="comment">// 添加后缀，默认为 "" 表示不添加后缀</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// 将会读取并渲染 `views/hello.liquid`</span></span><br><span class="line">engine.renderFile(<span class="string">"hello"</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>}).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// 设置模板查找目录</span></span><br><span class="line"> <span class="attr">extname</span>: <span class="string">'.liquid'</span> <span class="comment">// 添加后缀，默认为 "" 表示不添加后缀</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// 将会读取并渲染 `views/hello.liquid`</span></span><br><span class="line">engine.renderFile(<span class="string">"hello"</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>}).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>执行 <code>node index.js</code> 你将会得到类似这样的输出：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">name: alice</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">name: alice</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="模板查找" class="article-heading"><a href="#模板查找" class="headerlink" title="模板查找"></a>模板查找<a class="article-anchor" href="#模板查找" aria-hidden="true"></a></h2><p>传递给 <a href="../../api/classes/liquid_.liquid.html#renderFile">.renderFile()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFile">.parseFile()</a> <a href="../../api/classes/liquid_.liquid.html#renderFilesync">.renderFileSync()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFileSync">.parseFileSync()</a> 这些 API 的模板名，<br>以及传递给 <a href="https://help.shopify.com/themes/liquid/tags/theme-tags#include" target="_blank" rel="noopener external nofollow noreferrer">include</a>, <a href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout" target="_blank" rel="noopener external nofollow noreferrer">layout</a> 这些标签的模板名，将会根据 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 选项来查找。</p>
|
||||
<h2 id="模板查找" class="article-heading"><a href="#模板查找" class="headerlink" title="模板查找"></a>模板查找<a class="article-anchor" href="#模板查找" aria-hidden="true"></a></h2><p>传递给 <a href="../../api/classes/liquid_.liquid.html#renderFile">.renderFile()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFile">.parseFile()</a> <a href="../../api/classes/liquid_.liquid.html#renderFilesync">.renderFileSync()</a>, <a href="../../api/classes/liquid_.liquid.html#parseFileSync">.parseFileSync()</a> 这些 API 的模板名，<br>以及传递给 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/themes/liquid/tags/theme-tags#include">include</a>, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout">layout</a> 这些标签的模板名，将会根据 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> 选项来查找。</p>
|
||||
<p><code>root</code> 可以设置为 <code>string</code> 类型的路径（见上面的例子）， 也可以设置为一个字符串数组表示路径列表，这时 LiquidJS 将会按顺序去查找。例如：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> extname: <span class="string">'.liquid'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> <span class="attr">extname</span>: <span class="string">'.liquid'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note tip"><strong class="note-title">相对路径</strong><p><code>root</code> 中使用相对路径将会被解释为相对于 <code>cwd()</code>（当前工作目录）。</p>
|
||||
</blockquote>
|
||||
|
||||
当模板中引入子模板时（`{% render "foo" %}`），或者调用 `.renderFile('foo')` 时，LiquidJS 会依次查看如下几个文件，并渲染第一个存在的文件：
|
||||
|
||||
- `cwd()`/views/foo.liquid
|
||||
- `cwd()`/views/partials/foo.liquid
|
||||
|
||||
如果上述文件都不存在，将会抛出一个 `ENOENT` 错误。
|
||||
|
||||
<p>当模板中引入子模板时（<code>{% render "foo" %}</code>），或者调用 <code>.renderFile('foo')</code> 时，LiquidJS 会依次查看如下几个文件，并渲染第一个存在的文件：</p>
|
||||
<ul>
|
||||
<li><code>cwd()</code>/views/foo.liquid</li>
|
||||
<li><code>cwd()</code>/views/partials/foo.liquid</li>
|
||||
</ul>
|
||||
<p>如果上述文件都不存在，将会抛出一个 <code>ENOENT</code> 错误。</p>
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>在 Node.js 示例中展示了怎么渲染一个文件 <a href="https://github.com/harttle/liquidjs/blob/master/demo/nodejs/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/nodejs/</a>。</p>
|
||||
</blockquote>
|
||||
|
||||
<p>在浏览器中使用 LiquidJS 时，比如当前路径为 <a href="https://example.com/bar/index.html" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/index.html</a>，只会去 <code>root</code> 数组中的第一个路径下获取，也就是这个文件：</p>
|
||||
<p>在浏览器中使用 LiquidJS 时，比如当前路径为 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/index.html">https://example.com/bar/index.html</a>，只会去 <code>root</code> 数组中的第一个路径下获取，也就是这个文件：</p>
|
||||
<ul>
|
||||
<li><a href="https://example.com/bar/foo.liquid" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/foo.liquid</a></li>
|
||||
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/foo.liquid">https://example.com/bar/foo.liquid</a></li>
|
||||
</ul>
|
||||
<p>如果获取失败（比如得到一个 404/500 错误）或网络错误，将会抛出一个 <code>ENOENT</code> 错误。</p>
|
||||
<blockquote class="note info"><strong class="note-title">示例</strong><p>在这个示例中展示了如何从网络获取并渲染一个模板文件 <a href="https://github.com/harttle/liquidjs/blob/master/demo/browser/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/browser/</a>。</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="文件系统接口" class="article-heading"><a href="#文件系统接口" class="headerlink" title="文件系统接口"></a>文件系统接口<a class="article-anchor" href="#文件系统接口" aria-hidden="true"></a></h2><p>LiquidJS 定义了一个文件系统接口（<a href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/ifs.ts</a>），在 Node.js 下的默认实现是 <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/node.ts</a>，在浏览器打包文件中的默认实现是 <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/browser.ts</a>。<br>你可以通过创建 <code>Liquid</code> 时的 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-fs">fs</a> 参数来指定一个自定义实现来指定如何读取模板文件。比如从数据库里读取：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> fs: {</span><br><span class="line"> readFileSync (file) {</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> readFile (file) {</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> },</span><br><span class="line"> existsSync () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> exists () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> resolve(root, file, ext) {</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
<h2 id="文件系统接口" class="article-heading"><a href="#文件系统接口" class="headerlink" title="文件系统接口"></a>文件系统接口<a class="article-anchor" href="#文件系统接口" aria-hidden="true"></a></h2><p>LiquidJS 定义了一个文件系统接口（<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts">src/fs/ifs.ts</a>），在 Node.js 下的默认实现是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts">src/fs/node.ts</a>，在浏览器打包文件中的默认实现是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts">src/fs/browser.ts</a>。<br>你可以通过创建 <code>Liquid</code> 时的 <a href="../../api/interfaces/liquid_options_.liquidoptions.html#Optional-fs">fs</a> 参数来指定一个自定义实现来指定如何读取模板文件。比如从数据库里读取：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">fs</span>: {</span><br><span class="line"> readFileSync (file) {</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> readFile (file) {</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> },</span><br><span class="line"> existsSync () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> exists () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">resolve</span>(<span class="params">root, file, ext</span>)</span> {</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="options.html" class="article-footer-prev" title="选项"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="partials-and-layouts.html" class="article-footer-next" title="引用/继承"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -144,7 +143,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#渲染一个文件"><span class="toc-text">渲染一个文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#模板查找"><span class="toc-text">模板查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文件系统接口"><span class="toc-text">文件系统接口</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6"><span class="toc-text">渲染一个文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E6%9F%A5%E6%89%BE"><span class="toc-text">模板查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F%E6%8E%A5%E5%8F%A3"><span class="toc-text">文件系统接口</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user