mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-16 12:50:38 -07:00
Deploying to gh-pages from @ harttle/liquidjs@70fdb7af48 🚀
This commit is contained in:
harttle
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,30 +87,30 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">插件</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/plugins.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/plugins.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>一组标签和过滤器可以封装为一个 <strong>插件</strong>，通常发包到 NPM 来方便使用。本文介绍如何创建和使用插件。</p>
|
||||
<h2 id="编写插件" class="article-heading"><a href="#编写插件" class="headerlink" title="编写插件"></a>编写插件<a class="article-anchor" href="#编写插件" aria-hidden="true"></a></h2><p>LiquidJS 插件就是一个简单的函数，它的第一个参数是 <a href="../../api/classes/liquid_.liquid.html">Liquid 类</a>，其中的 <code>this</code> 是它被注册到的 Liquid 实例。可以通过 <code>this</code> 来调用 Liquid API，比如 <a href="./register-filters-tags.html">注册标签和过滤器</a>。</p>
|
||||
<p>现在我们来写一个插件并在其中注册一个过滤器，来把输入字符串转换为大写：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Inside the plugin function, `this` refers to the Liquid instance.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>Liquid: provides facilities to implement tags and filters.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">Liquid</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.registerFilter(<span class="string">'upup'</span>, x => x.toUpperCase());</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Inside the plugin function, `this` refers to the Liquid instance.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>Liquid: provides facilities to implement tags and filters.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span> (<span class="params">Liquid</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.registerFilter(<span class="string">'upup'</span>, <span class="function"><span class="params">x</span> =></span> x.toUpperCase());</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>把上述代码保存为 <code>upup.js</code>。</p>
|
||||
<h2 id="使用插件" class="article-heading"><a href="#使用插件" class="headerlink" title="使用插件"></a>使用插件<a class="article-anchor" href="#使用插件" aria-hidden="true"></a></h2><p>把插件传递给 <code>.plugin()</code> 方法即可注册插件，例如：</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"></span><br><span class="line">engine.plugin(<span class="built_in">require</span>(<span class="string">'./upup.js'</span>));</span><br><span class="line">engine.parseAndRender(<span class="string">'{{ "foo" | upup }}'</span>).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"></span><br><span class="line">engine.plugin(<span class="built_in">require</span>(<span class="string">'./upup.js'</span>));</span><br><span class="line">engine.parseAndRender(<span class="string">'{{ "foo" | upup }}'</span>).then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>上述代码将会输出 <code>"FOO"</code>。</p>
|
||||
<h2 id="插件列表" class="article-heading"><a href="#插件列表" class="headerlink" title="插件列表"></a>插件列表<a class="article-anchor" href="#插件列表" aria-hidden="true"></a></h2><p>由于本仓库只包含 <a href="https://github.com/Shopify/liquid/" target="_blank" rel="noopener external nofollow noreferrer">Shopify/liquid</a> 核心仓库的标签和插件（参考 <a href="https://github.com/harttle/liquidjs#differences-and-limitations" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs#differences-and-limitations</a>），Shopify 平台上特有的插件只能通过插件来使用。</p>
|
||||
<h2 id="插件列表" class="article-heading"><a href="#插件列表" class="headerlink" title="插件列表"></a>插件列表<a class="article-anchor" href="#插件列表" aria-hidden="true"></a></h2><p>由于本仓库只包含 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid/">Shopify/liquid</a> 核心仓库的标签和插件（参考 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs#differences-and-limitations">https://github.com/harttle/liquidjs#differences-and-limitations</a>），Shopify 平台上特有的插件只能通过插件来使用。</p>
|
||||
<p>这里是一个插件列表，欢迎添加你的插件（点击右上角编辑按钮）：</p>
|
||||
<ul>
|
||||
<li>Sections 标签（开发中）： <a href="https://github.com/harttle/liquidjs-section-tags" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs-section-tags</a></li>
|
||||
<li>颜色过滤器： <a href="https://github.com/harttle/liquidjs-color-filters" target="_blank" rel="noopener external nofollow noreferrer">https://github.com/harttle/liquidjs-color-filters</a></li>
|
||||
<li>Sections 标签（开发中）： <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs-section-tags">https://github.com/harttle/liquidjs-section-tags</a></li>
|
||||
<li>颜色过滤器： <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs-color-filters">https://github.com/harttle/liquidjs-color-filters</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="whitespace-control.html" class="article-footer-prev" title="换行和缩进"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="operators.html" class="article-footer-next" title="运算符"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -119,7 +119,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#编写插件"><span class="toc-text">编写插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用插件"><span class="toc-text">使用插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件列表"><span class="toc-text">插件列表</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E6%8F%92%E4%BB%B6"><span class="toc-text">编写插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6"><span class="toc-text">使用插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6%E5%88%97%E8%A1%A8"><span class="toc-text">插件列表</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user