mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
Deploying to gh-pages from @ harttle/liquidjs@b69e62c2fd 🚀
This commit is contained in:
harttle
+13
-13
@@ -48,7 +48,7 @@
|
||||
<a href="../index.html" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="main-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="main-nav-link">Tutorials</a><a href="../tags/overview.html" class="main-nav-link">Tags</a><a href="../filters/overview.html" class="main-nav-link">Filters</a><a href="../playground.html" class="main-nav-link">Playground</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="Search...">
|
||||
@@ -95,7 +95,7 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>In case you’re not familiar with Liquid Template Language, see <a href="./intro-to-liquid.html">Introduction to Liquid Template Language</a>.</p>
|
||||
<h2 id="LiquidJS-in-Node-js" class="article-heading"><a href="#LiquidJS-in-Node-js" class="headerlink" title="LiquidJS in Node.js"></a>LiquidJS in Node.js<a class="article-anchor" href="#LiquidJS-in-Node-js" aria-hidden="true"></a></h2><p>Install via npm:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save liquidjs<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> liquidjs<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'liquidjs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -119,7 +119,7 @@ engine
|
||||
</blockquote>
|
||||
|
||||
<h2 id="LiquidJS-in-Browsers" class="article-heading"><a href="#LiquidJS-in-Browsers" class="headerlink" title="LiquidJS in Browsers"></a>LiquidJS in Browsers<a class="article-anchor" href="#LiquidJS-in-Browsers" aria-hidden="true"></a></h2><p>Pre-built UMD bundles are also available:</p>
|
||||
<pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment"><!--for production--></span>
|
||||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token comment"><!--for production--></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!--for development--></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||||
@@ -131,32 +131,32 @@ engine
|
||||
</blockquote>
|
||||
|
||||
<h2 id="LiquidJS-in-CLI" class="article-heading"><a href="#LiquidJS-in-CLI" class="headerlink" title="LiquidJS in CLI"></a>LiquidJS in CLI<a class="article-anchor" href="#LiquidJS-in-CLI" aria-hidden="true"></a></h2><p>LiquidJS can also be used to render a template directly from CLI using <code>npx</code>:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template <span class="token string">'{{"hello" | capitalize}}'</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can either pass the template inline (as shown above) or you can read it from a file by using the <code>@</code> character followed by a path, like so:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template @./some-template.liquid<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can also use the <code>@-</code> syntax to read the template from <code>stdin</code>:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">echo</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token operator">|</span> npx liquidjs --template @-<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">echo</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token operator">|</span> npx liquidjs <span class="token parameter variable">--template</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>A context can be passed in the same ways (i.e. inline, from a path or piped through <code>stdin</code>). The following three are equivalent:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template <span class="token string">'Hello, {{ name }}!'</span> --context <span class="token string">'{"name": "Snake"}'</span>
|
||||
npx liquidjs --template <span class="token string">'Hello, {{ name }}!'</span> --context @./some-context.json
|
||||
<span class="token builtin class-name">echo</span> <span class="token string">'{"name": "Snake"}'</span> <span class="token operator">|</span> npx liquidjs --template <span class="token string">'Hello, {{ name }}!'</span> --context @-<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> <span class="token string">'{"name": "Snake"}'</span>
|
||||
npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @./some-context.json
|
||||
<span class="token builtin class-name">echo</span> <span class="token string">'{"name": "Snake"}'</span> <span class="token operator">|</span> npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'Hello, {{ name }}!'</span> <span class="token parameter variable">--context</span> @-<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||||
|
||||
<p>Note that you can only use the <code>stdin</code> specifier <code>@-</code> for a single argument. If you try to use it for both <code>--template</code> and <code>--context</code> you will get an error.</p>
|
||||
<p>The rendered output is written to <code>stdout</code> by default, but you can also specify an output file (if the file exists, it will be overwritten):</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template <span class="token string">'{{"hello" | capitalize}}'</span> --output ./hello.txt<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> <span class="token string">'{{"hello" | capitalize}}'</span> <span class="token parameter variable">--output</span> ./hello.txt<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>You can also pass a number of options to customize template rendering behavior. For example, the <code>--js-truthy</code> option can be used to enable JavaScript truthiness:</p>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs --template @./some-template.liquid --js-truthy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">npx liquidjs <span class="token parameter variable">--template</span> @./some-template.liquid --js-truthy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>Most of the <a href="./options.md">options available through the JavaScript API</a> are also available from the CLI. For help on available options, use <code>npx liquidjs --help</code>.</p>
|
||||
<h2 id="Miscellaneous" class="article-heading"><a href="#Miscellaneous" class="headerlink" title="Miscellaneous"></a>Miscellaneous<a class="article-anchor" href="#Miscellaneous" aria-hidden="true"></a></h2><p>A ReactJS demo is also added by <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/stevenanthonyrevo">@stevenanthonyrevo</a>, see <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/">liquidjs/demo/reactjs/</a>.</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2023-03-19T15:42:58.533Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<time class="article-footer-updated" datetime="2023-03-19T16:51:21.941Z" itemprop="dateModified">Last updated: 2023-03-19</time>
|
||||
<a href="intro-to-liquid.html" class="article-footer-prev" title="Intro to Liquid"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="options.html" class="article-footer-next" title="Options"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -196,7 +196,7 @@ npx liquidjs --template <span class="token string">'Hello, {{ name 
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="../tutorials/intro-to-liquid.html" class="mobile-nav-link">Tutorials</a><a href="../tags/overview.html" class="mobile-nav-link">Tags</a><a href="../filters/overview.html" class="mobile-nav-link">Filters</a><a href="../playground.html" class="mobile-nav-link">Playground</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
Reference in New Issue
Block a user