Deploying to gh-pages from @ harttle/liquidjs@3cd024d652 🚀

tutorials/render-file.html

@@ -116,24 +116,21 @@ name: alice<span aria-hidden="true" class="line-numbers-rows"><span></span><span
 <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.html#renderFile">renderFile</a>, <a href="/api/classes/Liquid.html#parseFile">parseFile</a>, <a href="/api/classes/Liquid.html#renderFileSync">renderFileSync</a>, <a href="/api/classes/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/LiquidOptions.html#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>
 <pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
-    <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'views/'</span><span class="token punctuation">,</span> <span class="token string">'views/partials/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'views/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">partials</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'views/partials/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">layouts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'views/layouts/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
     <span class="token literal-property property">extname</span><span class="token operator">:</span> <span class="token string">'.liquid'</span>
-<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
+<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
 
 <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>
 
-<p>When <code>{% render "foo" %}</code> is rendered or <code>liquid.renderFile(&#39;foo&#39;)</code> is called, the following files will be looked up and the first existing file will be used:</p>
 <ul>
-<li><code>cwd()</code>/views/foo.liquid</li>
-<li><code>cwd()</code>/views/partials/foo.liquid</li>
+<li>When <code>parse()</code>, <code>render()</code> functions are called, for example <code>liquid.renderFile(&#39;foo&#39;)</code>, templates under <code>root</code> will be looked up.</li>
+<li>When a partial is requested, for example <code>{% render "foo" %}</code>, templates under <code>partials</code> will be looked up.</li>
+<li>When a layout is requested, for example <code>{% layout "foo" %}</code>, templates under <code>layouts</code> will be looked up.</li>
 </ul>
-<p>If none of the above files exists, an <code>ENOENT</code> error will be thrown. 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 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 thrown.<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>
+<p>When LiquidJS is used in browser, the paths will be resolved based on current location. 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 <a href="/api/interfaces/FS.html">abstract file system interface</a> and the default implementation is <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/fs-impl.ts">src/fs/fs-impl.ts</a> for Node.js and <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/blob/master/src/fs/fs-impl-browser.ts">src/build/fs-impl-browser.ts</a> for the browser bundle.</p>
 <p>The <code>Liquid</code> constructor provides a <a href="/api/interfaces/LiquidOptions.html#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>
 <pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> engine <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
@@ -177,7 +174,7 @@ engine<span class="token punctuation">.</span><span class="token function">rende
 
               </div>
               <footer class="article-footer">
-                <time class="article-footer-updated" datetime="2026-02-14T05:54:16.251Z" itemprop="dateModified">Last updated: 2026-02-14</time>
+                <time class="article-footer-updated" datetime="2026-03-07T18:36:21.754Z" itemprop="dateModified">Last updated: 2026-03-07</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>