Files
liquidjs/zh-cn/index.html
T

268 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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/index.html">
<!-- Alternative links -->
<link rel="alternative" hreflang="en" href="https://liquidjs.com/zh-cn/">
<link rel="alternative" hreflang="zh-cn" href="https://liquidjs.com/zh-cn/zh-cn/">
<!-- 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="tutorials/setup.html" class="main-nav-link">教程</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="">
<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>
<header id="banner" class="wrapper">
<div class="inner">
<h2 id="banner-title">简单安全的 Liquid 模板引擎</h2>
<div id="banner-start">
<code id="banner-start-command">npm install liquidjs</code><a id="banner-start-link" href="./tutorials/setup.html"><i class="icon-arrow-right"></i></a>
</div>
<div id="banner-share"><!-- GitHub star -->
<a href="https://github.com/harttle/liquidjs" rel="external nofollow noreferrer" target="_blank" aria-label="Star harttle/liquidjs on GitHub"><img src="https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square" alt="Star"></a>
<!-- NPM Download -->
<a href="https://www.npmjs.com/package/liquidjs" rel="external nofollow noreferrer" target="_blank" aria-label="LiquidJS on NPM"><img src ="https://img.shields.io/npm/dm/liquidjs?logo=npm&style=flat-square" alt="NPM Downloads"></a>
<!-- Contributors button -->
<a href="https://github.com/harttle/liquidjs/graphs/contributors" rel="external nofollow noreferrer" target="_blank" aria-label="Contributors of LiquidJS on Github"><img src="https://img.shields.io/github/contributors/harttle/liquidjs.svg?style=flat-square" alt="Contributors of LiquidJS on Github"></a>
<!-- Open Collective button -->
<a href="https://opencollective.com/liquidjs/" rel="external nofollow noreferrer" target="_blank" aria-label="Donate to LiquidJS on Open Collective"><img src="https://img.shields.io/opencollective/all/liquidjs?style=flat-square" alt="Donate to LiquidJS on Open Collective"></a>
</div>
</div>
</header>
<div id="intro-news-list">
<div class="wrapper">
<div class="inner">
<div id="intro-news-flex">
<a href="https://github.com/harttle/liquidjs/pull/5" target="_blank" rel="noopener external nofollow noreferrer" class="intro-news-wrap">
<div class="intro-news-time">2016-09-12</div>
<div class="intro-news-title">异步化:重写了解析器和渲染器,使 LiquidJS 可以提供 Promise API 并支持异步的自定义 Tag 实现。</div>
</a>
<a href="https://opencollective.com/liquidjs/#section-contribute" target="_blank" rel="noopener external nofollow noreferrer" class="intro-news-wrap">
<div class="intro-news-time">2020-02-26</div>
<div class="intro-news-title">赞助人:第一个 backer 通过 Open Collective 贡献于 LiquidJS。</div>
</a>
<a href="https://github.com/harttle/liquidjs/pull/202" target="_blank" rel="noopener external nofollow noreferrer" class="intro-news-wrap">
<div class="intro-news-time">2020-03-11</div>
<div class="intro-news-title">内存优化:用更精细的手法重写了解析器,来避免临时字符串的生成,内存占用降低 57.7% 以上。</div>
</a>
<a href="https://github.com/harttle/liquidjs/pull/205" target="_blank" rel="noopener external nofollow noreferrer" class="intro-news-wrap">
<div class="intro-news-time">2020-03-15</div>
<div class="intro-news-title">性能提升:引入 AST 并重新设计 Token 类型系统,使渲染性能平均提升 100.3%。</div>
</a>
</div>
</div>
</div>
</div>
<div id="content-wrap">
<div class="wrapper">
<div class="inner">
<ul id="intro-feature-list"><li class="intro-feature-wrap"><div class="intro-feature"><div class="intro-feature-icon"><i class="icon-shield"></i></div><h3 class="intro-feature-title">安全渲染</h3><p class="intro-feature-desc">Liquid 模板有很强的可读性和容错性,适用于开放给设计师和客户。运算符和表达式都先解析到 AST 再去渲染,避免了 <code>eval</code><code>new Function</code></p></div></li><li class="intro-feature-wrap"><div class="intro-feature"><div class="intro-feature-icon"><i class="icon-rocket"></i></div><h3 class="intro-feature-title">零依赖</h3><p class="intro-feature-desc">零 NPM 依赖且没有 Native 绑定的 Liquid 实现,Node.js 和浏览器通用。同时提供了 CDN 可用的 CMD, ESM 和 CJS 打包。</p></div></li><li class="intro-feature-wrap"><div class="intro-feature"><div class="intro-feature-icon"><i class="icon-shopify"></i></div><h3 class="intro-feature-title">Shopify 兼容</h3><p class="intro-feature-desc">支持 <a href="https://github.com/shopify/liquid" target="_blank" rel="noopener external nofollow noreferrer">shopify/liquid</a> 的所有标签和过滤器,<a href="https://jekyllrb.com/" target="_blank" rel="noopener external nofollow noreferrer">Jekyll 站点</a>, <a href="https://pages.github.com/" target="_blank" rel="noopener external nofollow noreferrer">Github Pages</a><a href="https://themes.shopify.com/" target="_blank" rel="noopener external nofollow noreferrer">Shopify 模板</a> 都可以轻松迁移到 Node.js。</p></div></li><li class="intro-feature-wrap"><div class="intro-feature"><div class="intro-feature-icon"><i class="icon-typescript"></i></div><h3 class="intro-feature-title">TypeScript</h3><p class="intro-feature-desc">整个项目在 TypeScript strict 模式下重写,让这个库拥有顺滑的使用体验,同时确保了一致的 API 和实时的、精确的文档。</p></div></li></ul>
<ul id="intro-cmd-wrap">
<li class="intro-code-item"><span class="hl">import</span> { Liquid } <span class="hl">from</span> 'liquidjs'</li>
<li class="intro-code-item"><span class="hl">const</span> engine = <span class="hl">new</span> Liquid()</li>
<li class="intro-code-item"><span class="hl">const</span> tpl = engine.parse(<span class="hl-str">'Welcome to &#x7b;&#x7b;v}}!'</span>)</li>
<li class="intro-code-item">engine.render(tpl, {v: "Liquid"}).then(console.log)</li>
<li class="intro-code-item"><span class="hl-comment">// Outputs "Welcome to Liquid!"</span></li>
</ul>
<div id="intro-get-started-wrap">
<a href="tutorials/setup.html" id="intro-get-started-link">开始使用</a>
</div>
</div>
</div>
</div>
<div id="contributors-wrap">
<div class="wrapper">
<div class="inner">
<h3>贡献</h3>
<p class="description">LiquidJS 欢迎任何形式的贡献,可以从 <a href="tutorials/contribution-guidelines.html">阅读贡献指南</a> 开始!感谢这些参与过 LiquidJS 项目的人:</p>
<div class="all-contributors">
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="https://harttle.land" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/4427974?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/chenos" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/2993310?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://zachleat.com/" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars2.githubusercontent.com/u/39355?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/thardy" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/120636?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://paulrobertlloyd.com/" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/813383?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://twitter.com/alecdotbiz" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars2.githubusercontent.com/u/1925840?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/pmalouin" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars1.githubusercontent.com/u/1411117?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://jaswrks.com" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/1563559?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://oott123.com" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars2.githubusercontent.com/u/905663?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/ssendev" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/450793?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/wojtask9" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/6099236?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/thelornenelson" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/24596583?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://www.stam.pr/" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars2.githubusercontent.com/u/142338?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/thehappybug" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/3393530?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/robinbijlani" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/2503108?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://www.rmkennedy.com" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/8356669?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/strax" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars2.githubusercontent.com/u/587213?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://ScottFreeCode.github.io/" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/16506071?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="http://stevenrescigno.com" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/8505293?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://efcl.info/" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars1.githubusercontent.com/u/19714?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/wyozi" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/4894573?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/jamelait" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars1.githubusercontent.com/u/14369255?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://brandonpittman.net" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/967145?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/tgrandgent" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/17069042?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/mastodon0" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars1.githubusercontent.com/u/7924332?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="http://js.chenlei.me" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/6339390?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/CriGoT" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/1936786?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://www.raymondcamden.com" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/393660?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://stedman.dev" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars1.githubusercontent.com/u/183122?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://ciccarello.me" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/11273838?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://twitter.com/IAmTrySound" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/5635476?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://hightouch.io" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/5959235?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="http://about.me/peterdehaan" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars2.githubusercontent.com/u/557895?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/amit777" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/2703309?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="http://www.ifi.uzh.ch/en/ce/people/schuldenzucker.html" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars3.githubusercontent.com/u/1100776?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/Pixcell" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars0.githubusercontent.com/u/4005291?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://jasonet.co" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars.githubusercontent.com/u/10660468?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/kayuapi" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars.githubusercontent.com/u/10304328?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://memmie.lenglet.name" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars.githubusercontent.com/u/729275?v=4?s=100" width="100px;" alt=""/></a></td>
<td align="center"><a href="https://github.com/ilhamdev0" target="_blank" rel="noopener external nofollow noreferrer"><img src="https://avatars.githubusercontent.com/u/57636145?v=4?s=100" width="100px;" alt=""/></a></td>
</tr>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
</div>
</div>
</div>
</div>
<div id="sponsors-wrap">
<div class="wrapper">
<div class="inner">
<h3>赞助</h3>
<p class="description">如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS,请考虑 <a href="tutorials/contribution-guidelines.html#成为赞助者!">赞助 LiquidJS</a></p>
<div class="open-collective">
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
</div>
</div>
</div>
</div>
<footer id="footer" class="wrapper">
<div class="inner">
<div id="footer-copyright">
&copy; 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="tutorials/setup.html" class="mobile-nav-link">教程</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>
<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="">
<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>