mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 04:10:40 -07:00
213 lines
16 KiB
HTML
213 lines
16 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">
|
||
<meta name="description" content="LiquidJS 是一个纯 JavaScript 实现的，简洁的、安全的模板引擎，兼容 Shopify / Github Pages。">
|
||
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
|
||
<link rel="manifest" href="/zh-cn/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" type="application/atom+xml">
|
||
<meta name="generator" content="Hexo 5.4.0"></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/intro-to-liquid.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.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 class="main-nav-link icon-nav-link">
|
||
<label><i class="icon-network"></i> <span class="icon-nav-title">简体中文</span></label>
|
||
<select id="lang-select" data-canonical="">
|
||
|
||
<option value="en">English</option>
|
||
|
||
<option value="zh-cn" selected>简体中文</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>
|
||
|
||
<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"><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"><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"><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"><img src="https://img.shields.io/opencollective/all/liquidjs?style=flat-square" alt="Donate to LiquidJS on Open Collective"></a>
|
||
<!-- License button -->
|
||
<a href="https://github.com/harttle/liquidjs/blob/master/LICENSE" rel="external nofollow noreferrer" target="_blank"><img src="https://img.shields.io/dub/l/vibe-d.svg?style=flat-square" alt="LiquidJS publishes with MIT license"></a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div id="intro-news-list">
|
||
<div class="wrapper">
|
||
<div class="inner">
|
||
<div id="intro-news-flex">
|
||
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://opencollective.com/liquidjs/#section-contribute" 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 target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/202" class="intro-news-wrap">
|
||
<div class="intro-news-time">2020-03-11</div>
|
||
<div class="intro-news-title">内存优化：用更精细的手法重写了解析器，来避免临时字符串的生成，内存占用降低 57.7% 以上。</div>
|
||
</a>
|
||
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/pull/205" class="intro-news-wrap">
|
||
<div class="intro-news-time">2020-03-15</div>
|
||
<div class="intro-news-title">性能提升：引入 AST 并重新设计 Token 类型系统，使渲染性能平均提升 100.3%。</div>
|
||
</a>
|
||
|
||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/milestone/3?closed=1" class="intro-news-wrap">
|
||
<div class="intro-news-time">2021-09-30</div>
|
||
<div class="intro-news-title">流式渲染：4 倍渲染速度，并增加了对流式渲染的支持。</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 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://jekyllrb.com/">Jekyll 站点</a>, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://pages.github.com/">Github Pages</a> 和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://themes.shopify.com/">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>
|
||
<div id="intro-cmd-wrap" class="highlight typescript"><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 class="keyword">const</span> tpl = engine.parse(<span class="string">'Welcome to {{v}}!'</span>)</span><br><span class="line">engine.render(tpl, {<span class="attr">v</span>: <span class="string">"Liquid"</span>}).then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// Outputs "Welcome to Liquid!"</span></span><br></pre></div>
|
||
<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="contributors">
|
||
|
||
</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="contributors">
|
||
<table> <tbody> <tr> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.opensense.com/"><img src="https://images.opencollective.com/opensense-inc/bf840ae/logo/256.png?height=100" alt="Opensense Inc."/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.11ty.dev/"><img src="https://avatars.githubusercontent.com/u/35147177?v=4?s=100" alt="Eleventy"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="http://about.me/peterdehaan"><img src="https://avatars2.githubusercontent.com/u/557895?v=4?s=100" alt="Peter deHaan"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://opencollective.com/touchless"><img src="https://images.opencollective.com/touchless/273bc74/logo/256.png?height=100" alt="Touchless"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.dropkiq.com/"><img src="https://images.opencollective.com/1bertlol/43a8ea8/logo/256.png?height=100" alt="Adam Darrah"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://dailycontributors.com/"><img src="https://images.opencollective.com/dailycontributors/3c2e057/logo/256.png?height=100&width=100" alt="Dailycontributors"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/coni2k"><img src="https://avatars0.githubusercontent.com/u/1284601?v=4?s=100" alt="coni2k"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/amit777"><img src="https://avatars0.githubusercontent.com/u/2703309?v=4?s=100" alt="amit777"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://opencollective.com/khaled-salem"><img src="https://images.opencollective.com/khaled-salem/avatar/256.png?height=256" alt="Khaled Salem"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://sentry.io/"><img src="https://avatars.githubusercontent.com/u/1396951?v=4?s=100" alt="Sentry"/></a></td> <td align="center" valign="top" ><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.checkoutblocks.com/"><img src="https://avatars.githubusercontent.com/u/114603307?v=4?s=100" alt="Checkout Blocks"/></a></td> </tr> </tbody></table>
|
||
</div>
|
||
</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>
|
||
本文档通过 <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://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">教程</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.html" class="mobile-nav-link">API</a>
|
||
</ul>
|
||
|
||
</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="">
|
||
|
||
<option value="en">English</option>
|
||
|
||
<option value="zh-cn" selected>简体中文</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> |