mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
Deploying to gh-pages from @ harttle/liquidjs@ed15a52c26 🚀
This commit is contained in:
harttle
+11
-10
@@ -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);
|
||||
});
|
||||
@@ -130,39 +131,39 @@ engine
|
||||
<span class="token comment"><!--for development--></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<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 class="note info"><strong class="note-title">Working Demo</strong><p>Here’s a live 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>
|
||||
|
||||
<blockquote class="note warn"><strong class="note-title">Compatibility</strong><p>You may need a <a href="https://github.com/taylorhakes/promise-polyfill" rel="external nofollow noreferrer" target="_blank">Promise polyfill</a> for legacy browsers like IE and Android UC, see <a href="https://caniuse.com/#feat=promises" rel="external nofollow noreferrer" target="_blank">caniuse statistics</a>. </p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="LiquidJS-in-CLI" class="article-heading"><a href="#LiquidJS-in-CLI" class="headerlink" title="LiquidJS in CLI"></a>LiquidJS in CLI<a class="article-anchor" href="#LiquidJS-in-CLI" aria-hidden="true"></a></h2><p>LiquidJS can also be used to render a template directly from CLI using <code>npx</code>:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can either pass the template inline (as shown above) or you can read it from a file by using the <code>@</code> character followed by a path, like so:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can also use the <code>@-</code> syntax to read the template from <code>stdin</code>:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">echo</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token operator">|</span> npx liquidjs <span class="token parameter variable">--template</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">echo</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token operator">|</span> <span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>A context can be passed in the same ways (i.e. inline, from a path or piped through <code>stdin</code>). The following three are equivalent:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> <span class="token string">'{"name": "Snake"}'</span>
|
||||
npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @./some-context.json
|
||||
<span class="token builtin class-name">echo</span> <span class="token string">'{"name": "Snake"}'</span> <span class="token operator">|</span> npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> <span class="token string">'{"name": "Snake"}'</span>
|
||||
<span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @./some-context.json
|
||||
<span class="token builtin class-name">echo</span> <span class="token string">'{"name": "Snake"}'</span> <span class="token operator">|</span> <span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>Note that you can only use the <code>stdin</code> specifier <code>@-</code> for a single argument. If you try to use it for both <code>--template</code> and <code>--context</code> you will get an error.</p>
|
||||
<p>The rendered output is written to <code>stdout</code> by default, but you can also specify an output file (if the file exists, it will be overwritten):</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token parameter variable">--output</span> ./hello.txt<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token parameter variable">--output</span> ./hello.txt<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can also pass a number of options to customize template rendering behavior. For example, the <code>--js-truthy</code> option can be used to enable JavaScript truthiness:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid --js-truthy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token cli-command builtin class-name">npx</span> liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid --js-truthy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>Most of the <a href="./options.html">options available through the JavaScript API</a> are also available from the CLI. For help on available options, use <code>npx liquidjs --help</code>.</p>
|
||||
<h2 id="Miscellaneous" class="article-heading"><a href="#Miscellaneous" class="headerlink" title="Miscellaneous"></a>Miscellaneous<a class="article-anchor" href="#Miscellaneous" aria-hidden="true"></a></h2><p>A ReactJS demo is also added by <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/stevenanthonyrevo">@stevenanthonyrevo</a>, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/">liquidjs/demo/reactjs/</a>.</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="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="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>
|
||||
|
||||
Reference in New Issue
Block a user