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

Deploying to gh-pages from @ harttle/liquidjs@70fdb7af48 🚀

Browse Source
This commit is contained in:
harttle
2021-09-30 16:55:43 +00:00
parent cec0814a9b
commit 9a2a2bfd55
515 changed files with 11719 additions and 9833 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zh-cn/tutorials/caching.html
+9 -9
View File
@@ -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,7 +87,7 @@
<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/caching.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/caching.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
@@ -95,19 +95,19 @@
<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>
<p>从字符串解析：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parse(<span class="string">'&#123;&#123;name | capitalize&#125;&#125;'</span>);</span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'bob'</span>&#125;) <span class="comment">// 'Bob'</span></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> tpl = engine.parse(<span class="string">&#x27;&#123;&#123;name | capitalize&#125;&#125;&#x27;</span>);</span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;) <span class="comment">// &#x27;Alice&#x27;</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>&#125;) <span class="comment">// &#x27;Bob&#x27;</span></span><br></pre></td></tr></table></figure>
<p>从文件解析：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parseFileSync(<span class="string">'hello'</span>); <span class="comment">// contents of `hello.liquid`: &#123;&#123;name&#125;&#125;</span></span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'bob'</span>&#125;) <span class="comment">// 'Bob'</span></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> tpl = engine.parseFileSync(<span class="string">&#x27;hello&#x27;</span>); <span class="comment">// contents of `hello.liquid`: &#123;&#123;name&#125;&#125;</span></span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;) <span class="comment">// &#x27;Alice&#x27;</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>&#125;) <span class="comment">// &#x27;Bob&#x27;</span></span><br></pre></td></tr></table></figure>
<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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> cache: <span class="literal">true</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 将会解析 hello.liquid 然后用 &#123;name: 'alice'&#125; 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 会找到上次 hello.liquid 解析的结果模板，再用 &#123;name: 'bob'&#125; 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, &#123;<span class="attr">name</span>: <span class="string">'bob'</span>&#125;)</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> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">cache</span>: <span class="literal">true</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 将会解析 hello.liquid 然后用 &#123;name: &#x27;alice&#x27;&#125; 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">&#x27;hello&#x27;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// LiquidJS 会找到上次 hello.liquid 解析的结果模板，再用 &#123;name: &#x27;bob&#x27;&#125; 渲染它</span></span><br><span class="line">engine.renderFileSync(<span class="string">&#x27;hello&#x27;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>&#125;)</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="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>
@@ -116,7 +116,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="#cache-选项"><span class="toc-text">cache 选项</span></a></li></ol>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%8B%E5%8A%A8%E7%BC%93%E5%AD%98"><span class="toc-text">手动缓存</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#cache-%E9%80%89%E9%A1%B9"><span class="toc-text">cache 选项</span></a></li></ol>
</div>
<a href="#" id="article-toc-top">回到顶部</a>
</div>