mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 20:30:39 -07:00
Deploying to gh-pages from @ harttle/liquidjs@70fdb7af48 🚀
This commit is contained in:
harttle
+16
-16
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<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">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</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 target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" 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>
|
||||
@@ -87,23 +87,23 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">Render Files</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/render-file.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/tutorials/render-file.md" class="article-edit-link" title="Improve this doc"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>For a typical project there could be a directory of template files, you’ll need to set the <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">template root</a> and call <a href="../api/classes/liquid_.liquid.html#renderFile">renderFile</a> or <a href="../api/classes/liquid_.liquid.html#renderFilesync">renderFileSync</a> to render a specific file.</p>
|
||||
<h2 id="Render-a-File" class="article-heading"><a href="#Render-a-File" class="headerlink" title="Render a File"></a>Render a File<a class="article-anchor" href="#Render-a-File" aria-hidden="true"></a></h2><p>For example you have a directory of templates like this:</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── index.js</span><br><span class="line">└── views/</span><br><span class="line"> ├── hello.liquid</span><br><span class="line"> └── world.liquid</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p><code>hello.liquid</code> contains a single line `name: {{name}}`.<br>Now save the following contents into <code>index.js</code>:</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// root for layouts/includes lookup</span></span><br><span class="line"> extname: <span class="string">'.liquid'</span> <span class="comment">// used for layouts/includes, defaults ""</span></span><br><span class="line">});</span><br><span class="line">engine</span><br><span class="line"> .renderFile(<span class="string">"hello"</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>}) <span class="comment">// will read and render `views/hello.liquid`</span></span><br><span class="line"> .then(<span class="built_in">console</span>.log) <span class="comment">// outputs "Alice"</span></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> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: path.resolve(__dirname, <span class="string">'views/'</span>), <span class="comment">// root for layouts/includes lookup</span></span><br><span class="line"> <span class="attr">extname</span>: <span class="string">'.liquid'</span> <span class="comment">// used for layouts/includes, defaults ""</span></span><br><span class="line">});</span><br><span class="line">engine</span><br><span class="line"> .renderFile(<span class="string">"hello"</span>, {<span class="attr">name</span>: <span class="string">'alice'</span>}) <span class="comment">// will read and render `views/hello.liquid`</span></span><br><span class="line"> .then(<span class="built_in">console</span>.log) <span class="comment">// outputs "Alice"</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>Run <code>node index.js</code> and you’ll get output like this:</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">> node index.js</span><br><span class="line">name: alice</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">> node index.js</span><br><span class="line">name: alice</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="Template-Lookup" class="article-heading"><a href="#Template-Lookup" class="headerlink" title="Template Lookup"></a>Template Lookup<a class="article-anchor" href="#Template-Lookup" aria-hidden="true"></a></h2><p>Template files names passed to <a href="../api/classes/liquid_.liquid.html#renderFile">renderFile</a>, <a href="../api/classes/liquid_.liquid.html#parseFile">parseFile</a>, <a href="../api/classes/liquid_.liquid.html#renderFilesync">renderFileSync</a>, <a href="../api/classes/liquid_.liquid.html#parseFileSync">parseFileSync</a> APIs,<br>and <a href="https://help.shopify.com/themes/liquid/tags/theme-tags#include" target="_blank" rel="noopener external nofollow noreferrer">include</a>, <a href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout" target="_blank" rel="noopener external nofollow noreferrer">layout</a> tags are resolved against <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">the root option</a>.</p>
|
||||
<h2 id="Template-Lookup" class="article-heading"><a href="#Template-Lookup" class="headerlink" title="Template Lookup"></a>Template Lookup<a class="article-anchor" href="#Template-Lookup" aria-hidden="true"></a></h2><p>Template files names passed to <a href="../api/classes/liquid_.liquid.html#renderFile">renderFile</a>, <a href="../api/classes/liquid_.liquid.html#parseFile">parseFile</a>, <a href="../api/classes/liquid_.liquid.html#renderFilesync">renderFileSync</a>, <a href="../api/classes/liquid_.liquid.html#parseFileSync">parseFileSync</a> APIs,<br>and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/themes/liquid/tags/theme-tags#include">include</a>, <a target="_blank" rel="noopener external nofollow noreferrer" href="https://help.shopify.com/en/themes/liquid/tags/theme-tags#layout">layout</a> tags are resolved against <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-root">the root option</a>.</p>
|
||||
<p>It can be a string-typed path (see above example), or a list of root directories, in which case templates will be looked up in that order. e.g.</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> root: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> extname: <span class="string">'.liquid'</span></span><br><span class="line">});</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> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">root</span>: [<span class="string">'views/'</span>, <span class="string">'views/partials/'</span>],</span><br><span class="line"> <span class="attr">extname</span>: <span class="string">'.liquid'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<blockquote class="note tip"><strong class="note-title">Relative Paths</strong><p>Relative paths in <code>root</code> will be resolved against <code>cwd()</code>.</p>
|
||||
</blockquote>
|
||||
@@ -113,20 +113,20 @@
|
||||
<li><code>cwd()</code>/views/foo.liquid</li>
|
||||
<li><code>cwd()</code>/views/partials/foo.liquid</li>
|
||||
</ul>
|
||||
<p>If none of the above files exists, an <code>ENOENT</code> error will be throwed. Here’s a demo for Node.js: <a href="https://github.com/harttle/liquidjs/tree/master/demo/nodejs" target="_blank" rel="noopener external nofollow noreferrer">demo/nodejs</a>.</p>
|
||||
<p>When LiquidJS is used in browser, say current location is <a href="https://example.com/bar/index.html" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/index.html</a>, only the first <code>root</code> will be used and the file to be fetched is:</p>
|
||||
<p>If none of the above files exists, an <code>ENOENT</code> error will be throwed. Here’s a demo for Node.js: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/demo/nodejs">demo/nodejs</a>.</p>
|
||||
<p>When LiquidJS is used in browser, say current location is <a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/index.html">https://example.com/bar/index.html</a>, only the first <code>root</code> will be used and the file to be fetched is:</p>
|
||||
<ul>
|
||||
<li><a href="https://example.com/bar/foo.liquid" target="_blank" rel="noopener external nofollow noreferrer">https://example.com/bar/foo.liquid</a></li>
|
||||
<li><a target="_blank" rel="noopener external nofollow noreferrer" href="https://example.com/bar/foo.liquid">https://example.com/bar/foo.liquid</a></li>
|
||||
</ul>
|
||||
<p>If fetch fails, a 404/500 error or network failures for example, an <code>ENOENT</code> error will be throwed.<br>Here’s a demo for browsers: <a href="https://github.com/harttle/liquidjs/tree/master/demo/browser" target="_blank" rel="noopener external nofollow noreferrer">demo/browser</a>.</p>
|
||||
<h2 id="Abstract-File-System" class="article-heading"><a href="#Abstract-File-System" class="headerlink" title="Abstract File System"></a>Abstract File System<a class="article-anchor" href="#Abstract-File-System" aria-hidden="true"></a></h2><p>LiquidJS defines an abstract file system interface in <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/ifs.ts</a> and the default implementation is <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/node.ts</a> for Node.js and <a href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts" target="_blank" rel="noopener external nofollow noreferrer">src/fs/browser.ts</a> for the browser bundle.</p>
|
||||
<p>If fetch fails, a 404/500 error or network failures for example, an <code>ENOENT</code> error will be throwed.<br>Here’s a demo for browsers: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/tree/master/demo/browser">demo/browser</a>.</p>
|
||||
<h2 id="Abstract-File-System" class="article-heading"><a href="#Abstract-File-System" class="headerlink" title="Abstract File System"></a>Abstract File System<a class="article-anchor" href="#Abstract-File-System" aria-hidden="true"></a></h2><p>LiquidJS defines an abstract file system interface in <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/ifs.ts">src/fs/ifs.ts</a> and the default implementation is <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/node.ts">src/fs/node.ts</a> for Node.js and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/browser.ts">src/fs/browser.ts</a> for the browser bundle.</p>
|
||||
<p>The <code>Liquid</code> constructor provides a <a href="../api/interfaces/liquid_options_.liquidoptions.html#Optional-fs">fs</a> option to specify the file system implementation. It’s supposed to be used to define customized template fetching logic, i.e. fetch template from a database table, like:</p>
|
||||
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> fs: {</span><br><span class="line"> readFileSync (file) {</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> readFile (file) {</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> },</span><br><span class="line"> existsSync () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> exists () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> resolve(root, file, ext) {</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</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> engine = <span class="keyword">new</span> Liquid({</span><br><span class="line"> <span class="attr">fs</span>: {</span><br><span class="line"> readFileSync (file) {</span><br><span class="line"> <span class="keyword">return</span> db.model(<span class="string">'Template'</span>).findByIdSync(file).text</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> readFile (file) {</span><br><span class="line"> <span class="keyword">const</span> template = <span class="keyword">await</span> db.model(<span class="string">'Template'</span>).findById(file)</span><br><span class="line"> <span class="keyword">return</span> template.text</span><br><span class="line"> },</span><br><span class="line"> existsSync () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">await</span> exists () {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">resolve</span>(<span class="params">root, file, ext</span>)</span> {</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
|
||||
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">Last updated: 2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">Last updated: 2021-09-30</time>
|
||||
<a href="options.html" class="article-footer-prev" title="Options"><i class="icon-chevron-left"></i><span>Prev</span></a><a href="partials-and-layouts.html" class="article-footer-next" title="Includes and Layouts"><span>Next</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user