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

Deploying to gh-pages from @ harttle/liquidjs@292a93b738 🚀

Browse Source
This commit is contained in:
harttle
2024-08-20 01:26:51 +00:00
parent 3fd671b610
commit 5c42b7fb7c
238 changed files with 3824 additions and 1819 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tutorials/intro-to-liquid.html
+10 -6
View File
@@ -102,26 +102,30 @@
</blockquote>
<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 plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><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>
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;&#123;</span>username<span class="token delimiter punctuation">&#125;&#125;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<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 plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><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>
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;&#123;</span> username <span class="token operator">|</span> <span class="token function filter">append</span><span class="token operator">:</span> <span class="token string">", welcome to LiquidJS!"</span> <span class="token delimiter punctuation">&#125;&#125;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p>Filters can be chained:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><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>
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;&#123;</span> username <span class="token operator">|</span> <span class="token function filter">append</span><span class="token operator">:</span> <span class="token string">", welcome to LiquidJS!"</span> <span class="token operator">|</span> <span class="token function filter">capitalize</span> <span class="token delimiter punctuation">&#125;&#125;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<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 plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% assign foo = &quot;FOO&quot; %&#125;</span><br></pre></td></tr></table></figure>
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;%</span> <span class="token keyword">assign</span> foo <span class="token operator">=</span> <span class="token string">"FOO"</span> <span class="token delimiter punctuation">%&#125;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p>Typically tags appear in pairs with a start tag and a corresponding end tag. For example:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><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>
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;%</span> <span class="token keyword">if</span> foo <span class="token operator">==</span> <span class="token string">"FOO"</span> <span class="token delimiter punctuation">%&#125;</span></span>
Variable `foo` equals "FOO"
<span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;%</span> <span class="token keyword">else</span> <span class="token delimiter punctuation">%&#125;</span></span>
Variable `foo` not equals "FOO"
<span class="token liquid language-liquid"><span class="token delimiter punctuation">&#123;%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%&#125;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<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="2024-08-19T19:36:26.426Z" itemprop="dateModified">Last updated: 2024-08-19</time>
<time class="article-footer-updated" datetime="2024-08-20T01:26:05.764Z" itemprop="dateModified">Last updated: 2024-08-20</time>
<a href="setup.html" class="article-footer-next" title="Setup"><span>Next</span><i class="icon-chevron-right"></i></a>
</footer>
</div>