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

Deploying to gh-pages from @ harttle/liquidjs@ed15a52c26 🚀

Browse Source
This commit is contained in:
harttle
2026-06-07 16:27:46 +00:00
parent 1f4d8787e0
commit e5d9012ccb
135 changed files with 1173 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tutorials/options.html
+15 -14
View File
@@ -39,6 +39,7 @@
<script src="https://cdn.cookiehub.eu/c2/e8e44c93.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') return;
var cpm = {};
window.cookiehub.load(cpm);
});
@@ -105,16 +106,16 @@
<span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote class="note info"><strong class="note-title">API Document</strong><p>Following is an overview for all the options, for exact types and signatures please refer to <a href="https://liquidjs.com/api/interfaces/LiquidOptions.html" target="_self">LiquidOptions | API</a>.</p>
<blockquote class="note info"><strong class="note-title">API documentation</strong><p>Following is an overview for all the options. For exact types and signatures, see <a href="https://liquidjs.com/api/interfaces/LiquidOptions.html" target="_self">LiquidOptions | API</a>.</p>
</blockquote>
<h2 id="cache" class="article-heading"><a href="#cache" class="headerlink" title="cache"></a>cache<a class="article-anchor" href="#cache" aria-hidden="true"></a></h2><p><strong>cache</strong> is used to improve performance by caching previously parsed template structures, specially in cases when we’re repeatedly parse or render files.</p>
<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>
<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, especially in cases when we repeatedly parse or render files.</p>
<p>It defaults to <code>false</code>. When set to <code>true</code>, a default LRU cache of size 1024 will be enabled. It can also be a number indicating the cache size 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="Partials-Layouts" class="article-heading"><a href="#Partials-Layouts" class="headerlink" title="Partials/Layouts"></a>Partials/Layouts<a class="article-anchor" href="#Partials-Layouts" 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>
<p><strong>layouts</strong> is used to specify template directories for LiquidJS to lookup files for <code>&#123;% layout %&#125;</code>. Same format as <code>root</code> and will default to <code>root</code> if not specified.</p>
<p><strong>partials</strong> is used to specify template directories for LiquidJS to lookup files for <code>&#123;% render %&#125;</code> and <code>&#123;% include %&#125;</code>. Same format as <code>root</code> and will default to <code>root</code> if not specified.</p>
<p><strong>relativeReference</strong> is set to <code>true</code> by default to allow relative filenames. Note that relatively referenced files are also need to be within corresponding root. For example you can reference another file like <code>&#123;% render ../foo/bar %&#125;</code> as long as <code>../foo/bar</code> is also within <code>partials</code> directory.</p>
<h2 id="Partials-Layouts" class="article-heading"><a href="#Partials-Layouts" class="headerlink" title="Partials/Layouts"></a>Partials/Layouts<a class="article-anchor" href="#Partials-Layouts" aria-hidden="true"></a></h2><p><strong>root</strong> is used to specify template directories for LiquidJS to look up and read template files. Can be a single string or an array of strings. See <a href="./render-file.html">Render Files</a> for details.</p>
<p><strong>layouts</strong> is used to specify template directories for LiquidJS to look up files for <code>&#123;% layout %&#125;</code>. Same format as <code>root</code> and will default to <code>root</code> if not specified.</p>
<p><strong>partials</strong> is used to specify template directories for LiquidJS to look up files for <code>&#123;% render %&#125;</code> and <code>&#123;% include %&#125;</code>. Same format as <code>root</code> and will default to <code>root</code> if not specified.</p>
<p><strong>relativeReference</strong> is set to <code>true</code> by default to allow relative filenames. Note that relatively referenced files also need to be within the corresponding root. For example you can reference another file like <code>&#123;% render ../foo/bar %&#125;</code> as long as <code>../foo/bar</code> is also within <code>partials</code> directory.</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><blockquote>
<p>Note: for historical reasons, it’s named dynamicPartials but it also works for layouts.</p>
</blockquote>
@@ -135,7 +136,7 @@
<li>Use <code>=</code> instead of <code>:</code> to separate parameter key-values.</li>
<li>Parameters are under <code>include</code> variable instead of current scope.</li>
</ul>
<p>For example in the following template, <code>name.html</code> is not quoted, <code>header</code> and <code>&quot;HEADER&quot;</code> are separated by <code>=</code>, and the <code>header</code> parameter is referenced by <code>include.header</code>. More details please check out <a href="../tags/include.html">include</a>.</p>
<p>For example in the following template, <code>name.html</code> is not quoted, <code>header</code> and <code>&quot;HEADER&quot;</code> are separated by <code>=</code>, and the <code>header</code> parameter is referenced by <code>include.header</code>. For more details, see <a href="../tags/include.html">include</a>.</p>
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid">// entry template
<span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;%</span> <span class="token keyword">include</span> <span class="token object">article</span><span class="token punctuation">.</span>html header<span class="token operator">=</span><span class="token string">"HEADER"</span> content<span class="token operator">=</span><span class="token string">"CONTENT"</span> <span class="token delimiter punctuation">%&#125;</span></span>
@@ -152,18 +153,18 @@
<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="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="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 look up 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 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="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 Shopify’s.</p>
<p>It defaults to <code>false</code>. For example, when set to <code>true</code>, a blank string would evaluate to false with jsTruthy. With Shopify’s truthiness, a blank string is true.</p>
<h2 id="outputEscape" class="article-heading"><a href="#outputEscape" class="headerlink" title="outputEscape"></a>outputEscape<a class="article-anchor" href="#outputEscape" aria-hidden="true"></a></h2><p><a href="/api/interfaces/LiquidOptions.html#outputEscape">outputEscape</a> can be used to automatically escape output strings. It can be one of <code>&quot;escape&quot;</code>, <code>&quot;json&quot;</code>, or <code>(val: unknown) =&gt; string</code>, defaults to <code>undefined</code>.</p>
<ul>
<li>For untrusted output variables, set <code>outputEscape: &quot;escape&quot;</code> makes them be HTML escaped by default. You’ll need <a href="../filters/raw.html">raw</a> filter for direct output.</li>
<li><code>&quot;json&quot;</code> is useful when you’re using LiquidJS to create valid JSON files.</li>
<li>It can even be a function which allows you to control what variables are output throughout LiquidJS. Please note the input can be any type other than string, e.g. an filter returned an non-string value.</li>
<li>It can even be a function that allows you to control what variables are output throughout LiquidJS. Please note the input can be any type other than string, e.g. a filter may return a non-string value.</li>
</ul>
<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. Note that <code>preserveTimezones</code> has a higher priority than <code>timezoneOffset</code>.</p>
<p><strong>preserveTimezones</strong> is a boolean that affects 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. Note that <code>preserveTimezones</code> has a higher priority than <code>timezoneOffset</code>.</p>
<p><strong>dateFormat</strong> is used to specify a default format to output dates. <code>%A, %B %-e, %Y at %-l:%M %P %z</code> will be used if not specified. For example, set <code>dateFormat: %Y-%m-%dT%H:%M:%S:%LZ</code> to output all dates in <a target="_blank" rel="noopener external nofollow noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON">JavaScript Date.toJson()</a> format.</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>
@@ -180,7 +181,7 @@
</div>
<footer class="article-footer">
<time class="article-footer-updated" datetime="2026-06-06T17:38:08.031Z" itemprop="dateModified">Last updated: 2026-06-06</time>
<time class="article-footer-updated" datetime="2026-06-07T16:27:07.442Z" itemprop="dateModified">Last updated: 2026-06-07</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>