Labyricorn/liquidjs
1
0
Fork 0
mirror of https://github.com/harttle/liquidjs.git synced 2026-09-15 12:20:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
harttle
2021-09-30 16:55:43 +00:00
parent cec0814a9b
commit 9a2a2bfd55
515 changed files with 11719 additions and 9833 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tutorials/caching.html
+8 -8
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,7 +87,7 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Caching</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/caching.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/caching.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
@@ -95,19 +95,19 @@
<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>
<p>Parse from string:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parse(<span class="string">'&#123;&#123;name | capitalize&#125;&#125;'</span>);</span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'bob'</span>&#125;) <span class="comment">// 'Bob'</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parse(<span class="string">&#x27;&#123;&#123;name | capitalize&#125;&#125;&#x27;</span>);</span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;) <span class="comment">// &#x27;Alice&#x27;</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>&#125;) <span class="comment">// &#x27;Bob&#x27;</span></span><br></pre></td></tr></table></figure>
<p>Parse from file:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parseFileSync(<span class="string">'hello'</span>); <span class="comment">// contents of `hello.liquid`: &#123;&#123;name&#125;&#125;</span></span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;) <span class="comment">// 'Alice'</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">'bob'</span>&#125;) <span class="comment">// 'Bob'</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tpl = engine.parseFileSync(<span class="string">&#x27;hello&#x27;</span>); <span class="comment">// contents of `hello.liquid`: &#123;&#123;name&#125;&#125;</span></span><br><span class="line"></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;) <span class="comment">// &#x27;Alice&#x27;</span></span><br><span class="line">engine.renderSync(tpl, &#123;<span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>&#125;) <span class="comment">// &#x27;Bob&#x27;</span></span><br></pre></td></tr></table></figure>
<p>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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> cache: <span class="literal">true</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// liquidjs parses the hello.liquid, then renders it with &#123;name: 'alice'&#125;</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// liquidjs finds the cached template, then renders it with &#123;name: 'bob'&#125;</span></span><br><span class="line">engine.renderFileSync(<span class="string">'hello'</span>, &#123;<span class="attr">name</span>: <span class="string">'bob'</span>&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">cache</span>: <span class="literal">true</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// liquidjs parses the hello.liquid, then renders it with &#123;name: &#x27;alice&#x27;&#125;</span></span><br><span class="line">engine.renderFileSync(<span class="string">&#x27;hello&#x27;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// liquidjs finds the cached template, then renders it with &#123;name: &#x27;bob&#x27;&#125;</span></span><br><span class="line">engine.renderFileSync(<span class="string">&#x27;hello&#x27;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/contribution-guidelines.html
+12 -11
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,25 +87,26 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Contribution Guideline</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/contribution-guidelines.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/contribution-guidelines.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<h2 id="Star-on-Github-👉" class="article-heading"><a href="#Star-on-Github-👉" class="headerlink" title="Star on Github 👉 "></a>Star on Github 👉 <a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square" alt="harttle/liquidjs"></a><a class="article-anchor" href="#Star-on-Github-👉" aria-hidden="true"></a></h2><p>Staring us is the most important and easiest way to support us: boost its rank and expose it to more people, which in turn makes it better.</p>
<h2 id="Show-Me-Your-Code" class="article-heading"><a href="#Show-Me-Your-Code" class="headerlink" title="Show Me Your Code"></a>Show Me Your Code<a class="article-anchor" href="#Show-Me-Your-Code" aria-hidden="true"></a></h2><p><strong>Code Style</strong>: LiquidJS applies <a href="https://github.com/standard/eslint-config-standard" target="_blank" rel="noopener external nofollow noreferrer">standard</a> and <a href="https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json" target="_blank" rel="noopener external nofollow noreferrer">@typescript-eslint/recommended</a> rules, make sure it’s still valid before commit:</p>
<h2 id="Star-on-Github-👉" class="article-heading"><a href="#Star-on-Github-👉" class="headerlink" title="Star on Github 👉 "></a>Star on Github 👉 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs"><img src="https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square" alt="harttle/liquidjs"></a><a class="article-anchor" href="#Star-on-Github-👉" aria-hidden="true"></a></h2><p>Starring LiquidJS is the most important and easiest way to support us: boost its rank and expose it to more people, which in turn makes it better.</p>
<h2 id="Show-Me-Your-Code" class="article-heading"><a href="#Show-Me-Your-Code" class="headerlink" title="Show Me Your Code"></a>Show Me Your Code<a class="article-anchor" href="#Show-Me-Your-Code" aria-hidden="true"></a></h2><p><strong>Code Style</strong>: LiquidJS applies <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/standard/eslint-config-standard">standard</a> and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/recommended.json">@typescript-eslint/recommended</a> rules, make sure it’s still valid before commit:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm run lint</span><br></pre></td></tr></table></figure>
<p><strong>Testing</strong>: Make sure test cases pass with your patch merged:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm <span class="built_in">test</span></span><br></pre></td></tr></table></figure>
<p><strong>Commit Message</strong>: Please align to <a href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits" target="_blank" rel="noopener external nofollow noreferrer">the Angular Commit Message Guidelines</a>, especially note the <a href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type" target="_blank" rel="noopener external nofollow noreferrer">type identifier</a>, on which semantic-release bot depends.</p>
<h2 id="Financial-Support" class="article-heading"><a href="#Financial-Support" class="headerlink" title="Financial Support"></a>Financial Support<a class="article-anchor" href="#Financial-Support" aria-hidden="true"></a></h2><p>LiquidJS is Open Source and Free and <strong>without</strong> capitalists support and <strong>without</strong> any ADs. To help it live and thrive, consider contribute on <a href="https://opencollective.com/liquidjs/" target="_blank" rel="noopener external nofollow noreferrer">Open Collective</a> or <a href="https://www.patreon.com/harttle" target="_blank" rel="noopener external nofollow noreferrer">Patreon</a>. To acknowledge your contribution, your name and avatar will be listed here and on <a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">Github README</a>.</p>
<p><strong>Commit Message</strong>: Please align to <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits">the Angular Commit Message Guidelines</a>, especially note the <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type">type identifier</a>, on which semantic-release bot depends.</p>
<p><strong>Backward-Compatibility</strong>: please be backward-compatible. LiquidJS is used by multiple layers of softwares, including underlying libraries, compilers, site generators and Web servers. It’s not easy to do a major upgrade for most of them.</p>
<h2 id="Financial-Support" class="article-heading"><a href="#Financial-Support" class="headerlink" title="Financial Support"></a>Financial Support<a class="article-anchor" href="#Financial-Support" aria-hidden="true"></a></h2><p>LiquidJS is Open Source and Free and <strong>without</strong> capitalists support and <strong>without</strong> any ADs. To help it live and thrive, consider contribute on <a target="_blank" rel="noopener external nofollow noreferrer" href="https://opencollective.com/liquidjs/">Open Collective</a> or <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.patreon.com/harttle">Patreon</a>. To acknowledge your contribution, your name and avatar will be listed here and on <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">Github README</a>.</p>
<p><object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object></p>
<p><a href="https://www.patreon.com/bePatron?u=32321060" target="_blank" rel="noopener external nofollow noreferrer"><img src="../icon/[email protected]" alt="Become a Patron!"></a></p>
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.patreon.com/bePatron?u=32321060"><img src="../icon/[email protected]" alt="Become a Patron!"></a></p>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
@@ -114,7 +115,7 @@
<div id="article-toc-inner">
<div id="article-toc-inner-list">
<strong class="sidebar-title">Contents</strong>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Star-on-Github-👉"><span class="toc-text">Star on Github 👉 </span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Show-Me-Your-Code"><span class="toc-text">Show Me Your Code</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Financial-Support"><span class="toc-text">Financial Support</span></a></li></ol>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Star-on-Github-%F0%9F%91%89"><span class="toc-text">Star on Github 👉 </span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Show-Me-Your-Code"><span class="toc-text">Show Me Your Code</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Financial-Support"><span class="toc-text">Financial Support</span></a></li></ol>
</div>
<a href="#" id="article-toc-top">Back to Top</a>
</div>
tutorials/differences.html
+12 -12
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,24 +87,24 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Differences with Shopify/liquid</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/differences.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/differences.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<p>All filters and tags in <a href="https://github.com/Shopify/liquid" target="_blank" rel="noopener external nofollow noreferrer">shopify/liquid</a> are supposed to be built in LiquidJS, but not those business-logic specific tags/filters which are typically from Shopify themes (see <a href="./plugins.html#Plugin-List">Plugins List</a> in case you’re looking for them and feel free to add yours to the list). Though being compatible the Ruby version is one of our priorities, there are still some differences:</p>
<p>All filters and tags in <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">shopify/liquid</a> are supposed to be built in LiquidJS, but not those business-logic specific tags/filters which are typically from Shopify themes (see <a href="./plugins.html#Plugin-List">Plugins List</a> in case you’re looking for them and feel free to add yours to the list). Though being compatible the Ruby version is one of our priorities, there are still some differences:</p>
<ul>
<li>Truthy and Falsy. All values except <code>undefined</code>, <code>null</code>, <code>false</code> are truthy, whereas in Ruby Liquid all except <code>nil</code> and <code>false</code> are truthy. See <a href="https://github.com/harttle/liquidjs/pull/26" target="_blank" rel="noopener external nofollow noreferrer">#26</a>.</li>
<li>Number. In JavaScript we cannot distinguish or convert between <code>float</code> and <code>integer</code>, see <a href="https://github.com/harttle/liquidjs/issues/59" target="_blank" rel="noopener external nofollow noreferrer">#59</a>. And when applied <code>size</code> filter, numbers always return 0, which is 8 for integer in ruby, cause they do not have a <code>length</code> property.</li>
<li><a href="https://github.com/Shopify/liquid/wiki/Introduction-to-Drops" target="_blank" rel="noopener external nofollow noreferrer">.to_liquid()</a> is replaced by <code>.toLiquid()</code></li>
<li><a href="https://www.rubydoc.info/gems/liquid/Liquid/Drop" target="_blank" rel="noopener external nofollow noreferrer">.to_s()</a> is replaced by JavaScript <code>.toString()</code></li>
<li>Truthy and Falsy. All values except <code>undefined</code>, <code>null</code>, <code>false</code> are truthy, whereas in Ruby Liquid all except <code>nil</code> and <code>false</code> are truthy. See <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/26">#26</a>.</li>
<li>Number. In JavaScript we cannot distinguish or convert between <code>float</code> and <code>integer</code>, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/59">#59</a>. And when applied <code>size</code> filter, numbers always return 0, which is 8 for integer in ruby, cause they do not have a <code>length</code> property.</li>
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/wiki/Introduction-to-Drops">.to_liquid()</a> is replaced by <code>.toLiquid()</code></li>
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.rubydoc.info/gems/liquid/Liquid/Drop">.to_s()</a> is replaced by JavaScript <code>.toString()</code></li>
<li>Iteration order for objects. The iteration order of JavaScript objects, and thus LiquidJS objects, is a combination of the insertion order for string keys, and ascending order for number-like keys, while the iteration order of Ruby Hash is simply the insertion order.</li>
<li>Sort stability. The <a href="https://liquidjs.com/filters/sort.html">sort</a> stability is also not defined in both shopify/liquid and LiquidJS, but it’s <a href="https://v8.dev/features/stable-sort" target="_blank" rel="noopener external nofollow noreferrer">considered stable</a> for LiquidJS in Node.js 12+ and Google Chrome 70+.</li>
<li>Trailing unmatched characters inside filters are allowed in shopify/liquid but not in LiquidJS. It means filter arguments without a colon like <code>{{ "a b" | split " "}}</code> will throw an error in LiquidJS. This is intended to improve Liquid usability, see <a href="https://github.com/harttle/liquidjs/issues/208" target="_blank" rel="noopener external nofollow noreferrer">#208</a> and <a href="https://github.com/harttle/liquidjs/issues/212" target="_blank" rel="noopener external nofollow noreferrer">#212</a>.</li>
<li>Sort stability. The <a href="https://liquidjs.com/filters/sort.html">sort</a> stability is also not defined in both shopify/liquid and LiquidJS, but it’s <a target="_blank" rel="noopener external nofollow noreferrer" href="https://v8.dev/features/stable-sort">considered stable</a> for LiquidJS in Node.js 12+ and Google Chrome 70+.</li>
<li>Trailing unmatched characters inside filters are allowed in shopify/liquid but not in LiquidJS. It means filter arguments without a colon like <code>{{ "a b" | split " "}}</code> will throw an error in LiquidJS. This is intended to improve Liquid usability, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/208">#208</a> and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/212">#212</a>.</li>
</ul>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/intro-to-liquid.html
+13 -13
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,37 +87,37 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Introduction to Liquid Template Language</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/intro-to-liquid.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/intro-to-liquid.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<p>LiquidJS is a simple, expressive, safe and shopify compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by Github Pages, Jekyll and Shopify, see <a href="./differences.html">Differences with Shopify/liquid</a>.</p>
<p>LiquidJS is a simple, expressive and safe <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">Shopify</a> / Github Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by Github Pages, Jekyll and Shopify, see <a href="./differences.html">Differences with Shopify/liquid</a>.</p>
<p>LiquidJS syntax is relatively simple. There’re 2 types of markups in LiquidJS:</p>
<ul>
<li><strong>Tags</strong>. A tag consists of a tag name and optional arguments wrapped between <code>{%</code> and <code>%}</code>.</li>
<li><strong>Outputs</strong>. An output consists of a value and a list of filters, which is optional, wrapped between <code>{{</code> and <code>}}</code>.</li>
<li><strong>Tags</strong>. A tag consists of a tag name and optional arguments wrapped between <code>{%</code> and <code>%&#125;</code>.</li>
<li><strong>Outputs</strong>. An output consists of a value and a list of filters, which is optional, wrapped between <code>{{` and `}}</code>.</li>
</ul>
<h2 id="Outputs" class="article-heading"><a href="#Outputs" class="headerlink" title="Outputs"></a>Outputs<a class="article-anchor" href="#Outputs" aria-hidden="true"></a></h2><p><strong>Outputs</strong> are used to output variables, which can be transformed by filters, into HTML. The following template will insert the value of <code>username</code> into the input’s value:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;user&quot; value&#x3D;&quot;&#123;&#123;username&#125;&#125;&quot;&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;input type=&quot;text&quot; name=&quot;user&quot; value=&quot;&#123;&#123;username&#125;&#125;&quot;&gt;</span><br></pre></td></tr></table></figure>
<p>Values in output can be transformed by <strong>filter</strong>s before output. To append a string after the variable:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;&#123; username | append: &quot;, welcome to LiquidJS!&quot; &#125;&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;&#123; username | append: &quot;, welcome to LiquidJS!&quot; &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>Filters can be chained:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;&#123; username | append: &quot;, welcome to LiquidJS!&quot; | capitalize &#125;&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;&#123; username | append: &quot;, welcome to LiquidJS!&quot; | capitalize &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>A complete list of filters supported by LiquidJS can be found <a href="../filters/overview.html">here</a>.</p>
<h2 id="Tags" class="article-heading"><a href="#Tags" class="headerlink" title="Tags"></a>Tags<a class="article-anchor" href="#Tags" aria-hidden="true"></a></h2><p><strong>Tags</strong> are used to control the template rendering process, manipulating template variables, inter-op with other templates, etc. For example <code>assign</code> can be used to define a variable which can be later used in the template:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% assign foo &#x3D; &quot;FOO&quot; %&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% assign foo = &quot;FOO&quot; %&#125;</span><br></pre></td></tr></table></figure>
<p>Typically tags appear in pairs with a start tag and a corresponding end tag. For example:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% if foo &#x3D;&#x3D; &quot;FOO&quot; %&#125;</span><br><span class="line"> Variable &#96;foo&#96; equals &quot;FOO&quot;</span><br><span class="line">&#123;% else %&#125;</span><br><span class="line"> Variable &#96;foo&#96; not equals &quot;FOO&quot;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% if foo == &quot;FOO&quot; %&#125;</span><br><span class="line"> Variable `foo` equals &quot;FOO&quot;</span><br><span class="line">&#123;% else %&#125;</span><br><span class="line"> Variable `foo` not equals &quot;FOO&quot;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
<p>A complete list of tags supported by LiquidJS can be found <a href="../tags/overview.html">here</a>.</p>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</time>
<a href="setup.html" class="article-footer-next" title="Setup"><span>Next</span><i class="icon-chevron-right"></i></a>
</footer>
</div>
tutorials/migrate-to-9.html
+12 -12
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,7 +87,7 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Migrate to LiquidJS 9</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/migrate-to-9.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/migrate-to-9.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
@@ -97,25 +97,25 @@
<li>New utils: Expression</li>
</ul>
<h2 id="Fixes" class="article-heading"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes<a class="article-anchor" href="#Fixes" aria-hidden="true"></a></h2><ul>
<li>Rewrite boolean expression evaluation order, <a href="https://github.com/harttle/liquidjs/issues/130" target="_blank" rel="noopener external nofollow noreferrer">#130</a>;</li>
<li><code>break</code> and <code>continue</code> tags omitting output before them, <a href="https://github.com/harttle/liquidjs/issues/123" target="_blank" rel="noopener external nofollow noreferrer">#123</a>;</li>
<li>Fixes errors in React.js demo during yarn install, <a href="https://github.com/harttle/liquidjs/issues/145" target="_blank" rel="noopener external nofollow noreferrer">#145</a>;</li>
<li>Rewrite boolean expression evaluation order, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/130">#130</a>;</li>
<li><code>break</code> and <code>continue</code> tags omitting output before them, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/123">#123</a>;</li>
<li>Fixes errors in React.js demo during yarn install, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/145">#145</a>;</li>
<li>Promise typed Drops are not await-ed some times.</li>
</ul>
<h2 id="Performance" class="article-heading"><a href="#Performance" class="headerlink" title="Performance"></a>Performance<a class="article-anchor" href="#Performance" aria-hidden="true"></a></h2><ul>
<li>Performance Improvements due to targeting to Node.js 8, see <a href="https://github.com/harttle/liquidjs/issues/137" target="_blank" rel="noopener external nofollow noreferrer">#137</a>;</li>
<li>Memory footprint is reduced by 57.5%, see <a href="https://github.com/harttle/liquidjs/pull/202" target="_blank" rel="noopener external nofollow noreferrer">#202</a>;</li>
<li>Render performance is improved by 100.3%, see <a href="https://github.com/harttle/liquidjs/pull/205" target="_blank" rel="noopener external nofollow noreferrer">#205</a>.</li>
<li>Performance Improvements due to targeting to Node.js 8, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/137">#137</a>;</li>
<li>Memory footprint is reduced by 57.5%, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/202">#202</a>;</li>
<li>Render performance is improved by 100.3%, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/205">#205</a>.</li>
</ul>
<h2 id="BREAKING-CHANGES" class="article-heading"><a href="#BREAKING-CHANGES" class="headerlink" title="BREAKING CHANGES"></a>BREAKING CHANGES<a class="article-anchor" href="#BREAKING-CHANGES" aria-hidden="true"></a></h2><ul>
<li>LiquidJS no longer has a default export, use <code>import {Liquid} from &#39;liquidjs&#39;</code> instead. The <code>window.Liquid</code> for the UMD bundle is also changed to <code>window.liquidjs.Liquid</code>;</li>
<li>LiquidJS no longer has a default export, use <code>import &#123;Liquid&#125; from &#39;liquidjs&#39;</code> instead. The <code>window.Liquid</code> for the UMD bundle is also changed to <code>window.liquidjs.Liquid</code>;</li>
<li>The duplicate static method <code>Liquid.evalValue</code> is removed, use the instance method <code>liquid.evalValue</code> instead;</li>
<li>Shipped to Node.js 8, the CJS bundle (main entry in Node.js) nolonger supports Node.js &leq; 6. ESM (dist/liquid.node.esm.js) and UMD (dist/liquid.browser.umd.js, dist/liquid.browser.min.js) bundles are not affected.</li>
</ul>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/operators.html
+6 -6
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,7 +87,7 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Operators</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/operators.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/operators.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
@@ -101,11 +101,11 @@
<li>Comparison operators. All comparison operations have the same precedence and higher than logic operators.</li>
<li>Logic operators. All logic operators have the same precedence.</li>
</ol>
<h2 id="Associativity" class="article-heading"><a href="#Associativity" class="headerlink" title="Associativity"></a>Associativity<a class="article-anchor" href="#Associativity" aria-hidden="true"></a></h2><p>Logic operators are evaluated from right to left, see <a href="https://help.shopify.com/en/themes/liquid/basics/operators#order-of-operations" target="_blank" rel="noopener external nofollow noreferrer">shopify docs</a>.</p>
<h2 id="Associativity" class="article-heading"><a href="#Associativity" class="headerlink" title="Associativity"></a>Associativity<a class="article-anchor" href="#Associativity" aria-hidden="true"></a></h2><p>Logic operators are evaluated from right to left, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/en/themes/liquid/basics/operators#order-of-operations">shopify docs</a>.</p>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/options.html
+20 -17
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,12 +87,12 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Options</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/options.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/options.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</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 behaviour of LiquidJS. All of these options are optional thus we can specify any of them, for example the <code>cache</code> option:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>)</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> cache: <span class="literal">true</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">cache</span>: <span class="literal">true</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<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>
@@ -100,40 +100,43 @@
<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>
<p>It’s default to <code>false</code>. When setting to <code>true</code> a default LRU cache of size 1024 will be enabled. And certainly it can be a number which indicates the size of cache you want.</p>
<p>Additionally, it can also be a custom cache implementation. See <a href="./caching.html">Caching</a> for details.</p>
<h2 id="dynamicPartials" class="article-heading"><a href="#dynamicPartials" class="headerlink" title="dynamicPartials"></a>dynamicPartials<a class="article-anchor" href="#dynamicPartials" aria-hidden="true"></a></h2><p><strong>dynamicPartials</strong> indicates whether or not to treat filename arguments in <a href="../tags/include.html">include</a>, <a href="../tags/render.html">render</a>, <a href="../tags/layout.html">layout</a> tags as a variable. Defaults to <code>true</code>. For example, render the following snippet with scope <code>{ file: &#39;foo.html&#39; }</code> will include the <code>foo.html</code>:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% include file %&#125;</span><br></pre></td></tr></table></figure>
<h2 id="dynamicPartials" class="article-heading"><a href="#dynamicPartials" class="headerlink" title="dynamicPartials"></a>dynamicPartials<a class="article-anchor" href="#dynamicPartials" aria-hidden="true"></a></h2><p><strong>dynamicPartials</strong> indicates whether or not to treat filename arguments in <a href="../tags/include.html">include</a>, <a href="../tags/render.html">render</a>, <a href="../tags/layout.html">layout</a> tags as a variable. Defaults to <code>true</code>. For example, render the following snippet with scope <code>&#123; file: &#39;foo.html&#39; &#125;</code> will include the <code>foo.html</code>:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% include file %&#125;</span><br></pre></td></tr></table></figure>
<p>Setting <code>dynamicPartials: false</code>, LiquidJS will try to include the file named <code>file</code>, which is weird but allows simpler syntax if your template relations are static:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% liquid foo.html %&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% liquid foo.html %&#125;</span><br></pre></td></tr></table></figure>
<blockquote class="note warn"><strong class="note-title">Common Pitfall</strong><p>LiquidJS defaults this option to <code>true</code> to be compatible with shopify/liquid, but if you’re from <a href="https://github.com/11ty/eleventy" rel="external nofollow noreferrer" target="_blank">eleventy</a> it’s set to <code>false</code> by default (see <a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths" rel="external nofollow noreferrer" target="_blank">Quoted Include Paths</a>) which I believe is trying to be compatible with Jekyll.</p>
</blockquote>
<h2 id="extname" class="article-heading"><a href="#extname" class="headerlink" title="extname"></a>extname<a class="article-anchor" href="#extname" aria-hidden="true"></a></h2><p><strong>extname</strong> defines the default extname to be appended into filenames if the filename has no extname. Defaults to <code>&#39;&#39;</code> which means it’s disabled by default. By setting it to <code>.liquid</code>:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% render &quot;foo&quot; %&#125; there&#39;s no extname, adds &#96;.liquid&#96; and loads foo.liquid</span><br><span class="line">&#123;% render &quot;foo.html&quot; %&#125; there is an extname already, loads foo.html directly</span><br></pre></td></tr></table></figure>
<h2 id="extname" class="article-heading"><a href="#extname" class="headerlink" title="extname"></a>extname<a class="article-anchor" href="#extname" aria-hidden="true"></a></h2><p><strong>extname</strong> defines the default extension name to be appended into filenames if the filename has no extension name. Defaults to <code>&#39;&#39;</code> which means it’s disabled by default. By setting it to <code>.liquid</code>:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% render &quot;foo&quot; %&#125; there&#x27;s no extname, adds `.liquid` and loads foo.liquid</span><br><span class="line">&#123;% render &quot;foo.html&quot; %&#125; there is an extname already, loads foo.html directly</span><br></pre></td></tr></table></figure>
<blockquote class="note info"><strong class="note-title">Legacy Versions</strong><p>Before 2.0.1, <code>extname</code> is set to <code>.liquid</code> by default. To change that you need to set <code>extname: ''</code> explicitly. See <a href="https://github.com/harttle/liquidjs/issues/41" rel="external nofollow noreferrer" target="_blank">#41</a> for details.</p>
</blockquote>
<h2 id="root" class="article-heading"><a href="#root" class="headerlink" title="root"></a>root<a class="article-anchor" href="#root" aria-hidden="true"></a></h2><p><strong>root</strong> is used to specify template directories for LiquidJS to lookup and read template files. Can be a single string and an array of strings. See <a href="./render-file.html">Render Files</a> for details.</p>
<h2 id="fs" class="article-heading"><a href="#fs" class="headerlink" title="fs"></a>fs<a class="article-anchor" href="#fs" aria-hidden="true"></a></h2><p><strong>fs</strong> is used to define a custom file system implementation which will be used by LiquidJS to lookup and read template files. See <a href="./render-file.html#Abstract-File-System">Abstract File System</a> for details.</p>
<h2 id="globals" class="article-heading"><a href="#globals" class="headerlink" title="globals"></a>globals<a class="article-anchor" href="#globals" aria-hidden="true"></a></h2><p><strong>globals</strong> is used to define global variables available to all templates even in cases of <a href="../tags/render.html">render tag</a>. See <a href="https://github.com/harttle/liquidjs/issues/185" target="_blank" rel="noopener external nofollow noreferrer">3185</a> for details.</p>
<h2 id="globals" class="article-heading"><a href="#globals" class="headerlink" title="globals"></a>globals<a class="article-anchor" href="#globals" aria-hidden="true"></a></h2><p><strong>globals</strong> is used to define global variables available to all templates even in cases of <a href="../tags/render.html">render tag</a>. See <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/185">3185</a> for details.</p>
<h2 id="jsTruthy" class="article-heading"><a href="#jsTruthy" class="headerlink" title="jsTruthy"></a>jsTruthy<a class="article-anchor" href="#jsTruthy" aria-hidden="true"></a></h2><p><strong>jsTruthy</strong> is used to use standard Javascript truthiness rather than the Shopify.</p>
<p>it defaults to false. For example, when set to true, a blank string would evaluate to false with jsTruthy. With Shopify’s truthiness, a blank string is true.</p>
<h2 id="Trimming" class="article-heading"><a href="#Trimming" class="headerlink" title="Trimming"></a>Trimming<a class="article-anchor" href="#Trimming" aria-hidden="true"></a></h2><p><strong>greedy</strong>, <strong>trimOutputLeft</strong>, <strong>trimOutputRight</strong>, <strong>trimTagLeft</strong>, <strong>trimTagRight</strong> options are used to eliminate extra newlines and indents in templates arround Liquid Constructs. See <a href="./whitespace-control.html">Whitespace Control</a> for details.</p>
<h2 id="Date" class="article-heading"><a href="#Date" class="headerlink" title="Date"></a>Date<a class="article-anchor" href="#Date" aria-hidden="true"></a></h2><p><strong>timezoneOffset</strong> is used to specify a different timezone to output dates, your local timezone will be used if not specified. For example, set <code>timezoneOffset: 0</code> to output all dates in UTC/GMT 00:00.</p>
<p><strong>preserveTimezones</strong> is a boolean effects only literal timestamps. When set to <code>true</code>, all literal timestamps will remain the same when output. This is a parser option, so Date objects passed to LiquidJS as data will not be affected.</p>
<h2 id="Trimming" class="article-heading"><a href="#Trimming" class="headerlink" title="Trimming"></a>Trimming<a class="article-anchor" href="#Trimming" aria-hidden="true"></a></h2><p><strong>greedy</strong>, <strong>trimOutputLeft</strong>, <strong>trimOutputRight</strong>, <strong>trimTagLeft</strong>, <strong>trimTagRight</strong> options are used to eliminate extra newlines and indents in templates around Liquid Constructs. See <a href="./whitespace-control.html">Whitespace Control</a> for details.</p>
<h2 id="Delimiter" class="article-heading"><a href="#Delimiter" class="headerlink" title="Delimiter"></a>Delimiter<a class="article-anchor" href="#Delimiter" aria-hidden="true"></a></h2><p><strong>outputDelimiterLeft</strong>, <strong>outputDelimiterRight</strong>, <strong>tagDelimiterLeft</strong>, <strong>tagDelimiterRight</strong> are used to customize the delimiters for LiquidJS <a href="./intro-to-liquid.html">Tags and Filters</a>. For example with <code>outputDelimiterLeft: &lt;%=, outputDelimiterRight: %&gt;</code> we are able to avoid conflicts with other languages:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;%&#x3D; username | append: &quot;, welcome to LiquidJS!&quot; %&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;%= username | append: &quot;, welcome to LiquidJS!&quot; %&gt;</span><br></pre></td></tr></table></figure>
<h2 id="Strict" class="article-heading"><a href="#Strict" class="headerlink" title="Strict"></a>Strict<a class="article-anchor" href="#Strict" aria-hidden="true"></a></h2><p><strong>strictFilters</strong> is used to assert filter existence. If set to <code>false</code>, undefined filters will be skipped. Otherwise, undefined filters will cause a parse exception. Defaults to <code>false</code>.</p>
<p><strong>strictVariables</strong> is used to assert variable existence. If set to <code>false</code>, undefined variables will be rendered as empty string. Otherwise, undefined variables will cause a render exception. Defaults to <code>false</code>.</p>
<p><strong>lenientIf</strong> modifies the behavior of <code>strictVariables</code> to allow handling optional variables. If set to <code>true</code>, an undefined variable will <em>not</em> cause an exception in the following two situations: a) it is the condition to an <code>if</code>, <code>elsif</code>, or <code>unless</code> tag; b) it occurs right before a <code>default</code> filter. Irrelevant if <code>strictVariables</code> is not set. Defaults to <code>false</code>.</p>
<blockquote class="note info"><strong class="note-title">Non-existent Tags</strong><p>Non-existent tags always throw errors during parsing and this behaviour can not be customized.</p>
<blockquote class="note info"><strong class="note-title">Non-existent Tags</strong><p>Non-existent tags always throw errors during parsing and this behavior can not be customized.</p>
</blockquote>
<h2 id="Parameter-Order" class="article-heading"><a href="#Parameter-Order" class="headerlink" title="Parameter Order"></a>Parameter Order<a class="article-anchor" href="#Parameter-Order" aria-hidden="true"></a></h2><p>Parameter orders are ignored by default, for ea <code>&#123;% for i in (1..8) reversed limit:3 %&#125;</code> will always perform <code>limit</code> before <code>reversed</code>, even if <code>reversed</code> occurs before <code>limit</code>. To make parameter order respected, set <strong>orderedFilterParameters</strong> to <code>true</code>. Its default value is <code>false</code>.</p>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
@@ -142,7 +145,7 @@
<div id="article-toc-inner">
<div id="article-toc-inner-list">
<strong class="sidebar-title">Contents</strong>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#cache"><span class="toc-text">cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dynamicPartials"><span class="toc-text">dynamicPartials</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extname"><span class="toc-text">extname</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#root"><span class="toc-text">root</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#fs"><span class="toc-text">fs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#globals"><span class="toc-text">globals</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jsTruthy"><span class="toc-text">jsTruthy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Trimming"><span class="toc-text">Trimming</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Delimiter"><span class="toc-text">Delimiter</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Strict"><span class="toc-text">Strict</span></a></li></ol>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#cache"><span class="toc-text">cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dynamicPartials"><span class="toc-text">dynamicPartials</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#extname"><span class="toc-text">extname</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#root"><span class="toc-text">root</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#fs"><span class="toc-text">fs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#globals"><span class="toc-text">globals</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jsTruthy"><span class="toc-text">jsTruthy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Date"><span class="toc-text">Date</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Trimming"><span class="toc-text">Trimming</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Delimiter"><span class="toc-text">Delimiter</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Strict"><span class="toc-text">Strict</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Parameter-Order"><span class="toc-text">Parameter Order</span></a></li></ol>
</div>
<a href="#" id="article-toc-top">Back to Top</a>
</div>
tutorials/partials-and-layouts.html
+9 -9
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,31 +87,31 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Partials and Layouts</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/partials-and-layouts.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/partials-and-layouts.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<h2 id="Render-Partials" class="article-heading"><a href="#Render-Partials" class="headerlink" title="Render Partials"></a>Render Partials<a class="article-anchor" href="#Render-Partials" aria-hidden="true"></a></h2><p>For the following template files:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; file: color.liquid</span><br><span class="line">color: &#39;&#123;&#123; color &#125;&#125;&#39; shape: &#39;&#123;&#123; shape &#125;&#125;&#39;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file: theme.liquid</span><br><span class="line">&#123;% assign shape &#x3D; &#39;circle&#39; %&#125;</span><br><span class="line">&#123;% render &#39;color.liquid&#39; %&#125;</span><br><span class="line">&#123;% render &#39;color.liquid&#39; with &#39;red&#39; %&#125;</span><br><span class="line">&#123;% render &#39;color.liquid&#39;, color: &#39;yellow&#39;, shape: &#39;square&#39; %&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">// file: color.liquid</span><br><span class="line">color: &#x27;&#123;&#123; color &#125;&#125;&#x27; shape: &#x27;&#123;&#123; shape &#125;&#125;&#x27;</span><br><span class="line"></span><br><span class="line">// file: theme.liquid</span><br><span class="line">&#123;% assign shape = &#x27;circle&#x27; %&#125;</span><br><span class="line">&#123;% render &#x27;color.liquid&#x27; %&#125;</span><br><span class="line">&#123;% render &#x27;color.liquid&#x27; with &#x27;red&#x27; %&#125;</span><br><span class="line">&#123;% render &#x27;color.liquid&#x27;, color: &#x27;yellow&#x27;, shape: &#x27;square&#x27; %&#125;</span><br></pre></td></tr></table></figure>
<p>The output will be:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">color: &#39;&#39; shape: &#39;circle&#39;</span><br><span class="line">color: &#39;red&#39; shape: &#39;circle&#39;</span><br><span class="line">color: &#39;yellow&#39; shape: &#39;square&#39;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">color: &#x27;&#x27; shape: &#x27;circle&#x27;</span><br><span class="line">color: &#x27;red&#x27; shape: &#x27;circle&#x27;</span><br><span class="line">color: &#x27;yellow&#x27; shape: &#x27;square&#x27;</span><br></pre></td></tr></table></figure>
<p>More details please refer to the <a href="../tags/render.html">render</a> tag.</p>
<blockquote class="note tip"><strong class="note-title">The &quot;.liquid&quot; Extension</strong><p>The “.liquid” extension in <code>layout</code>, <code>render</code> and <code>include</code> an be omitted if Liquid instance is created using <code>extname: &quot;.liquid&quot;</code> option. See <a href="./options.html#extname">the extname option</a> for details.</p>
</blockquote>
<h2 id="Layout-Templates-Extends" class="article-heading"><a href="#Layout-Templates-Extends" class="headerlink" title="Layout Templates (Extends)"></a>Layout Templates (Extends)<a class="article-anchor" href="#Layout-Templates-Extends" aria-hidden="true"></a></h2><p>For the following template files:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F; file: default-layout.liquid</span><br><span class="line">Header</span><br><span class="line">&#123;% block content %&#125;My default content&#123;% endblock %&#125;</span><br><span class="line">Footer</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; file: page.liquid</span><br><span class="line">&#123;% layout &quot;default-layout.liquid&quot; %&#125;</span><br><span class="line">&#123;% block content %&#125;My page content&#123;% endblock %&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">// file: default-layout.liquid</span><br><span class="line">Header</span><br><span class="line">&#123;% block content %&#125;My default content&#123;% endblock %&#125;</span><br><span class="line">Footer</span><br><span class="line"></span><br><span class="line">// file: page.liquid</span><br><span class="line">&#123;% layout &quot;default-layout.liquid&quot; %&#125;</span><br><span class="line">&#123;% block content %&#125;My page content&#123;% endblock %&#125;</span><br></pre></td></tr></table></figure>
<p>The output of <code>page.liquid</code>:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Header</span><br><span class="line">My page content</span><br><span class="line">Footer</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Header</span><br><span class="line">My page content</span><br><span class="line">Footer</span><br></pre></td></tr></table></figure>
<p>More details please refer to the <a href="../tags/layout.html">layout</a> tag.</p>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/plugins.html
+10 -10
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,28 +87,28 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Plugins</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/plugins.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/plugins.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</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>
<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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Inside the plugin function, `this` refers to the Liquid instance.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>Liquid: provides facilities to implement tags and filters.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">Liquid</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">this</span>.registerFilter(<span class="string">'upup'</span>, x =&gt; x.toUpperCase());</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Inside the plugin function, `this` refers to the Liquid instance.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>Liquid: provides facilities to implement tags and filters.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">Liquid</span>) </span>&#123;</span><br><span class="line"> <span class="built_in">this</span>.registerFilter(<span class="string">&#x27;upup&#x27;</span>, <span class="function"><span class="params">x</span> =&gt;</span> x.toUpperCase());</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Use-a-Plugin" class="article-heading"><a href="#Use-a-Plugin" class="headerlink" title="Use a Plugin"></a>Use a Plugin<a class="article-anchor" href="#Use-a-Plugin" aria-hidden="true"></a></h2><p>Simply pass the plugin function into the <code>.plugin()</code> method:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"></span><br><span class="line">engine.plugin(<span class="built_in">require</span>(<span class="string">'./upup.js'</span>));</span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'&#123;&#123; "foo" | upup &#125;&#125;'</span>)</span><br><span class="line"> .then(<span class="built_in">console</span>.log) <span class="comment">// outputs "FOO"</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"></span><br><span class="line">engine.plugin(<span class="built_in">require</span>(<span class="string">&#x27;./upup.js&#x27;</span>));</span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">&#x27;&#123;&#123; &quot;foo&quot; | upup &#125;&#125;&#x27;</span>)</span><br><span class="line"> .then(<span class="built_in">console</span>.log) <span class="comment">// outputs &quot;FOO&quot;</span></span><br></pre></td></tr></table></figure>
<h2 id="Plugin-List" class="article-heading"><a href="#Plugin-List" class="headerlink" title="Plugin List"></a>Plugin List<a class="article-anchor" href="#Plugin-List" aria-hidden="true"></a></h2><p>Since this library excludes certain features that are available on the Shopify platform but not on the <a href="https://github.com/Shopify/liquid/" target="_blank" rel="noopener external nofollow noreferrer">Shopify/liquid</a> repo, see <a href="https://github.com/harttle/liquidjs#differences-and-limitations" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs#differences-and-limitations</a>.</p>
<h2 id="Plugin-List" class="article-heading"><a href="#Plugin-List" class="headerlink" title="Plugin List"></a>Plugin List<a class="article-anchor" href="#Plugin-List" aria-hidden="true"></a></h2><p>Since this library excludes certain features that are available on the Shopify platform but not on the <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/">Shopify/liquid</a> repo, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs#differences-and-limitations">https://github.com/harttle/liquidjs#differences-and-limitations</a>.</p>
<p>Here’s a list of plugins that backfill those features. Feel free to add yours, this file is publicly editable.</p>
<ul>
<li>Sections Tags (WIP): <a href="https://github.com/harttle/liquidjs-section-tags" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs-section-tags</a></li>
<li>Color Filters: <a href="https://github.com/harttle/liquidjs-color-filters" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs-color-filters</a></li>
<li>Sections Tags (WIP): <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs-section-tags">https://github.com/harttle/liquidjs-section-tags</a></li>
<li>Color Filters: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs-color-filters">https://github.com/harttle/liquidjs-color-filters</a></li>
</ul>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/register-filters-tags.html
+12 -12
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,29 +87,29 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Register Filters/Tags</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/register-filters-tags.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/register-filters-tags.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<h2 id="Register-Tags" class="article-heading"><a href="#Register-Tags" class="headerlink" title="Register Tags"></a>Register Tags<a class="article-anchor" href="#Register-Tags" aria-hidden="true"></a></h2><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: &#123;% upper name %&#125;</span></span><br><span class="line"><span class="keyword">import</span> &#123; TagToken, Context, Emitter, TopLevelToken &#125; <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line">engine.registerTag(<span class="string">'upper'</span>, &#123;</span><br><span class="line"> parse: <span class="function"><span class="keyword">function</span>(<span class="params">tagToken: TagToken, remainTokens: TopLevelToken[]</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">this</span>.str = tagToken.args; <span class="comment">// name</span></span><br><span class="line"> &#125;,</span><br><span class="line"> render: <span class="keyword">async</span> <span class="function"><span class="keyword">function</span>(<span class="params">ctx: Context</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">var</span> str = <span class="keyword">await</span> <span class="keyword">this</span>.liquid.evalValue(<span class="keyword">this</span>.str, ctx); <span class="comment">// 'alice'</span></span><br><span class="line"> <span class="keyword">return</span> str.toUpperCase() <span class="comment">// 'ALICE'</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="Register-Tags" class="article-heading"><a href="#Register-Tags" class="headerlink" title="Register Tags"></a>Register Tags<a class="article-anchor" href="#Register-Tags" aria-hidden="true"></a></h2><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: &#123;% upper name %&#125;</span></span><br><span class="line"><span class="keyword">import</span> &#123; TagToken, Context, Emitter, TopLevelToken &#125; <span class="keyword">from</span> <span class="string">&#x27;liquidjs&#x27;</span></span><br><span class="line"></span><br><span class="line">engine.registerTag(<span class="string">&#x27;upper&#x27;</span>, &#123;</span><br><span class="line"> <span class="attr">parse</span>: <span class="function"><span class="keyword">function</span>(<span class="params">tagToken: TagToken, remainTokens: TopLevelToken[]</span>) </span>&#123;</span><br><span class="line"> <span class="built_in">this</span>.str = tagToken.args; <span class="comment">// name</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">render</span>: <span class="keyword">async</span> <span class="function"><span class="keyword">function</span>(<span class="params">ctx: Context</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">var</span> str = <span class="keyword">await</span> <span class="built_in">this</span>.liquid.evalValue(<span class="built_in">this</span>.str, ctx); <span class="comment">// &#x27;alice&#x27;</span></span><br><span class="line"> <span class="keyword">return</span> str.toUpperCase() <span class="comment">// &#x27;ALICE&#x27;</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li><code>parse</code>: Read tokens from <code>remainTokens</code> until your end token.</li>
<li><code>render</code>: Combine scope data with your parsed tokens into HTML string.</li>
</ul>
<p>See existing tag implementations here: <a href="https://github.com/harttle/liquidjs/tree/master/src/builtin/tags" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs/tree/master/src/builtin/tags</a><br>See demo example here: <a href="https://github.com/harttle/liquidjs/blob/master/demo/typescript/index.ts" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs/blob/master/demo/typescript/index.ts</a></p>
<h2 id="Register-Filters" class="article-heading"><a href="#Register-Filters" class="headerlink" title="Register Filters"></a>Register Filters<a class="article-anchor" href="#Register-Filters" aria-hidden="true"></a></h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: &#123;&#123; name | upper &#125;&#125;</span></span><br><span class="line">engine.registerFilter(<span class="string">'upper'</span>, v =&gt; v.toUpperCase())</span><br></pre></td></tr></table></figure>
<p>See existing tag implementations here: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/src/builtin/tags">https://github.com/harttle/liquidjs/tree/master/src/builtin/tags</a><br>See demo example here: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/demo/typescript/index.ts">https://github.com/harttle/liquidjs/blob/master/demo/typescript/index.ts</a></p>
<h2 id="Register-Filters" class="article-heading"><a href="#Register-Filters" class="headerlink" title="Register Filters"></a>Register Filters<a class="article-anchor" href="#Register-Filters" aria-hidden="true"></a></h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: &#123;&#123; name | upper &#125;&#125;</span></span><br><span class="line">engine.registerFilter(<span class="string">&#x27;upper&#x27;</span>, <span class="function"><span class="params">v</span> =&gt;</span> v.toUpperCase())</span><br></pre></td></tr></table></figure>
<p>Filter arguments will be passed to the registered filter function, for example:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: &#123;&#123; 1 | add: 2, 3 &#125;&#125;</span></span><br><span class="line">engine.registerFilter(<span class="string">'add'</span>, (initial, arg1, arg2) =&gt; initial + arg1 + arg2)</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Usage: &#123;&#123; 1 | add: 2, 3 &#125;&#125;</span></span><br><span class="line">engine.registerFilter(<span class="string">&#x27;add&#x27;</span>, <span class="function">(<span class="params">initial, arg1, arg2</span>) =&gt;</span> initial + arg1 + arg2)</span><br></pre></td></tr></table></figure>
<p>See existing filter implementations here: <a href="https://github.com/harttle/liquidjs/tree/master/src/builtin/filters" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs/tree/master/src/builtin/filters</a></p>
<h2 id="Unregister-Tags-Filters" class="article-heading"><a href="#Unregister-Tags-Filters" class="headerlink" title="Unregister Tags/Filters"></a>Unregister Tags/Filters<a class="article-anchor" href="#Unregister-Tags-Filters" aria-hidden="true"></a></h2><p>In some cases it’s desirable to disable some tags/filters (see <a href="https://github.com/harttle/liquidjs/issues/324" target="_blank" rel="noopener external nofollow noreferrer">#324</a>), you’ll need to register a dummy tag/filter in which an corresponding Error throws.</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// disable a tag</span></span><br><span class="line"><span class="keyword">const</span> disabledTag = &#123;</span><br><span class="line"> parse: <span class="function"><span class="keyword">function</span>(<span class="params">token</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`tag "<span class="subst">$&#123;token.name&#125;</span>" disabled`</span>);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">engine.registerTag(<span class="string">'include'</span>, disabledTag);</span><br><span class="line"></span><br><span class="line"><span class="comment">// disable a filter</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">disabledFilter</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`filter "<span class="subst">$&#123;name&#125;</span>" disabled`</span>);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">engine.registerFilter(<span class="string">'plus'</span>, disabledFilter(<span class="string">'plus'</span>));</span><br></pre></td></tr></table></figure>
<p>See existing filter implementations here: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/src/builtin/filters">https://github.com/harttle/liquidjs/tree/master/src/builtin/filters</a></p>
<h2 id="Unregister-Tags-Filters" class="article-heading"><a href="#Unregister-Tags-Filters" class="headerlink" title="Unregister Tags/Filters"></a>Unregister Tags/Filters<a class="article-anchor" href="#Unregister-Tags-Filters" aria-hidden="true"></a></h2><p>In some cases it’s desirable to disable some tags/filters (see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/issues/324">#324</a>), you’ll need to register a dummy tag/filter in which an corresponding Error throws.</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// disable a tag</span></span><br><span class="line"><span class="keyword">const</span> disabledTag = &#123;</span><br><span class="line"> <span class="attr">parse</span>: <span class="function"><span class="keyword">function</span>(<span class="params">token</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`tag &quot;<span class="subst">$&#123;token.name&#125;</span>&quot; disabled`</span>);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">engine.registerTag(<span class="string">&#x27;include&#x27;</span>, disabledTag);</span><br><span class="line"></span><br><span class="line"><span class="comment">// disable a filter</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">disabledFilter</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`filter &quot;<span class="subst">$&#123;name&#125;</span>&quot; disabled`</span>);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">engine.registerFilter(<span class="string">&#x27;plus&#x27;</span>, disabledFilter(<span class="string">&#x27;plus&#x27;</span>));</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</time>
<a href="caching.html" class="article-footer-prev" title="Caching"><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>
tutorials/render-file.html
+16 -16
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,23 +87,23 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Render Files</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/render-file.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/render-file.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</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>
<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>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views&#x2F;</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
<p><code>hello.liquid</code> contains a single line `name: {{name}}`.<br>Now save the following contents into <code>index.js</code>:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> root: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// root for layouts/includes lookup</span></span><br><span class="line"> extname: <span class="string">'.liquid'</span> <span class="comment">// used for layouts/includes, defaults ""</span></span><br><span class="line">&#125;);</span><br><span class="line">engine</span><br><span class="line"> .renderFile(<span class="string">"hello"</span>, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;) <span class="comment">// will read and render `views/hello.liquid`</span></span><br><span class="line"> .then(<span class="built_in">console</span>.log) <span class="comment">// outputs "Alice"</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">root</span>: path.resolve(__dirname, <span class="string">&#x27;views/&#x27;</span>), <span class="comment">// root for layouts/includes lookup</span></span><br><span class="line"> <span class="attr">extname</span>: <span class="string">&#x27;.liquid&#x27;</span> <span class="comment">// used for layouts/includes, defaults &quot;&quot;</span></span><br><span class="line">&#125;);</span><br><span class="line">engine</span><br><span class="line"> .renderFile(<span class="string">&quot;hello&quot;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;) <span class="comment">// will read and render `views/hello.liquid`</span></span><br><span class="line"> .then(<span class="built_in">console</span>.log) <span class="comment">// outputs &quot;Alice&quot;</span></span><br></pre></td></tr></table></figure>
<p>Run <code>node index.js</code> and you’ll get output like this:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&gt; node index.js</span><br><span class="line">name: alice</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&gt; node index.js</span><br><span class="line">name: alice</span><br></pre></td></tr></table></figure>
<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 href="https://help.shopify.com/themes/liquid/tags/theme-tags#include" target="_blank" rel="noopener external nofollow noreferrer">include</a>, <a href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout" target="_blank" rel="noopener external nofollow noreferrer">layout</a> 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_.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>
<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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> root: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> extname: <span class="string">'.liquid'</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">root</span>: [<span class="string">&#x27;views/&#x27;</span>, <span class="string">&#x27;views/partials/&#x27;</span>],</span><br><span class="line"> <span class="attr">extname</span>: <span class="string">&#x27;.liquid&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<blockquote class="note tip"><strong class="note-title">Relative Paths</strong><p>Relative paths in <code>root</code> will be resolved against <code>cwd()</code>.</p>
</blockquote>
@@ -113,20 +113,20 @@
<li><code>cwd()</code>/views/foo.liquid</li>
<li><code>cwd()</code>/views/partials/foo.liquid</li>
</ul>
<p>If none of the above files exists, an <code>ENOENT</code> error will be throwed. Here’s a demo for Node.js: <a href="https://github.com/harttle/liquidjs/tree/master/demo/nodejs" target="_blank" rel="noopener external nofollow noreferrer">demo/nodejs</a>.</p>
<p>When LiquidJS is used in browser, say current location is <a href="https://example.com/bar/index.html" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/index.html</a>, only the first <code>root</code> will be used and the file to be fetched is:</p>
<p>If none of the above files exists, an <code>ENOENT</code> error will be throwed. Here’s a demo for Node.js: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/demo/nodejs">demo/nodejs</a>.</p>
<p>When LiquidJS is used in browser, say current location is <a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/index.html">https://example.com/bar/index.html</a>, only the first <code>root</code> will be used and the file to be fetched is:</p>
<ul>
<li><a href="https://example.com/bar/foo.liquid" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/foo.liquid</a></li>
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/foo.liquid">https://example.com/bar/foo.liquid</a></li>
</ul>
<p>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 href="https://github.com/harttle/liquidjs/tree/master/demo/browser" target="_blank" rel="noopener external nofollow noreferrer">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 href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/ifs.ts</a> and the default implementation is <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/node.ts</a> for Node.js and <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/browser.ts</a> for the browser bundle.</p>
<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/ifs.ts">src/fs/ifs.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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> fs: &#123;</span><br><span class="line"> readFileSync (file) &#123;</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="keyword">await</span> readFile (file) &#123;</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> &#125;,</span><br><span class="line"> existsSync () &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="keyword">await</span> exists () &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> &#125;,</span><br><span class="line"> resolve(root, file, ext) &#123;</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">fs</span>: &#123;</span><br><span class="line"> readFileSync (file) &#123;</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">&#x27;Template&#x27;</span>).findByIdSync(file).text</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="keyword">await</span> readFile (file) &#123;</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">&#x27;Template&#x27;</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> &#125;,</span><br><span class="line"> existsSync () &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="keyword">await</span> exists () &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="function"><span class="title">resolve</span>(<span class="params">root, file, ext</span>)</span> &#123;</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/setup.html
+12 -13
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,7 +87,7 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Setup</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/setup.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/setup.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
@@ -95,20 +95,19 @@
<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>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install --save liquidjs</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'&#123;&#123;name | capitalize&#125;&#125;'</span>, &#123;<span class="attr">name</span>: <span class="string">'alice'</span>&#125;)</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// outputs 'Alice'</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">&#x27;&#123;&#123;name | capitalize&#125;&#125;&#x27;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;)</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// outputs &#x27;Alice&#x27;</span></span><br></pre></td></tr></table></figure>
<blockquote class="note info"><strong class="note-title">Working Demo</strong><p>Here’s a working demo for LiquidJS usage in Node.js: <a href="https://github.com/harttle/liquidjs/blob/master/demo/nodejs/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/nodejs/</a>.</p>
</blockquote>
Type definitions for LiquidJS are also exported and published, which makes it more enjoyable for TypeScript projects:
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Liquid &#125; <span class="keyword">from</span> <span class="string">'liquidjs'</span>;</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'&#123;&#123;name | capitalize&#125;&#125;'</span>, &#123;name: <span class="string">'alice'</span>&#125;)</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// outputs 'Alice'</span></span><br></pre></td></tr></table></figure>
<p>Type definitions for LiquidJS are also exported and published, which makes it more enjoyable for TypeScript projects:</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Liquid &#125; <span class="keyword">from</span> <span class="string">&#x27;liquidjs&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">&#x27;&#123;&#123;name | capitalize&#125;&#125;&#x27;</span>, &#123;<span class="attr">name</span>: <span class="string">&#x27;alice&#x27;</span>&#125;)</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// outputs &#x27;Alice&#x27;</span></span><br></pre></td></tr></table></figure>
<blockquote class="note info"><strong class="note-title">Working Demo</strong><p>Here’s a working demo for LiquidJS usage in TypeScript: <a href="https://github.com/harttle/liquidjs/blob/master/demo/typescript/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/typescript/</a>.</p>
</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>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--for production--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--for development--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--for production--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--for development--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote class="note info"><strong class="note-title">Working Demo</strong><p>Here’s a living demo on jsFiddle: <a href="https://jsfiddle.net/pd4jhzLs/1/" rel="external nofollow noreferrer" target="_blank">jsfiddle.net/pd4jhzLs/1/</a>, and the source code is also available in <a href="https://github.com/harttle/liquidjs/blob/master/demo/browser/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/browser/</a>.</p>
</blockquote>
@@ -117,16 +116,16 @@ Type definitions for LiquidJS are also exported and published, which makes it mo
</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 is also available from CLI:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'&#123;&#123;"hello" | capitalize&#125;&#125;'</span> | npx liquidjs</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;&#123;&#123;&quot;hello&quot; | capitalize&#125;&#125;&#x27;</span> | npx liquidjs</span><br></pre></td></tr></table></figure>
<p>If you pass a path to a JSON file or a JSON string as the first argument, it will be used as the context for your template.</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'Hello, &#123;&#123; name &#125;&#125;.'</span> | npx liquidjs <span class="string">'&#123;"name": "Snake"&#125;'</span></span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;Hello, &#123;&#123; name &#125;&#125;.&#x27;</span> | npx liquidjs <span class="string">&#x27;&#123;&quot;name&quot;: &quot;Snake&quot;&#125;&#x27;</span></span><br></pre></td></tr></table></figure>
<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 href="https://github.com/stevenanthonyrevo" target="_blank" rel="noopener external nofollow noreferrer">@stevenanthonyrevo</a>, see <a href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/" target="_blank" rel="noopener external nofollow noreferrer">liquidjs/demo/reactjs/</a>.</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="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/truthy-and-falsy.html
+7 -7
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,12 +87,12 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Truthy and Falsy</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/truthy-and-falsy.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/truthy-and-falsy.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<p>Though <a href="https://www.npmjs.com/package/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">Liquid</a> is platform-independent, there’re <a href="https://github.com/harttle/liquidjs#differences-and-limitations" target="_blank" rel="noopener external nofollow noreferrer">certain differences</a> with <a href="https://shopify.github.io/liquid" target="_blank" rel="noopener external nofollow noreferrer">the Ruby version</a>, one of which is the <code>truthy</code> value.</p>
<h2 id="The-Truth-Table" class="article-heading"><a href="#The-Truth-Table" class="headerlink" title="The Truth Table"></a>The Truth Table<a class="article-anchor" href="#The-Truth-Table" aria-hidden="true"></a></h2><p>According to <a href="https://shopify.github.io/liquid/basics/truthy-and-falsy/" target="_blank" rel="noopener external nofollow noreferrer">Shopify document</a> everything other than <code>false</code> and <code>nil</code> is truthy. But in JavaScript we have a totally different type system, we have types like <code>undefined</code> and we don’t differentiate <code>integer</code> and <code>float</code>, thus things are slightly different:</p>
<p>Though <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.npmjs.com/package/liquidjs">Liquid</a> is platform-independent, there’re <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs#differences-and-limitations">certain differences</a> with <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shopify.github.io/liquid">the Ruby version</a>, one of which is the <code>truthy</code> value.</p>
<h2 id="The-Truth-Table" class="article-heading"><a href="#The-Truth-Table" class="headerlink" title="The Truth Table"></a>The Truth Table<a class="article-anchor" href="#The-Truth-Table" aria-hidden="true"></a></h2><p>According to <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shopify.github.io/liquid/basics/truthy-and-falsy/">Shopify document</a> everything other than <code>false</code> and <code>nil</code> is truthy. But in JavaScript we have a totally different type system, we have types like <code>undefined</code> and we don’t differentiate <code>integer</code> and <code>float</code>, thus things are slightly different:</p>
<table>
<thead>
<tr>
@@ -225,7 +225,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/use-in-expressjs.html
+12 -12
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,32 +87,32 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Use in Express.js</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/use-in-expressjs.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/use-in-expressjs.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<p>LiquidJS is compatible to the <a href="https://expressjs.com/en/resources/template-engines.html" target="_blank" rel="noopener external nofollow noreferrer">express template engines</a>. You can set liquidjs instance to the <a href="http://expressjs.com/en/guide/using-template-engines.html" target="_blank" rel="noopener external nofollow noreferrer">view engine</a> option:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line"><span class="comment">// register liquid engine</span></span><br><span class="line">app.engine(<span class="string">'liquid'</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">'views'</span>, <span class="string">'./views'</span>); <span class="comment">// specify the views directory</span></span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'liquid'</span>); <span class="comment">// set liquid to default</span></span><br></pre></td></tr></table></figure>
<p>LiquidJS is compatible to the <a target="_blank" rel="noopener external nofollow noreferrer" href="https://expressjs.com/en/resources/template-engines.html">express template engines</a>. You can set liquidjs instance to the <a target="_blank" rel="noopener external nofollow noreferrer" href="http://expressjs.com/en/guide/using-template-engines.html">view engine</a> option:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line"><span class="comment">// register liquid engine</span></span><br><span class="line">app.engine(<span class="string">&#x27;liquid&#x27;</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">&#x27;views&#x27;</span>, <span class="string">&#x27;./views&#x27;</span>); <span class="comment">// specify the views directory</span></span><br><span class="line">app.set(<span class="string">&#x27;view engine&#x27;</span>, <span class="string">&#x27;liquid&#x27;</span>); <span class="comment">// set liquid to default</span></span><br></pre></td></tr></table></figure>
<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 href="http://expressjs.com/en/guide/using-template-engines.html" target="_blank" rel="noopener external nofollow noreferrer"><code>views</code></a> option in express.js (as shown above) will also be respected. Say you have a template directory like:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── views1&#x2F;</span><br><span class="line">│ └── hello.liquid</span><br><span class="line">└── views2&#x2F;</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
<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>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── views1/</span><br><span class="line">│ └── hello.liquid</span><br><span class="line">└── views2/</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
<p>And you’re setting template root for liquidjs to <code>views1</code> and expressjs to <code>views2</code>:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> root: <span class="string">'./views1/'</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.engine(<span class="string">'liquid'</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">'views'</span>, <span class="string">'./views2'</span>); <span class="comment">// specify the views directory</span></span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'liquid'</span>); <span class="comment">// set liquid to default</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">root</span>: <span class="string">&#x27;./views1/&#x27;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">app.engine(<span class="string">&#x27;liquid&#x27;</span>, engine.express()); </span><br><span class="line">app.set(<span class="string">&#x27;views&#x27;</span>, <span class="string">&#x27;./views2&#x27;</span>); <span class="comment">// specify the views directory</span></span><br><span class="line">app.set(<span class="string">&#x27;view engine&#x27;</span>, <span class="string">&#x27;liquid&#x27;</span>); <span class="comment">// set liquid to default</span></span><br></pre></td></tr></table></figure>
<p>Both of <code>hello.liquid</code> and <code>world.liquid</code> can be resolved and rendered:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">res.render(<span class="string">'hello'</span>)</span><br><span class="line">res.render(<span class="string">'world'</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">res.render(<span class="string">&#x27;hello&#x27;</span>)</span><br><span class="line">res.render(<span class="string">&#x27;world&#x27;</span>)</span><br></pre></td></tr></table></figure>
<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>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> cache: process.env.NODE_ENV === <span class="string">'production'</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123; Liquid &#125; = <span class="built_in">require</span>(<span class="string">&#x27;liquidjs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid(&#123;</span><br><span class="line"> <span class="attr">cache</span>: process.env.NODE_ENV === <span class="string">&#x27;production&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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>
tutorials/whitespace-control.html
+13 -13
View File
@@ -36,8 +36,8 @@
<link rel="stylesheet" href="../css/navy.css">
<link rel="alternate" href="../atom.xml" title="LiquidJS">
</head>
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
<meta name="generator" content="Hexo 5.4.0"></head>
<body>
<div id="container">
@@ -63,7 +63,7 @@
</select>
</div>
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
<a id="mobile-nav-toggle">
<span class="mobile-nav-toggle-bar"></span>
<span class="mobile-nav-toggle-bar"></span>
@@ -87,24 +87,24 @@
<header class="article-header">
<h1 class="article-title" itemprop="name">Whitespace Control</h1>
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/whitespace-control.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/whitespace-control.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
</header>
<div class="article-content" itemprop="articleBody">
<p>To keep source code neat and indented, we’re adding spaces to our templates. LiquidJS offers whitespace control capabilities to eliminate these unwanted whitespaces in output HTML.</p>
<h2 id="via-Markups" class="article-heading"><a href="#via-Markups" class="headerlink" title="via Markups"></a>via Markups<a class="article-anchor" href="#via-Markups" aria-hidden="true"></a></h2><p>By default, all tags and output markups lines will generate a NL (<code>\n</code>), and whitespaces if there’s any indentation. For example:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% author &#x3D; &quot;harttle&quot; %&#125;</span><br><span class="line">&#123;&#123; author &#125;&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% author = &quot;harttle&quot; %&#125;</span><br><span class="line">&#123;&#123; author &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>Outputs (note the blank link):</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">harttle</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">harttle</span><br></pre></td></tr></table></figure>
<p>We can include hyphens in your tag syntax (<code>{{-</code>, <code>-}}</code>, <code>{%-</code>, <code>-%}</code>) to strip whitespace from left or right. For example:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% assign author &#x3D; &quot;harttle&quot; -%&#125;</span><br><span class="line">&#123;&#123; author &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>We can include hyphens in your tag syntax (<code>{{-`, `-}}`, `{%-</code>, <code>-%&#125;</code>) to strip whitespace from left or right. For example:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% assign author = &quot;harttle&quot; -%&#125;</span><br><span class="line">&#123;&#123; author &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>Outputs:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
<p>In this case, the <code>-%}</code> strips the whitespace from the right side of the <code>assign</code> tag.</p>
<p>In this case, the <code>-%&#125;</code> strips the whitespace from the right side of the <code>assign</code> tag.</p>
<h2 id="via-Options" class="article-heading"><a href="#via-Options" class="headerlink" title="via Options"></a>via Options<a class="article-anchor" href="#via-Options" aria-hidden="true"></a></h2><p>Alternatively, LiquidJS provides these per engine options to enable whitespace control without sweeping changes of your templates:</p>
<ul>
<li><code>trimTagLeft</code></li>
@@ -112,12 +112,12 @@
<li><code>trimValueRight</code></li>
<li><code>trimValueRight</code></li>
</ul>
<p><a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">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 href="https://github.com/Shopify/liquid" target="_blank" rel="noopener external nofollow noreferrer">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/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>
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</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="plugins.html" class="article-footer-next" title="Plugins"><span>Next</span><i class="icon-chevron-right"></i></a>
</footer>
</div>