mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
Deploying to gh-pages from @ harttle/liquidjs@94a6715667 🚀
This commit is contained in:
@@ -94,7 +94,10 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p class="since">v10.20.0</p>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">Sync and Async</strong><p>There are synchronous and asynchronous versions of each of the methods demonstrated on this page. See the <a href="liquid-api">Liquid API</a> for a complete reference.</p>
|
||||
<blockquote class="note warn"><strong class="note-title">Experimental</strong><p>Note that this is an experimental feature and future APIs are subject to change. And internal structures returned can be changed w/o a major version bump.</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="note info"><strong class="note-title">Sync and Async</strong><p>There are synchronous and asynchronous versions of each of the methods demonstrated on this page. See the [Liquid API][liquid-api] for a complete reference.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="Variables" class="article-heading"><a href="#Variables" class="headerlink" title="Variables"></a>Variables<a class="article-anchor" href="#Variables" aria-hidden="true"></a></h2><p>Retrieve the names of variables used in a template with <code>Liquid.variables(template)</code>. It returns an array of strings, one string for each distinct variable, without its properties.</p>
|
||||
@@ -102,7 +105,7 @@
|
||||
|
||||
<span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
|
||||
<span class="token keyword">const</span> template <span class="token operator">=</span> engine<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\
|
||||
<span class="token keyword">const</span> template <span class="token operator">=</span> engine<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
<p>
|
||||
{% assign title = user.title | capitalize %}
|
||||
{{ title }} {{ user.first_name | default: user.name }} {{ user.last_name }}
|
||||
@@ -185,7 +188,7 @@ engine<span class="token punctuation">.</span><span class="token function">globa
|
||||
<h3 id="Partial-Templates" class="article-heading"><a href="#Partial-Templates" class="headerlink" title="Partial Templates"></a>Partial Templates<a class="article-anchor" href="#Partial-Templates" aria-hidden="true"></a></h3><p>By default, LiquidJS will try to load and analyze any included and rendered templates too.</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'liquidjs'</span>
|
||||
|
||||
<span class="token keyword">const</span> footer <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\
|
||||
<span class="token keyword">const</span> footer <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
<footer>
|
||||
<p>&copy; {{ "now" | date: "%Y" }} {{ site_name }}</p>
|
||||
<p>{{ site_description }}</p>
|
||||
@@ -193,7 +196,7 @@ engine<span class="token punctuation">.</span><span class="token function">globa
|
||||
|
||||
<span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">templates</span><span class="token operator">:</span> <span class="token punctuation">{</span> footer <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
|
||||
<span class="token keyword">const</span> template <span class="token operator">=</span> engine<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\
|
||||
<span class="token keyword">const</span> template <span class="token operator">=</span> engine<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
<body>
|
||||
<h1>Hi, {{ you | default: 'World' }}!</h1>
|
||||
{% assign some = 'thing' %}
|
||||
@@ -214,7 +217,7 @@ engine<span class="token punctuation">.</span><span class="token function">globa
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">[</span> <span class="token string">'you'</span> <span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
|
||||
<p>If an <code>{% include %}</code> tag uses a dynamic template name (one that can’t be determined without rendering the template) it will be ignored, even if <code>partials</code> is set to <code>true</code>.</p>
|
||||
<h3 id="Advanced-Usage" class="article-heading"><a href="#Advanced-Usage" class="headerlink" title="Advanced Usage"></a>Advanced Usage<a class="article-anchor" href="#Advanced-Usage" aria-hidden="true"></a></h3><p>The examples so far all use convenience methods of the <code>Liquid</code> class, intended to cover the most common use cases. Instead, you can work with <a href="static-analysis-interface">analysis results</a> directly, which expose the row, column and file name for every occurrence of each variable.</p>
|
||||
<h3 id="Advanced-Usage" class="article-heading"><a href="#Advanced-Usage" class="headerlink" title="Advanced Usage"></a>Advanced Usage<a class="article-anchor" href="#Advanced-Usage" aria-hidden="true"></a></h3><p>The examples so far all use convenience methods of the <code>Liquid</code> class, intended to cover the most common use cases. Instead, you can work with <a href="/api/interfaces/StaticAnalysis.html">analysis results</a> directly, which expose the row, column and file name for every occurrence of each variable.</p>
|
||||
<p>This is an example of an object returned from <code>Liquid.analyze()</code>, passing it the template from the <a href="#partial-templates">Partial Template</a> section above.</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">variables</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@@ -271,7 +274,7 @@ engine<span class="token punctuation">.</span><span class="token function">globa
|
||||
<p>Not all methods are required, depending in the kind of tag. If it’s a block with a start tag, end tag and any amount of Liquid markup in between, it will need to implement the <a href="/api/interfaces/Template.html#children"><code>children()</code></a> method. <code>children()</code> is defined as a generator, so that we can use it in synchronous and asynchronous contexts, just like <code>render()</code>. It should return HTML content, output statements and tags that are child nodes of the current tag.</p>
|
||||
<p>The <a href="/api/interfaces/Template.html#blockScope"><code>blockScope()</code></a> method is responsible for telling LiquidJS which names will be in scope for the duration of the tag’s block. Some of these names could depend on the tag’s arguments, and some will be fixed, like <code>forloop</code> from the <code>{% for %}</code> tag.</p>
|
||||
<p>Whether a tag is an inline tag or a block tag, if it accepts arguments it should implement <a href="/api/interfaces/Template.html#arguments"><code>arguments()</code></a>, which is responsible for returning the tag’s arguments as a sequence of <a href="/api/classes/Value.html"><code>Value</code></a> instances or tokens of type <a href="/api/types/ValueToken.html"><code>ValueToken</code></a>.</p>
|
||||
<p>This example demonstrates these methods for a block tag. See LiquidJS’s <a href="built-in">built-in tags</a> for more examples.</p>
|
||||
<p>This example demonstrates these methods for a block tag. See LiquidJS’s <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/src/tags">built-in tags</a> for more examples.</p>
|
||||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> Liquid<span class="token punctuation">,</span> Tag<span class="token punctuation">,</span> Hash <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'liquidjs'</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">ExampleTag</span> <span class="token keyword">extends</span> <span class="token class-name">Tag</span> <span class="token punctuation">{</span>
|
||||
@@ -314,7 +317,7 @@ engine<span class="token punctuation">.</span><span class="token function">globa
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2024-12-28T13:35:45.899Z" itemprop="dateModified">Last updated: 2024-12-28</time>
|
||||
<time class="article-footer-updated" datetime="2024-12-28T13:51:08.069Z" itemprop="dateModified">Last updated: 2024-12-28</time>
|
||||
<a href="dos.html" class="article-footer-prev" title="DoS"><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>
|
||||
|
||||
Reference in New Issue
Block a user