mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 12:20:40 -07:00
208 lines
17 KiB
HTML
208 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head prefix="og: http://ogp.me/ns#">
|
|
<meta charset="utf-8">
|
|
<title>安装和使用 | LiquidJS</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<!-- Canonical links -->
|
|
<link rel="canonical" href="https://liquidjs.com/zh-cn/tutorials/setup.html">
|
|
<!-- Alternative links -->
|
|
|
|
|
|
<link rel="alternative" hreflang="en" href="https://liquidjs.com/zh-cn/tutorials/setup">
|
|
|
|
<link rel="alternative" hreflang="zh-cn" href="https://liquidjs.com/zh-cn/zh-cn/tutorials/setup">
|
|
|
|
|
|
<!-- 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">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<header id="header" class="wrapper">
|
|
<div id="header-inner" class="inner">
|
|
<h1 id="logo-wrap">
|
|
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
|
</h1>
|
|
<nav id="main-nav">
|
|
<a href="" class="main-nav-link active">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/liquid_.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="搜索...">
|
|
</div>
|
|
</nav>
|
|
<div id="lang-select-wrap" class="main-nav-link">
|
|
<label><i class="icon-network"></i>简体中文</label>
|
|
<select id="lang-select" data-canonical="tutorials/setup.html">
|
|
|
|
<option value="en">English</option>
|
|
|
|
<option value="zh-cn" selected>简体中文</option>
|
|
|
|
</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 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">开始使用</strong><a href="intro-to-liquid.html" class="sidebar-link">Liquid 简介</a><a href="setup.html" class="sidebar-link current">安装</a><a href="options.html" class="sidebar-link">选项</a><a href="render-file.html" class="sidebar-link">文件渲染</a><a href="partials-and-layouts.html" class="sidebar-link">引用/继承</a><a href="use-in-expressjs.html" class="sidebar-link">Express.js 中使用</a><strong class="sidebar-title">高级主题</strong><a href="caching.html" class="sidebar-link">缓存</a><a href="register-filters-tags.html" class="sidebar-link">注册标签/过滤器</a><a href="whitespace-control.html" class="sidebar-link">换行和缩进</a><a href="plugins.html" class="sidebar-link">插件</a><a href="operators.html" class="sidebar-link">运算符</a><a href="truthy-and-falsy.html" class="sidebar-link">真和假</a><strong class="sidebar-title">其他</strong><a href="migrate-to-9.html" class="sidebar-link">迁移到 LiquidJS 9</a><a href="changelog.html" class="sidebar-link">更新日志</a><a href="differences.html" class="sidebar-link">与 Shopify/liquid 的不同</a><a href="contribution-guidelines.html" class="sidebar-link">贡献指南</a>
|
|
</div>
|
|
</aside>
|
|
<article class="article-container" itemscope itemtype="http://schema.org/Article">
|
|
<div class="article-inner">
|
|
<div class="article">
|
|
<div class="inner">
|
|
<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/setup.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
|
|
|
</header>
|
|
<div class="article-content" itemprop="articleBody">
|
|
<p>如果你还不了解 Liquid 模板语言，请参考 <a href="./intro-to-liquid.html">Liquid 模板语言简介</a>。</p>
|
|
<h2 id="在-Node-js-里使用" class="article-heading"><a href="#在-Node-js-里使用" class="headerlink" title="在 Node.js 里使用"></a>在 Node.js 里使用<a class="article-anchor" href="#在-Node-js-里使用" aria-hidden="true"></a></h2><p>通过 NPM 安装：</p>
|
|
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install --save liquidjs</span><br></pre></td></tr></table></figure>
|
|
|
|
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> { Liquid } = <span class="built_in">require</span>(<span class="string">'liquidjs'</span>);</span><br><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid();</span><br><span class="line"></span><br><span class="line">engine</span><br><span class="line"> .parseAndRender(<span class="string">'{{name | capitalize}}'</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>})</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// 输出 'Alice'</span></span><br></pre></td></tr></table></figure>
|
|
|
|
<blockquote class="note info"><strong class="note-title">示例</strong><p>这里有一个 LiquidJS 在 Node.js 里使用的例子：<a href="https://github.com/harttle/liquidjs/blob/master/demo/nodejs/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/nodejs/</a>.</p>
|
|
</blockquote>
|
|
|
|
LiquidJS 的类型定义也导出并发布到了 NPM 包里，写 TypeScript 的项目可以直接这样使用：
|
|
|
|
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { Liquid } <span class="keyword">from</span> <span class="string">'liquidjs'</span>;</span><br><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</span><br><span class="line"> .parseAndRender(<span class="string">'{{name | capitalize}}'</span>, {name: <span class="string">'alice'</span>})</span><br><span class="line"> .then(<span class="built_in">console</span>.log); <span class="comment">// 输出 'Alice'</span></span><br></pre></td></tr></table></figure>
|
|
|
|
<blockquote class="note info"><strong class="note-title">示例</strong><p>这里有一个 LiquidJS 在 TypeScript 下的例子：<a href="https://github.com/harttle/liquidjs/blob/master/demo/typescript/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/typescript/</a>.</p>
|
|
</blockquote>
|
|
|
|
<h2 id="在浏览器里使用" class="article-heading"><a href="#在浏览器里使用" class="headerlink" title="在浏览器里使用"></a>在浏览器里使用<a class="article-anchor" href="#在浏览器里使用" aria-hidden="true"></a></h2><p>LiquidJS 预先构建了 UMD Bundle，可以通过 jsDelivr CDN 来引用：</p>
|
|
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span> <span class="comment"><!--生产环境--></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.umd.js"</span>></span><span class="tag"></<span class="name">script</span>></span> <span class="comment"><!--开发环境--></span></span><br></pre></td></tr></table></figure>
|
|
|
|
<blockquote class="note info"><strong class="note-title">示例</strong><p>这里有一个 jsFiddle 上的在线例子：<a href="https://jsfiddle.net/x43eb0z6/" rel="external nofollow noreferrer" target="_blank">jsfiddle.net/x43eb0z6</a>，其源码也可以在 <a href="https://github.com/harttle/liquidjs/blob/master/demo/browser/" rel="external nofollow noreferrer" target="_blank">liquidjs/demo/browser/</a> 找到。</p>
|
|
</blockquote>
|
|
|
|
<blockquote class="note warn"><strong class="note-title">兼容性</strong><p>在类似 IE 和 Android UC 这样的浏览器中，你可能需要引入 <a href="https://github.com/taylorhakes/promise-polyfill" rel="external nofollow noreferrer" target="_blank">Promise polyfill</a>，参看 <a href="http://caniuse.com/#feat=promises" rel="external nofollow noreferrer" target="_blank">caniuse 的统计</a>。 </p>
|
|
</blockquote>
|
|
|
|
<h2 id="在命令行里使用" class="article-heading"><a href="#在命令行里使用" class="headerlink" title="在命令行里使用"></a>在命令行里使用<a class="article-anchor" href="#在命令行里使用" aria-hidden="true"></a></h2><p>你还可以在命令行里使用 LiquidJS：</p>
|
|
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'{{"hello" | capitalize}}'</span> | npx liquidjs</span><br></pre></td></tr></table></figure>
|
|
|
|
<p>模板来自标准输入，数据则来自参数，这个参数可以是一个 JSON 文件的路径，也可以是一个 JSON 字符串：</p>
|
|
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">'Hello, {{ name }}.'</span> | npx liquidjs <span class="string">'{"name": "Snake"}'</span></span><br></pre></td></tr></table></figure>
|
|
|
|
<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/stevenanthonyrevo" target="_blank" rel="noopener external nofollow noreferrer">@stevenanthonyrevo</a> 还提供了一个 ReactJS demo，请参考 <a href="https://github.com/harttle/liquidjs/blob/master/demo/reactjs/" target="_blank" rel="noopener external nofollow noreferrer">liquidjs/demo/reactjs/</a>。</p>
|
|
|
|
</div>
|
|
<footer class="article-footer">
|
|
<time class="article-footer-updated" datetime="2021-06-20T06:22:03.360Z" itemprop="dateModified">上次更新：2021-06-20</time>
|
|
<a href="intro-to-liquid.html" class="article-footer-prev" title="Liquid 简介"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="options.html" class="article-footer-next" title="选项"><span>下一页</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">目录</strong>
|
|
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#在-Node-js-里使用"><span class="toc-text">在 Node.js 里使用</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><li class="toc-item toc-level-2"><a class="toc-link" href="#其他"><span class="toc-text">其他</span></a></li></ol>
|
|
</div>
|
|
<a href="#" id="article-toc-top">回到顶部</a>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer id="footer" class="wrapper">
|
|
<div class="inner">
|
|
<div id="footer-copyright">
|
|
© 2021 <a href="https://github.com/harttle/liquidjs/graphs/contributors" rel="external nofollow noreferrer" target="_blank">Harttle</a><br>
|
|
本文档通过 <a href="http://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://www.patreon.com/harttle" rel="external nofollow noreferrer" class="footer-link" target="_blank"><i class="icon-patreon"></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="" class="mobile-nav-link active">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/liquid_.liquid.html" class="mobile-nav-link">API</a>
|
|
<li class="mobile-nav-item">
|
|
<a href="https://github.com/harttle/liquidjs" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mobile-sidebar-list">
|
|
<strong class="mobile-nav-title">开始使用</strong><a href="intro-to-liquid.html" class="mobile-nav-link">Liquid 简介</a><a href="setup.html" class="mobile-nav-link current">安装</a><a href="options.html" class="mobile-nav-link">选项</a><a href="render-file.html" class="mobile-nav-link">文件渲染</a><a href="partials-and-layouts.html" class="mobile-nav-link">引用/继承</a><a href="use-in-expressjs.html" class="mobile-nav-link">Express.js 中使用</a><strong class="mobile-nav-title">高级主题</strong><a href="caching.html" class="mobile-nav-link">缓存</a><a href="register-filters-tags.html" class="mobile-nav-link">注册标签/过滤器</a><a href="whitespace-control.html" class="mobile-nav-link">换行和缩进</a><a href="plugins.html" class="mobile-nav-link">插件</a><a href="operators.html" class="mobile-nav-link">运算符</a><a href="truthy-and-falsy.html" class="mobile-nav-link">真和假</a><strong class="mobile-nav-title">其他</strong><a href="migrate-to-9.html" class="mobile-nav-link">迁移到 LiquidJS 9</a><a href="changelog.html" class="mobile-nav-link">更新日志</a><a href="differences.html" class="mobile-nav-link">与 Shopify/liquid 的不同</a><a href="contribution-guidelines.html" class="mobile-nav-link">贡献指南</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="mobile-lang-select-wrap">
|
|
<span id="mobile-lang-select-label"><i class="icon-network"></i><span>简体中文</span></span>
|
|
<select id="mobile-lang-select" data-canonical="tutorials/setup.html">
|
|
|
|
<option value="en">English</option>
|
|
|
|
<option value="zh-cn" selected>简体中文</option>
|
|
|
|
</select>
|
|
</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> |