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="en">
|
|
<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 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/index.html">
|
|
<!-- Alternative links -->
|
|
|
|
|
|
<link rel="alternative" hreflang="en" href="https://liquidjs.com/">
|
|
|
|
<link rel="alternative" hreflang="zh-cn" href="https://liquidjs.com/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="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="">
|
|
|
|
<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>
|
|
|
|
<header id="banner" class="wrapper">
|
|
<div class="inner">
|
|
<h2 id="banner-title">A simple, expressive and safe template engine.</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">Backers: the first backer contributed to LiquidJS via Open Collective.</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">Memory Optimization: a more elaborate parser reducing the memory footprint by 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">Performance Boost: a simple AST to improve render performance by 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">Streamed Rendering: now render is 4x faster and support streamed rendering.</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">Safe Rendering</h3><p class="intro-feature-desc">Liquid templates are highly readable and fault-tolerant thus suitable for designers and customers. Operators and expressions are parsed to AST and no <code>eval</code> or <code>new Function</code> are used. </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">Zero Dependency</h3><p class="intro-feature-desc">Written with zero npm dependency and no native binding, available in both Node.js and browsers. All of the CMD, ESM and CJS bundles are available on CDN.</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 Compatible</h3><p class="intro-feature-desc">All filters and tags from Ruby <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/shopify/liquid">shopify/liquid</a> are supported by LiquidJS. <a target="_blank" rel="noopener external nofollow noreferrer" href="https://jekyllrb.com/">Jekyll sites</a>, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://pages.github.com/">Github Pages</a> and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://themes.shopify.com/">Shopify templates</a> can be ported to Node.js without pain.</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 Strict</h3><p class="intro-feature-desc">The whole repo is re-written in TypeScript strict mode to ensure a smooth experience using this lib and the document is precise and always up to date.</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">Get Started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="contributors-wrap">
|
|
<div class="wrapper">
|
|
<div class="inner">
|
|
<h3>Contributors</h3>
|
|
<p class="description">LiquidJS follows the <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/all-contributors/all-contributors">all-contributors</a> specification, see <a href="tutorials/contribution-guidelines.html">guildelines here</a>! Thanks goes to these wonderful people:</p>
|
|
<div class="contributors">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="sponsors-wrap">
|
|
<div class="wrapper">
|
|
<div class="inner">
|
|
<h3>Sponsors</h3>
|
|
<p class="description">If you personally love LiquidJS or it's benefiting your business, please <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/sponsors/harttle">sponsor us</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>
|
|
Documentation licensed under <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">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>
|
|
<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" 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> |