mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
223 lines
35 KiB
HTML
223 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head prefix="og: https://ogp.me/ns#">
|
||
<meta charset="utf-8">
|
||
<title>Liquid Drops | LiquidJS</title>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="LiquidJS is a simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript.">
|
||
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<!-- Canonical links -->
|
||
<link rel="canonical" href="https://liquidjs.com/tutorials/drops.html">
|
||
<!-- Alternative links -->
|
||
|
||
|
||
<link rel="alternative" hreflang="en" href="https://liquidjs.com/tutorials/drops">
|
||
|
||
<link rel="alternative" hreflang="zh-cn" href="https://liquidjs.com/zh-cn/tutorials/drops">
|
||
|
||
|
||
<!-- Icon -->
|
||
<link rel="apple-touch-icon" sizes="57x57" href="../icon/apple-touch-icon-57x57.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="../icon/apple-touch-icon-114x114.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="../icon/apple-touch-icon-72x72.png">
|
||
<link rel="apple-touch-icon" sizes="144x144" href="../icon/apple-touch-icon-144x144.png">
|
||
<link rel="apple-touch-icon" sizes="60x60" href="../icon/apple-touch-icon-60x60.png">
|
||
<link rel="apple-touch-icon" sizes="120x120" href="../icon/apple-touch-icon-120x120.png">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../icon/apple-touch-icon-76x76.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="../icon/apple-touch-icon-152x152.png">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-196x196.png" sizes="196x196">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-160x160.png" sizes="160x160">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-96x96.png" sizes="96x96">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-16x16.png" sizes="16x16">
|
||
<link rel="icon" type="image/png" href="../icon/favicon-32x32.png" sizes="32x32">
|
||
<meta name="msapplication-TileColor" content="#2f83cd">
|
||
<meta name="msapplication-TileImage" content="../icon/mstile-144x144.png">
|
||
|
||
<link rel="stylesheet" href="../css/navy.css">
|
||
|
||
<link rel="alternate" href="../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||
|
||
<body>
|
||
<div id="container">
|
||
<header id="header" class="wrapper">
|
||
<div id="header-inner" class="inner">
|
||
<h1 id="logo-wrap">
|
||
<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.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...">
|
||
</div>
|
||
</nav>
|
||
<div class="main-nav-link icon-nav-link">
|
||
<label><i class="icon-network"></i> <span class="icon-nav-title">English</span></label>
|
||
<select id="lang-select" data-canonical="tutorials/drops.html">
|
||
|
||
<option value="en" selected>English</option>
|
||
|
||
<option value="zh-cn">简体中文</option>
|
||
|
||
</select>
|
||
</div>
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" class="main-nav-link icon-nav-link"><i class="icon-github"></i> <span class="icon-nav-title">GitHub</span></a>
|
||
<a id="mobile-nav-toggle">
|
||
<span class="mobile-nav-toggle-bar"></span>
|
||
<span class="mobile-nav-toggle-bar"></span>
|
||
<span class="mobile-nav-toggle-bar"></span>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="content-wrap">
|
||
<div id="content" class="wrapper">
|
||
<div id="content-inner">
|
||
<aside id="sidebar" role="navigation">
|
||
<div class="inner">
|
||
<strong class="sidebar-title">Getting Started</strong><a href="intro-to-liquid.html" class="sidebar-link">Intro to Liquid</a><a href="setup.html" class="sidebar-link">Setup</a><a href="options.html" class="sidebar-link">Options</a><a href="render-file.html" class="sidebar-link">Render Files</a><a href="partials-and-layouts.html" class="sidebar-link">Includes and Layouts</a><a href="use-in-expressjs.html" class="sidebar-link">Use in Express.js</a><strong class="sidebar-title">Advanced</strong><a href="caching.html" class="sidebar-link">Caching</a><a href="escaping.html" class="sidebar-link">Escaping</a><a href="register-filters-tags.html" class="sidebar-link">Register Filters/Tags</a><a href="access-scope-in-filters.html" class="sidebar-link">Access Scope in Filters</a><a href="parse-parameters.html" class="sidebar-link">Parse Parameters</a><a href="render-tag-content.html" class="sidebar-link">Render Tag Content</a><a href="drops.html" class="sidebar-link current">Liquid Drops</a><a href="sync-and-async.html" class="sidebar-link">Sync and Async</a><a href="whitespace-control.html" class="sidebar-link">Whitespace Control</a><a href="plugins.html" class="sidebar-link">Plugins</a><a href="operators.html" class="sidebar-link">Operators</a><a href="truthy-and-falsy.html" class="sidebar-link">Truthy and Falsy</a><a href="dos.html" class="sidebar-link">DoS</a><strong class="sidebar-title">Miscellaneous</strong><a href="migrate-to-9.html" class="sidebar-link">Migrate to LiquidJS 9</a><a href="changelog.html" class="sidebar-link">Changelog</a><a href="differences.html" class="sidebar-link">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="sidebar-link">Contribution Guidelines</a>
|
||
</div>
|
||
</aside>
|
||
<article class="article-container" itemscope itemtype="https://schema.org/Article">
|
||
<div class="article-inner">
|
||
<div class="article">
|
||
<div class="inner">
|
||
<header class="article-header">
|
||
<h1 class="article-title" itemprop="name">Liquid Drops</h1>
|
||
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/drops.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
|
||
|
||
</header>
|
||
<div class="article-content" itemprop="articleBody">
|
||
<p>LiquidJS also provides a mechanism similar to <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/wiki/Introduction-to-Drops">Shopify Drops</a>, allowing template authors to incorporate custom functionality in resolving variable values.</p>
|
||
<blockquote class="note info"><strong class="note-title">Drop for JavaScript</strong><p><em>Drop</em> interface is implemented differently in LiquidJS compared to built-in filters and other template functionalities. Since LiquidJS runs in JavaScript, custom Drops need to be reimplemented in JavaScript anyway. There’s no compatibility between JavaScript classes and Ruby classes.</p>
|
||
</blockquote>
|
||
|
||
<h2 id="Basic-Usage" class="article-heading"><a href="#Basic-Usage" class="headerlink" title="Basic Usage"></a>Basic Usage<a class="article-anchor" href="#Basic-Usage" aria-hidden="true"></a></h2><figure class="highlight javascript"><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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Liquid</span>, <span class="title class_">Drop</span> } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SettingsDrop</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Drop</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">super</span>()</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">foo</span> = <span class="string">'FOO'</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">bar</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'BAR'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> <span class="title class_">Liquid</span>()</span><br><span class="line"><span class="keyword">const</span> template = <span class="string">`foo: {{settings.foo}}, bar: {{settings.bar}}`</span></span><br><span class="line"><span class="keyword">const</span> context = { <span class="attr">settings</span>: <span class="keyword">new</span> <span class="title class_">SettingsDrop</span>() }</span><br><span class="line"><span class="comment">// Outputs: "foo: FOO, bar: BAR"</span></span><br><span class="line">engine.<span class="title function_">parseAndRender</span>(template, context).<span class="title function_">then</span>(<span class="function"><span class="params">html</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(html))</span><br></pre></td></tr></table></figure>
|
||
|
||
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://runkit.com/embed/2is7di4mc7kk">Runkit link</a></p>
|
||
<p>As shown above, besides reading properties from context scopes, you can also call methods. You only need to create a custom class inherited from <code>Drop</code>.</p>
|
||
<blockquote class="note tip"><strong class="note-title">Async Methods</strong><p>LiquidJS is fully async-friendly. You can safely return a Promise in your Drop methods or define your methods in Drop as <code>async</code>.</p>
|
||
</blockquote>
|
||
|
||
<h2 id="liquidMethodMissing" class="article-heading"><a href="#liquidMethodMissing" class="headerlink" title="liquidMethodMissing"></a>liquidMethodMissing<a class="article-anchor" href="#liquidMethodMissing" aria-hidden="true"></a></h2><p>For cases when there isn’t a fixed set of properties, you can leverage <code>liquidMethodMissing</code> to dynamically resolve the value of a variable name.</p>
|
||
<figure class="highlight javascript"><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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Liquid</span>, <span class="title class_">Drop</span> } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">SettingsDrop</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Drop</span> {</span><br><span class="line"> <span class="title function_">liquidMethodMissing</span>(<span class="params">key</span>) {</span><br><span class="line"> <span class="keyword">return</span> key.<span class="title function_">toUpperCase</span>()</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> <span class="title class_">Liquid</span>()</span><br><span class="line"><span class="comment">// Outputs: "COO"</span></span><br><span class="line">engine.<span class="title function_">parseAndRender</span>(<span class="string">"{{settings.coo}}"</span>, { <span class="attr">settings</span>: <span class="keyword">new</span> <span class="title class_">SettingsDrop</span>() })</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function"><span class="params">html</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(html))</span><br></pre></td></tr></table></figure>
|
||
|
||
<p><code>liquidMethodMissing</code> supports Promise, meaning you can make async calls within it. A more useful case can be fetching the value dynamically from the database. By using Drops, you can avoid hardcoding each property into the context. For example:</p>
|
||
<figure class="highlight javascript"><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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Liquid</span>, <span class="title class_">Drop</span> } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">DBDrop</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Drop</span> {</span><br><span class="line"> <span class="keyword">async</span> <span class="title function_">liquidMethodMissing</span>(<span class="params">key</span>) {</span><br><span class="line"> <span class="keyword">const</span> record = <span class="keyword">await</span> db.<span class="title function_">getRecordByKey</span>(key)</span><br><span class="line"> <span class="keyword">return</span> record.<span class="property">value</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> <span class="title class_">Liquid</span>()</span><br><span class="line"><span class="keyword">const</span> context = { <span class="attr">db</span>: <span class="keyword">new</span> <span class="title class_">DBDrop</span>() }</span><br><span class="line">engine.<span class="title function_">parseAndRender</span>(<span class="string">"{{db.coo}}"</span>, context).<span class="title function_">then</span>(<span class="function"><span class="params">html</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(html))</span><br></pre></td></tr></table></figure>
|
||
|
||
<h2 id="valueOf-NaN" class="article-heading"><a href="#valueOf-NaN" class="headerlink" title="valueOf"></a>valueOf<a class="article-anchor" href="#valueOf-NaN" aria-hidden="true"></a></h2><p>Drops can implement a <code>valueOf()</code> method, the return value of which can be used to replace itself in the output. For example:</p>
|
||
<figure class="highlight javascript"><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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Liquid</span>, <span class="title class_">Drop</span> } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">ColorDrop</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Drop</span> {</span><br><span class="line"> <span class="title function_">valueOf</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'red'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> <span class="title class_">Liquid</span>()</span><br><span class="line"><span class="keyword">const</span> context = { <span class="attr">color</span>: <span class="keyword">new</span> <span class="title class_">ColorDrop</span>() }</span><br><span class="line"><span class="comment">// Outputs: "red"</span></span><br><span class="line">engine.<span class="title function_">parseAndRender</span>(<span class="string">"{{color}}"</span>, context).<span class="title function_">then</span>(<span class="function"><span class="params">html</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(html))</span><br></pre></td></tr></table></figure>
|
||
|
||
<h2 id="toLiquid" class="article-heading"><a href="#toLiquid" class="headerlink" title="toLiquid"></a>toLiquid<a class="article-anchor" href="#toLiquid" aria-hidden="true"></a></h2><p><code>toLiquid()</code> is not a method of <code>Drop</code>, but it can be used to return a <code>Drop</code>. In cases where you have a fixed structure in the <code>context</code> that cannot change its values, you can implement <code>toLiquid()</code> to let LiquidJS use the returned value instead of itself to render the templates.</p>
|
||
<figure class="highlight javascript"><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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Liquid</span>, <span class="title class_">Drop</span> } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> context = {</span><br><span class="line"> <span class="attr">person</span>: {</span><br><span class="line"> <span class="attr">firstName</span>: <span class="string">"Jun"</span>,</span><br><span class="line"> <span class="attr">lastName</span>: <span class="string">"Yang"</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">"Jun Yang"</span>,</span><br><span class="line"> <span class="attr">toLiquid</span>: <span class="function">() =></span> ({</span><br><span class="line"> <span class="attr">firstName</span>: <span class="variable language_">this</span>.<span class="property">firstName</span>,</span><br><span class="line"> <span class="attr">lastName</span>: <span class="variable language_">this</span>.<span class="property">lastName</span>,</span><br><span class="line"> <span class="comment">// use a different `name`</span></span><br><span class="line"> <span class="attr">name</span>: <span class="string">"Yang, Jun"</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> <span class="title class_">Liquid</span>()</span><br><span class="line"><span class="comment">// Outputs: "Yang, Jun"</span></span><br><span class="line">engine.<span class="title function_">parseAndRender</span>(<span class="string">"{{person.name}}"</span>, context).<span class="title function_">then</span>(<span class="function"><span class="params">html</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(html))</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>Of course, you can also return a <code>PersonDrop</code> instance in the <code>toLiquid()</code> method and implement this functionality within <code>PersonDrop</code>:</p>
|
||
<figure class="highlight javascript"><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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="title class_">Liquid</span>, <span class="title class_">Drop</span> } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">PersonDrop</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Drop</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">person</span>) {</span><br><span class="line"> <span class="variable language_">super</span>()</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">person</span> = person</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">name</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">lastName</span> + <span class="string">", "</span> + <span class="variable language_">this</span>.<span class="property">person</span>.<span class="property">firstName</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> context = {</span><br><span class="line"> <span class="attr">person</span>: {</span><br><span class="line"> <span class="attr">firstName</span>: <span class="string">"Jun"</span>,</span><br><span class="line"> <span class="attr">lastName</span>: <span class="string">"Yang"</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">"Jun Yang"</span>,</span><br><span class="line"> <span class="attr">toLiquid</span>: <span class="keyword">function</span> (<span class="params"></span>) { <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">PersonDrop</span>(<span class="variable language_">this</span>) }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> <span class="title class_">Liquid</span>()</span><br><span class="line"><span class="comment">// Outputs: "Yang, Jun"</span></span><br><span class="line">engine.<span class="title function_">parseAndRender</span>(<span class="string">"{{person.name}}"</span>, context).<span class="title function_">then</span>(<span class="function"><span class="params">html</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(html))</span><br></pre></td></tr></table></figure>
|
||
|
||
<blockquote class="note info"><strong class="note-title"><code>toLiquid()</code> vs. <code>valueOf()</code> Difference</strong><ul>
|
||
<li><code>valueOf()</code> is typically used to define how the current variable should be rendered, while <code>toLiquid()</code> is often used to convert an object into a Drop or another scope provided to the template.</li>
|
||
<li><code>valueOf()</code> is a method exclusive to Drops; whereas <code>toLiquid()</code> can be used on any scope object.</li>
|
||
<li><code>valueOf()</code> is called when the variable itself is about to be rendered, replacing itself; whereas <code>toLiquid()</code> is called when its properties are about to be read.</li>
|
||
</ul></blockquote>
|
||
|
||
<h2 id="Special-Drops" class="article-heading"><a href="#Special-Drops" class="headerlink" title="Special Drops"></a>Special Drops<a class="article-anchor" href="#Special-Drops" aria-hidden="true"></a></h2><p>LiquidJS itself implements several built-in drops to facilitate template writing. This part is compatible with Shopify Liquid, as we need templates to be portable.</p>
|
||
<h3 id="blank" class="article-heading"><a href="#blank" class="headerlink" title="blank"></a>blank<a class="article-anchor" href="#blank" aria-hidden="true"></a></h3><p>Useful to check whether a string variable is <code>false</code>, <code>null</code>, <code>undefined</code>, an empty string, or a string containing only blank characters.</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></pre></td><td class="code"><pre><span class="line">{% unless author == blank %}</span><br><span class="line"> {{author}}</span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="empty" class="article-heading"><a href="#empty" class="headerlink" title="empty"></a>empty<a class="article-anchor" href="#empty" aria-hidden="true"></a></h3><p>Useful to check if an array, string, or object is empty.</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></pre></td><td class="code"><pre><span class="line">{% if authors == empty %}</span><br><span class="line"> Author list is empty</span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure>
|
||
|
||
<blockquote class="note info"><strong class="note-title"><code>empty</code> implementation</strong><p>For arrays and strings, LiquidJS checks their <code>.length</code> property. For objects, LiquidJS calls <code>Object.keys()</code> to check whether they have keys.</p>
|
||
</blockquote>
|
||
|
||
<h3 id="nil" class="article-heading"><a href="#nil" class="headerlink" title="nil"></a>nil<a class="article-anchor" href="#nil" aria-hidden="true"></a></h3><p><code>nil</code> Drop is used to check whether a variable is not defined or defined as <code>null</code> or <code>undefined</code>, essentially equivalent to JavaScript <code>== null</code> check.</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></pre></td><td class="code"><pre><span class="line">{% if nonexistent == nil %}</span><br><span class="line"> null variable</span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="Other-Drops" class="article-heading"><a href="#Other-Drops" class="headerlink" title="Other Drops"></a>Other Drops<a class="article-anchor" href="#Other-Drops" aria-hidden="true"></a></h3><p>There are still several Drops for specific tags, like <code>forloop</code>, <code>tablerowloop</code>, <code>block</code>, which are covered by respective tag documents.</p>
|
||
|
||
</div>
|
||
<footer class="article-footer">
|
||
<time class="article-footer-updated" datetime="2024-08-18T05:44:37.719Z" itemprop="dateModified">Last updated: 2024-08-18</time>
|
||
<a href="render-tag-content.html" class="article-footer-prev" title="Render Tag Content"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="sync-and-async.html" class="article-footer-next" title="Sync and Async"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<aside id="article-toc" role="navigation">
|
||
<div id="article-toc-inner">
|
||
<div id="article-toc-inner-list">
|
||
<strong class="sidebar-title">Contents</strong>
|
||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Basic-Usage"><span class="toc-text">Basic Usage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#liquidMethodMissing"><span class="toc-text">liquidMethodMissing</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#valueOf-NaN"><span class="toc-text">valueOf</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#toLiquid"><span class="toc-text">toLiquid</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Special-Drops"><span class="toc-text">Special Drops</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#blank"><span class="toc-text">blank</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#empty"><span class="toc-text">empty</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#nil"><span class="toc-text">nil</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Other-Drops"><span class="toc-text">Other Drops</span></a></li></ol></li></ol>
|
||
</div>
|
||
<a href="#" id="article-toc-top">Back to Top</a>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer id="footer" class="wrapper">
|
||
<div class="inner">
|
||
<div id="footer-copyright">
|
||
© 2024 <a href="https://github.com/harttle/liquidjs/graphs/contributors" rel="external nofollow noreferrer" target="_blank">Harttle</a><br>
|
||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>.
|
||
</div>
|
||
<div id="footer-links">
|
||
<a href="https://twitter.com/harttleharttle" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-twitter"></i></a>
|
||
<a href="https://opencollective.com/liquidjs" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-opencollective"></i></a>
|
||
<a href="https://github.com/harttle/liquidjs" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-github"></i></a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
<div id="mobile-nav-dimmer"></div>
|
||
<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.html" class="mobile-nav-link">API</a>
|
||
</ul>
|
||
|
||
<div class="mobile-sidebar-list">
|
||
<strong class="mobile-nav-title">Getting Started</strong><a href="intro-to-liquid.html" class="mobile-nav-link">Intro to Liquid</a><a href="setup.html" class="mobile-nav-link">Setup</a><a href="options.html" class="mobile-nav-link">Options</a><a href="render-file.html" class="mobile-nav-link">Render Files</a><a href="partials-and-layouts.html" class="mobile-nav-link">Includes and Layouts</a><a href="use-in-expressjs.html" class="mobile-nav-link">Use in Express.js</a><strong class="mobile-nav-title">Advanced</strong><a href="caching.html" class="mobile-nav-link">Caching</a><a href="escaping.html" class="mobile-nav-link">Escaping</a><a href="register-filters-tags.html" class="mobile-nav-link">Register Filters/Tags</a><a href="access-scope-in-filters.html" class="mobile-nav-link">Access Scope in Filters</a><a href="parse-parameters.html" class="mobile-nav-link">Parse Parameters</a><a href="render-tag-content.html" class="mobile-nav-link">Render Tag Content</a><a href="drops.html" class="mobile-nav-link current">Liquid Drops</a><a href="sync-and-async.html" class="mobile-nav-link">Sync and Async</a><a href="whitespace-control.html" class="mobile-nav-link">Whitespace Control</a><a href="plugins.html" class="mobile-nav-link">Plugins</a><a href="operators.html" class="mobile-nav-link">Operators</a><a href="truthy-and-falsy.html" class="mobile-nav-link">Truthy and Falsy</a><a href="dos.html" class="mobile-nav-link">DoS</a><strong class="mobile-nav-title">Miscellaneous</strong><a href="migrate-to-9.html" class="mobile-nav-link">Migrate to LiquidJS 9</a><a href="changelog.html" class="mobile-nav-link">Changelog</a><a href="differences.html" class="mobile-nav-link">Differences with Shopify/liquid</a><a href="contribution-guidelines.html" class="mobile-nav-link">Contribution Guidelines</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="mobile-button-list">
|
||
<a href="https://github.com/harttle/liquidjs" class="mobile-nav-link" rel="external" target="_blank"><i class="icon-github"></i></a>
|
||
<a href="https://opencollective.com/liquidjs" class="mobile-nav-link" rel="external" target="_blank"><i class="icon-opencollective"></i></a>
|
||
<div id="mobile-lang-select-wrap" class="mobile-nav-link">
|
||
<label for="mobile-lang-select"><i class="icon-network"></i></label>
|
||
<select id="mobile-lang-select" data-canonical="tutorials/drops.html">
|
||
|
||
<option value="en" selected>English</option>
|
||
|
||
<option value="zh-cn">简体中文</option>
|
||
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
|
||
<script src="../js/main.js"></script>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||
<script>
|
||
document.getElementById('search-input-wrap').classList.add('on');
|
||
docsearch({
|
||
apiKey: '01f36cc168657a26a385308b9e721bc6',
|
||
indexName: 'liquidjs',
|
||
inputSelector: '#search-input',
|
||
debug: false
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |