mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 04:10:40 -07:00
179 lines
8.9 KiB
HTML
179 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head prefix="og: https://ogp.me/ns#">
|
|
<meta charset="utf-8">
|
|
<title>Playground | 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="An online code editor to try out and share Liquid templates">
|
|
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<!-- Canonical links -->
|
|
<link rel="canonical" href="https://liquidjs.com/playground.html">
|
|
<!-- Alternative links -->
|
|
|
|
<!-- 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">
|
|
<script src="https://cdn.cookiehub.eu/c2/e8e44c93.js"></script>
|
|
<script type="text/javascript">
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') return;
|
|
var cpm = {};
|
|
window.cookiehub.load(cpm);
|
|
});
|
|
</script>
|
|
<meta name="generator" content="Hexo 7.3.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 active">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 github-buttons-wrap">
|
|
<span class="gh-star">
|
|
<a class="gh-btn" href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" aria-label="Star harttle/liquidjs on GitHub">
|
|
<svg class="gh-btn-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
|
<span>Star</span>
|
|
</a>
|
|
<a class="gh-count" id="gh-star-count" href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" aria-label="harttle/liquidjs stargazers"></a>
|
|
</span>
|
|
<a class="gh-btn gh-sponsor" href="https://github.com/sponsors/harttle" target="_blank" rel="noopener external nofollow noreferrer" aria-label="Sponsor @harttle on GitHub">
|
|
<svg class="gh-btn-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
|
<span>Sponsor</span>
|
|
</a>
|
|
</div>
|
|
<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="playground" role="main">
|
|
<div class="wrapper">
|
|
<h1 class="inner">Playground</h1>
|
|
<div class="loader" role=status aria-busy=true></div>
|
|
<div id="editors" class="inner hide" aria-hide=true>
|
|
<div class="area-tpl editor-wrapper">
|
|
<h2>Template</h2>
|
|
<div class="editor" id="editorEl"><ul>
|
|
{%- for person in people %}
|
|
<li>
|
|
<a href="{{person | prepend: "https://example.com/"}}">
|
|
{{ person | capitalize }}
|
|
</a>
|
|
</li>
|
|
{%- endfor%}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="area-data editor-wrapper">
|
|
<h2>Context</h2>
|
|
<div class="editor" id="dataEl">{
|
|
"people": [
|
|
"alice",
|
|
"bob",
|
|
"carol"
|
|
]
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="area-output editor-wrapper">
|
|
<h2>Output</h2>
|
|
<div class="editor" id="previewEl">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<p class="inner version"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer id="footer" class="wrapper">
|
|
<div class="inner">
|
|
<div id="footer-copyright">
|
|
© 2026 <a href="https://github.com/harttle/liquidjs/graphs/contributors" rel="external nofollow noreferrer" target="_blank">Harttle</a><br>
|
|
Documentation licensed under <a href="https://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 active">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>
|
|
</nav>
|
|
|
|
|
|
<script src="js/liquid.browser.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/ace.js"></script>
|
|
|
|
|
|
|
|
<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({
|
|
appId: 'QJ35YOZTU4',
|
|
apiKey: '8c6cbb824b4c5023f0bb2ef29e228bef',
|
|
indexName: 'liquidjs',
|
|
inputSelector: '#search-input',
|
|
debug: false
|
|
});
|
|
</script>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GM713991QQ"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-GM713991QQ');
|
|
</script>
|
|
</body>
|
|
</html> |