mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
Deploying to gh-pages from @ harttle/liquidjs@b69e62c2fd 🚀
This commit is contained in:
harttle
@@ -48,7 +48,7 @@
|
||||
<a href="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -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.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="register-filters-tags.html" class="article-footer-prev" title="Register Filters/Tags"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="parse-parameters.html" class="article-footer-next" title="Parse Parameters"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -95,7 +95,7 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>In a typical website project, we’ll have a directory of view templates and they’ll be rendered multiple times. In production environment the template files are not likely to be changed over time (other than re-deployments). Thus it makes sense to cache the file contents and the parsed templates (in a kind of AST) to improve performance.</p>
|
||||
<p>LiquidJS provides multiple ways to cache the parsed templates to improve performance.</p>
|
||||
<h2 id="Programmaticly" class="article-heading"><a href="#Programmaticly" class="headerlink" title="Programmaticly"></a>Programmaticly<a class="article-anchor" href="#Programmaticly" aria-hidden="true"></a></h2><p>The <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> APIs are used to parse templates from string or files. The result template can be then rendered multiple times with different context.</p>
|
||||
<h2 id="Programmaticly" class="article-heading"><a href="#Programmaticly" class="headerlink" title="Programmaticly"></a>Programmaticly<a class="article-anchor" href="#Programmaticly" aria-hidden="true"></a></h2><p>The <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> APIs are used to parse templates from string or files. The result template can be then rendered multiple times with different context.</p>
|
||||
<p>Parse from string:</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>The template string/file is parsed only once and renderd multiple times using different context. Templates for different files can be stored into a <code>Map</code> and can be retrieved directly for subsequent renders.</p>
|
||||
<h2 id="The-cache-Option" class="article-heading"><a href="#The-cache-Option" class="headerlink" title="The cache Option"></a>The <code>cache</code> Option<a class="article-anchor" href="#The-cache-Option" aria-hidden="true"></a></h2><p>The <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-cache">cache option</a> can be set to instruct liquidjs to use cached parsed templates each time you call <a href="../api/classes/liquid_.liquid.html#renderFile">renderFile</a> or <a href="../api/classes/liquid_.liquid.html#renderFilesync">renderFileSync</a>.</p>
|
||||
<h2 id="The-cache-Option" class="article-heading"><a href="#The-cache-Option" class="headerlink" title="The cache Option"></a>The <code>cache</code> Option<a class="article-anchor" href="#The-cache-Option" aria-hidden="true"></a></h2><p>The <a href="/api/interfaces/LiquidOptions.html#cache">cache option</a> can be set to instruct liquidjs to use cached parsed templates each time you call <a href="/api/classes/Liquid.html#renderFile">renderFile</a> or <a href="/api/classes/Liquid.html#renderFileSync">renderFileSync</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> <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.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="use-in-expressjs.html" class="article-footer-prev" title="Use in Express.js"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="register-filters-tags.html" class="article-footer-next" title="Register Filters/Tags"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -647,7 +647,7 @@
|
||||
</script></li></ul>
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:43:32.585Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:52:09.620Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="migrate-to-9.html" class="article-footer-prev" title="Migrate to LiquidJS 9"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="differences.html" class="article-footer-next" title="Differences with Shopify/liquid"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -110,7 +110,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="differences.html" class="article-footer-prev" title="Differences with Shopify/liquid"><i class="icon-chevron-left"></i><span>Prev</span></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -150,7 +150,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -122,7 +122,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="changelog.html" class="article-footer-prev" title="Changelog"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="contribution-guidelines.html" class="article-footer-next" title="Contribution Guidelines"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -162,7 +162,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link active">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link active">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -126,7 +126,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="setup.html" class="article-footer-next" title="Setup"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link active">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link active">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -117,7 +117,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="truthy-and-falsy.html" class="article-footer-prev" title="Truthy and Falsy"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="changelog.html" class="article-footer-next" title="Changelog"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -107,7 +107,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="plugins.html" class="article-footer-prev" title="Plugins"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="truthy-and-falsy.html" class="article-footer-next" title="Truthy and Falsy"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -93,13 +93,13 @@
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>The <a href="../api/classes/liquid_.liquid.html">Liquid</a> constructor accepts a plain object as options to define the behavior of LiquidJS. All of these options are optional thus we can specify any of them, for example the <code>cache</code> option:</p>
|
||||
<p>The <a href="/api/classes/Liquid.html">Liquid</a> constructor accepts a plain object as options to define the behavior of LiquidJS. All of these options are optional thus we can specify any of them, for example the <code>cache</code> option:</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 Document</strong><p>Following is an overview for all the options, for exact types and signatures please refer to <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 Document</strong><p>Following is an overview for all the options, for exact types and signatures please refer to <a href="https://liquidjs.com/api/interfaces/LiquidOptions.html" target="_self">LiquidOptions | API</a>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="cache" class="article-heading"><a href="#cache" class="headerlink" title="cache"></a>cache<a class="article-anchor" href="#cache" aria-hidden="true"></a></h2><p><strong>cache</strong> is used to improve performance by caching previously parsed template structures, specially in cases when we’re repeatedly parse or render files.</p>
|
||||
@@ -123,7 +123,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> is used to enable Jekyll-like include syntax. Defaults to <code>false</code>, when set to <code>true</code>:</p>
|
||||
<p><a href="/api/interfaces/LiquidOptions.html#jekyllInclude">jekyllInclude</a> is used to enable Jekyll-like include syntax. Defaults to <code>false</code>, when set to <code>true</code>:</p>
|
||||
<ul>
|
||||
<li>Filename will be static: <code>dynamicPartials</code> now defaults to <code>false</code> (instead of <code>true</code>). And you can set <code>dynamicPartials</code> back to <code>true</code>.</li>
|
||||
<li>Use <code>=</code> instead of <code>:</code> to separate parameter key-values.</li>
|
||||
@@ -168,7 +168,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="setup.html" class="article-footer-prev" title="Setup"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="render-file.html" class="article-footer-next" title="Render Files"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -208,7 +208,7 @@
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -114,7 +114,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<p>The following modified template also contains 3 values to random from, but they’re values instead of static strings. The first one is string literal, second one is an identifier, third one is a property access sequence containing two identifiers.</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>It can be tricky to parse all these cases manually, but there’s a <a href="/api/classes/parser_tokenizer_.tokenizer.html">Tokenizer</a> class in LiquidJS you can make use of.</p>
|
||||
<p>It can be tricky to parse all these cases manually, but there’s a <a href="/api/classes/Tokenizer.html">Tokenizer</a> class in LiquidJS you can make use of.</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>
|
||||
<span class="token function">parse</span><span class="token punctuation">(</span><span class="token parameter">tagToken</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -138,7 +138,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<blockquote class="note info"><strong class="note-title">Async ans Promises</strong><p>Async calls in LiquidJS are implemented by generators directly, for we can call generators in synchronous manner so this tag implementation is also valid for <code>renderSync()</code>, <code>parseAndRenderSync()</code>, <code>renderFileSync()</code>. If you need to await a promise in tag implementation, simply replace <code>await somePromise</code> with <code>yield somePromise</code> and keep <code>* render()</code> instead of <code>async render()</code> will do the trick. See <a href="/tutorials/sync-and-async.html">Sync and Async</a> for more details.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="Parse-Key-Value-Pairs-as-Named-Parameters" class="article-heading"><a href="#Parse-Key-Value-Pairs-as-Named-Parameters" class="headerlink" title="Parse Key-Value Pairs as Named Parameters"></a>Parse Key-Value Pairs as Named Parameters<a class="article-anchor" href="#Parse-Key-Value-Pairs-as-Named-Parameters" aria-hidden="true"></a></h2><p>Named parameters become very handy when there’re optional parameters or lots of parameters, in which case the order of parameters is not important. This is exactly what <a href="/api/classes/template_tag_hash_.hash.html">Hash</a> class is invented for.</p>
|
||||
<h2 id="Parse-Key-Value-Pairs-as-Named-Parameters" class="article-heading"><a href="#Parse-Key-Value-Pairs-as-Named-Parameters" class="headerlink" title="Parse Key-Value Pairs as Named Parameters"></a>Parse Key-Value Pairs as Named Parameters<a class="article-anchor" href="#Parse-Key-Value-Pairs-as-Named-Parameters" aria-hidden="true"></a></h2><p>Named parameters become very handy when there’re optional parameters or lots of parameters, in which case the order of parameters is not important. This is exactly what <a href="/api/classes/Hash.html">Hash</a> class is invented for.</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>In the above example, we’re trying to generate a random number in the range [2, max]. We’ll use <code>Hash</code> to parse <code>from</code> and <code>to</code> parameters.</p>
|
||||
@@ -162,7 +162,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.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="access-scope-in-filters.html" class="article-footer-prev" title="Access Scope in Filters"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="render-tag-content.html" class="article-footer-next" title="Render Tag Content"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -202,7 +202,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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -131,7 +131,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.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="render-file.html" class="article-footer-prev" title="Render Files"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="use-in-expressjs.html" class="article-footer-next" title="Use in Express.js"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -171,7 +171,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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -94,7 +94,7 @@
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>A number of tags and filters can be encapsulated into a <strong>plugin</strong>, which will be typically installed via npm. This article provides information about how to create and use a plugin.</p>
|
||||
<h2 id="Write-a-Plugin" class="article-heading"><a href="#Write-a-Plugin" class="headerlink" title="Write a Plugin"></a>Write a Plugin<a class="article-anchor" href="#Write-a-Plugin" aria-hidden="true"></a></h2><p>A liquidjs plugin is simple function which takes the <a href="../api/classes/liquid_.liquid.html">Liquid class</a> as the first parameter and the Liquid instance for <code>this</code>. We can call liquidjs APIs on <code>this</code> to make certain changes, especially <a href="/harttle/liquidjs/wiki/Register-Filters-Tags">register filters and tags</a>.</p>
|
||||
<h2 id="Write-a-Plugin" class="article-heading"><a href="#Write-a-Plugin" class="headerlink" title="Write a Plugin"></a>Write a Plugin<a class="article-anchor" href="#Write-a-Plugin" aria-hidden="true"></a></h2><p>A liquidjs plugin is simple function which takes the <a href="/api/classes/Liquid.html">Liquid class</a> as the first parameter and the Liquid instance for <code>this</code>. We can call liquidjs APIs on <code>this</code> to make certain changes, especially <a href="/harttle/liquidjs/wiki/Register-Filters-Tags">register filters and tags</a>.</p>
|
||||
<p>Now we’ll make a plugin to upper case every letter of the input, save the following snippet to <code>upup.js</code>:</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
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="whitespace-control.html" class="article-footer-prev" title="Whitespace Control"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="operators.html" class="article-footer-next" title="Operators"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -162,7 +162,7 @@ engine
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -153,7 +153,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
engine<span class="token punctuation">.</span><span class="token function">registerFilter</span><span class="token punctuation">(</span><span class="token string">'plus'</span><span class="token punctuation">,</span> <span class="token function">disabledFilter</span><span class="token punctuation">(</span><span class="token string">'plus'</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></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="caching.html" class="article-footer-prev" title="Caching"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="access-scope-in-filters.html" class="article-footer-next" title="Access Scope in Filters"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -193,7 +193,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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>For a typical project there could be a directory of template files, you’ll need to set the <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">template root</a> and call <a href="../api/classes/liquid_.liquid.html#renderFile">renderFile</a> or <a href="../api/classes/liquid_.liquid.html#renderFilesync">renderFileSync</a> to render a specific file.</p>
|
||||
<p>For a typical project there could be a directory of template files, you’ll need to set the <a href="/api/interfaces/LiquidOptions.html#root">template root</a> and call <a href="/api/classes/Liquid.html#renderFile">renderFile</a> or <a href="/api/classes/Liquid.html#renderFileSync">renderFileSync</a> to render a specific file.</p>
|
||||
<h2 id="Render-a-File" class="article-heading"><a href="#Render-a-File" class="headerlink" title="Render a File"></a>Render a File<a class="article-anchor" href="#Render-a-File" aria-hidden="true"></a></h2><p>For example you have a directory of templates like this:</p>
|
||||
<pre class="line-numbers language-none"><code class="language-none">.
|
||||
├── index.js
|
||||
@@ -114,7 +114,7 @@ engine
|
||||
<pre class="line-numbers language-none"><code class="language-none">> node index.js
|
||||
name: alice<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
|
||||
<h2 id="Template-Lookup" class="article-heading"><a href="#Template-Lookup" class="headerlink" title="Template Lookup"></a>Template Lookup<a class="article-anchor" href="#Template-Lookup" aria-hidden="true"></a></h2><p>Template files names passed to <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> APIs,<br>and <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> tags are resolved against <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">the root option</a>.</p>
|
||||
<h2 id="Template-Lookup" class="article-heading"><a href="#Template-Lookup" class="headerlink" title="Template Lookup"></a>Template Lookup<a class="article-anchor" href="#Template-Lookup" aria-hidden="true"></a></h2><p>Template files names passed to <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> APIs,<br>and <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> tags are resolved against <a href="/api/interfaces/LiquidOptions.html#root">the root option</a>.</p>
|
||||
<p>It can be a string-typed path (see above example), or a list of root directories, in which case templates will be looked up in that order. e.g.</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>
|
||||
@@ -135,8 +135,8 @@ name: alice<span aria-hidden="true" class="line-numbers-rows"><span></span><span
|
||||
<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>If fetch fails, a 404/500 error or network failures for example, an <code>ENOENT</code> error will be throwed.<br>Here’s a demo for browsers: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/demo/browser">demo/browser</a>.</p>
|
||||
<h2 id="Abstract-File-System" class="article-heading"><a href="#Abstract-File-System" class="headerlink" title="Abstract File System"></a>Abstract File System<a class="article-anchor" href="#Abstract-File-System" aria-hidden="true"></a></h2><p>LiquidJS defines an abstract file system interface in <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/fs.ts">src/fs/fs.ts</a> and the default implementation is <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> for Node.js and <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> for the browser bundle.</p>
|
||||
<p>The <code>Liquid</code> constructor provides a <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-fs">fs</a> option to specify the file system implementation. It’s supposed to be used to define customized template fetching logic, i.e. fetch template from a database table, like:</p>
|
||||
<h2 id="Abstract-File-System" class="article-heading"><a href="#Abstract-File-System" class="headerlink" title="Abstract File System"></a>Abstract File System<a class="article-anchor" href="#Abstract-File-System" aria-hidden="true"></a></h2><p>LiquidJS defines an abstract file system interface in <a href="/api/interfaces/FS.html">src/fs/fs.ts</a> and the default implementation is <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/fs-impl.ts">src/fs/fs-impl.ts</a> for Node.js and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/fs-impl-browser.ts">src/build/fs-impl-browser.ts</a> for the browser bundle.</p>
|
||||
<p>The <code>Liquid</code> constructor provides a <a href="/api/interfaces/LiquidOptions.html#fs">fs</a> option to specify the file system implementation. It’s supposed to be used to define customized template fetching logic, i.e. fetch template from a database table, like:</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">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 @@ name: alice<span aria-hidden="true" class="line-numbers-rows"><span></span><span
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="options.html" class="article-footer-prev" title="Options"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="partials-and-layouts.html" class="article-footer-next" title="Includes and Layouts"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -207,7 +207,7 @@ name: alice<span aria-hidden="true" class="line-numbers-rows"><span></span><span
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -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>Expected output:</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> can be async, we need <code>yield</code> to wait it complete. More details on async in LiquidJS, please refer to <a href="./sync-and-async.html">Sync and Async</a>. Other parts of <code>render()</code> method is quite straightforward. Here’s a JSFiddle version: <a target="_blank" rel="noopener external nofollow noreferrer" href="http://jsfiddle.net/por0zcn1/3/">http://jsfiddle.net/por0zcn1/3/</a></p>
|
||||
<h2 id="Using-ParseStream" class="article-heading"><a href="#Using-ParseStream" class="headerlink" title="Using ParseStream"></a>Using ParseStream<a class="article-anchor" href="#Using-ParseStream" aria-hidden="true"></a></h2><p>When it comes to complex tags like <a href="../tags/for.html">for</a> and <a href="../tags/if.html">if</a>, the <code>parse()</code> can be very complicated. There’s a <a href="../api/classes/parser_parse_stream_.parsestream.html">ParseStream</a> utility to organize the <code>parse()</code> in event-based style. Following is a re-written <code>parse()</code> using <code>ParseStream</code> and does exactly the same as above example.</p>
|
||||
<h2 id="Using-ParseStream" class="article-heading"><a href="#Using-ParseStream" class="headerlink" title="Using ParseStream"></a>Using ParseStream<a class="article-anchor" href="#Using-ParseStream" aria-hidden="true"></a></h2><p>When it comes to complex tags like <a href="../tags/for.html">for</a> and <a href="../tags/if.html">if</a>, the <code>parse()</code> can be very complicated. There’s a <a href="/api/classes/ParseStream.html">ParseStream</a> utility to organize the <code>parse()</code> in event-based style. Following is a re-written <code>parse()</code> using <code>ParseStream</code> and does exactly the same as above example.</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>Expected outputs:</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>As you’ve noticed, there’s an additional <code>repeat.i</code> in the context of <code>repeat</code>. That is implemented by manipulating the <em>Context</em>.</p>
|
||||
@@ -189,7 +189,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="parse-parameters.html" class="article-footer-prev" title="Parse Parameters"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="sync-and-async.html" class="article-footer-next" title="Sync and Async"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
+13
-13
@@ -48,7 +48,7 @@
|
||||
<a href="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -95,7 +95,7 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>In case you’re not familiar with Liquid Template Language, see <a href="./intro-to-liquid.html">Introduction to Liquid Template Language</a>.</p>
|
||||
<h2 id="LiquidJS-in-Node-js" class="article-heading"><a href="#LiquidJS-in-Node-js" class="headerlink" title="LiquidJS in Node.js"></a>LiquidJS in Node.js<a class="article-anchor" href="#LiquidJS-in-Node-js" aria-hidden="true"></a></h2><p>Install via 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="LiquidJS-in-Browsers" class="article-heading"><a href="#LiquidJS-in-Browsers" class="headerlink" title="LiquidJS in Browsers"></a>LiquidJS in Browsers<a class="article-anchor" href="#LiquidJS-in-Browsers" aria-hidden="true"></a></h2><p>Pre-built UMD bundles are also available:</p>
|
||||
<pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment"><!--for production--></span>
|
||||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token comment"><!--for production--></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.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"><!--for development--></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 aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
@@ -131,32 +131,32 @@ engine
|
||||
</blockquote>
|
||||
|
||||
<h2 id="LiquidJS-in-CLI" class="article-heading"><a href="#LiquidJS-in-CLI" class="headerlink" title="LiquidJS in CLI"></a>LiquidJS in CLI<a class="article-anchor" href="#LiquidJS-in-CLI" aria-hidden="true"></a></h2><p>LiquidJS can also be used to render a template directly from CLI using <code>npx</code>:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template <span class="token string">'{{"hello" | capitalize}}'</span><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">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can either pass the template inline (as shown above) or you can read it from a file by using the <code>@</code> character followed by a path, like so:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template @./some-template.liquid<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">npx liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can also use the <code>@-</code> syntax to read the template from <code>stdin</code>:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">echo</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token operator">|</span> npx liquidjs --template @-<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 builtin class-name">echo</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token operator">|</span> npx liquidjs <span class="token parameter variable">--template</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>A context can be passed in the same ways (i.e. inline, from a path or piped through <code>stdin</code>). The following three are equivalent:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template <span class="token string">'Hello, {{ name }}!'</span> --context <span class="token string">'{"name": "Snake"}'</span>
|
||||
npx liquidjs --template <span class="token string">'Hello, {{ name }}!'</span> --context @./some-context.json
|
||||
<span class="token builtin class-name">echo</span> <span class="token string">'{"name": "Snake"}'</span> <span class="token operator">|</span> npx liquidjs --template <span class="token string">'Hello, {{ name }}!'</span> --context @-<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> <span class="token string">'{"name": "Snake"}'</span>
|
||||
npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @./some-context.json
|
||||
<span class="token builtin class-name">echo</span> <span class="token string">'{"name": "Snake"}'</span> <span class="token operator">|</span> npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>Note that you can only use the <code>stdin</code> specifier <code>@-</code> for a single argument. If you try to use it for both <code>--template</code> and <code>--context</code> you will get an error.</p>
|
||||
<p>The rendered output is written to <code>stdout</code> by default, but you can also specify an output file (if the file exists, it will be overwritten):</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template <span class="token string">'{{"hello" | capitalize}}'</span> --output ./hello.txt<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">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token parameter variable">--output</span> ./hello.txt<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can also pass a number of options to customize template rendering behavior. For example, the <code>--js-truthy</code> option can be used to enable JavaScript truthiness:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template @./some-template.liquid --js-truthy<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">npx liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid --js-truthy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>Most of the <a href="./options.md">options available through the JavaScript API</a> are also available from the CLI. For help on available options, use <code>npx liquidjs --help</code>.</p>
|
||||
<h2 id="Miscellaneous" class="article-heading"><a href="#Miscellaneous" class="headerlink" title="Miscellaneous"></a>Miscellaneous<a class="article-anchor" href="#Miscellaneous" aria-hidden="true"></a></h2><p>A ReactJS demo is also added by <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/stevenanthonyrevo">@stevenanthonyrevo</a>, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/">liquidjs/demo/reactjs/</a>.</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="intro-to-liquid.html" class="article-footer-prev" title="Intro to Liquid"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="options.html" class="article-footer-next" title="Options"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -196,7 +196,7 @@ npx liquidjs --template <span class="token string">'Hello, {{ name 
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -94,7 +94,7 @@
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>LiquidJS supports both sync and async evaluate, and can be used with Promises. To reuse the same set of tag/filter implementations in both sync and async, LiquidJS tags are implemented as generators.</p>
|
||||
<h2 id="Sync-and-Async-API" class="article-heading"><a href="#Sync-and-Async-API" class="headerlink" title="Sync and Async API"></a>Sync and Async API<a class="article-anchor" href="#Sync-and-Async-API" aria-hidden="true"></a></h2><p>All major methods on <a href="/api/classes/liquid_.liquid.html">Liquid</a> supports both sync and async. These methods return Promises:</p>
|
||||
<h2 id="Sync-and-Async-API" class="article-heading"><a href="#Sync-and-Async-API" class="headerlink" title="Sync and Async API"></a>Sync and Async API<a class="article-anchor" href="#Sync-and-Async-API" aria-hidden="true"></a></h2><p>All major methods on <a href="/api/classes/Liquid.html">Liquid</a> supports both sync and async. These methods return Promises:</p>
|
||||
<ul>
|
||||
<li><code>render()</code></li>
|
||||
<li><code>renderFile()</code></li>
|
||||
@@ -144,7 +144,7 @@ engine<span class="token punctuation">.</span><span class="token function">regis
|
||||
<blockquote class="note info"><strong class="note-title">Non Sync-Compatible Tags</strong><p>Non <em>sync-compatible</em> tags are also valid tags, will work just fine for asynchronous API calls. When called synchronously, tags that return a <code>Promise</code> will be rendered as <code>[object Promise]</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="Convert-LiquidJS-async-Generator-to-Promise" class="article-heading"><a href="#Convert-LiquidJS-async-Generator-to-Promise" class="headerlink" title="Convert LiquidJS async Generator to Promise"></a>Convert LiquidJS async Generator to Promise<a class="article-anchor" href="#Convert-LiquidJS-async-Generator-to-Promise" aria-hidden="true"></a></h2><p>You can convert a Generator to Promise by <a href="/api/modules/liquid_.html#toPromise">toPromise</a>, for example:</p>
|
||||
<h2 id="Convert-LiquidJS-async-Generator-to-Promise" class="article-heading"><a href="#Convert-LiquidJS-async-Generator-to-Promise" class="headerlink" title="Convert LiquidJS async Generator to Promise"></a>Convert LiquidJS async Generator to Promise<a class="article-anchor" href="#Convert-LiquidJS-async-Generator-to-Promise" aria-hidden="true"></a></h2><p>You can convert a Generator to Promise by <a href="/api/functions/toPromise.html">toPromise</a>, for example:</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>
|
||||
@@ -181,7 +181,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.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="render-tag-content.html" class="article-footer-prev" title="Render Tag Content"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="whitespace-control.html" class="article-footer-next" title="Whitespace Control"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -221,7 +221,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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -227,7 +227,7 @@
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="operators.html" class="article-footer-prev" title="Operators"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="migrate-to-9.html" class="article-footer-next" title="Migrate to LiquidJS 9"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -105,7 +105,7 @@ app<span class="token punctuation">.</span><span class="token function">set</spa
|
||||
<blockquote class="note info"><strong class="note-title">Working Demo</strong><p>Here’s a working demo for LiquidJS usage in Express.js: <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="Template-Lookup" class="article-heading"><a href="#Template-Lookup" class="headerlink" title="Template Lookup"></a>Template Lookup<a class="article-anchor" href="#Template-Lookup" aria-hidden="true"></a></h2><p>The <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">root</a> option will continue to work as templates root, as you can see in <a href="./render-a-file.html">Render A Template File</a>. Additionally, the <a target="_blank" rel="noopener external nofollow noreferrer" href="http://expressjs.com/en/guide/using-template-engines.html"><code>views</code></a> option in express.js (as shown above) will also be respected. Say you have a template directory like:</p>
|
||||
<h2 id="Template-Lookup" class="article-heading"><a href="#Template-Lookup" class="headerlink" title="Template Lookup"></a>Template Lookup<a class="article-anchor" href="#Template-Lookup" aria-hidden="true"></a></h2><p>The <a href="/api/interfaces/LiquidOptions.html#root">root</a> option will continue to work as templates root, as you can see in <a href="./render-a-file.html">Render A Template File</a>. Additionally, the <a target="_blank" rel="noopener external nofollow noreferrer" href="http://expressjs.com/en/guide/using-template-engines.html"><code>views</code></a> option in express.js (as shown above) will also be respected. Say you have a template directory like:</p>
|
||||
<pre class="line-numbers language-none"><code class="language-none">.
|
||||
├── views1/
|
||||
│ └── hello.liquid
|
||||
@@ -126,7 +126,7 @@ 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="Caching" class="article-heading"><a href="#Caching" class="headerlink" title="Caching"></a>Caching<a class="article-anchor" href="#Caching" aria-hidden="true"></a></h2><p>Simply setting the <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-cache">cache option</a> to true will enable template caching, as explained in <a href="./caching.html">Caching</a>. It’s recommended to enable cache in production environment, which can be done by:</p>
|
||||
<h2 id="Caching" class="article-heading"><a href="#Caching" class="headerlink" title="Caching"></a>Caching<a class="article-anchor" href="#Caching" aria-hidden="true"></a></h2><p>Simply setting the <a href="/api/interfaces/LiquidOptions.html#cache">cache option</a> to true will enable template caching, as explained in <a href="./caching.html">Caching</a>. It’s recommended to enable cache in production environment, which can be done by:</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>
|
||||
@@ -135,7 +135,7 @@ res<span class="token punctuation">.</span><span class="token function">render</
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="partials-and-layouts.html" class="article-footer-prev" title="Includes and Layouts"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="caching.html" class="article-footer-next" title="Caching"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -175,7 +175,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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</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="Search...">
|
||||
@@ -117,12 +117,12 @@ harttle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></s
|
||||
<li><code>trimValueLeft</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> will <strong>NOT</strong> trim any whitespace by default, aka. above options all default to <code>false</code>. For details of these options, see the <a href="../api/interfaces/liquid_options_.liquidoptions.html">options</a>.</p>
|
||||
<h2 id="Greedy-Mode" class="article-heading"><a href="#Greedy-Mode" class="headerlink" title="Greedy Mode"></a>Greedy Mode<a class="article-anchor" href="#Greedy-Mode" aria-hidden="true"></a></h2><p>In greedy mode (enabled by the <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-greedy">greedy option</a>), all consecutive whitespace chars (including <code>\n</code>) will be trimmed. Greedy mode is enabled by default to be compliant with <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">shopify/liquid</a>.</p>
|
||||
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">LiquidJS</a> will <strong>NOT</strong> trim any whitespace by default, aka. above options all default to <code>false</code>. For details of these options, see the <a href="/api/interfaces/LiquidOptions.html">options</a>.</p>
|
||||
<h2 id="Greedy-Mode" class="article-heading"><a href="#Greedy-Mode" class="headerlink" title="Greedy Mode"></a>Greedy Mode<a class="article-anchor" href="#Greedy-Mode" aria-hidden="true"></a></h2><p>In greedy mode (enabled by the <a href="/api/interfaces/LiquidOptions.html#greedy">greedy option</a>), all consecutive whitespace chars (including <code>\n</code>) will be trimmed. Greedy mode is enabled by default to be compliant with <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.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="sync-and-async.html" class="article-footer-prev" title="Sync and Async"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="plugins.html" class="article-footer-next" title="Plugins"><span>Next</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="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</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