Eleventy Documentation
The Full Eleventy Documentation, sorted by recent git commits.
2024-02-29T14:43:37Z
https://www.11ty.dev/
Zach Leatherman
zach@zachleat.com
Image
2023-11-15T22:12:31Z
https://www.11ty.dev/docs/plugins/image/
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/image/#features">Features </a><ul><li><a href="https://www.11ty.dev/docs/plugins/image/#even-more-features">Even more features </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/image/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/image/#output-widths">Output Widths </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#output-formats">Output Formats </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#output-locations">Output Locations </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#options-for-svg">Options for SVG </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#custom-filenames">Custom Filenames </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/image/#use-this-in-your-templates">Use this in your templates </a><ul><li><a href="https://www.11ty.dev/docs/plugins/image/#webc">WebC </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#nunjucks-liquid-javascript-(asynchronous-shortcodes)">Nunjucks, Liquid, JavaScript (Asynchronous Shortcodes) </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#synchronous-shortcode">Synchronous Shortcode </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#make-your-own-markup">Make your own Markup </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#process-images-as-a-custom-template">Process images as a Custom Template </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#process-images-as-data-files">Process images as Data Files </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/image/#advanced-usage">Advanced Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/image/#caching">Caching </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#dry-run">Dry-Run </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#change-global-plugin-concurrency">Change Global Plugin Concurrency </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#advanced-control-of-sharp-image-processor">Advanced control of Sharp image processor </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#change-the-default-hash-length">Change the default Hash length </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#advanced-caching-options-for-remote-images">Advanced Caching Options for Remote Images </a></li><li><a href="https://www.11ty.dev/docs/plugins/image/#using-a-hosted-image-service">Using a Hosted Image Service </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/image/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<p>Low level utility to perform build-time image transformations for both vector and raster images. Output multiple sizes, save multiple formats, cache remote images locally. Uses the <a href="https://sharp.pixelplumbing.com/">sharp</a> image processor.</p>
<ul>
<li><a href="https://github.com/11ty/eleventy-img"><code>eleventy-img</code> on GitHub</a></li>
</ul>
<h2 id="features" tabindex="-1">Features <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You maintain full control of the HTML. Use with <code><picture></code> or <code><img></code> or CSS <code>background-image</code>, or others! Works great to add <code>width</code> and <code>height</code> to your images!</p>
<ul>
<li>Accepts a variety of image types as input: <code>jpeg</code>, <code>png</code>, <code>webp</code>, <code>gif</code>, <code>tiff</code>, <code>avif</code>, and <code>svg</code>.</li>
<li>Output multiple sizes, keeping the original aspect ratio. Never upscales raster images larger than original size (with the option to upscale SVG input).</li>
<li>Output multiple formats, supports: <code>jpeg</code>, <code>png</code>, <code>webp</code>, <code>avif</code>, and <code>svg</code> (requires SVG input)</li>
</ul>
<h3 id="even-more-features" tabindex="-1">Even more features <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#even-more-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>Easily add <code>width</code> and <code>height</code> attributes on <code><img></code> elements for <a href="https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping">proper aspect ratio mapping</a>.</li>
<li>Does not require or rely on file extensions (like <code>.png</code> or <code>.jpg</code>) in URLs or local files, which may be missing or inaccurate.</li>
<li>Save remote images locally to prevent broken image URLs (using <a href="https://www.11ty.dev/docs/plugins/fetch/"><code>eleventy-fetch</code></a>).</li>
<li>Fast: de-duplicates image requests and uses both an in-memory and disk cache.</li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Published as <a href="https://www.npmjs.com/package/@11ty/eleventy-img"><code>@11ty/eleventy-img</code></a> on npm.</p>
<pre><code>npm install @11ty/eleventy-img
</code></pre>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This utility returns a Promise and works best in <code>async</code> friendly functions, filters, shortcodes. It <em>can</em> also work in synchronous environments (<a href="https://www.11ty.dev/docs/plugins/image/#synchronous-shortcode">Synchronous Usage</a>).</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">"https://images.unsplash.com/photo-1608178398319-48f814d0750c"</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> stats <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> stats <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Three things happen here:</p>
<ol>
<li>If the first argument is a full URL (not a local file path), we download <a href="https://unsplash.com/photos/uXchDIKs4qI">the remote image</a> and cache it locally using the <a href="https://www.11ty.dev/docs/plugins/fetch/">Fetch plugin</a>. This cached original is then used for the cache duration to avoid a bunch of network requests.</li>
<li>From that cached full-size original, images are created for each format and width, in this case: <code>./img/6dfd7ac6-300.webp</code> and <code>./img/6dfd7ac6-300.jpeg</code>.</li>
<li>A metadata object is returned, describing those new images.</li>
</ol>
<details><summary>Expand to see a sample returned metadata object</summary>
<div id="sample-return-object"></div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">webp</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">'webp'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span><br> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span><br> <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'6dfd7ac6-300.webp'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">outputPath</span><span class="token operator">:</span> <span class="token string">'img/6dfd7ac6-300.webp'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/img/6dfd7ac6-300.webp'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">'image/webp'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">srcset</span><span class="token operator">:</span> <span class="token string">'/img/6dfd7ac6-300.webp 300w'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">10184</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">jpeg</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">'jpeg'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span><br> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span><br> <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'6dfd7ac6-300.jpeg'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">outputPath</span><span class="token operator">:</span> <span class="token string">'img/6dfd7ac6-300.jpeg'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/img/6dfd7ac6-300.jpeg'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">'image/jpeg'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">srcset</span><span class="token operator">:</span> <span class="token string">'/img/6dfd7ac6-300.jpeg 300w'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">15616</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span></code></pre>
</details>
<details>
<summary>Expand to see the full list of options (defaults shown)</summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> stats <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"…"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// Array of integers or "auto"</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"auto"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Array of file format extensions or "auto"</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"webp"</span><span class="token punctuation">,</span> <span class="token string">"jpeg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token comment">// the URLs in markup are prefixed with this</span><br> <span class="token literal-property property">urlPath</span><span class="token operator">:</span> <span class="token string">"/img/"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// the images are written here</span><br> <span class="token literal-property property">outputDir</span><span class="token operator">:</span> <span class="token string">"./img/"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// skip raster formats if SVG available</span><br> <span class="token literal-property property">svgShortCircuit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br><br> <span class="token comment">// SVG file sizes can report the compressed size</span><br> <span class="token literal-property property">svgCompressionSize</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br><br> <span class="token comment">// allow svg to upscale beyond supplied dimensions?</span><br> <span class="token literal-property property">svgAllowUpscale</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br><br> <span class="token comment">// the file name hash length</span><br> <span class="token literal-property property">hashLength</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Custom file name callback (see below)</span><br> <span class="token function-variable function">filenameFormat</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Advanced options passed to eleventy-fetch</span><br> <span class="token literal-property property">cacheOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Advanced options passed to sharp</span><br> <span class="token literal-property property">sharpOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">sharpWebpOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">sharpPngOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">sharpJpegOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">sharpAvifOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Custom full URLs (use with hosted services, see below)</span><br> <span class="token function-variable function">urlFormat</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</details>
<h3 id="output-widths" tabindex="-1">Output Widths <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#output-widths">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Controls how many output images will be created for each image format. Aspect ratio is preserved.</p>
<ul>
<li><code>widths: ["auto"]</code> (default, keep original width) <code>"auto"</code>.</li>
<li><code>widths: [200]</code> (output one 200px width)</li>
<li><code>widths: [200, "auto"]</code> (output 200px and original width)</li>
</ul>
<h3 id="output-formats" tabindex="-1">Output Formats <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#output-formats">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use almost any combination of these:</p>
<ul>
<li><code>formats: ["webp", "jpeg"]</code> (default)</li>
<li><code>formats: ["png"]</code></li>
<li><code>formats: ["auto"]</code> (keep original format) <code>"auto"</code></li>
<li><code>formats: ["svg"]</code> (requires SVG input)</li>
<li><code>formats: ["avif"]</code></li>
</ul>
<h3 id="output-locations" tabindex="-1">Output Locations <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#output-locations">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="url-path" tabindex="-1">URL Path <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#url-path">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>A path-prefix-esque directory for the <code><img src></code> attribute. e.g. <code>/img/</code> for <code><img src="/img/MY_IMAGE.jpeg"></code>:</p>
<ul>
<li><code>urlPath: "/img/"</code> (default)</li>
</ul>
<h4 id="output-directory" tabindex="-1">Output Directory <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#output-directory">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Where to write the new images to disk. Project-relative path to the output image directory. Maybe you want to write these to your output directory directly (e.g. <code>./_site/img/</code>)?</p>
<ul>
<li><code>outputDir: "./img/"</code> (default)</li>
</ul>
<h3 id="options-for-svg" tabindex="-1">Options for SVG <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#options-for-svg">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="skip-raster-formats-for-svg" tabindex="-1">Skip raster formats for SVG <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#skip-raster-formats-for-svg">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>If using SVG output (the input format is SVG and <code>svg</code> is added to your <code>formats</code> array), we will skip all of the raster formats even if they’re in <code>formats</code>. This may be useful in a CMS-driven workflow when the input could be vector or raster.</p>
<ul>
<li><code>svgShortCircuit: false</code> (default)</li>
<li><code>svgShortCircuit: true</code></li>
<li><code>svgShortCircuit: "size"</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image v3.1.8">Added in Image v3.1.8</span></li>
</ul>
<p>Using <code>svgShortCircuit: "size"</code> means that raster image format entries will only be thrown out if the optimized raster size is larger than the SVG. This helps with large SVG images that compress to smaller raster sizes at smaller widths and will prefer the SVG over raster formats when the SVG file size is smaller.</p>
<p>To use Brotli compressed SVG sizes when making file size comparisons, use the <code>svgCompressionSize: "br"</code> option <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image v3.1.8">Added in Image v3.1.8</span>.</p>
<h5>Related:</h5>
<ul class="list-bare">
<li><a href="https://www.zachleat.com/web/svg-short-circuit/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Fsvg-short-circuit%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/svg-short-circuit/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A New Technique for Image Optimization: SVG Short Circuiting</a> <em>(2023)</em></li>
<li><a href="https://cloudcannon.com/blog/automatically-optimize-your-images-with-eleventy-image-and-cloudcannon/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcloudcannon.com%2Fblog%2Fautomatically-optimize-your-images-with-eleventy-image-and-cloudcannon%2F/" width="150" height="150" alt="IndieWeb Avatar for https://cloudcannon.com/blog/automatically-optimize-your-images-with-eleventy-image-and-cloudcannon/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automatically optimize your images with Eleventy Image and CloudCannon</a> <em>(2023)</em></li>
</ul>
<h4 id="allow-svg-to-upscale" tabindex="-1">Allow SVG to upscale <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#allow-svg-to-upscale">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>While we do prevent raster images from upscaling (and filter upscaling <code>widths</code> from the output), you can optionally enable SVG input to upscale to larger sizes when converting to raster format.</p>
<ul>
<li><code>svgAllowUpscale: true</code> (default)</li>
<li><code>svgAllowUpscale: false</code></li>
</ul>
<h3 id="custom-filenames" tabindex="-1">Custom Filenames <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#custom-filenames">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Don’t like those hash ids? Make your own!</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token comment">// Define custom filenames for generated images</span><br> <span class="token function-variable function">filenameFormat</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> src<span class="token punctuation">,</span> width<span class="token punctuation">,</span> format<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// id: hash of the original image</span><br> <span class="token comment">// src: original image path</span><br> <span class="token comment">// width: current width in px</span><br> <span class="token comment">// format: current file format</span><br> <span class="token comment">// options: set of options passed to the Image call</span><br><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>format<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<details>
<summary>Custom Filename Example: Use the original file slug</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"auto"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token function-variable function">filenameFormat</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> src<span class="token punctuation">,</span> width<span class="token punctuation">,</span> format<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">const</span> extension <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">extname</span><span class="token punctuation">(</span>src<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">const</span> name <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">basename</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> extension<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">w.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>format<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Writes: "test/img/bio-2017-300w.jpeg"</span></code></pre>
</details>
<h2 id="use-this-in-your-templates" tabindex="-1">Use this in your templates <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#use-this-in-your-templates">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="webc" tabindex="-1">WebC <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#webc">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image v3.1.0">Added in Image v3.1.0</span> Eleventy Image now provides a built-in <code><eleventy-image></code> WebC component for use in your Eleventy project.</p>
<p>Using Eleventy Image in <a href="https://www.11ty.dev/docs/languages/webc/">WebC</a> offers all the same great benefits you’re used to from Eleventy Image with an intuitive declarative HTML-only developer experience.</p>
<p>First, add the following to your project’s configuration file:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> eleventyWebcPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> <span class="token punctuation">{</span> eleventyImagePlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Only one module.exports per configuration file, please!</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br><br> <span class="token comment">// WebC</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>eleventyWebcPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token comment">// …</span><br> <span class="token comment">// Add as a global WebC component</span><br> <span class="token string">"npm:@11ty/eleventy-img/*.webc"</span><span class="token punctuation">,</span><br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Image plugin</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>eleventyImagePlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// Set global default options</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"webp"</span><span class="token punctuation">,</span> <span class="token string">"jpeg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">urlPath</span><span class="token operator">:</span> <span class="token string">"/img/"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Notably `outputDir` is resolved automatically</span><br> <span class="token comment">// to the project output directory</span><br><br> <span class="token literal-property property">defaultAttributes</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<ul>
<li><em>HTML Tip:</em> Read more about the special (and very useful) <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading"><code>loading</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-decoding"><code>decoding</code></a> HTML attributes.</li>
</ul>
<p>Now you can use the <code><eleventy-image></code> WebC component in your templates:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eleventy-image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>eleventy-image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>eleventy-image</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- Specify widths: --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eleventy-image<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100, 200<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eleventy-image<span class="token punctuation">"</span></span> <span class="token attr-name">:width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[100, 200]<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- Specify formats (overriding defaults set via the configuration) --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eleventy-image<span class="token punctuation">"</span></span> <span class="token attr-name">formats</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avif, png<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eleventy-image<span class="token punctuation">"</span></span> <span class="token attr-name">:formats</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['avif', 'png']<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- Change the url path or output dir (overriding defaults set via the configuration above) --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eleventy-image<span class="token punctuation">"</span></span> <span class="token attr-name">url-path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/some-dir/<span class="token punctuation">"</span></span> <span class="token attr-name">output-dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_site/some-dir/<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo of my tabby cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h3 id="nunjucks-liquid-javascript-(asynchronous-shortcodes)" tabindex="-1">Nunjucks, Liquid, JavaScript (Asynchronous Shortcodes) <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#nunjucks-liquid-javascript-(asynchronous-shortcodes)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div id="asynchronous-shortcode"></div>
<p>The examples below require an <a href="https://www.11ty.dev/docs/shortcodes/#asynchronous-shortcodes">async-friendly shortcodes</a> (works in Nunjucks, Liquid, JavaScript, and <a href="https://www.11ty.dev/docs/languages/webc/">WebC</a>).</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that <a href="https://mozilla.github.io/nunjucks/templating.html#macro">Nunjucks macros cannot use async shortcodes</a>. If you use macros, use <a href="https://www.11ty.dev/docs/plugins/image/#synchronous-shortcode">synchronous shortcodes</a> described below.</div></div>
<p>If you want to use Eleventy Image in WebC, take note that it is possible to wire up the method below in WebC. However it is <strong>recommended to use the <a href="https://www.11ty.dev/docs/plugins/image/#webc">provided <code><eleventy-image></code> WebC component</a> instead</strong>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Only one module.exports per configuration file, please!</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"image"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">src<span class="token punctuation">,</span> alt<span class="token punctuation">,</span> sizes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> metadata <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"avif"</span><span class="token punctuation">,</span> <span class="token string">"jpeg"</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">let</span> imageAttributes <span class="token operator">=</span> <span class="token punctuation">{</span><br> alt<span class="token punctuation">,</span><br> sizes<span class="token punctuation">,</span><br> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token comment">// You bet we throw an error on a missing alt (alt="" works okay)</span><br> <span class="token keyword">return</span> Image<span class="token punctuation">.</span><span class="token function">generateHTML</span><span class="token punctuation">(</span>metadata<span class="token punctuation">,</span> imageAttributes<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The <a href="https://www.11ty.dev/docs/shortcodes/#asynchronous-shortcodes"><code>addShortcode</code> method is async-friendly in Eleventy 2.0+</a>. Use <code>addAsyncShortcode</code> in older versions of Eleventy. You can also <a href="https://www.11ty.dev/docs/shortcodes/#async-friendly-per-engine-shortcodes">add these shortcodes to individual template engines</a>, if you’d like!</p>
<ul>
<li><em>HTML Tip:</em> Read more about the special (and very useful) <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading"><code>loading</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-decoding"><code>decoding</code></a> HTML attributes.</li>
</ul>
<p>Now you can use the <code>image</code> shortcode in your templates and the appropriate HTML will be generated for you (based on your specified Image options).</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/image/#shortcode-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/image/#shortcode-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/image/#shortcode-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/image/#shortcode-hbs" role="tab">Handlebars</a>
</div>
<div id="shortcode-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div><pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token object">image</span> <span class="token string">"cat.jpg"</span><span class="token punctuation">,</span> <span class="token string">"photo of my tabby cat"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token object">image</span> <span class="token string">"cat.jpg"</span><span class="token punctuation">,</span> <span class="token string">"photo of my tabby cat"</span><span class="token punctuation">,</span> <span class="token string">"(min-width: 30em) 50vw, 100vw"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>The comma between arguments is <strong>optional</strong> in Liquid templates.</p>
</div>
<div id="shortcode-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token string">"cat.jpg"</span><span class="token punctuation">,</span> <span class="token string">"photo of my tabby cat"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">image</span> <span class="token string">"cat.jpg"</span><span class="token punctuation">,</span> <span class="token string">"photo of my tabby cat"</span><span class="token punctuation">,</span> <span class="token string">"(min-width: 30em) 50vw, 100vw"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>The comma between arguments is <strong>required</strong> in Nunjucks templates.</p>
</div>
<div id="shortcode-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div><pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> img1 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string">"cat.jpg"</span><span class="token punctuation">,</span> <span class="token string">"photo of my tabby cat"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> img2 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string">"cat.jpg"</span><span class="token punctuation">,</span> <span class="token string">"photo of my tabby cat"</span><span class="token punctuation">,</span> <span class="token string">"(min-width: 30em) 50vw, 100vw"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>img1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>img2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="shortcode-hbs" role="tabpanel">
<p>This <code>image</code> shortcode example <a href="https://www.11ty.dev/docs/plugins/image/#asynchronous-shortcode">requires an async-friendly template language</a> and is not available in Handlebars.</p>
<p></p></div><br>
</seven-minute-tabs><br>
</is-land><p></p>
<h3 id="synchronous-shortcode" tabindex="-1">Synchronous Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#synchronous-shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The <a href="https://www.11ty.dev/docs/plugins/image/#asynchronous-shortcode">asynchronous method is preferred</a>—make sure you start there first! The synchronous method is included for situations that are not async-friendly (Handlebars, macros in Nunjucks, et al).</div></div>
<details>
<summary>Expand to see an example of Synchronous usage.</summary>
<p>Use <code>Image.statsSync</code> to get the metadata of a source even if the image generation is not finished yet:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">function</span> <span class="token function">imageShortcode</span><span class="token punctuation">(</span><span class="token parameter">src<span class="token punctuation">,</span> cls<span class="token punctuation">,</span> alt<span class="token punctuation">,</span> sizes<span class="token punctuation">,</span> widths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> widths<span class="token punctuation">,</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'jpeg'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token comment">// generate images, while this is async we don’t wait</span><br> <span class="token function">Image</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">let</span> imageAttributes <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token keyword">class</span><span class="token operator">:</span> cls<span class="token punctuation">,</span><br> alt<span class="token punctuation">,</span><br> sizes<span class="token punctuation">,</span><br> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token comment">// get metadata even if the images are not fully generated yet</span><br> <span class="token keyword">let</span> metadata <span class="token operator">=</span> Image<span class="token punctuation">.</span><span class="token function">statsSync</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> Image<span class="token punctuation">.</span><span class="token function">generateHTML</span><span class="token punctuation">(</span>metadata<span class="token punctuation">,</span> imageAttributes<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"myImage"</span><span class="token punctuation">,</span> imageShortcode<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</details>
<h3 id="make-your-own-markup" tabindex="-1">Make your own Markup <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#make-your-own-markup">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you have an advanced use case and don’t want to use our methods to generate the image markup, you can do it yourself!</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="DIY mode chooser">
Choose one:
<a href="https://www.11ty.dev/docs/plugins/image/#filter-diy-img" role="tab">Do it yourself: <img></a>
<a href="https://www.11ty.dev/docs/plugins/image/#filter-diy-picture" role="tab">Do it yourself: <picture></a>
</div>
<div id="filter-diy-img" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Only one module.exports per configuration file, please!</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"image"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">src<span class="token punctuation">,</span> alt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>alt <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// You bet we throw an error on missing alt (alt="" works okay)</span><br> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Missing \`alt\` on myImage from: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">let</span> metadata <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">600</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"jpeg"</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">let</span> data <span class="token operator">=</span> metadata<span class="token punctuation">.</span>jpeg<span class="token punctuation">[</span>metadata<span class="token punctuation">.</span>jpeg<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><img src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" width="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" height="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>height<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" alt="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>alt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" loading="lazy" decoding="async"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="filter-diy-picture" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Only one module.exports per configuration file, please!</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"image"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> alt<span class="token punctuation">,</span> sizes <span class="token operator">=</span> <span class="token string">"100vw"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>alt <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// You bet we throw an error on missing alt (alt="" works okay)</span><br> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Missing \`alt\` on responsiveimage from: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">let</span> metadata <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'webp'</span><span class="token punctuation">,</span> <span class="token string">'jpeg'</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">let</span> lowsrc <span class="token operator">=</span> metadata<span class="token punctuation">.</span>jpeg<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> highsrc <span class="token operator">=</span> metadata<span class="token punctuation">.</span>jpeg<span class="token punctuation">[</span>metadata<span class="token punctuation">.</span>jpeg<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><picture><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>metadata<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">imageFormat</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <source type="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>imageFormat<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>sourceType<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" srcset="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>imageFormat<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">entry</span> <span class="token operator">=></span> entry<span class="token punctuation">.</span>srcset<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">", "</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" sizes="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>sizes<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> <img<br> src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lowsrc<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"<br> width="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>highsrc<span class="token punctuation">.</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"<br> height="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>highsrc<span class="token punctuation">.</span>height<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"<br> alt="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>alt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"<br> loading="lazy"<br> decoding="async"><br> </picture></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="process-images-as-a-custom-template" tabindex="-1">Process images as a Custom Template <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#process-images-as-a-custom-template">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use Eleventy’s <a href="https://www.11ty.dev/docs/languages/custom/">Custom Template Language</a> feature to process images. <em>This one is not yet available on the docs: do you want to contribute it?</em></p>
<h3 id="process-images-as-data-files" tabindex="-1">Process images as Data Files <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#process-images-as-data-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.10">Added in v2.0.0</span> <em>Nontraditional use case.</em> Eleventy’s <a href="https://www.11ty.dev/docs/data-custom/">Custom Data File Formats</a> features an example of <a href="https://www.11ty.dev/docs/data-custom/#feed-exif-image-data-into-the-data-cascade">processing Images as data files to feed EXIF data into the Data Cascade</a>. You can use the same feature to add the metadata stats returned from the Image utility directly to the Data Cascade for use in your templates.</p>
<ul>
<li>Benefits:
<ul>
<li>Processing happens in the data cascade so this works in any template language.</li>
<li>Images stored in the <a href="https://www.11ty.dev/docs/data-global/">global data folder</a> will be processed and available to all templates</li>
</ul>
</li>
<li>Drawbacks:
<ul>
<li>You can’t customize the Image options (e.g. <code>widths</code> or <code>formats</code>) from the template code. It is set globally in the config.</li>
</ul>
</li>
<li>Both a benefit and a drawback:
<ul>
<li>Beholden to Eleventy’s Data Cascade file name conventions when using with <a href="https://www.11ty.dev/docs/data-template-dir/">template/directory data files</a>.</li>
</ul>
</li>
</ul>
<details>
<summary><strong>Show the code</strong></summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"png,jpeg"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">read</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Don’t read the input file, argument is now a file path</span><br> <span class="token function-variable function">parser</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token parameter">imagePath</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> stats <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span>imagePath<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"auto"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"avif"</span><span class="token punctuation">,</span> <span class="token string">"webp"</span><span class="token punctuation">,</span> <span class="token string">"jpeg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token literal-property property">outputDir</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>eleventyConfig<span class="token punctuation">.</span>dir<span class="token punctuation">.</span>output<span class="token punctuation">,</span> <span class="token string">"img"</span><span class="token punctuation">,</span> <span class="token string">"built"</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">image</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> stats<br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// This works sync or async: images were processed ahead of time in the data cascade</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"dataCascadeImage"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">stats<span class="token punctuation">,</span> alt<span class="token punctuation">,</span> sizes</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> imageAttributes <span class="token operator">=</span> <span class="token punctuation">{</span><br> alt<span class="token punctuation">,</span><br> sizes<span class="token punctuation">,</span><br> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> Image<span class="token punctuation">.</span><span class="token function">generateHTML</span><span class="token punctuation">(</span>stats<span class="token punctuation">,</span> imageAttributes<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>With a template <code>my-blog-post.md</code> and an image file <code>my-blog-post.jpeg</code>, you could use the above configuration code in your template like this:</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-blog-post.md</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> dataCascadeImage <span class="token object">image</span><span class="token punctuation">.</span>stats<span class="token punctuation">,</span> <span class="token string">"My alt text"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>Note this also means that <code>folder/folder.jpeg</code> would be processed for all templates in <code>folder/*</code> and any images stored in your global <code>_data</code> would also be populated into the data cascade based on their folder structure.</p>
</details>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="oCTAZumAGNc" params="start=244" playlabel="Play: Use images as data files (Weekly №11)" style="background-image:url('https://i.ytimg.com/vi/oCTAZumAGNc/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=oCTAZumAGNc" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Use images as data files (Weekly №11)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=oCTAZumAGNc&t=244">Use images as data files (Weekly №11) <code>▶4m4s</code></a></is-land></div></div>
<h2 id="advanced-usage" tabindex="-1">Advanced Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#advanced-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="caching" tabindex="-1">Caching <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#caching">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="in-memory-cache" tabindex="-1">In-Memory Cache <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#in-memory-cache">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>To prevent duplicate work and improve build performance, repeated calls to the same source image (remote or local) with the same options will return a cached results object. If a request in-progress, the pending promise will be returned. This in-memory cache is maintained across builds in watch/serve mode. If you quit Eleventy, the in-memory cache will be lost.</p>
<p>Images will be regenerated (and the cache ignored) if:</p>
<ul>
<li>The source image file size changes (on local image files)</li>
<li>The <a href="https://www.11ty.dev/docs/plugins/fetch/">cache asset</a> duration expires (for remote images).</li>
</ul>
<p>You can disable this behavior by using the <code>useCache</code> boolean option:</p>
<ul>
<li><code>useCache: true</code> (default)</li>
<li><code>useCache: false</code> to bypass the cache and generate a new image every time.</li>
</ul>
<h5>Examples</h5>
<details>
<summary>Example of in-memory cache reuse (returns the same promise)</summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> stats1 <span class="token operator">=</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> stats2 <span class="token operator">=</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> console<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span>stats1 <span class="token operator">===</span> stats2<span class="token punctuation">,</span> <span class="token string">"The same promise"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</details>
<details>
<summary>Example of in-memory cache (returns a new promise with different options)</summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> stats1 <span class="token operator">=</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> stats2 <span class="token operator">=</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> console<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span>stats1 <span class="token operator">!==</span> stats2<span class="token punctuation">,</span> <span class="token string">"A different promise"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</details>
<h4 id="disk-cache" tabindex="-1">Disk Cache <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#disk-cache">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image 1.0.0">Added in Image 1.0.0</span> Eleventy will skip processing files that are unchanged and already exist in the output directory. This requires the built-in hashing algorithm and is not yet supported with custom filenames. More background at <a href="https://github.com/11ty/eleventy-img/issues/51">Issue #51</a>.</p>
<p>New tip: <a href="https://github.com/11ty/demo-eleventy-img-netlify-cache"><strong>Re-use and persist the disk cache across Netlify builds</strong></a></p>
<h3 id="dry-run" tabindex="-1">Dry-Run <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#dry-run">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you want to try it out and not write any files (useful for testing), use the <code>dryRun</code> option.</p>
<ul>
<li><code>dryRun: false</code> (default)</li>
<li><code>dryRun: true</code></li>
</ul>
<h3 id="change-global-plugin-concurrency" tabindex="-1">Change Global Plugin Concurrency <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#change-global-plugin-concurrency">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>Image<span class="token punctuation">.</span>concurrency <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token comment">// default is 10</span></code></pre>
<h3 id="advanced-control-of-sharp-image-processor" tabindex="-1">Advanced control of Sharp image processor <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#advanced-control-of-sharp-image-processor">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><a href="https://sharp.pixelplumbing.com/api-constructor#parameters">Extra options to pass to the Sharp constructor</a> or the <a href="https://sharp.pixelplumbing.com/api-output#webp">Sharp image format converter for webp</a>, <a href="https://sharp.pixelplumbing.com/api-output#png">png</a>, <a href="https://sharp.pixelplumbing.com/api-output#jpeg">jpeg</a>, or <a href="https://sharp.pixelplumbing.com/api-output#avif">avif</a>.</p>
<ul>
<li><code>sharpOptions: {}</code></li>
<li><code>sharpWebpOptions: {}</code></li>
<li><code>sharpPngOptions: {}</code></li>
<li><code>sharpJpegOptions: {}</code></li>
<li><code>sharpAvifOptions: {}</code></li>
</ul>
<h4 id="output-animated-gif-or-webp" tabindex="-1">Output animated GIF or WebP <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#output-animated-gif-or-webp">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image 1.1.0">Added in Image 1.1.0</span> To process and output animated <code>gif</code> or <code>webp</code> images, use the <code>animated</code> option for the Sharp constructor.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'webp'</span><span class="token punctuation">,</span> <span class="token string">'gif'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token literal-property property">sharpOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">animated</span><span class="token operator">:</span> <span class="token boolean">true</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
<h3 id="change-the-default-hash-length" tabindex="-1">Change the default Hash length <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#change-the-default-hash-length">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> You can customize the length of the default filename format hash by using the <code>hashLength</code> property.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Image <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">await</span> <span class="token function">Image</span><span class="token punctuation">(</span><span class="token string">"./test/bio-2017.jpg"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">hashLength</span><span class="token operator">:</span> <span class="token number">8</span> <span class="token comment">// careful, don’t make it _too_ short!</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="advanced-caching-options-for-remote-images" tabindex="-1">Advanced Caching Options for Remote Images <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#advanced-caching-options-for-remote-images">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>For any full URL first argument to this plugin, the full-size remote image will be downloaded and cached locally. See all <a href="https://www.11ty.dev/docs/plugins/fetch/#options">relevant <code>eleventy-fetch</code> options</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">cacheOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// if a remote image URL, this is the amount of time before it fetches a fresh copy</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// project-relative path to the cache directory</span><br> <span class="token literal-property property">directory</span><span class="token operator">:</span> <span class="token string">".cache"</span><span class="token punctuation">,</span><br><br> <span class="token literal-property property">removeUrlQueryParams</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span></code></pre>
<p>When caching remote images, you may want to check the processed image output into your <code>git</code> (et al) repository to avoid refetches in the future. If remote images are <em>not</em> checked in, they may be refetched every time on your CI server unless you <a href="https://www.11ty.dev/docs/plugins/fetch/#running-this-on-your-build-server">preserve the <code>.cache</code> folder between builds</a>.</p>
<h3 id="using-a-hosted-image-service" tabindex="-1">Using a Hosted Image Service <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#using-a-hosted-image-service">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="custom-urls" tabindex="-1">Custom URLs <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#custom-urls">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Want to use a hosted image service instead? You can override the entire URL. Takes precedence over <code>filenameFormat</code> option. Useful with <code>statsSync</code> or <code>statsByDimensionsSync</code>.</p>
<p>When you use this, returned data will not include <code>filename</code> or <code>outputPath</code>.</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token function-variable function">urlFormat</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><br> hash<span class="token punctuation">,</span> <span class="token comment">// not included for `statsOnly` images</span><br> src<span class="token punctuation">,</span><br> width<span class="token punctuation">,</span><br> format<span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://sample-image-service.11ty.dev/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>src<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>format<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<ul>
<li><a href="https://github.com/11ty/11ty-website/blob/516faa397a98f8990f3d02eb41e1c99bedfab9cf/.eleventy.js#L105"><em>Example on <code>11ty-website</code></em></a></li>
</ul>
<h4 id="stats-only" tabindex="-1">Stats Only <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#stats-only">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image 1.1.0">Added in Image 1.1.0</span> Skips all image processing to return metadata. Doesn’t read files, doesn’t write files. Use this as an alternative to the separate <code>statsSync*</code> functions—this will use in-memory cache and de-duplicate requests.</p>
<ul>
<li><code>statsOnly: false</code> (default)</li>
<li><code>statsOnly: true</code></li>
</ul>
<p>With remotely hosted images, you may also need to supply the dimensions when using <code>statsOnly</code>:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">statsOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">remoteImageMetadata</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> width<span class="token punctuation">,</span><br> height<span class="token punctuation">,</span><br> format<span class="token punctuation">,</span> <span class="token comment">// optional</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/plugins/image/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-community" id="community-resources"><div class="sites-vert">
<div class="lo-grid">
<div class="sites-site-vert" data-filter-tags="">
<a href="https://brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/" class="elv-externalexempt" title="Using Eleventy’s official image plugin">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbrycewray.com%2Fposts%2F2021%2F04%2Fusing-eleventys-official-image-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Using Eleventy’s official image plugin</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbrycewray.com%2Fposts%2F2021%2F04%2Fusing-eleventys-official-image-plugin%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/" class="elv-externalexempt" title="Optimizing Images with the 11ty Image Plugin">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Feleventy-image-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Optimizing Images with the 11ty Image Plugin</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Feleventy-image-plugin%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.zachleat.com/web/eleventy-image/" class="elv-externalexempt" title="Don’t Shut Down Your Business! Instead Use Eleventy Image">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-image%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/eleventy-image/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Don’t Shut Down Your Business! Instead Use Eleventy Image</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.zachleat.com/web/eleventy-image/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-image%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="lo-c-center">
+ <a href="https://github.com/11ty/11ty-website/blob/master/src/_data/community/" class="elv-externalexempt nowrap">Add yours!</a>
</div>
</div>
</div></div>
<p>×60 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.roboleary.net%2F2024%2F02%2F15%2Feleventy-favicon-modes.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy - Differentiate between dev and production builds with unique favicons</a> — <em>Rob O'Leary (2024)</em></li>
<li><a href="https://coryd.dev/posts/2024/setting-up-image-transforms-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2024%2Fsetting-up-image-transforms-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2024/setting-up-image-transforms-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Setting up image transforms in Eleventy</a> — <em>Cory Dransfeldt (2024)</em></li>
<li><a href="https://chris.bur.gs/eleventy-immich/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fchris.bur.gs%2Feleventy-immich%2F/" width="150" height="150" alt="IndieWeb Avatar for https://chris.bur.gs/eleventy-immich/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy 🤝 Immich</a> — <em>Chris Burgess (2024)</em></li>
<li><a href="https://coryd.dev/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2024%2Fcheck-if-images-are-available-before-optimizing-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Check if images are available before optimizing in Eleventy</a> — <em>Cory Dransfeldt (2024)</em></li>
<li><a href="https://eystein.no/blog/super-fast-responsive-image-loading-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Feystein.no%2Fblog%2Fsuper-fast-responsive-image-loading-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://eystein.no/blog/super-fast-responsive-image-loading-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Super fast responsive image loading in Eleventy</a> — <em>Eystein Mack Alnaes (2024)</em></li>
</ul>
<details>
<summary>Expand to see 55 more resources.</summary>
<ul class="list-bare">
<li><a href="https://darthmall.net/weblog/2024/11ty-photo-gallery/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarthmall.net%2Fweblog%2F2024%2F11ty-photo-gallery%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darthmall.net/weblog/2024/11ty-photo-gallery/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Photo Gallery</a> — <em>Evan Sheehan (2024)</em></li>
<li><a href="https://www.martingunnarsson.com/posts/eleventy-automatic-image-pre-processing/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.martingunnarsson.com%2Fposts%2Feleventy-automatic-image-pre-processing%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.martingunnarsson.com/posts/eleventy-automatic-image-pre-processing/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automatic pre-processing of post images in Eleventy</a> — <em>Martin Gunnarsson (2023)</em></li>
<li><a href="https://rknight.me/blog/generating-and-caching-open-graph-images-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fblog%2Fgenerating-and-caching-open-graph-images-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/blog/generating-and-caching-open-graph-images-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generating and Caching Open Graph Images with Eleventy</a> — <em>Robb Knight (2023)</em></li>
<li><a href="https://nonnullish.pages.dev/posts/generating-images-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fnonnullish.pages.dev%2Fposts%2Fgenerating-images-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://nonnullish.pages.dev/posts/generating-images-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generating Open Graph Images in Eleventy</a> — <em>nonnullish (2023)</em></li>
<li><a href="https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-4/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpublishing-project.rivendellweb.net%2Fmigrating-from-wordpress-to-eleventy-part-4%2F/" width="150" height="150" alt="IndieWeb Avatar for https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-4/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating from WordPress to Eleventy (part 4)</a> — <em>Carlos Araya (2023)</em></li>
<li><a href="https://sheetsj.com/blog/vscode-pasting-11ty-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsheetsj.com%2Fblog%2Fvscode-pasting-11ty-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://sheetsj.com/blog/vscode-pasting-11ty-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">VSCode Pasting 11ty Images</a> — <em>Jeff Sheets (2023)</em></li>
<li><a href="https://www.zachleat.com/web/svg-short-circuit/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Fsvg-short-circuit%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/svg-short-circuit/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A new technique for image optimization: SVG short circuiting</a> — <em>Zach Leatherman (2023)</em></li>
<li><a href="https://cloudcannon.com/blog/automatically-optimize-your-images-with-eleventy-image-and-cloudcannon/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcloudcannon.com%2Fblog%2Fautomatically-optimize-your-images-with-eleventy-image-and-cloudcannon%2F/" width="150" height="150" alt="IndieWeb Avatar for https://cloudcannon.com/blog/automatically-optimize-your-images-with-eleventy-image-and-cloudcannon/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automatically optimize your images with Eleventy Image and CloudCannon</a> — <em>Zach Leatherman (2023)</em></li>
<li><a href="https://darekkay.com/blog/photography-website/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarekkay.com%2Fblog%2Fphotography-website%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darekkay.com/blog/photography-website/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a photography website</a> — <em>Darek Kay (2023)</em></li>
<li><a href="https://goodenough.us/blog/2023-10-17-adding-social-preview-images-to-our-11ty-blog/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgoodenough.us%2Fblog%2F2023-10-17-adding-social-preview-images-to-our-11ty-blog%2F/" width="150" height="150" alt="IndieWeb Avatar for https://goodenough.us/blog/2023-10-17-adding-social-preview-images-to-our-11ty-blog/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding Social Preview Images To Our 11ty Blog</a> — <em>Matthew Lettini (2023)</em></li>
<li><a href="https://rkblog.dev/posts/programming-general/making-fast-website-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frkblog.dev%2Fposts%2Fprogramming-general%2Fmaking-fast-website-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rkblog.dev/posts/programming-general/making-fast-website-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Making a lighthouse-fast website with a static site generator like 11ty</a> — <em>Piotr Maliński (2023)</em></li>
<li><a href="https://getkirby.com/docs/cookbook/setup/headless-kiosk-application"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgetkirby.com%2Fdocs%2Fcookbook%2Fsetup%2Fheadless-kiosk-application/" width="150" height="150" alt="IndieWeb Avatar for https://getkirby.com/docs/cookbook/setup/headless-kiosk-application" class="avatar avatar-indieweb" loading="lazy" decoding="async">Headless kiosk application (with Kirby CMS)</a> — <em>James Steel (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/eleventy-category-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Feleventy-category-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/eleventy-category-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Category Images</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://flamedfury.com/posts/adding-game-cover-art-to-my--now-page/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflamedfury.com%2Fposts%2Fadding-game-cover-art-to-my--now-page%2F/" width="150" height="150" alt="IndieWeb Avatar for https://flamedfury.com/posts/adding-game-cover-art-to-my--now-page/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding game cover art to my /now page</a> — <em>fLaMEd (2023)</em></li>
<li><a href="https://www.simoncox.com/shorts/2023-06-06-11ty-image-shortcode-best-practice/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.simoncox.com%2Fshorts%2F2023-06-06-11ty-image-shortcode-best-practice%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.simoncox.com/shorts/2023-06-06-11ty-image-shortcode-best-practice/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty image shortcode best practice</a> — <em>Simon Cox (2023)</em></li>
<li><a href="https://shivjm.blog/colophon/farewell-netlify-large-media-welcome-eleventy-img/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fshivjm.blog%2Fcolophon%2Ffarewell-netlify-large-media-welcome-eleventy-img%2F/" width="150" height="150" alt="IndieWeb Avatar for https://shivjm.blog/colophon/farewell-netlify-large-media-welcome-eleventy-img/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Farewell Netlify Large Media, Welcome eleventy-img</a> — <em>Shiv J.M. (2023)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/take-your-11ty-build-from-1-second-to-2-minutes-by-generating-og-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Ftake-your-11ty-build-from-1-second-to-2-minutes-by-generating-og-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/take-your-11ty-build-from-1-second-to-2-minutes-by-generating-og-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Take your 11ty build from 1 second to 2 minutes by generating OG images</a> — <em>Mike Street (2023)</em></li>
<li><a href="https://www.markllobrera.com/posts/eleventy-building-image-gallery-photoswipe/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.markllobrera.com%2Fposts%2Feleventy-building-image-gallery-photoswipe%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.markllobrera.com/posts/eleventy-building-image-gallery-photoswipe/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe</a> — <em>Mark Llobrera (2023)</em></li>
<li><a href="https://illtron.net/2023/01/hello-2023/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Filltron.net%2F2023%2F01%2Fhello-2023%2F/" width="150" height="150" alt="IndieWeb Avatar for https://illtron.net/2023/01/hello-2023/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hello 2023</a> — <em>Chris Coleman (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2022/10/20/integrating-cloudinary-into-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F10%2F20%2Fintegrating-cloudinary-into-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/10/20/integrating-cloudinary-into-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Integrating Cloudinary into Eleventy</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://chriskirknielsen.com/blog/manage-your-svg-files-with-eleventys-render-plugin/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fchriskirknielsen.com%2Fblog%2Fmanage-your-svg-files-with-eleventys-render-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://chriskirknielsen.com/blog/manage-your-svg-files-with-eleventys-render-plugin/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Manage your SVG files with Eleventy's render plugin</a> — <em>Christopher Kirk-Nielsen (2022)</em></li>
<li><a href="https://tjaddison.com/blog/2022/08/processing-images-linked-from-frontmatter-with-eleventy-img-to-use-in-meta-tags/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftjaddison.com%2Fblog%2F2022%2F08%2Fprocessing-images-linked-from-frontmatter-with-eleventy-img-to-use-in-meta-tags%2F/" width="150" height="150" alt="IndieWeb Avatar for https://tjaddison.com/blog/2022/08/processing-images-linked-from-frontmatter-with-eleventy-img-to-use-in-meta-tags/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Processing images linked from frontmatter with eleventy-img to use in meta tags</a> — <em>TJ Addison (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/07/01/reading-comic-books-in-the-jamstack"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F07%2F01%2Freading-comic-books-in-the-jamstack/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/07/01/reading-comic-books-in-the-jamstack" class="avatar avatar-indieweb" loading="lazy" decoding="async">Reading Comic Books in the Jamstack</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Feleventy-image-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Optimizing Images with the 11ty Image Plugin</a> — <em>Aleksandr Hovhannisyan (2022)</em></li>
<li><a href="https://gfscott.com/blog/eleventy-img-without-central-image-directory/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgfscott.com%2Fblog%2Feleventy-img-without-central-image-directory%2F/" width="150" height="150" alt="IndieWeb Avatar for https://gfscott.com/blog/eleventy-img-without-central-image-directory/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using the Eleventy Image plugin without a central image folder</a> — <em>Graham F. Scott (2022)</em></li>
<li><a href="https://tomichen.com/blog/posts/20220416-responsive-images-in-markdown-with-eleventy-image/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftomichen.com%2Fblog%2Fposts%2F20220416-responsive-images-in-markdown-with-eleventy-image%2F/" width="150" height="150" alt="IndieWeb Avatar for https://tomichen.com/blog/posts/20220416-responsive-images-in-markdown-with-eleventy-image/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Responsive Images in Markdown with Eleventy Image</a> — <em>Tomi Chen (2022)</em></li>
<li><a href="https://florian.ec/blog/eleventy-apple-touch-icons/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflorian.ec%2Fblog%2Feleventy-apple-touch-icons%2F/" width="150" height="150" alt="IndieWeb Avatar for https://florian.ec/blog/eleventy-apple-touch-icons/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generating Apple Touch Icons with Eleventy</a> — <em>Florian Eckerstorfer (2022)</em></li>
<li><a href="https://www.marclittlemore.com/easily-create-gravatar-images-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.marclittlemore.com%2Feasily-create-gravatar-images-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.marclittlemore.com/easily-create-gravatar-images-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Easily Create Gravatar Images With Eleventy</a> — <em>Marc Littlemore (2022)</em></li>
<li><a href="https://michaelharley.net/posts/2022/01/29/my-complete-blogging-workflow/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2022%2F01%2F29%2Fmy-complete-blogging-workflow%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2022/01/29/my-complete-blogging-workflow/" class="avatar avatar-indieweb" loading="lazy" decoding="async">My complete blogging workflow</a> — <em>Michael Harley (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/01/28/using-a-google-photos-album-in-your-eleventy-site-with-pipedream"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F01%2F28%2Fusing-a-google-photos-album-in-your-eleventy-site-with-pipedream/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/01/28/using-a-google-photos-album-in-your-eleventy-site-with-pipedream" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using a Google Photos Album in your Eleventy Site with Pipedream</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.brycewray.com/posts/2022/01/fetching-remote-images-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.brycewray.com%2Fposts%2F2022%2F01%2Ffetching-remote-images-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.brycewray.com/posts/2022/01/fetching-remote-images-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fetching remote images with Eleventy</a> — <em>Bryce Wray (2022)</em></li>
<li><a href="https://shivjm.blog/colophon/automatically-generated-social-media-images-with-html-css-eleventy-and-puppeteer/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fshivjm.blog%2Fcolophon%2Fautomatically-generated-social-media-images-with-html-css-eleventy-and-puppeteer%2F/" width="150" height="150" alt="IndieWeb Avatar for https://shivjm.blog/colophon/automatically-generated-social-media-images-with-html-css-eleventy-and-puppeteer/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automatically Generated Social Media Images with HTML, CSS, Eleventy & Puppeteer</a> — <em>Shiv J.M. (2021)</em></li>
<li><a href="https://www.alpower.com/blog/adding-figures-with-captions-to-images-in-markdown-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.alpower.com%2Fblog%2Fadding-figures-with-captions-to-images-in-markdown-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.alpower.com/blog/adding-figures-with-captions-to-images-in-markdown-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding figures with captions to images in markdown with eleventy</a> — <em>Al Power (2021)</em></li>
<li><a href="https://michaelharley.net/posts/2021/07/19/setting-a-conditional-variable-in-javascript/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2021%2F07%2F19%2Fsetting-a-conditional-variable-in-javascript%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2021/07/19/setting-a-conditional-variable-in-javascript/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Setting a conditional variable in Javascript</a> — <em>Michael Harley (2021)</em></li>
<li><a href="https://michaelharley.net/posts/2021/07/14/improving-my-automated-open-graph-image-process-w-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2021%2F07%2F14%2Fimproving-my-automated-open-graph-image-process-w-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2021/07/14/improving-my-automated-open-graph-image-process-w-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Improving my automated open graph image process w/ Eleventy</a> — <em>Michael Harley (2021)</em></li>
<li><a href="https://michaelharley.net/posts/2021/07/13/improving-upon-my-image-processing-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2021%2F07%2F13%2Fimproving-upon-my-image-processing-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2021/07/13/improving-upon-my-image-processing-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Improving upon my image processing with Eleventy</a> — <em>Michael Harley (2021)</em></li>
<li><a href="https://martinschneider.me/articles/eleventy-1-0/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmartinschneider.me%2Farticles%2Feleventy-1-0%2F/" width="150" height="150" alt="IndieWeb Avatar for https://martinschneider.me/articles/eleventy-1-0/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy 1.0</a> — <em>Martin Schneider (2021)</em></li>
<li><a href="https://www.brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.brycewray.com%2Fposts%2F2021%2F04%2Fusing-eleventys-official-image-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy’s official image plugin</a> — <em>Bryce Wray (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/04/07/building-a-simple-image-gallery-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F04%2F07%2Fbuilding-a-simple-image-gallery-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/04/07/building-a-simple-image-gallery-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a Simple Image Gallery with Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://martinschneider.me/articles/using-the-eleventy-image-plugin-to-generate-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmartinschneider.me%2Farticles%2Fusing-the-eleventy-image-plugin-to-generate-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://martinschneider.me/articles/using-the-eleventy-image-plugin-to-generate-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using the Eleventy image plugin to generate images</a> — <em>Martin Schneider (2021)</em></li>
<li><a href="https://www.zachleat.com/web/eleventy-image/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-image%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/eleventy-image/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Don't shut down your business! Instead use Eleventy Image</a> — <em>Zach Leatherman (2021)</em></li>
<li><a href="https://www.raresportan.com/eleventy-part-four/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raresportan.com%2Feleventy-part-four%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.raresportan.com/eleventy-part-four/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Let's Learn Eleventy (11ty) - Images</a> — <em>Rares Portan (2021)</em></li>
<li><a href="https://www.ovl.design/text/an-async-function-walks-into-a-loop/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.ovl.design%2Ftext%2Fan-async-function-walks-into-a-loop%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.ovl.design/text/an-async-function-walks-into-a-loop/" class="avatar avatar-indieweb" loading="lazy" decoding="async">An async function walks into a loop.</a> — <em>Oscar (2021)</em></li>
<li><a href="https://mtm.dev/eleventy-social-sharing-images.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmtm.dev%2Feleventy-social-sharing-images.html/" width="150" height="150" alt="IndieWeb Avatar for https://mtm.dev/eleventy-social-sharing-images.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automatic social sharing images for Eleventy</a> — <em>Mark Thomas Miller (2021)</em></li>
<li><a href="https://michaelharley.net/posts/2021/01/09/automated-social-sharing-images-with-eleventy-and-puppeteer/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2021%2F01%2F09%2Fautomated-social-sharing-images-with-eleventy-and-puppeteer%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2021/01/09/automated-social-sharing-images-with-eleventy-and-puppeteer/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automated social sharing images with Eleventy and Puppeteer</a> — <em>Michael Harley (2021)</em></li>
<li><a href="https://michaelharley.net/posts/2021/01/03/setup-social-sharing-previews-seo-and-favicons-on-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2021%2F01%2F03%2Fsetup-social-sharing-previews-seo-and-favicons-on-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2021/01/03/setup-social-sharing-previews-seo-and-favicons-on-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Setup social sharing previews, SEO, and favicons on Eleventy</a> — <em>Michael Harley (2021)</em></li>
<li><a href="https://www.industrialempathy.com/posts/image-optimizations/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.industrialempathy.com%2Fposts%2Fimage-optimizations%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.industrialempathy.com/posts/image-optimizations/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Maximally optimizing image loading for the web</a> — <em>Malte Ubl (2020)</em></li>
<li><a href="https://michaelharley.net/posts/2020/12/21/configuring-responsive-and-optimized-images-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2020%2F12%2F21%2Fconfiguring-responsive-and-optimized-images-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2020/12/21/configuring-responsive-and-optimized-images-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Configuring responsive and optimized images with Eleventy</a> — <em>Michael Harley (2020)</em></li>
<li><a href="https://sia.codes/posts/eleventy-and-cloudinary-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsia.codes%2Fposts%2Feleventy-and-cloudinary-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://sia.codes/posts/eleventy-and-cloudinary-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Optimize Images in Eleventy Using Cloudinary</a> — <em>Sia Karamalegos (2020)</em></li>
<li><a href="https://www.stevenhicks.me/blog/2020/12/generating-social-sharing-images-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.stevenhicks.me%2Fblog%2F2020%2F12%2Fgenerating-social-sharing-images-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.stevenhicks.me/blog/2020/12/generating-social-sharing-images-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generating Social Sharing Images In Eleventy</a> — <em>Steven Hicks (2020)</em></li>
<li><a href="https://ryanccn.dev/posts/respimg-11ty-sharp/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fryanccn.dev%2Fposts%2Frespimg-11ty-sharp%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ryanccn.dev/posts/respimg-11ty-sharp/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Responsive Images with Eleventy & Sharp</a> — <em>Ryan Cao (2020)</em></li>
<li><a href="https://florian.ec/blog/eleventy-and-responsive-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflorian.ec%2Fblog%2Feleventy-and-responsive-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://florian.ec/blog/eleventy-and-responsive-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy and Responsive Images</a> — <em>Florian Eckerstorfer (2020)</em></li>
<li><a href="https://www.juanfernandes.uk/blog/automated-open-graph-images-with-11ty-and-cloudinary/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.juanfernandes.uk%2Fblog%2Fautomated-open-graph-images-with-11ty-and-cloudinary%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.juanfernandes.uk/blog/automated-open-graph-images-with-11ty-and-cloudinary/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automated Open Graph images with 11ty and Cloudinary</a> — <em>Juan Fernandes (2020)</em></li>
<li><a href="https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcss-tricks.com%2Ftips-for-rolling-your-own-lazy-loading%2F/" width="150" height="150" alt="IndieWeb Avatar for https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Tips for rolling your own lazy loading</a> — <em>Phil Hawksworth (2019)</em></li>
<li><a href="https://www.webstoemp.com/blog/multilingual-sites-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.webstoemp.com%2Fblog%2Fmultilingual-sites-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.webstoemp.com/blog/multilingual-sites-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Multilingual sites with Eleventy</a> — <em>Jérôme Coupé (2019)</em></li>
</ul>
</details>
Global Data Files
2023-11-10T05:58:20Z
https://www.11ty.dev/docs/data-global/
<h1>全局数据文件(Global Data Files)</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-global/#%E7%A4%BA%E4%BE%8B">示例 </a><ul><li><a href="https://www.11ty.dev/docs/data-global/#folders">Folders </a></li><li><a href="https://www.11ty.dev/docs/data-global/#%E4%BD%BF%E7%94%A8-javascript-%E6%9B%BF%E4%BB%A3-json">使用 JavaScript 替代 JSON </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-global/#%E6%95%B0%E6%8D%AE%E6%BA%90">数据源 </a></li><li><a href="https://www.11ty.dev/docs/data-global/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<p>Global data is <a href="https://www.11ty.dev/docs/data/">data</a> that is exposed to every template in an Eleventy project.</p>
<p>One way to create global data is through <dfn>global data files</dfn>: JSON and JavaScript files placed inside of the <dfn>global data folder</dfn>. The global data folder is placed inside the project's input directory (set by the <a href="https://www.11ty.dev/docs/config/#input-directory"><code>dir.input</code> configuration option</a>), and the name of the global data folder is set by the <a href="https://www.11ty.dev/docs/config/#directory-for-global-data-files"><code>dir.data</code> configuration option</a> (<code>_data</code> by default). All <code>*.json</code> and <code>module.exports</code> values from <a href="https://www.11ty.dev/docs/data-js/"><code>*.js</code> files</a> in this directory will be added into a global data object available to all templates.</p>
<p>You may also be interested in <a href="https://www.11ty.dev/docs/data-global-custom/">config global data</a><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span>, which is another way to add global data to every template in an Eleventy project.</p>
<h2 id="示例" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/data-global/#%E7%A4%BA%E4%BE%8B">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>假设有一个 JSON 文件位于 <code>_data/userList.json</code> 路径,其内容如下:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token string">"user1"</span><span class="token punctuation">,</span><br> <span class="token string">"user2"</span><br><span class="token punctuation">]</span></code></pre>
<p>你就可以在模板中通过 <code>userList</code> 键来访问以上数据了,如下所示:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">userList</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"user1"</span><span class="token punctuation">,</span><br> <span class="token string">"user2"</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="folders" tabindex="-1">Folders <a class="direct-link" href="https://www.11ty.dev/docs/data-global/#folders">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>如果数据文件放在了子目录下,则该目录的名称将成为全局数据对象结构中的一个层级。例如,在前面示例中,我们假设 <code>userList.json</code> 文件被放到了 <code>users</code> 目录下,其完整路径为 <code>_data/users/userList.json</code>。</p>
<p>我们在模板中再访问该数据时,该数据就位于 <code>users</code> 键下了,如下所示:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">users</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">userList</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"user1"</span><span class="token punctuation">,</span><br> <span class="token string">"user2"</span><br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="使用-javascript-替代-json" tabindex="-1">使用 JavaScript 替代 JSON <a class="direct-link" href="https://www.11ty.dev/docs/data-global/#%E4%BD%BF%E7%94%A8-javascript-%E6%9B%BF%E4%BB%A3-json">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>关于通过 <code>module.exports</code> 从任意 JavaScript 数据文件(JavaScript data files)中导出值的更多信息,请参考 <a href="https://www.11ty.dev/docs/data-js/">JavaScript 数据文件</a>。</p>
<h2 id="数据源" tabindex="-1">数据源 <a class="direct-link" href="https://www.11ty.dev/docs/data-global/#%E6%95%B0%E6%8D%AE%E6%BA%90">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When the data is merged in the <a href="https://www.11ty.dev/docs/data-cascade/">Eleventy Data Cascade</a>, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a></li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em></li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a> ⬅</li>
</ol>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/data-global/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>×40 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://rknight.me/blog/using-eleventy-to-gobble-up-everything-i-do-online/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fblog%2Fusing-eleventy-to-gobble-up-everything-i-do-online%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/blog/using-eleventy-to-gobble-up-everything-i-do-online/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy to Gobble Up Everything I Do Online</a> — <em>Robb Knight (2024)</em></li>
<li><a href="https://www.youtube.com/watch?v=e_H4DxqAiyY"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3De_H4DxqAiyY/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=e_H4DxqAiyY" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a meetup community site using Global Data Files</a> — <em>Juha-Matti Santala (2024)</em></li>
<li><a href="https://coryd.dev/posts/2024/using-b2-as-a-json-data-store/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2024%2Fusing-b2-as-a-json-data-store%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2024/using-b2-as-a-json-data-store/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using B2 as a JSON data store</a> — <em>Cory Dransfeldt (2024)</em></li>
<li><a href="https://estelafranco.com/blog/eleventy-storyblok-2/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Festelafranco.com%2Fblog%2Feleventy-storyblok-2%2F/" width="150" height="150" alt="IndieWeb Avatar for https://estelafranco.com/blog/eleventy-storyblok-2/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to connect Eleventy and Storyblok</a> — <em>Estela Franco (2024)</em></li>
<li><a href="https://www.roboleary.net/webdev/2024/02/07/eleventy-fetch.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.roboleary.net%2Fwebdev%2F2024%2F02%2F07%2Feleventy-fetch.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.roboleary.net/webdev/2024/02/07/eleventy-fetch.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy - Fetch data from the Github REST API to populate a projects page</a> — <em>Rob O'Leary (2024)</em></li>
</ul>
<details>
<summary>Expand to see 35 more resources.</summary>
<ul class="list-bare">
<li><a href="https://hamatti.org/posts/community-websites-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fcommunity-websites-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/community-websites-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Community websites with Eleventy</a> — <em>Juha-Matti Santala (2024)</em></li>
<li><a href="https://www.roboleary.net/webdev/2024/01/24/eleventy-production-flag.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.roboleary.net%2Fwebdev%2F2024%2F01%2F24%2Feleventy-production-flag.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.roboleary.net/webdev/2024/01/24/eleventy-production-flag.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy - Create a global production flag</a> — <em>Rob O'Leary (2024)</em></li>
<li><a href="https://antonio.is/2024/02/21/learning-new-tricks/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fantonio.is%2F2024%2F02%2F21%2Flearning-new-tricks%2F/" width="150" height="150" alt="IndieWeb Avatar for https://antonio.is/2024/02/21/learning-new-tricks/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Learning New Tricks</a> — <em>Antonio Rodrigues (2024)</em></li>
<li><a href="https://rknight.me/blog/fetching-package-dependents-from-github/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fblog%2Ffetching-package-dependents-from-github%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/blog/fetching-package-dependents-from-github/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fetching Package Dependents from GitHub</a> — <em>Robb Knight (2024)</em></li>
<li><a href="https://www.bobmonsour.com/posts/adding-webmentions-to-my-site/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Fadding-webmentions-to-my-site%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/adding-webmentions-to-my-site/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding webmentions to my site</a> — <em>Bob Monsour (2024)</em></li>
<li><a href="https://johnwargo.com/posts/2024/updated-eleventy-future-post-plugin/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2024%2Fupdated-eleventy-future-post-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2024/updated-eleventy-future-post-plugin/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Updated Eleventy Future Post Plugin</a> — <em>John M. Wargo (2024)</em></li>
<li><a href="https://johnwargo.com/posts/2024/hiding-future-posts-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2024%2Fhiding-future-posts-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2024/hiding-future-posts-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hiding Future Posts in Eleventy</a> — <em>John M. Wargo (2024)</em></li>
<li><a href="https://coryd.dev/posts/2023/programmatically-importing-your-lastfm-listening-data-to-listenbrainz/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2023%2Fprogrammatically-importing-your-lastfm-listening-data-to-listenbrainz%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2023/programmatically-importing-your-lastfm-listening-data-to-listenbrainz/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Programmatically importing your Last.fm listening data to ListenBrainz</a> — <em>Cory Dransfeldt (2023)</em></li>
<li><a href="https://www.mikeaparicio.com/posts/2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikeaparicio.com%2Fposts%2F2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikeaparicio.com/posts/2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Wordpress as a headless CMS for Eleventy</a> — <em>Mike Aparicio (2023)</em></li>
<li><a href="https://kevingimbel.de/blog/2023/11/integrating-wordpress-posts-with-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fkevingimbel.de%2Fblog%2F2023%2F11%2Fintegrating-wordpress-posts-with-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://kevingimbel.de/blog/2023/11/integrating-wordpress-posts-with-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Integrating WordPress Posts with 11ty</a> — <em>Kevin Gimbel (2023)</em></li>
<li><a href="https://www.bobmonsour.com/posts/scratch-that-use-google-sheets-api/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Fscratch-that-use-google-sheets-api%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/scratch-that-use-google-sheets-api/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Scratch that...use the Google Sheets API</a> — <em>Bob Monsour (2023)</em></li>
<li><a href="https://bryanlrobinson.com/blog/11ty-second-11ty-global-data-files-js-and-json/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbryanlrobinson.com%2Fblog%2F11ty-second-11ty-global-data-files-js-and-json%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bryanlrobinson.com/blog/11ty-second-11ty-global-data-files-js-and-json/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty Second 11ty: Global Data files (JS and JSON)</a> — <em>Bryan Robinson (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/07/01/reading-comic-books-in-the-jamstack"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F07%2F01%2Freading-comic-books-in-the-jamstack/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/07/01/reading-comic-books-in-the-jamstack" class="avatar avatar-indieweb" loading="lazy" decoding="async">Reading Comic Books in the Jamstack</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.cassey.dev/posts/2021-11-17-switching-data-file-with-env-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.cassey.dev%2Fposts%2F2021-11-17-switching-data-file-with-env-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.cassey.dev/posts/2021-11-17-switching-data-file-with-env-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Dynamically choosing a data file to use in Eleventy templates</a> — <em>Cassey Lottman (2021)</em></li>
<li><a href="https://www.aleksandrhovhannisyan.com/blog/configuring-web-fonts-in-11ty-with-global-data/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Fconfiguring-web-fonts-in-11ty-with-global-data%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.aleksandrhovhannisyan.com/blog/configuring-web-fonts-in-11ty-with-global-data/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Configuring Web Fonts in 11ty with Global Data</a> — <em>Aleksandr Hovhannisyan (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/11/07/eleventy-10-global-data-via-plugins-example"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F11%2F07%2Feleventy-10-global-data-via-plugins-example/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/11/07/eleventy-10-global-data-via-plugins-example" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy 1.0 - Global Data via Plugins Example</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/11/02/eleventy-10-new-option-for-global-data"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F11%2F02%2Feleventy-10-new-option-for-global-data/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/11/02/eleventy-10-new-option-for-global-data" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy 1.0 - New Option for Global Data</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://anhvn.com/posts/2021/2021-09-21-media-diary-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fanhvn.com%2Fposts%2F2021%2F2021-09-21-media-diary-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://anhvn.com/posts/2021/2021-09-21-media-diary-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Media Diary with Eleventy</a> — <em>anhvn (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/08/30/using-pdfs-with-the-jamstack-building-a-document-viewer"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F08%2F30%2Fusing-pdfs-with-the-jamstack-building-a-document-viewer/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/08/30/using-pdfs-with-the-jamstack-building-a-document-viewer" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using PDFs with the Jamstack - Building a Document Viewer</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/08/02/an-adobe-pdf-embed-plugin-for-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F08%2F02%2Fan-adobe-pdf-embed-plugin-for-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/08/02/an-adobe-pdf-embed-plugin-for-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">An Adobe PDF Embed Plugin for Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/07/30/page-level-url-fetching-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F07%2F30%2Fpage-level-url-fetching-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/07/30/page-level-url-fetching-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Page Level URL Fetching with Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://tannerdolby.com/writing/generate-page-content-from-a-global-data-file-using-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftannerdolby.com%2Fwriting%2Fgenerate-page-content-from-a-global-data-file-using-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://tannerdolby.com/writing/generate-page-content-from-a-global-data-file-using-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generate Page Content From a Global Data File Using Eleventy</a> — <em>Tanner Dolby (2021)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/creating-an-11ty-collection-from-json-api/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Fcreating-an-11ty-collection-from-json-api%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/creating-an-11ty-collection-from-json-api/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating an 11ty collection from a JSON API</a> — <em>Mike Street (2021)</em></li>
<li><a href="https://florian.ec/blog/eleventy-data-pages/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflorian.ec%2Fblog%2Feleventy-data-pages%2F/" width="150" height="150" alt="IndieWeb Avatar for https://florian.ec/blog/eleventy-data-pages/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating pages from data with Eleventy</a> — <em>Florian Eckerstorfer (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/04/15/building-a-database-driven-eleventy-site"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F04%2F15%2Fbuilding-a-database-driven-eleventy-site/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/04/15/building-a-database-driven-eleventy-site" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a Database Driven Eleventy Site</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/02/25/using-pdfs-with-the-jamstack"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F02%2F25%2Fusing-pdfs-with-the-jamstack/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/02/25/using-pdfs-with-the-jamstack" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using PDFs with the Jamstack</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://benmyers.dev/blog/eleventy-data-cascade/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbenmyers.dev%2Fblog%2Feleventy-data-cascade%2F/" width="150" height="150" alt="IndieWeb Avatar for https://benmyers.dev/blog/eleventy-data-cascade/" class="avatar avatar-indieweb" loading="lazy" decoding="async">I Finally Understand Eleventy's Data Cascade</a> — <em>Ben Myers (2021)</em></li>
<li><a href="https://11ty.rocks/tips/site-metadata/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Ftips%2Fsite-metadata%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/tips/site-metadata/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Site Metadata</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://events.lunch.dev/eleventy-contributors-page/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fevents.lunch.dev%2Feleventy-contributors-page%2F/" width="150" height="150" alt="IndieWeb Avatar for https://events.lunch.dev/eleventy-contributors-page/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Create a Contributors Page in Eleventy</a> — <em>Michael Chan (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/01/18/accessing-eleventy-data-on-the-client-side"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F01%2F18%2Faccessing-eleventy-data-on-the-client-side/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/01/18/accessing-eleventy-data-on-the-client-side" class="avatar avatar-indieweb" loading="lazy" decoding="async">Accessing Eleventy Data on the Client Side</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://danabyerly.com/articles/using-airtable-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanabyerly.com%2Farticles%2Fusing-airtable-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danabyerly.com/articles/using-airtable-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Airtable with Eleventy</a> — <em>Dana Byerly (2020)</em></li>
<li><a href="https://danabyerly.com/notes/using-eleventy-data-files-for-frequently-used-links/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanabyerly.com%2Fnotes%2Fusing-eleventy-data-files-for-frequently-used-links%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danabyerly.com/notes/using-eleventy-data-files-for-frequently-used-links/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy data files for frequently used links</a> — <em>Dana Byerly (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/06/migrating-from-node-and-express-to-the-jamstack-part-1"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F06%2Fmigrating-from-node-and-express-to-the-jamstack-part-1/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/06/migrating-from-node-and-express-to-the-jamstack-part-1" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating from Node and Express to the Jamstack - Part 1</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://heydonworks.com/article/design-tokens-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fheydonworks.com%2Farticle%2Fdesign-tokens-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://heydonworks.com/article/design-tokens-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Easily Use Design Tokens In Eleventy</a> — <em>Heydon Pickering (2020)</em></li>
<li><a href="https://hamatti.org/posts/building-a-website-with-a-static-site-generator-part-2-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fbuilding-a-website-with-a-static-site-generator-part-2-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/building-a-website-with-a-static-site-generator-part-2-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a website with a static site generator, part 2: Eleventy</a> — <em>Juha-Matti Santala (2020)</em></li>
</ul>
</details>
Debug Mode
2023-11-10T05:58:20Z
https://www.11ty.dev/docs/debugging/
<h1>调试模式</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/debugging/#%E5%91%BD%E4%BB%A4">命令 </a><ul><li><a href="https://www.11ty.dev/docs/debugging/#mac-os-%EF%BC%88%E6%88%96-linux-%E7%AD%89%EF%BC%89">Mac OS (或 Linux 等) </a></li><li><a href="https://www.11ty.dev/docs/debugging/#windows">Windows </a></li></ul></li><li><a href="https://www.11ty.dev/docs/debugging/#%E4%BA%86%E8%A7%A3%E6%9B%B4%E5%A4%9A">了解更多 </a><ul><li><a href="https://www.11ty.dev/docs/debugging/#dryrun-%E5%8F%82%E6%95%B0">--dryrun 参数 </a></li><li><a href="https://www.11ty.dev/docs/debugging/#%E6%9F%A5%E7%9C%8B%E6%89%80%E6%9C%89%E4%BF%A1%E6%81%AF">查看所有信息 </a></li><li><a href="https://www.11ty.dev/docs/debugging/#%E5%88%86%E6%9E%90%E6%80%A7%E8%83%BD">分析性能 </a></li></ul></li><li><a href="https://www.11ty.dev/docs/debugging/#%E8%B0%83%E8%AF%95%E5%8D%95%E4%B8%AA%E5%8F%98%E9%87%8F">调试单个变量 </a></li></ul></div><p></p>
</details>
<p>遇到麻烦了吗?是否想看看 Eleventy 在幕后到底做了什么? <code>DEBUG</code> 模式可以帮你解惑。这一功能是基于 <a href="https://www.npmjs.com/package/debug">出色的 <code>debug</code> 软件包</a> 实现的。</p>
<p><code>debug</code> 能够明确地告诉你 data、includes、input 和 output 各自对应的是哪个目录,它还能告诉你查找模板时用的是什么 glob(类似正则表达式的东西),以及找到了哪些模板。如果你遇到了问题,请开启此功能。</p>
<p>你可以通过 <a href="https://www.11ty.dev/docs/environment-vars/">环境变量(environment variable)</a> <code>DEBUG</code> 开启此功能。实际使用时,在运行 Eleventy 的命令前添加一些设置环境变量的字符串即可。</p>
<h2 id="命令" tabindex="-1">命令 <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#%E5%91%BD%E4%BB%A4">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><em>以下命令假定 Eleventy 是安装在本地的(推荐),当然,你可以了解更多关于本地安装(Local installation)和<a href="https://www.11ty.dev/docs/global-installation/">全局安装(Global installation)</a> 的区别。</em></p>
<h3 id="mac-os-(或-linux-等)" tabindex="-1">Mac OS (或 Linux 等) <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#mac-os-%EF%BC%88%E6%88%96-linux-%E7%AD%89%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token assign-left variable">DEBUG</span><span class="token operator">=</span>Eleventy* npx @11ty/eleventy</code></pre>
<h3 id="windows" tabindex="-1">Windows <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#windows">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>阅读有关 <a href="https://www.npmjs.com/package/debug#windows-command-prompt-notes">Windows 环境变量</a> 的更多信息。</p>
<h4 id="cmd.exe" tabindex="-1">cmd.exe <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#cmd.exe">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">set</span> <span class="token assign-left variable">DEBUG</span><span class="token operator">=</span>Eleventy* <span class="token operator">&</span> eleventy</code></pre>
<h4 id="powershell-(vs-code-默认)" tabindex="-1">Powershell (VS Code 默认) <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#powershell-%EF%BC%88vs-code-%E9%BB%98%E8%AE%A4%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token variable">$env</span>:DEBUG<span class="token operator">=</span><span class="token string">"Eleventy*"</span><span class="token punctuation">;</span> eleventy</code></pre>
<h2 id="了解更多" tabindex="-1">了解更多 <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#%E4%BA%86%E8%A7%A3%E6%9B%B4%E5%A4%9A">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>请参阅 <a href="https://www.npmjs.com/package/debug"><code>debug</code> 软件包的文档</a> 以了解更多信息。</p>
<h3 id="dryrun-参数" tabindex="-1"><code>--dryrun</code> 参数 <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#dryrun-%E5%8F%82%E6%95%B0">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>如果你想运行 Eleventy 但不希望输出到文件系统的话,请添加 <code>--dryrun</code> 参数。</p>
<h3 id="查看所有信息" tabindex="-1">查看所有信息 <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#%E6%9F%A5%E7%9C%8B%E6%89%80%E6%9C%89%E4%BF%A1%E6%81%AF">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>前述命令通过设置 <code>DEBUG=Eleventy*</code> 将来自 <code>debug</code> 的消息限定为 Eleventy 相关的信息,但是你可以通过设置 <code>DEBUG=*</code> 查看来自所有依赖包输出的所有信息。</p>
<h3 id="分析性能" tabindex="-1">分析性能 <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#%E5%88%86%E6%9E%90%E6%80%A7%E8%83%BD">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>阅读有关如何 <a href="https://www.11ty.dev/docs/debug-performance/">使用 <code>debug</code> 来分析 Eleventy 构建性能</a> 的更多信息。</p>
<h2 id="调试单个变量" tabindex="-1">调试单个变量 <a class="direct-link" href="https://www.11ty.dev/docs/debugging/#%E8%B0%83%E8%AF%95%E5%8D%95%E4%B8%AA%E5%8F%98%E9%87%8F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>除了使用 <code>debug</code> 外,你还可以在模板中使用全局过滤器(filter) <a href="https://www.11ty.dev/docs/filters/log"><code>log</code></a> 输出任何内容,就像 <code>console.log</code> 一样。</p>
Deployment
2023-11-10T05:58:20Z
https://www.11ty.dev/docs/deployment/
<p>#部署网站</p>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/deployment/#%E6%9E%84%E5%BB%BA%E8%84%9A%E6%9C%AC">构建脚本 </a><ul><li><a href="https://www.11ty.dev/docs/deployment/#%E9%92%88%E5%AF%B9%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E7%9A%84%E6%9E%84%E5%BB%BA">针对生产环境的构建 </a></li></ul></li><li><a href="https://www.11ty.dev/docs/deployment/#%E7%BD%91%E7%AB%99%E6%89%98%E7%AE%A1%E5%95%86">网站托管商 </a><ul><li><a href="https://www.11ty.dev/docs/deployment/#edit-on-the-web">Edit on the Web </a></li></ul></li><li><a href="https://www.11ty.dev/docs/deployment/#%E7%9B%B8%E5%85%B3%E5%86%85%E5%AE%B9">相关内容 </a></li><li><a href="https://www.11ty.dev/docs/deployment/#%E6%9D%A5%E8%87%AA%E7%A4%BE%E5%8C%BA%E7%9A%84%E8%B5%84%E6%BA%90">来自社区的资源 </a></li></ul></div><p></p>
</details>
<p>现在你已经用 Eleventy 构建了一个网站了 <em>(即使只有一个 HTML 页面!)</em> ,并且已经准备好要把它放到网上让大家看看了!以下是各种部署网站的方式!</p>
<h2 id="构建脚本" tabindex="-1">构建脚本 <a class="direct-link" href="https://www.11ty.dev/docs/deployment/#%E6%9E%84%E5%BB%BA%E8%84%9A%E6%9C%AC">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>当部署你用 Eleventy 构建的网站时,最终目的是将 <strong>编译出来的产物</strong> (默认输出到 <code>_site</code> 目录) 上传到服务器上。你所用到的命令通常作为 <em>构建脚本(build script)</em> 配置在 <code>package.json</code> 文件中。如下所示:</p>
<div class="codetitle codetitle-left"><b>Filename </b>package.json</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string-property property">"build"</span><span class="token operator">:</span> <span class="token string">"npx @11ty/eleventy"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="针对生产环境的构建" tabindex="-1">针对生产环境的构建 <a class="direct-link" href="https://www.11ty.dev/docs/deployment/#%E9%92%88%E5%AF%B9%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E7%9A%84%E6%9E%84%E5%BB%BA">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>标准的 Eleventy 构建是针对生产环境(production-ready)的。Eleventy 不会在内部针对开发和生产环境来改变其构建的行为。</p>
<p>但是,如果你想定制 Eleventy 来添加自己的优化的话,可以通过 <a href="https://www.11ty.dev/docs/environment-vars/">环境变量</a> 来实现。</p>
<h2 id="网站托管商" tabindex="-1">网站托管商 <a class="direct-link" href="https://www.11ty.dev/docs/deployment/#%E7%BD%91%E7%AB%99%E6%89%98%E7%AE%A1%E5%95%86">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>以下列表为你部署 Eleventy 项目提供一些思路。还有很多选项可供选择,不一而足。</p>
<div class="sites-vert sites-vert--md sites--reverse sites--center">
<div class="lo-grid" style="--fl-gap-v: 5em;">
<div class="sites-site-vert sites-featured" data-filter-tags="">
<a class="elv-externalexempt" title="Want your logo here? Contact us!">
<span class="sites-site-name">Want your logo here? Contact us!</span>
<div class="sites-screenshot-container">
<img class="sites-screenshot">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">Hosting Partner</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://pages.cloudflare.com/" class="elv-externalexempt" title="Cloudflare Pages">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.cloudflare.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.cloudflare.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Cloudflare Pages</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://pages.cloudflare.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fpages.cloudflare.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://app.netlify.com/" class="elv-externalexempt" title="Netlify">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fapp.netlify.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://app.netlify.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Netlify</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://app.netlify.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fapp.netlify.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://pages.github.com/" class="elv-externalexempt" title="GitHub Pages">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpages.github.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://pages.github.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">GitHub Pages</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://pages.github.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fpages.github.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.digitalocean.com/community/tutorials/how-to-create-and-deploy-your-first-eleventy-website" class="elv-externalexempt" title="Digital Ocean">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-and-deploy-your-first-eleventy-website/" width="150" height="150" alt="IndieWeb Avatar for https://www.digitalocean.com/community/tutorials/how-to-create-and-deploy-your-first-eleventy-website" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Digital Ocean</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.digitalocean.com/community/tutorials/how-to-create-and-deploy-your-first-eleventy-website" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-and-deploy-your-first-eleventy-website/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://begin.com/" class="elv-externalexempt" title="Begin">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbegin.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://begin.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Begin</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://begin.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbegin.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://kinsta.com/" class="elv-externalexempt" title="Kinsta">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fkinsta.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://kinsta.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Kinsta</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://kinsta.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fkinsta.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://vercel.com/signup" class="elv-externalexempt" title="Vercel">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fvercel.com%2Fsignup/" width="150" height="150" alt="IndieWeb Avatar for https://vercel.com/signup" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Vercel</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://vercel.com/signup" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fvercel.com%2Fsignup/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://docs.layer0.co/guides/eleventy" class="elv-externalexempt" title="Layer0">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdocs.layer0.co%2Fguides%2Feleventy/" width="150" height="150" alt="IndieWeb Avatar for https://docs.layer0.co/guides/eleventy" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Layer0</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://docs.layer0.co/guides/eleventy" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdocs.layer0.co%2Fguides%2Feleventy/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://codeberg.page/" class="elv-externalexempt" title="Codeberg Pages">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcodeberg.page%2F/" width="150" height="150" alt="IndieWeb Avatar for https://codeberg.page/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Codeberg Pages</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://codeberg.page/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcodeberg.page%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://render-web.onrender.com/" class="elv-externalexempt" title="Render">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frender-web.onrender.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://render-web.onrender.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Render</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://render-web.onrender.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Frender-web.onrender.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://app.netlify.com/drop" class="elv-externalexempt" title="Netlify Drop">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fapp.netlify.com%2Fdrop/" width="150" height="150" alt="IndieWeb Avatar for https://app.netlify.com/drop" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Netlify Drop</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://app.netlify.com/drop" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fapp.netlify.com%2Fdrop/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://azure.microsoft.com/en-us/services/app-service/static/" class="elv-externalexempt" title="Azure Static Web Apps">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fazure.microsoft.com%2Fen-us%2Fservices%2Fapp-service%2Fstatic%2F/" width="150" height="150" alt="IndieWeb Avatar for https://azure.microsoft.com/en-us/services/app-service/static/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Azure Static Web Apps</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://azure.microsoft.com/en-us/services/app-service/static/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fazure.microsoft.com%2Fen-us%2Fservices%2Fapp-service%2Fstatic%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://docs.gitlab.com/ee/user/project/pages/" class="elv-externalexempt" title="GitLab Pages">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdocs.gitlab.com%2Fee%2Fuser%2Fproject%2Fpages%2F/" width="150" height="150" alt="IndieWeb Avatar for https://docs.gitlab.com/ee/user/project/pages/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">GitLab Pages</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://docs.gitlab.com/ee/user/project/pages/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdocs.gitlab.com%2Fee%2Fuser%2Fproject%2Fpages%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
</div>
</div>
<h3 id="edit-on-the-web" tabindex="-1">Edit on the Web <a class="direct-link" href="https://www.11ty.dev/docs/deployment/#edit-on-the-web">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>There are some great Web editors popping up that you can use to run and edit Eleventy projects online! Here are some options:</p>
<div class="sites-vert sites-vert--md sites--reverse sites--center">
<div class="lo-grid" style="--fl-gap-v: 5em;">
<div class="sites-site-vert" data-filter-tags="">
<a href="https://glitch.com/" class="elv-externalexempt" title="Glitch">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fglitch.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://glitch.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Glitch</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://glitch.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fglitch.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
</div>
</div>
</div>
<h2 id="相关内容" tabindex="-1">相关内容 <a class="direct-link" href="https://www.11ty.dev/docs/deployment/#%E7%9B%B8%E5%85%B3%E5%86%85%E5%AE%B9">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="JCQQgtOcjH4" params="start=72" playlabel="Play: New deployment docs (Weekly №2)" style="background-image:url('https://i.ytimg.com/vi/JCQQgtOcjH4/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=JCQQgtOcjH4" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: New deployment docs (Weekly №2)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=JCQQgtOcjH4&t=72">New deployment docs (Weekly №2) <code>▶1m12s</code></a></is-land></div></div>
<h2 id="来自社区的资源" tabindex="-1">来自社区的资源 <a class="direct-link" href="https://www.11ty.dev/docs/deployment/#%E6%9D%A5%E8%87%AA%E7%A4%BE%E5%8C%BA%E7%9A%84%E8%B5%84%E6%BA%90">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul class="list-bare">
<li><a href="https://snook.ca/archives/servers/deploying-11ty-to-gh-pages"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsnook.ca%2Farchives%2Fservers%2Fdeploying-11ty-to-gh-pages/" width="150" height="150" alt="IndieWeb Avatar for https://snook.ca/archives/servers/deploying-11ty-to-gh-pages" class="avatar avatar-indieweb" loading="lazy" decoding="async">GitHub Pages Tutorial</a> by <picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/rQU_S4kUop-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/rQU_S4kUop-90.webp 90w"><img alt="snookca’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/rQU_S4kUop-90.jpeg" width="90" height="90"></picture>Jonathan Snook</li>
<li><a href="https://gitlab.com/bkmgit/11ty"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgitlab.com%2Fbkmgit%2F11ty/" width="150" height="150" alt="IndieWeb Avatar for https://gitlab.com/bkmgit/11ty" class="avatar avatar-indieweb" loading="lazy" decoding="async">GitLab Pages Sample Project</a> by Benson Muite</li>
<li><a href="https://squalr.us/2021/05/deploying-an-11ty-site-to-azure-static-web-apps/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsqualr.us%2F2021%2F05%2Fdeploying-an-11ty-site-to-azure-static-web-apps%2F/" width="150" height="150" alt="IndieWeb Avatar for https://squalr.us/2021/05/deploying-an-11ty-site-to-azure-static-web-apps/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Azure Static Web Apps Tutorial</a> by Chad Schulz</li>
<li><a href="https://buddy.works/guides/buddy-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbuddy.works%2Fguides%2Fbuddy-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://buddy.works/guides/buddy-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploying Eleventy using Buddy CI/CD</a> by Maciek Palmowski</li>
<li><a href="https://github.com/marketplace/actions/eleventy-action"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmarketplace%2Factions%2Feleventy-action/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/marketplace/actions/eleventy-action" class="avatar avatar-indieweb" loading="lazy" decoding="async">GitHub Action for Eleventy</a> by <img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTartanLlama%3Fs%3D66/webp/66/" width="66" height="66" alt="Sy Brand" class="avatar avatar-large" loading="lazy" decoding="async">@TartanLlama</li>
</ul>
<p>×51 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://coryd.dev/posts/2024/automatic-mastodon-post-embeds/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2024%2Fautomatic-mastodon-post-embeds%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2024/automatic-mastodon-post-embeds/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automatic Mastodon post embeds</a> — <em>Cory Dransfeldt (2024)</em></li>
<li><a href="https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.roboleary.net%2F2024%2F02%2F15%2Feleventy-favicon-modes.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy - Differentiate between dev and production builds with unique favicons</a> — <em>Rob O'Leary (2024)</em></li>
<li><a href="https://blog.davidmoll.net/blog/2024-01-21-Track-and-display-uptime-of-your-blog/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.davidmoll.net%2Fblog%2F2024-01-21-Track-and-display-uptime-of-your-blog%2F/" width="150" height="150" alt="IndieWeb Avatar for https://blog.davidmoll.net/blog/2024-01-21-Track-and-display-uptime-of-your-blog/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Track and display uptime of your blog</a> — <em>David Moll (2024)</em></li>
<li><a href="https://fudge.org/archive/buttondown-with-11ty-on-netlify-with-github/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ffudge.org%2Farchive%2Fbuttondown-with-11ty-on-netlify-with-github%2F/" width="150" height="150" alt="IndieWeb Avatar for https://fudge.org/archive/buttondown-with-11ty-on-netlify-with-github/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Buttondown with 11ty on Netlify with GitHub</a> — <em>Jay Cuthrell (2024)</em></li>
<li><a href="https://localghost.dev/blog/how-i-deploy-my-eleventy-site-to-neocities/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flocalghost.dev%2Fblog%2Fhow-i-deploy-my-eleventy-site-to-neocities%2F/" width="150" height="150" alt="IndieWeb Avatar for https://localghost.dev/blog/how-i-deploy-my-eleventy-site-to-neocities/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How I deploy my Eleventy site to Neocities</a> — <em>Sophie Koonin (2024)</em></li>
</ul>
<details>
<summary>Expand to see 46 more resources.</summary>
<ul class="list-bare">
<li><a href="https://sheetsj.com/blog/cloudflare-pages-cron-deploys/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsheetsj.com%2Fblog%2Fcloudflare-pages-cron-deploys%2F/" width="150" height="150" alt="IndieWeb Avatar for https://sheetsj.com/blog/cloudflare-pages-cron-deploys/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Cloudflare Pages Cron Deploys</a> — <em>Jeff Sheets (2024)</em></li>
<li><a href="https://blog.davidmoll.net/blog/2024-01-14-How-to-host-a-blog/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.davidmoll.net%2Fblog%2F2024-01-14-How-to-host-a-blog%2F/" width="150" height="150" alt="IndieWeb Avatar for https://blog.davidmoll.net/blog/2024-01-14-How-to-host-a-blog/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to host a 11ty-site on a Raspberry Pi</a> — <em>David Moll (2024)</em></li>
<li><a href="https://sheetsj.com/blog/cloudflare-_redirects/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsheetsj.com%2Fblog%2Fcloudflare-_redirects%2F/" width="150" height="150" alt="IndieWeb Avatar for https://sheetsj.com/blog/cloudflare-_redirects/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Cloudflare _redirects</a> — <em>Jeff Sheets (2024)</em></li>
<li><a href="https://flamedfury.com/posts/a-simple-guide-to-redirects-on-neocities-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflamedfury.com%2Fposts%2Fa-simple-guide-to-redirects-on-neocities-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://flamedfury.com/posts/a-simple-guide-to-redirects-on-neocities-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A Simple Guide to Redirects on Neocities with Eleventy</a> — <em>fLaMEd (2024)</em></li>
<li><a href="https://moritzgiessmann.de/blog/posts/deploy-11ty-via-rsync/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmoritzgiessmann.de%2Fblog%2Fposts%2Fdeploy-11ty-via-rsync%2F/" width="150" height="150" alt="IndieWeb Avatar for https://moritzgiessmann.de/blog/posts/deploy-11ty-via-rsync/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploy 11ty Site Using Rsync</a> — <em>Moritz Giessmann (2024)</em></li>
<li><a href="https://tfedder.de/blog/deploying-my-website/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftfedder.de%2Fblog%2Fdeploying-my-website%2F/" width="150" height="150" alt="IndieWeb Avatar for https://tfedder.de/blog/deploying-my-website/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploying my website</a> — <em>Tobias Fedder (2023)</em></li>
<li><a href="https://www.zachleat.com/web/eleventy-v3-alpha/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-v3-alpha%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/eleventy-v3-alpha/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy v3 with ESM support now on the Canary channel</a> — <em>Zach Leatherman (2023)</em></li>
<li><a href="https://grgml.xyz/blog/gitlab-to-neocities-ci-cd/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgrgml.xyz%2Fblog%2Fgitlab-to-neocities-ci-cd%2F/" width="150" height="150" alt="IndieWeb Avatar for https://grgml.xyz/blog/gitlab-to-neocities-ci-cd/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automating my site update with gitlab ci/cd</a> — <em>Grigør (2023)</em></li>
<li><a href="https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-4/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpublishing-project.rivendellweb.net%2Fmigrating-from-wordpress-to-eleventy-part-4%2F/" width="150" height="150" alt="IndieWeb Avatar for https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-4/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating from WordPress to Eleventy (part 4)</a> — <em>Carlos Araya (2023)</em></li>
<li><a href="https://localghost.dev/blog/how-to-schedule-posts-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flocalghost.dev%2Fblog%2Fhow-to-schedule-posts-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://localghost.dev/blog/how-to-schedule-posts-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to schedule posts in Eleventy</a> — <em>Sophie Koonin (2023)</em></li>
<li><a href="https://whiona.weblog.lol/2023/10/my-neocities-workflow:-using-eleventy-and-the-cli-to-speed-up-development"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwhiona.weblog.lol%2F2023%2F10%2Fmy-neocities-workflow%3A-using-eleventy-and-the-cli-to-speed-up-development/" width="150" height="150" alt="IndieWeb Avatar for https://whiona.weblog.lol/2023/10/my-neocities-workflow:-using-eleventy-and-the-cli-to-speed-up-development" class="avatar avatar-indieweb" loading="lazy" decoding="async">My Neocities workflow: using Eleventy and the CLI to speed up development</a> — <em>Whiona (2023)</em></li>
<li><a href="https://www.11ty.dev/blog/seven-million/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fblog%2Fseven-million%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.11ty.dev/blog/seven-million/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Seven Million npm Downloads</a> — <em>11ty (2023)</em></li>
<li><a href="https://claytonerrington.com/blog/implementing-tinacms-with-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fclaytonerrington.com%2Fblog%2Fimplementing-tinacms-with-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://claytonerrington.com/blog/implementing-tinacms-with-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">TinaCMS + 11ty</a> — <em>Clayton Errington (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=ULwVlFMth1U"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DULwVlFMth1U/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=ULwVlFMth1U" class="avatar avatar-indieweb" loading="lazy" decoding="async">Speed up your CloudCannon Builds with Preserved Paths</a> — <em>CloudCannon (2023)</em></li>
<li><a href="https://claytonerrington.com/blog/scheduling-automatic-builds-with-static-site-generators"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fclaytonerrington.com%2Fblog%2Fscheduling-automatic-builds-with-static-site-generators/" width="150" height="150" alt="IndieWeb Avatar for https://claytonerrington.com/blog/scheduling-automatic-builds-with-static-site-generators" class="avatar avatar-indieweb" loading="lazy" decoding="async">Scheduling Automatic Builds with Static Site Generators</a> — <em>Clayton Errington (2023)</em></li>
<li><a href="https://claytonerrington.com/blog/cloudcannon-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fclaytonerrington.com%2Fblog%2Fcloudcannon-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://claytonerrington.com/blog/cloudcannon-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">CloudCannon + Eleventy</a> — <em>Clayton Errington (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=yXcxvBJuULU"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DyXcxvBJuULU/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=yXcxvBJuULU" class="avatar avatar-indieweb" loading="lazy" decoding="async">From Zero to CMS in 2 Minutes with CloudCannon and Eleventy</a> — <em>CloudCannon (2023)</em></li>
<li><a href="https://snook.ca/archives/servers/deploying-to-github-pages-using-actions"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsnook.ca%2Farchives%2Fservers%2Fdeploying-to-github-pages-using-actions/" width="150" height="150" alt="IndieWeb Avatar for https://snook.ca/archives/servers/deploying-to-github-pages-using-actions" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploying an 11ty Site to GitHub Pages Using GitHub Actions</a> — <em>Jonathan Snook (2023)</em></li>
<li><a href="https://martinschneider.me/articles/fetching-webmentions-with-netlify-and-eleventy-edge/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmartinschneider.me%2Farticles%2Ffetching-webmentions-with-netlify-and-eleventy-edge%2F/" width="150" height="150" alt="IndieWeb Avatar for https://martinschneider.me/articles/fetching-webmentions-with-netlify-and-eleventy-edge/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fetching webmentions with Netlify and Eleventy Edge</a> — <em>Martin Schneider (2023)</em></li>
<li><a href="https://martinhicks.dev/articles/remove-traiing-slash-cloudfront-s3-11ty"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmartinhicks.dev%2Farticles%2Fremove-traiing-slash-cloudfront-s3-11ty/" width="150" height="150" alt="IndieWeb Avatar for https://martinhicks.dev/articles/remove-traiing-slash-cloudfront-s3-11ty" class="avatar avatar-indieweb" loading="lazy" decoding="async">Remove trailing slash on 11ty S3 hosted sites using Cloudfront function</a> — <em>Martin Hicks (2023)</em></li>
<li><a href="https://www.simoncox.com/shorts/2023-05-15-cloudflare-pages-error-with-11ty-build/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.simoncox.com%2Fshorts%2F2023-05-15-cloudflare-pages-error-with-11ty-build%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.simoncox.com/shorts/2023-05-15-cloudflare-pages-error-with-11ty-build/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Cloudflare Pages error with 11ty build</a> — <em>Simon Cox (2023)</em></li>
<li><a href="https://dropinblog.com/blog/blogging-on-the-jamstack-with-netlify-and-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdropinblog.com%2Fblog%2Fblogging-on-the-jamstack-with-netlify-and-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://dropinblog.com/blog/blogging-on-the-jamstack-with-netlify-and-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Blogging on the Jamstack with Netlify & Eleventy</a> — <em>David Darnes (2023)</em></li>
<li><a href="https://aarongoldenthal.com/posts/gitlab-ci-pipeline-for-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Faarongoldenthal.com%2Fposts%2Fgitlab-ci-pipeline-for-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://aarongoldenthal.com/posts/gitlab-ci-pipeline-for-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">GitLab CI Pipeline for Eleventy</a> — <em>Aaron Goldenthal (2023)</em></li>
<li><a href="https://randomerrors.dev/posts/2023/netlify-eleventy-build-failure/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frandomerrors.dev%2Fposts%2F2023%2Fnetlify-eleventy-build-failure%2F/" width="150" height="150" alt="IndieWeb Avatar for https://randomerrors.dev/posts/2023/netlify-eleventy-build-failure/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Netlify Eleventy Build Failire</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://coryd.dev/posts/2023/scheduled-eleventy-builds-cron-github-actions/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2023%2Fscheduled-eleventy-builds-cron-github-actions%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2023/scheduled-eleventy-builds-cron-github-actions/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Scheduled Eleventy builds on Vercel with cron-triggered GitHub actions</a> — <em>Cory Dransfeldt (2023)</em></li>
<li><a href="https://claytonerrington.com/blog/codeberg-ci-and-11ty-builds/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fclaytonerrington.com%2Fblog%2Fcodeberg-ci-and-11ty-builds%2F/" width="150" height="150" alt="IndieWeb Avatar for https://claytonerrington.com/blog/codeberg-ci-and-11ty-builds/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using the Codeberg CI</a> — <em>Clayton Errington (2023)</em></li>
<li><a href="https://jamesdoc.com/blog/2023/11ty-daily-rebuilds/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamesdoc.com%2Fblog%2F2023%2F11ty-daily-rebuilds%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamesdoc.com/blog/2023/11ty-daily-rebuilds/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Rebuilding 11ty on a schedule</a> — <em>James Doc (2023)</em></li>
<li><a href="https://aarongoldenthal.com/posts/setup-gitlab-review-apps-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Faarongoldenthal.com%2Fposts%2Fsetup-gitlab-review-apps-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://aarongoldenthal.com/posts/setup-gitlab-review-apps-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Setup GitLab Review Apps with Eleventy</a> — <em>Aaron Goldenthal (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=CZqpcoGpYfU"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DCZqpcoGpYfU/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=CZqpcoGpYfU" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hassle-free internationalization with Eleventy 2.0 and Netlify</a> — <em>Lene Saile (2023)</em></li>
<li><a href="https://darn.es/post-previews-with-ghost-eleventy-netlify/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarn.es%2Fpost-previews-with-ghost-eleventy-netlify%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darn.es/post-previews-with-ghost-eleventy-netlify/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Post previews with Ghost, Eleventy & Netlify</a> — <em>David Darnes (2023)</em></li>
<li><a href="https://lukeb.co.uk/blog/2022/12/07/letting-eleventy-schedule-its-own-builds/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flukeb.co.uk%2Fblog%2F2022%2F12%2F07%2Fletting-eleventy-schedule-its-own-builds%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lukeb.co.uk/blog/2022/12/07/letting-eleventy-schedule-its-own-builds/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Letting Eleventy Schedule Its Own Builds</a> — <em>Luke Bonaccorsi (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/06/26/testing-the-netlify-cache-plugin-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F06%2F26%2Ftesting-the-netlify-cache-plugin-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/06/26/testing-the-netlify-cache-plugin-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Testing the Netlify Cache Plugin with Eleventy</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://buddy.works/guides/buddy-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbuddy.works%2Fguides%2Fbuddy-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://buddy.works/guides/buddy-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Static site delivery automation with Eleventy & Buddy</a> — <em>Buddy (2022)</em></li>
<li><a href="https://www.aleksandrhovhannisyan.com/blog/eleventy-build-info/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Feleventy-build-info%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.aleksandrhovhannisyan.com/blog/eleventy-build-info/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Add Build Info to an 11ty Site</a> — <em>Aleksandr Hovhannisyan (2022)</em></li>
<li><a href="https://quinndombrowski.com/blog/2022/05/07/hosting-eleventy-on-github-pages/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fquinndombrowski.com%2Fblog%2F2022%2F05%2F07%2Fhosting-eleventy-on-github-pages%2F/" width="150" height="150" alt="IndieWeb Avatar for https://quinndombrowski.com/blog/2022/05/07/hosting-eleventy-on-github-pages/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hosting Eleventy on GitHub Pages</a> — <em>Quinn Dombrowski (2022)</em></li>
<li><a href="https://www.digitalocean.com/community/tutorials/how-to-create-and-deploy-your-first-eleventy-website"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.digitalocean.com%2Fcommunity%2Ftutorials%2Fhow-to-create-and-deploy-your-first-eleventy-website/" width="150" height="150" alt="IndieWeb Avatar for https://www.digitalocean.com/community/tutorials/how-to-create-and-deploy-your-first-eleventy-website" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to Create and Deploy Your First Eleventy Website</a> — <em>Ayooluwa Isaiah (2021)</em></li>
<li><a href="https://squalr.us/2021/05/deploying-an-11ty-site-to-azure-static-web-apps/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsqualr.us%2F2021%2F05%2Fdeploying-an-11ty-site-to-azure-static-web-apps%2F/" width="150" height="150" alt="IndieWeb Avatar for https://squalr.us/2021/05/deploying-an-11ty-site-to-azure-static-web-apps/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploying an 11ty Site to Azure Static Web Apps</a> — <em>Chad Schulz (2021)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/get-eleventy-up-and-running-on-netlify-or-cloudflare-pages/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Fget-eleventy-up-and-running-on-netlify-or-cloudflare-pages%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/get-eleventy-up-and-running-on-netlify-or-cloudflare-pages/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Get your Eleventy Site into the real world using a hosting provider like Netlify or Git pages</a> — <em>Mike Street (2021)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/deploy-11ty-scheduled-posts-with-cloudflare-workers/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Fdeploy-11ty-scheduled-posts-with-cloudflare-workers%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/deploy-11ty-scheduled-posts-with-cloudflare-workers/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Cloudflare workers to publish your scheduled 11ty posts</a> — <em>Mike Street (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/03/27/quick-tips-for-eleventy-and-vercel"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F03%2F27%2Fquick-tips-for-eleventy-and-vercel/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/03/27/quick-tips-for-eleventy-and-vercel" class="avatar avatar-indieweb" loading="lazy" decoding="async">Quick Tips for Eleventy and Vercel</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.11ty.dev/docs/quicktips/netlify-ifttt/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2Fquicktips%2Fnetlify-ifttt%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.11ty.dev/docs/quicktips/netlify-ifttt/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Trigger a Netlify build every day with IFTTT</a> — <em>11ty (2021)</em></li>
<li><a href="https://martinschneider.me/articles/testing-my-eleventy-website-with-cypress-and-netlify/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmartinschneider.me%2Farticles%2Ftesting-my-eleventy-website-with-cypress-and-netlify%2F/" width="150" height="150" alt="IndieWeb Avatar for https://martinschneider.me/articles/testing-my-eleventy-website-with-cypress-and-netlify/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Testing my Eleventy-website with Cypress and Netlify</a> — <em>Martin Schneider (2020)</em></li>
<li><a href="https://hamatti.org/posts/building-a-website-with-a-static-site-generator-part-1/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fbuilding-a-website-with-a-static-site-generator-part-1%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/building-a-website-with-a-static-site-generator-part-1/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a website with a static site generator, part 1: Setup</a> — <em>Juha-Matti Santala (2020)</em></li>
<li><a href="https://publishing-project.rivendellweb.net/using-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpublishing-project.rivendellweb.net%2Fusing-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://publishing-project.rivendellweb.net/using-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using eleventy</a> — <em>Carlos Araya (2019)</em></li>
<li><a href="https://snook.ca/archives/servers/deploying-11ty-to-gh-pages"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsnook.ca%2Farchives%2Fservers%2Fdeploying-11ty-to-gh-pages/" width="150" height="150" alt="IndieWeb Avatar for https://snook.ca/archives/servers/deploying-11ty-to-gh-pages" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploying an 11ty Site to GitHub Pages</a> — <em>Jonathan Snook (2019)</em></li>
<li><a href="https://www.netlify.com/blog/2018/07/03/deploy-a-free-gatsby-hugo-or-eleventy-website-template-in-30-seconds/#main"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.netlify.com%2Fblog%2F2018%2F07%2F03%2Fdeploy-a-free-gatsby-hugo-or-eleventy-website-template-in-30-seconds%2F%23main/" width="150" height="150" alt="IndieWeb Avatar for https://www.netlify.com/blog/2018/07/03/deploy-a-free-gatsby-hugo-or-eleventy-website-template-in-30-seconds/#main" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploy a free Gatsby, Hugo, or Eleventy website template in 30 seconds</a> — <em>Phil Hawksworth (2018)</em></li>
</ul>
</details>
Environment Variables
2023-11-10T05:58:20Z
https://www.11ty.dev/docs/environment-vars/
<h1>环境变量</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/environment-vars/#%E8%AE%BE%E7%BD%AE%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">设置你自己的环境变量 </a><ul><li><a href="https://www.11ty.dev/docs/environment-vars/#%E5%88%A9%E7%94%A8-.env-%E6%96%87%E4%BB%B6">利用 .env 文件 </a></li><li><a href="https://www.11ty.dev/docs/environment-vars/#%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">通过命令行设置环境变量 </a></li><li><a href="https://www.11ty.dev/docs/environment-vars/#%E9%80%9A%E8%BF%87-npm-%E8%84%9A%E6%9C%AC%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">通过 npm 脚本设置环境变量 </a></li></ul></li><li><a href="https://www.11ty.dev/docs/environment-vars/#%E7%94%A8%E6%B3%95%E7%A4%BA%E4%BE%8B">用法示例 </a></li><li><a href="https://www.11ty.dev/docs/environment-vars/#eleventy-%E6%8F%90%E4%BE%9B%E7%9A%84%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">Eleventy 提供的环境变量 </a></li></ul></div><p></p>
</details>
<p>你可以为项目设置自己专用的环境变量。这些环境变量可以通过 <a href="https://nodejs.org/api/process.html#process_process_env">Node.js 的 <code>process.env</code> 属性</a> 在代码中获取。</p>
<p>环境变量通常用于设置部署时的上下文(context)以及 API 的私钥,也是用于 <a href="https://www.11ty.dev/docs/debugging/">开启 <code>DEBUG</code> 模式</a> 的方法。</p>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/environment-vars/#%E8%AE%BE%E7%BD%AE%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">设置你自己的环境变量 </a><ul><li><a href="https://www.11ty.dev/docs/environment-vars/#%E5%88%A9%E7%94%A8-.env-%E6%96%87%E4%BB%B6">利用 .env 文件 </a></li><li><a href="https://www.11ty.dev/docs/environment-vars/#%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">通过命令行设置环境变量 </a></li><li><a href="https://www.11ty.dev/docs/environment-vars/#%E9%80%9A%E8%BF%87-npm-%E8%84%9A%E6%9C%AC%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">通过 npm 脚本设置环境变量 </a></li></ul></li><li><a href="https://www.11ty.dev/docs/environment-vars/#%E7%94%A8%E6%B3%95%E7%A4%BA%E4%BE%8B">用法示例 </a></li><li><a href="https://www.11ty.dev/docs/environment-vars/#eleventy-%E6%8F%90%E4%BE%9B%E7%9A%84%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">Eleventy 提供的环境变量 </a></li></ul></div><p></p>
<h2 id="设置你自己的环境变量" tabindex="-1">设置你自己的环境变量 <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#%E8%AE%BE%E7%BD%AE%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="利用-.env-文件" tabindex="-1">利用 <code>.env</code> 文件 <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#%E5%88%A9%E7%94%A8-.env-%E6%96%87%E4%BB%B6">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>对于私钥和其他敏感信息,你可以创建一个 <code>.env</code> 文件并通过 <a href="https://github.com/motdotla/dotenv"><code>dotenv</code> 软件包</a> 来设置这些变量。</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><strong>请确保将 <code>.env</code> 文件名添加到 <code>.gitignore</code> 文件中。并且 <em>千万不要</em> 将 <code>.env</code> 文件提交到你的代码仓库中!!</strong></div></div>
<h3 id="通过命令行设置环境变量" tabindex="-1">通过命令行设置环境变量 <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="mac-os-(或-linux-等系统)" tabindex="-1">Mac OS (或 Linux 等系统) <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#mac-os-%EF%BC%88%E6%88%96-linux-%E7%AD%89%E7%B3%BB%E7%BB%9F%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token assign-left variable">MY_ENVIRONMENT</span><span class="token operator">=</span>production npx @11ty/eleventy</code></pre>
<h4 id="windows-cmd.exe" tabindex="-1">Windows cmd.exe <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#windows-cmd.exe">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">set</span> <span class="token assign-left variable">MY_ENVIRONMENT</span><span class="token operator">=</span>production <span class="token operator">&</span> npx @11ty/eleventy</code></pre>
<h4 id="windows-powershell-(vs-code-默认使用的命令行工具)" tabindex="-1">Windows Powershell (VS Code 默认使用的命令行工具) <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#windows-powershell-%EF%BC%88vs-code-%E9%BB%98%E8%AE%A4%E4%BD%BF%E7%94%A8%E7%9A%84%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token variable">$env</span>:MY_ENVIRONMENT<span class="token operator">=</span><span class="token string">"production"</span><span class="token punctuation">;</span> npx @11ty/eleventy</code></pre>
<h3 id="通过-npm-脚本设置环境变量" tabindex="-1">通过 npm 脚本设置环境变量 <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#%E9%80%9A%E8%BF%87-npm-%E8%84%9A%E6%9C%AC%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>你可以在项目的 <code>package.json</code> 文件中通过设置 npm 脚本来使用上述命令。</p>
<div class="codetitle codetitle-left"><b>Filename </b>package.json</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string-property property">"build:prod"</span><span class="token operator">:</span> <span class="token string">"MY_ENVIRONMENT=production npx @11ty/eleventy"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h2 id="用法示例" tabindex="-1">用法示例 <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#%E7%94%A8%E6%B3%95%E7%A4%BA%E4%BE%8B">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables">利用 JavaScript 格式的数据文件(Data Files)将环境变量暴露到模板中</a>。</li>
<li><a href="https://www.11ty.dev/docs/dates/">仅在生产环境中使用 <code>git Last Modified</code></a></li>
<li><a href="https://www.11ty.dev/docs/plugins/serverless/#bundler-options">仅在生产环境中执行 Eleventy Serverless 插件的复制(通过 <code>copyEnabled</code>)</a></li>
<li>减少 <a href="https://www.11ty.dev/docs/plugins/image/">Image 插件</a> 所支持的图片格式来加速本地开发</li>
</ul>
<h2 id="eleventy-提供的环境变量" tabindex="-1">Eleventy 提供的环境变量 <a class="direct-link" href="https://www.11ty.dev/docs/environment-vars/#eleventy-%E6%8F%90%E4%BE%9B%E7%9A%84%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><a href="https://nodejs.org/api/process.html#process_process_env">Node.js 通过 <code>process.env</code> 变量对外暴露所有环境变量</a>。</p>
<p>Eleventy 提供了 Eleventy 专用的环境变量,通常用于更复杂的使用场景。你可以根据自身需要在配置文件或数据文件(data files)中使用这些环境变量。</p>
<ul>
<li><code>process.env.ELEVENTY_ROOT</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> 运行 Eleventy 命令的目录的绝对路径。</li>
<li><code>process.env.ELEVENTY_SOURCE</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> Eleventy 的运行方式,目前有 <code>cli</code> 或 <code>script</code> 两种。</li>
<li><code>process.env.ELEVENTY_SERVERLESS</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> 如果被设置为 <code>true</code> (字符串类型),则表示 Eleventy 运行于 <a href="https://www.11ty.dev/docs/plugins/serverless/">serverless 模式</a>。如果 Eleventy <em>并非</em> 运行于 serverless模式(由于 Node 会强制将环境变量转为字符串类型)则该变量不存在。</li>
<li><code>process.env.ELEVENTY_RUN_MODE</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-beta.2">Added in v2.0.0</span> 其值可取 <code>build</code>、<code>serve</code> 或 <code>watch</code>。</li>
</ul>
Programmatic API
2023-11-10T05:58:20Z
https://www.11ty.dev/docs/programmatic/
<h1>编程式 API <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span><!-- Beta 10 or Canary 50 --></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/programmatic/#%E7%A4%BA%E4%BE%8B">示例 </a><ul><li><a href="https://www.11ty.dev/docs/programmatic/#%E5%86%99%E5%85%A5%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F">写入文件系统 </a></li><li><a href="https://www.11ty.dev/docs/programmatic/#%E4%B8%8D%E5%86%99%E5%85%A5%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F">不写入文件系统 </a></li><li><a href="https://www.11ty.dev/docs/programmatic/#%E6%9B%B4%E6%94%B9%E8%BE%93%E5%85%A5%E5%92%8C%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95">更改输入和输出目录 </a></li></ul></li><li><a href="https://www.11ty.dev/docs/programmatic/#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8">完整的参数列表 </a></li></ul></div><p></p>
</details>
<p>从 Eleventy 1.0 开始,你可以在自己的 Node 脚本中运行 Eleventy 了。 <em>(这是 <a href="https://www.11ty.dev/docs/plugins/serverless/">Eleventy Serverless</a> 插件的幕后工作方式)</em></p>
<h2 id="示例" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#%E7%A4%BA%E4%BE%8B">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="写入文件系统" tabindex="-1">写入文件系统 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#%E5%86%99%E5%85%A5%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>首先别忘了 <a href="https://www.11ty.dev/docs/get-started/#step-2-install-eleventy">首先将 Eleventy 安装到项目本地的目录中</a>!</p>
<p>接下来创建一个名为 <code>my-node-script.js</code>、内容如下的文件:</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-node-script.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Eleventy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Eleventy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">await</span> elev<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>然后从命令行运行这个新脚本。 <em>运行此脚本时不用输入 <code>~ $</code> 字样。</em></p>
<div data-preprefix-cmdhomedir="">
<pre class="language-bash"><code class="language-bash"><span class="highlight-line"><span class="token function">node</span> my-node-script.js</span></code></pre>
</div>
<h3 id="不写入文件系统" tabindex="-1">不写入文件系统 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#%E4%B8%8D%E5%86%99%E5%85%A5%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>调用 <code>.write()</code> 函数会将输出写入到文件系统中。如果你希望以编程方式获取出输出内容而不写入文件系统的话,请使用 <code>.toJSON()</code> 或 <code>.toNDJSON()</code> 函数。</p>
<h4 id="json-格式的输出" tabindex="-1">JSON 格式的输出 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#json-%E6%A0%BC%E5%BC%8F%E7%9A%84%E8%BE%93%E5%87%BA">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Eleventy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Eleventy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token keyword">await</span> elev<span class="token punctuation">.</span><span class="token function">toJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// All results</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> json <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h4 id="ndjson-格式的输出" tabindex="-1">ndjson 格式的输出 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#ndjson-%E6%A0%BC%E5%BC%8F%E7%9A%84%E8%BE%93%E5%87%BA">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Eleventy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Eleventy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> stream <span class="token operator">=</span> <span class="token keyword">await</span> elev<span class="token punctuation">.</span><span class="token function">toNDJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> stream<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">entry</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Stream one output result at a time</span><br> <span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>entry<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> json <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="更改输入和输出目录" tabindex="-1">更改输入和输出目录 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#%E6%9B%B4%E6%94%B9%E8%BE%93%E5%85%A5%E5%92%8C%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>第一个参数代表的是输入目录,第二个参数代表的是输出目录。</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Eleventy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Eleventy</span><span class="token punctuation">(</span> <span class="token string">"."</span><span class="token punctuation">,</span> <span class="token string">"_site"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Use `write` or `toJSON` or `toNDJSON`</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2 id="完整的参数列表" tabindex="-1">完整的参数列表 <a class="direct-link" href="https://www.11ty.dev/docs/programmatic/#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy 函数的第三个参数是一个对象(object)类型。</p>
<p><em>(This documentation section is a work in progress but <a href="https://github.com/11ty/eleventy/blob/v2.0.1/src/Eleventy.js">you’re welcome to dig into the <code>Eleventy</code> class source code in <code>v2.0.1</code> to learn more</a>)</em></p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Eleventy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Eleventy</span><span class="token punctuation">(</span> <span class="token string">"."</span><span class="token punctuation">,</span> <span class="token string">"_site"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// 对应命令行下的 --quiet 参数</span><br> <span class="token literal-property property">quietMode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br><br> <span class="token comment">// 对应命令行下的 --config 参数</span><br> <span class="token literal-property property">configPath</span><span class="token operator">:</span> <span class="token string">".eleventy.js"</span><span class="token punctuation">,</span><br><br> <span class="token function-variable function">config</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Do some custom Configuration API stuff</span><br> <span class="token comment">// Works great with eleventyConfig.addGlobalData</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Use `write` or `toJSON` or `toNDJSON`</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<!--
// Only useful if the first argument above is a single file (or glob)
inputDir: ".",
-->
Command Line Usage
2023-11-10T05:58:20Z
https://www.11ty.dev/docs/usage/
<h1>在命令行下使用</h1>
<p><strong>Prerequisites:</strong></p>
<ol>
<li>Eleventy runs in a Terminal window. <a href="https://www.11ty.dev/docs/terminal-window/"><em>Well, wait—what is a Terminal window?</em></a></li>
<li>Have you already <a href="https://www.11ty.dev/docs/get-started/">installed Eleventy</a>?</li>
</ol>
<hr>
<p>Here’s the first command you can enter in your Terminal window to run Eleventy:</p>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 搜索当前目录下的所有文件并输出到 ./_site 目录下</span><br>npx @11ty/eleventy</code></pre>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">请确保始终采用 <code>npx @11ty/eleventy</code> 形式的指令(即,包含 <code>@11ty/</code> 前缀)!如果你没有包含 <code>@11ty/</code> 前缀并且也未(无论本地还是全局)安装 Eleventy ,将会执行这个 <strong><a href="https://www.npmjs.com/package/eleventy">错误的软件包</a></strong>。因此,为了一致和准确,请始终使用 <code>npx @11ty/eleventy</code> 形式。</div></div>
<p>如果你使用的是全局安装的 Eleventy,请从每个指令的开头删除 <code>npx @11ty/</code> 字样,如下所示:</p>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 全局安装的</span><br>eleventy</code></pre>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># `npx @11ty/eleventy` 等价于以下形式</span><br>npx @11ty/eleventy <span class="token parameter variable">--input</span><span class="token operator">=</span>. <span class="token parameter variable">--output</span><span class="token operator">=</span>_site</code></pre>
<p>阅读有关 <a href="https://www.11ty.dev/docs/config/#input-directory"><code>--input</code></a> 和 <a href="https://www.11ty.dev/docs/config/#output-directory"><code>--output</code></a> 的更多信息。请注意,通过 <a href="https://www.11ty.dev/docs/config/">配置</a> 文件设置 input 和 output 参数更加可靠,尤其是在使用类似 <a href="https://docs.netlify.com/cli/get-started/#run-a-local-development-environment"><code>netlify dev</code></a> 等工具时。</p>
<p>假定当前目录下有一个名为 <code>template.md</code> 的文件,最终将被渲染并输出为 <code>_site/template/index.html</code> 文件。请参考 <a href="https://www.11ty.dev/docs/permalinks/">永久链接</a> 章节以了解更多信息。</p>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 仅使用部分模板类型</span><br>npx @11ty/eleventy <span class="token parameter variable">--formats</span><span class="token operator">=</span>md,html,ejs</code></pre>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 查看最新的命令列表</span><br>npx @11ty/eleventy <span class="token parameter variable">--help</span></code></pre>
<h3 id="文件保存时重新运行-eleventy" tabindex="-1">文件保存时重新运行 Eleventy <a class="direct-link" href="https://www.11ty.dev/docs/usage/#%E6%96%87%E4%BB%B6%E4%BF%9D%E5%AD%98%E6%97%B6%E9%87%8D%E6%96%B0%E8%BF%90%E8%A1%8C-eleventy">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 启动 Browsersync web 服务来监测更改并</span><br><span class="token comment"># 自动刷新页面。我们默认添加了 --watch 参数。</span><br>npx @11ty/eleventy <span class="token parameter variable">--serve</span></code></pre>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 更改 web 服务的端口号,即 localhost:8081</span><br>npx @11ty/eleventy <span class="token parameter variable">--serve</span> <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8081</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>重要说明</strong>: <a href="https://browsersync.io/docs/#requirements">Browsersync 需要页面中包含 <code><body></code> 标签</a> 才能正常工作。</div></div>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 模板文件有修改时自动运行 Eleventy。</span><br><span class="token comment"># 如果你启动了自己的 web 服务的话则非常有用。</span><br>npx @11ty/eleventy <span class="token parameter variable">--watch</span></code></pre>
<h3 id="quiet-参数让输出更安静" tabindex="-1"><code>--quiet</code> 参数让输出更安静 <a class="direct-link" href="https://www.11ty.dev/docs/usage/#quiet-%E5%8F%82%E6%95%B0%E8%AE%A9%E8%BE%93%E5%87%BA%E6%9B%B4%E5%AE%89%E9%9D%99">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 减少日志输出</span><br>npx @11ty/eleventy <span class="token parameter variable">--quiet</span></code></pre>
<h3 id="dryrun-参数用于小测试" tabindex="-1"><code>--dryrun</code> 参数用于小测试 <a class="direct-link" href="https://www.11ty.dev/docs/usage/#dryrun-%E5%8F%82%E6%95%B0%E7%94%A8%E4%BA%8E%E5%B0%8F%E6%B5%8B%E8%AF%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>运行但不向文件系统写入任何文件。在 <a href="https://www.11ty.dev/docs/debugging/">调试</a> 时很有用。</p>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 运行 Eleventy 但不输出任何文件</span><br>npx @11ty/eleventy <span class="token parameter variable">--dryrun</span></code></pre>
<h3 id="config-参数用于指定配置文件的文件名" tabindex="-1"><code>--config</code> 参数用于指定配置文件的文件名 <a class="direct-link" href="https://www.11ty.dev/docs/usage/#config-%E5%8F%82%E6%95%B0%E7%94%A8%E4%BA%8E%E6%8C%87%E5%AE%9A%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E6%96%87%E4%BB%B6%E5%90%8D">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 改变默认的配置文件名(默认文件名是 .eleventy.js)</span><br>npx @11ty/eleventy <span class="token parameter variable">--config</span><span class="token operator">=</span>myeleventyconfig.js</code></pre>
<h3 id="to-参数用于输出-json" tabindex="-1"><code>--to</code> 参数用于输出 JSON <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/usage/#to-%E5%8F%82%E6%95%B0%E7%94%A8%E4%BA%8E%E8%BE%93%E5%87%BA-json">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 以 JSON 格式输出(不写入文件系统)</span><br>npx @11ty/eleventy <span class="token parameter variable">--to</span><span class="token operator">=</span>json<br><br><span class="token comment"># 以通过换行符分隔的 JSON 格式输出(不写入文件系统)</span><br>npx @11ty/eleventy <span class="token parameter variable">--to</span><span class="token operator">=</span>ndjson<br><br><span class="token comment"># 默认行为(输出到文件系统)</span><br>npx @11ty/eleventy <span class="token parameter variable">--to</span><span class="token operator">=</span>fs</code></pre>
<p>更多信息请参阅 <a href="https://github.com/ndjson/ndjson-spec">ndjson</a>。</p>
<h3 id="incremental-参数用于增量构建" tabindex="-1"><code>--incremental</code> 参数用于增量构建 <a class="direct-link" href="https://www.11ty.dev/docs/usage/#incremental-%E5%8F%82%E6%95%B0%E7%94%A8%E4%BA%8E%E5%A2%9E%E9%87%8F%E6%9E%84%E5%BB%BA">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># *Repeat* builds only operate on files that have changed</span><br>npx @11ty/eleventy <span class="token parameter variable">--watch</span> <span class="token parameter variable">--incremental</span><br>npx @11ty/eleventy <span class="token parameter variable">--serve</span> <span class="token parameter variable">--incremental</span><br><br><span class="token comment"># Skip the initial full build with `--ignore-initial`</span><br>npx @11ty/eleventy <span class="token parameter variable">--serve</span> <span class="token parameter variable">--incremental</span> --ignore-initial</code></pre>
<p>更多信息请参阅 <a href="https://www.11ty.dev/docs/usage/incremental/">增量构建(incremental builds)</a> 章节。</p>
<h3 id="ignore-initial-to-run-eleventy-without-an-initial-build" tabindex="-1"><code>--ignore-initial</code> to run Eleventy without an Initial Build <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.25">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/usage/#ignore-initial-to-run-eleventy-without-an-initial-build">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Be wary of any file changes that happened while Eleventy wasn’t running!</p>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># Don’t build when Eleventy starts, only build on file changes</span><br>npx @11ty/eleventy <span class="token parameter variable">--watch</span> --ignore-initial<br>npx @11ty/eleventy <span class="token parameter variable">--serve</span> --ignore-initial<br>npx @11ty/eleventy <span class="token parameter variable">--serve</span> <span class="token parameter variable">--incremental</span> --ignore-initial</code></pre>
<h3 id="using-the-same-input-and-output" tabindex="-1">Using the Same Input and Output <a class="direct-link" href="https://www.11ty.dev/docs/usage/#using-the-same-input-and-output">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>的确,你可以将 <code>input</code> 和 <code>output</code> 参数设置为同一个目录,如下所示:</p>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 解析 Markdown 并输出为 HTML 文件,且遵循目录结构。</span><br>npx @11ty/eleventy <span class="token parameter variable">--input</span><span class="token operator">=</span>. <span class="token parameter variable">--output</span><span class="token operator">=</span>. <span class="token parameter variable">--formats</span><span class="token operator">=</span>md</code></pre>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">请注意这里的 <code>--formats=html</code> 参数!如果你多次运行 eleventy,它也会尝试处理前面输出的文件。请参阅 <a href="https://www.11ty.dev/docs/languages/html/#using-the-same-input-and-output-directories">HTML 模板相关文档</a>。</div></div>
<!--
### Example: Process a Single File
```bash
npx @11ty/eleventy --input=README.md --output=.
```
Writes to `./README/index.html`.
-->
Custom Front Matter
2023-11-03T21:25:29Z
https://www.11ty.dev/docs/data-frontmatter-customize/
<h1>Custom Front Matter Options</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter">Example: use JavaScript in your front matter </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-using-toml-for-front-matter-parsing">Example: using TOML for front matter parsing </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-parse-excerpts-from-content">Example: Parse excerpts from content </a></li></ul></div><p></p>
</details>
<p>Eleventy uses the <a href="https://www.npmjs.com/package/gray-matter"><code>gray-matter</code> npm package</a> for parsing front matter. <code>gray-matter</code> allows additional options that aren’t available by default in Eleventy.</p>
<p>Check out the <a href="https://www.npmjs.com/package/gray-matter#options">full list of available <code>gray-matter</code> options</a>. By default, Eleventy uses <code>gray-matter</code>’s default options.</p>
<ul>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/#change-the-default-format-project-wide"><strong>Related</strong>: Change the default Front Matter syntax project-wide</a></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setFrontMatterParsingOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token comment">/* … */</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="example-use-javascript-in-your-front-matter" tabindex="-1">Example: use JavaScript in your front matter <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>While the existing <code>js</code> front matter type uses an object literal, this example makes use of any arbitrary JavaScript and exports all of the top level variables and functions.</p>
<ul>
<li>Makes use of the <a href="https://github.com/zachleat/node-retrieve-globals/"><code>node-retrieve-globals</code> package</a>.</li>
<li>Check out the <a href="https://github.com/11ty/demo-eleventy-js-front-matter"><code>demo-eleventy-js-front-matter</code></a> repo for a full demo of this in action.</li>
</ul>
<p>Here’s what this might look in a Nunjucks template:</p>
<div class="codetitle codetitle-left"><b>Filename </b>page.njk</div>
<pre class="language-js"><code class="language-js"><span class="token operator">--</span><span class="token operator">-</span>javascript<br><span class="token keyword">const</span> myString <span class="token operator">=</span> <span class="token string">"Hi"</span><span class="token punctuation">;</span><br><br><span class="token comment">// export a function</span><br><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br><span class="token operator">--</span><span class="token operator">-</span><br><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> The template content goes here <span class="token operator">--</span><span class="token operator">></span><br><span class="token operator"><</span>div<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> myString <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><br><span class="token operator"><</span>div<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></code></pre>
<details>
<summary>More advanced usage options</summary>
<pre class="language-js"><code class="language-js"><span class="token operator">--</span><span class="token operator">-</span>javascript<br><span class="token comment">// async-friendly</span><br><span class="token keyword">const</span> myAsyncString <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"HELLO FROM THE OTHER SIDE"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// export via destructuring assignment</span><br><span class="token keyword">const</span> <span class="token punctuation">{</span> myKey <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">myKey</span><span class="token operator">:</span> <span class="token string">"myValue"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> <span class="token punctuation">[</span> first<span class="token punctuation">,</span> second <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"first"</span><span class="token punctuation">,</span> <span class="token string">"second"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span><br><br><span class="token comment">// export via dynamic import</span><br><span class="token keyword">const</span> <span class="token punctuation">{</span> noop <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"@zachleat/noop"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// access Node.js globals like console.log</span><br>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">{</span> noop <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token operator">--</span><span class="token operator">-</span><br><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> The template content goes here <span class="token operator">--</span><span class="token operator">></span></code></pre>
</details>
<p>To enable this, use the following configuration:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> RetrieveGlobals <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"node-retrieve-globals"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setFrontMatterParsingOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">engines</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string-property property">"javascript"</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">frontMatterCode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RetrieveGlobals</span><span class="token punctuation">(</span>frontMatterCode<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Do you want to pass in your own data here?</span><br> <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> vm<span class="token punctuation">.</span><span class="token function">getGlobalContext</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">reuseGlobal</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">dynamicImport</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="example-using-toml-for-front-matter-parsing" tabindex="-1">Example: using TOML for front matter parsing <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-using-toml-for-front-matter-parsing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>While Eleventy does include support for <a href="https://www.11ty.dev/docs/data-frontmatter/#alternative-front-matter-formats">JSON, YAML, and JS front matter out of the box</a>, you may want to add additional formats too.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// Don’t forget to `npm install @iarna/toml`</span><br><span class="token keyword">const</span> toml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@iarna/toml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setFrontMatterParsingOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">engines</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">toml</span><span class="token operator">:</span> toml<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>toml<span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>For more information, read <a href="https://www.npmjs.com/package/gray-matter#optionsengines">this example on the <code>gray-matter</code> documentation</a>.</p>
<p>Now you can use TOML in your front matter like this:</p>
<div class="codetitle codetitle-left"><b>Filename </b>sample.md</div>
<pre class="language-markdown"><code class="language-markdown">---toml<br><span class="token title important">title = "My page title using TOML"<br><span class="token punctuation">---</span></span><br><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br>…</code></pre>
<h3 id="example-parse-excerpts-from-content" tabindex="-1">Example: Parse excerpts from content <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-parse-excerpts-from-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setFrontMatterParsingOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">excerpt</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token comment">// Optional, default is "---"</span><br> <span class="token literal-property property">excerpt_separator</span><span class="token operator">:</span> <span class="token string">"<!-- excerpt -->"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Now you can do things like this:</p>
<div class="codetitle codetitle-left"><b>Filename </b>sample.md</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My page title</span><br><span class="token punctuation">---</span></span><br>This is the start of my content and this will be shown as the excerpt.<br><span class="token comment"><!-- excerpt --></span><br>This is a continuation of my content…</code></pre>
<p>Your template’s content will include the excerpt but remove the separator:</p>
<pre><code>This is the start of my content and this will be shown as the excerpt.
This is a continuation of my content…
</code></pre>
<p><code>page.excerpt</code> now holds <code>This is the start of my content and this will be shown as the excerpt.</code></p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>Don’t want your excerpt included with your content?</strong> The unique feature of this configuration is that you can keep your excerpt right at the beginning of your content. You can add a delimiter where you want the excerpt to end and the rest of the content to begin. If you want the excerpt to be separate from the content, make a new key for this and store it separately in your front matter or a data file.</div></div>
<h4 id="changing-where-your-excerpt-is-stored" tabindex="-1">Changing where your excerpt is stored <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter-customize/#changing-where-your-excerpt-is-stored">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>If you don’t want to use <code>page.excerpt</code> to store your excerpt value, then use your own <code>excerpt_alias</code> option (<a href="https://lodash.com/docs/4.17.15#set">any valid path to Lodash Set will work</a>) like so:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setFrontMatterParsingOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">excerpt</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token comment">// Eleventy custom option</span><br> <span class="token comment">// The variable where the excerpt will be stored.</span><br> <span class="token literal-property property">excerpt_alias</span><span class="token operator">:</span> <span class="token string">'my_custom_excerpt'</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Using <code>excerpt_alias: 'my_custom_excerpt'</code> means that the excerpt will be available in your templates as the <code>my_custom_excerpt</code> variable instead of <code>page.excerpt</code>.</p>
Front Matter Data
2023-11-03T21:25:29Z
https://www.11ty.dev/docs/data-frontmatter/
<h1>Front Matter Data</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-frontmatter/#template-configuration">Template Configuration </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#sources-of-data">Sources of Data </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#alternative-front-matter-formats">Alternative Front Matter Formats </a><ul><li><a href="https://www.11ty.dev/docs/data-frontmatter/#change-the-default-format-project-wide">Change the default format project-wide </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#add-your-own-format">Add your own format </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#json-front-matter">JSON Front Matter </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#javascript-object-front-matter">JavaScript Object Front Matter </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#advanced-customize-front-matter-parsing">Advanced: Customize Front Matter Parsing </a></li><li><a href="https://www.11ty.dev/docs/data-frontmatter/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<p>Add data in your template front matter, like this:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My page title</span><br><span class="token punctuation">---</span></span><br><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br>…</code></pre>
<p>The above is using <a href="https://learnxinyminutes.com/docs/yaml/">YAML syntax</a>. You can <a href="https://www.11ty.dev/docs/data-frontmatter/#alternative-front-matter-formats">use other formats too</a>.</p>
<p>Locally assigned front matter values override things further up the layout chain. Note also that layouts can contain front matter variables that you can use in your local template. Leaf template front matter takes precedence over layout front matter. Read more about <a href="https://www.11ty.dev/docs/layouts/">Layouts</a>.</p>
<p>Note that only the <a href="https://www.11ty.dev/docs/permalinks/"><code>permalink</code></a> and <a href="https://www.11ty.dev/docs/data-computed"><code>eleventyComputed</code></a> front matter values can contain variables and shortcodes like you would use in the body of your templates. If you need to use variables or shortcodes in other front matter values, use <code>eleventyComputed</code> to set them.</p>
<h2 id="template-configuration" tabindex="-1">Template Configuration <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#template-configuration">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><span id="user-defined-front-matter-customizations"></span></p>
<p>Eleventy allows many options to control how your template works. The most popular is <a href="https://www.11ty.dev/docs/permalinks/"><code>permalink</code></a>, which allows you to change where the file goes on the file system. You can set these options in your front matter, or anywhere else in the <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a>. <a href="https://www.11ty.dev/docs/data-configuration/">Read more about Template Configuration</a>.</p>
<h2 id="sources-of-data" tabindex="-1">Sources of Data <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#sources-of-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When the data is merged in the <a href="https://www.11ty.dev/docs/data-cascade/">Eleventy Data Cascade</a>, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a> ⬅</li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a></li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em></li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a></li>
</ol>
<h2 id="alternative-front-matter-formats" tabindex="-1">Alternative Front Matter Formats <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#alternative-front-matter-formats">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy uses the <a href="https://github.com/jonschlinkert/gray-matter"><code>gray-matter</code> package</a> for front matter processing. <code>gray-matter</code> (and thus, Eleventy) includes support out of the box for <code>yaml</code>, <code>json</code>, and <code>js</code> for JavaScript object literals in front matter (some <a href="https://github.com/jonschlinkert/gray-matter/blob/ce67a86dba419381db0dd01cc84e2d30a1d1e6a5/lib/engine.js">aliases</a> are also included).</p>
<h3 id="change-the-default-format-project-wide" tabindex="-1">Change the default format project-wide <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#change-the-default-format-project-wide">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>By default, <code>yaml</code> is used when a front matter syntax is not explicitly specified. You can change this project-wide with:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setFrontMatterParsingOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">language</span><span class="token operator">:</span> <span class="token string">"json"</span><span class="token punctuation">,</span> <span class="token comment">// default is "yaml"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="add-your-own-format" tabindex="-1">Add your own format <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#add-your-own-format">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can <a href="https://www.11ty.dev/docs/data-frontmatter-customize/">customize Front Matter Parsing</a> in Eleventy to add your own custom format, and we provide examples for:</p>
<ul>
<li><a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter">JavaScript in front matter</a>.</li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-using-toml-for-front-matter-parsing">TOML in front matter</a>.</li>
</ul>
<h3 id="json-front-matter" tabindex="-1">JSON Front Matter <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#json-front-matter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-html"><code class="language-html">---json<br>{<br> "title": "My page title"<br>}<br>---<br><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br>…</code></pre>
<h3 id="javascript-object-front-matter" tabindex="-1">JavaScript Object Front Matter <span id="javascript-front-matter"></span> <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#javascript-object-front-matter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This method makes use of a JavaScript Object in front matter. You can also easily extend Eleventy to add <a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter">arbitary JavaScript in your front matter too</a>!</p>
<p><em>Warning: while Nunjucks and Liquid syntax are similar, the following example will <strong>not</strong> work in Liquid. Liquid does not allow function execution in output (e.g. <code>{{ currentDate() }}</code>).</em></p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-html"><code class="language-html">---js<br>{<br> title: "My page title",<br> currentDate: function() {<br> // You can have a JavaScript function here!<br> return (new Date()).toLocaleString();<br> }<br>}<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Published on {{ currentDate() }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<h2 id="advanced-customize-front-matter-parsing" tabindex="-1">Advanced: Customize Front Matter Parsing <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#advanced-customize-front-matter-parsing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Configure <a href="https://www.11ty.dev/docs/data-frontmatter-customize/">front matter for customized excerpts, TOML parsing, and more</a>.</p>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/data-frontmatter/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>×33 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://grgml.xyz/blog/website-updates-bookmarks-status-and-more/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgrgml.xyz%2Fblog%2Fwebsite-updates-bookmarks-status-and-more%2F/" width="150" height="150" alt="IndieWeb Avatar for https://grgml.xyz/blog/website-updates-bookmarks-status-and-more/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A roundup of recent updates to my website</a> — <em>Grigør (2024)</em></li>
<li><a href="https://blog.davidmoll.net/blog/2024-01-15-How-to-automatically-generate-a-new-boilerplate-post-with-inquirer/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.davidmoll.net%2Fblog%2F2024-01-15-How-to-automatically-generate-a-new-boilerplate-post-with-inquirer%2F/" width="150" height="150" alt="IndieWeb Avatar for https://blog.davidmoll.net/blog/2024-01-15-How-to-automatically-generate-a-new-boilerplate-post-with-inquirer/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to automatically generate a new boilerplate-post with inquirer</a> — <em>David Moll (2024)</em></li>
<li><a href="https://www.cassey.dev/ssg-frontmatter-template/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.cassey.dev%2Fssg-frontmatter-template%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.cassey.dev/ssg-frontmatter-template/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Frontmatter Templates for New Blog Posts</a> — <em>Cassey Lottman (2024)</em></li>
<li><a href="https://flamedfury.com/posts/a-simple-guide-to-redirects-on-neocities-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflamedfury.com%2Fposts%2Fa-simple-guide-to-redirects-on-neocities-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://flamedfury.com/posts/a-simple-guide-to-redirects-on-neocities-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A Simple Guide to Redirects on Neocities with Eleventy</a> — <em>fLaMEd (2024)</em></li>
<li><a href="https://lewisdale.dev/post/detecting-markdown-titles-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flewisdale.dev%2Fpost%2Fdetecting-markdown-titles-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lewisdale.dev/post/detecting-markdown-titles-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Detecting Markdown titles with Eleventy</a> — <em>Lewis Dale (2024)</em></li>
</ul>
<details>
<summary>Expand to see 28 more resources.</summary>
<ul class="list-bare">
<li><a href="https://ginger.wtf/posts/setting-up-agitcms-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fginger.wtf%2Fposts%2Fsetting-up-agitcms-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ginger.wtf/posts/setting-up-agitcms-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to setup Agit CMS with your 11ty website</a> — <em>Ginger (2023)</em></li>
<li><a href="https://dev.to/graphqleditor/making-a-simple-eleventy-blog-template-3558"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdev.to%2Fgraphqleditor%2Fmaking-a-simple-eleventy-blog-template-3558/" width="150" height="150" alt="IndieWeb Avatar for https://dev.to/graphqleditor/making-a-simple-eleventy-blog-template-3558" class="avatar avatar-indieweb" loading="lazy" decoding="async">Making a simple Eleventy blog template</a> — <em>Tomek Poniatowicz (2023)</em></li>
<li><a href="https://www.kcaran.com/posts/excerpts-for-eleventy-my-implementation.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.kcaran.com%2Fposts%2Fexcerpts-for-eleventy-my-implementation.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.kcaran.com/posts/excerpts-for-eleventy-my-implementation.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Excerpts for Eleventy: My Implementation</a> — <em>Keith Carangelo (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/09/12/fun-with-front-matter-part-4-featured-posts"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F09%2F12%2Ffun-with-front-matter-part-4-featured-posts/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/09/12/fun-with-front-matter-part-4-featured-posts" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fun With Front Matter: Part 4 - Featured Posts</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/08/31/fun-with-front-matter-part-3-handling-edits"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F08%2F31%2Ffun-with-front-matter-part-3-handling-edits/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/08/31/fun-with-front-matter-part-3-handling-edits" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fun With Front Matter: Part 3 - Handling Edits</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/08/29/fun-with-front-matter-part-2-followups"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F08%2F29%2Ffun-with-front-matter-part-2-followups/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/08/29/fun-with-front-matter-part-2-followups" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fun With Front Matter: Part 2 - Follow-ups</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/08/28/fun-with-frontmatter-part-1-related-posts"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F08%2F28%2Ffun-with-frontmatter-part-1-related-posts/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/08/28/fun-with-frontmatter-part-1-related-posts" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fun With Frontmatter: Part 1 - Related Posts</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/batching-yaml-front-matter-updates/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Fbatching-yaml-front-matter-updates%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/batching-yaml-front-matter-updates/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Batching YAML Front Matter Updates</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://www.schmidtynotes.com/blog/r/2023-02-03-test-rmd/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.schmidtynotes.com%2Fblog%2Fr%2F2023-02-03-test-rmd%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.schmidtynotes.com/blog/r/2023-02-03-test-rmd/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Rmarkdown with Eleventy</a> — <em>Michael Schmidt (2023)</em></li>
<li><a href="https://danurbanowicz.com/posts/2022/10/17/filter-an-eleventy-collection-using-your-own-custom-front-matter/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanurbanowicz.com%2Fposts%2F2022%2F10%2F17%2Ffilter-an-eleventy-collection-using-your-own-custom-front-matter%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danurbanowicz.com/posts/2022/10/17/filter-an-eleventy-collection-using-your-own-custom-front-matter/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Filter an Eleventy Collection Using Your Own Custom Front Matter</a> — <em>Dan Urbanoicz (2022)</em></li>
<li><a href="https://tjaddison.com/blog/2022/08/processing-images-linked-from-frontmatter-with-eleventy-img-to-use-in-meta-tags/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftjaddison.com%2Fblog%2F2022%2F08%2Fprocessing-images-linked-from-frontmatter-with-eleventy-img-to-use-in-meta-tags%2F/" width="150" height="150" alt="IndieWeb Avatar for https://tjaddison.com/blog/2022/08/processing-images-linked-from-frontmatter-with-eleventy-img-to-use-in-meta-tags/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Processing images linked from frontmatter with eleventy-img to use in meta tags</a> — <em>TJ Addison (2022)</em></li>
<li><a href="https://photogabble.co.uk/tutorials/creating-a-now-page-archive-with-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fphotogabble.co.uk%2Ftutorials%2Fcreating-a-now-page-archive-with-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://photogabble.co.uk/tutorials/creating-a-now-page-archive-with-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating a now page archive with 11ty</a> — <em>Simon Dann (2022)</em></li>
<li><a href="https://michaelharley.net/posts/2022/02/21/automating-some-of-the-publishing-steps-for-my-eleventy-blog/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2022%2F02%2F21%2Fautomating-some-of-the-publishing-steps-for-my-eleventy-blog%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2022/02/21/automating-some-of-the-publishing-steps-for-my-eleventy-blog/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automating some of the publishing steps for my Eleventy blog</a> — <em>Michael Harley (2022)</em></li>
<li><a href="https://michaelharley.net/posts/2022/01/29/my-complete-blogging-workflow/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2022%2F01%2F29%2Fmy-complete-blogging-workflow%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2022/01/29/my-complete-blogging-workflow/" class="avatar avatar-indieweb" loading="lazy" decoding="async">My complete blogging workflow</a> — <em>Michael Harley (2022)</em></li>
<li><a href="https://lucheto.hashnode.dev/formatting-frontmatter-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flucheto.hashnode.dev%2Fformatting-frontmatter-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://lucheto.hashnode.dev/formatting-frontmatter-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Formatting Frontmatter in Eleventy</a> — <em>Lucheto (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2021/09/24/creating-a-manual-related-posts-feature-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F09%2F24%2Fcreating-a-manual-related-posts-feature-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/09/24/creating-a-manual-related-posts-feature-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating a (Manual) Related Posts Feature in Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/09/19/supporting-multiple-authors-in-an-eleventy-blog-follow-up"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F09%2F19%2Fsupporting-multiple-authors-in-an-eleventy-blog-follow-up/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/09/19/supporting-multiple-authors-in-an-eleventy-blog-follow-up" class="avatar avatar-indieweb" loading="lazy" decoding="async">Supporting Multiple Authors in an Eleventy Blog - Follow-Up</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/07/30/page-level-url-fetching-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F07%2F30%2Fpage-level-url-fetching-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/07/30/page-level-url-fetching-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Page Level URL Fetching with Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.alpower.com/blog/applying-frontmatter-defaults-to-a-whole-folder"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.alpower.com%2Fblog%2Fapplying-frontmatter-defaults-to-a-whole-folder/" width="150" height="150" alt="IndieWeb Avatar for https://www.alpower.com/blog/applying-frontmatter-defaults-to-a-whole-folder" class="avatar avatar-indieweb" loading="lazy" decoding="async">Applying frontmatter defaults to a whole folder of posts in eleventy</a> — <em>Al Power (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/06/22/dynamic-short-urls-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F06%2F22%2Fdynamic-short-urls-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/06/22/dynamic-short-urls-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Dynamic Short URLs with Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/05/16/building-a-choose-your-own-adventure-site-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F05%2F16%2Fbuilding-a-choose-your-own-adventure-site-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/05/16/building-a-choose-your-own-adventure-site-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a Choose Your Own Adventure site with Eleventy</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/05/01/adding-an-email-subscription-to-your-jamstack-site"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F05%2F01%2Fadding-an-email-subscription-to-your-jamstack-site/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/05/01/adding-an-email-subscription-to-your-jamstack-site" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding an Email Subscription to Your Jamstack Site</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/01/18/accessing-eleventy-data-on-the-client-side"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F01%2F18%2Faccessing-eleventy-data-on-the-client-side/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/01/18/accessing-eleventy-data-on-the-client-side" class="avatar avatar-indieweb" loading="lazy" decoding="async">Accessing Eleventy Data on the Client Side</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.falldowngoboone.com/blog/composing-data-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.falldowngoboone.com%2Fblog%2Fcomposing-data-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.falldowngoboone.com/blog/composing-data-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Composing data in Eleventy</a> — <em>Ryan Boone (2020)</em></li>
<li><a href="https://victorcamnerin.com/articles/parsing-markdown-in-frontmatter-for-eleventy-templates-using-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fvictorcamnerin.com%2Farticles%2Fparsing-markdown-in-frontmatter-for-eleventy-templates-using-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://victorcamnerin.com/articles/parsing-markdown-in-frontmatter-for-eleventy-templates-using-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Parsing markdown in frontmatter for Eleventy templates, using filters</a> — <em>Victor Camnerin (2020)</em></li>
<li><a href="https://www.markllobrera.com/posts/eleventy-rss-feeds-and-front-matter-data/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.markllobrera.com%2Fposts%2Feleventy-rss-feeds-and-front-matter-data%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.markllobrera.com/posts/eleventy-rss-feeds-and-front-matter-data/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy: RSS Feeds and Front Matter Data</a> — <em>Mark Llobrera (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/24/supporting-multiple-authors-in-an-eleventy-blog"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F24%2Fsupporting-multiple-authors-in-an-eleventy-blog/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/24/supporting-multiple-authors-in-an-eleventy-blog" class="avatar avatar-indieweb" loading="lazy" decoding="async">Supporting Multiple Authors in an Eleventy Blog</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/07/hiding-future-content-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F07%2Fhiding-future-content-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/07/hiding-future-content-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hiding Future Content with Eleventy</a> — <em>Raymond Camden (2020)</em></li>
</ul>
</details>
Data Cascade
2023-11-01T13:33:37Z
https://www.11ty.dev/docs/data-cascade/
<h1>The Data Cascade</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-cascade/#sources-of-data">Sources of Data </a></li><li><a href="https://www.11ty.dev/docs/data-cascade/#example">Example </a></li><li><a href="https://www.11ty.dev/docs/data-cascade/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<p>In Eleventy, data is merged from multiple different sources before the template is rendered. The data is merged in what Eleventy calls the Data Cascade.</p>
<h2 id="sources-of-data" tabindex="-1">Sources of Data <a class="direct-link" href="https://www.11ty.dev/docs/data-cascade/#sources-of-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When the data is merged in the Eleventy Data Cascade, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a></li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em></li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a></li>
</ol>
<h2 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/data-cascade/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="codetitle codetitle-left"><b>Filename </b>my-template.md</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> This is a Good Blog Post<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> CSS<br> <span class="token punctuation">-</span> HTML<br><span class="token key atrule">layout</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>layout.njk<br><span class="token punctuation">---</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/my-layout.njk</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> This is a Very Good Blog Post<br><span class="token key atrule">author</span><span class="token punctuation">:</span> Zach<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> JavaScript<br><span class="token punctuation">---</span></code></pre>
<p>Note that when <code>my-template.md</code> and <code>my-layout.njk</code> share data with the same object key (<code>title</code> and <code>tags</code>), the “leaf template” <code>my-template.md</code> takes precedence.</p>
<p>The data cascade results in the following data when <code>my-template.md</code> is rendered:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"This is a Good Blog Post"</span><span class="token punctuation">,</span><br> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"Zach"</span><span class="token punctuation">,</span><br> <span class="token property">"tags"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"CSS"</span><span class="token punctuation">,</span><br> <span class="token string">"HTML"</span><span class="token punctuation">,</span><br> <span class="token string">"JavaScript"</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token property">"layout"</span><span class="token operator">:</span> <span class="token string">"my-layout.njk"</span><br><span class="token punctuation">}</span></code></pre>
<p>By default in v1.0, Eleventy does a deep data merge to combine Object literals and Arrays. If you want to opt-out of this behavior and revert to a simple top level merge (<code>Object.assign</code>) from the different data sources, you can turn off <a href="https://www.11ty.dev/docs/data-deep-merge/">Data Deep Merge</a>. You can override this on a per-property basis too—read more at the <a href="https://www.11ty.dev/docs/data-deep-merge/">Data Deep Merge documentation</a>.</p>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/data-cascade/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="sites-vert">
<div class="lo-grid">
<div class="sites-site-vert" data-filter-tags="">
<a href="https://benmyers.dev/blog/eleventy-data-cascade/" class="elv-externalexempt" title="I Finally Understand Eleventy’s Data Cascade">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbenmyers.dev%2Fblog%2Feleventy-data-cascade%2F/" width="150" height="150" alt="IndieWeb Avatar for https://benmyers.dev/blog/eleventy-data-cascade/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">I Finally Understand Eleventy’s Data Cascade</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://benmyers.dev/blog/eleventy-data-cascade/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbenmyers.dev%2Fblog%2Feleventy-data-cascade%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="lo-c-center">
+ <a href="https://github.com/11ty/11ty-website/blob/master/src/_data/community/" class="elv-externalexempt nowrap">Add yours!</a>
</div>
</div>
</div>
<p>×33 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://coryd.dev/posts/2024/using-b2-as-a-json-data-store/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2024%2Fusing-b2-as-a-json-data-store%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2024/using-b2-as-a-json-data-store/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using B2 as a JSON data store</a> — <em>Cory Dransfeldt (2024)</em></li>
<li><a href="https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.roboleary.net%2F2024%2F02%2F15%2Feleventy-favicon-modes.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.roboleary.net/2024/02/15/eleventy-favicon-modes.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy - Differentiate between dev and production builds with unique favicons</a> — <em>Rob O'Leary (2024)</em></li>
<li><a href="https://hamatti.org/posts/community-websites-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fcommunity-websites-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/community-websites-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Community websites with Eleventy</a> — <em>Juha-Matti Santala (2024)</em></li>
<li><a href="https://rknight.me/blog/creating-an-opml-file-for-my-blogroll/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fblog%2Fcreating-an-opml-file-for-my-blogroll%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/blog/creating-an-opml-file-for-my-blogroll/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating an OPML File for my Blogroll</a> — <em>Robb Knight (2024)</em></li>
<li><a href="https://antonio.is/2024/02/21/learning-new-tricks/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fantonio.is%2F2024%2F02%2F21%2Flearning-new-tricks%2F/" width="150" height="150" alt="IndieWeb Avatar for https://antonio.is/2024/02/21/learning-new-tricks/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Learning New Tricks</a> — <em>Antonio Rodrigues (2024)</em></li>
</ul>
<details>
<summary>Expand to see 28 more resources.</summary>
<ul class="list-bare">
<li><a href="https://www.martingunnarsson.com/posts/right-here-right-now/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.martingunnarsson.com%2Fposts%2Fright-here-right-now%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.martingunnarsson.com/posts/right-here-right-now/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Right here, right now</a> — <em>Martin Gunnarsson (2024)</em></li>
<li><a href="https://jamesdoc.com/blog/2023/git-changelog-in-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamesdoc.com%2Fblog%2F2023%2Fgit-changelog-in-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamesdoc.com/blog/2023/git-changelog-in-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding a git based changelog in 11ty</a> — <em>James Doc (2023)</em></li>
<li><a href="https://coryd.dev/posts/2023/programmatically-importing-your-lastfm-listening-data-to-listenbrainz/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2023%2Fprogrammatically-importing-your-lastfm-listening-data-to-listenbrainz%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2023/programmatically-importing-your-lastfm-listening-data-to-listenbrainz/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Programmatically importing your Last.fm listening data to ListenBrainz</a> — <em>Cory Dransfeldt (2023)</em></li>
<li><a href="https://rknight.me/popular-pages-with-eleventy-and-fathom-analytics/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fpopular-pages-with-eleventy-and-fathom-analytics%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/popular-pages-with-eleventy-and-fathom-analytics/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Popular Pages with Eleventy and Fathom Analytics</a> — <em>Robb Knight (2023)</em></li>
<li><a href="https://www.bobmonsour.com/posts/scratch-that-use-google-sheets-api/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Fscratch-that-use-google-sheets-api%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/scratch-that-use-google-sheets-api/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Scratch that...use the Google Sheets API</a> — <em>Bob Monsour (2023)</em></li>
<li><a href="https://benmyers.dev/blog/eleventy-blogroll/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbenmyers.dev%2Fblog%2Feleventy-blogroll%2F/" width="150" height="150" alt="IndieWeb Avatar for https://benmyers.dev/blog/eleventy-blogroll/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Build a Blogroll with Eleventy</a> — <em>Ben Myers (2023)</em></li>
<li><a href="https://illtron.net/2023/01/11ty-directory-data-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Filltron.net%2F2023%2F01%2F11ty-directory-data-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://illtron.net/2023/01/11ty-directory-data-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy filters in Directory Computed Data</a> — <em>Chris Coleman (2023)</em></li>
<li><a href="https://danburzo.ro/eleventy-relational-data/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanburzo.ro%2Feleventy-relational-data%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danburzo.ro/eleventy-relational-data/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Relational data in Eleventy</a> — <em>Dan Burzo (2022)</em></li>
<li><a href="https://www.alpower.com/blog/access-eleventy-post-content-in-listing"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.alpower.com%2Fblog%2Faccess-eleventy-post-content-in-listing/" width="150" height="150" alt="IndieWeb Avatar for https://www.alpower.com/blog/access-eleventy-post-content-in-listing" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to access post content in template listing files</a> — <em>Al Power (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/06/26/testing-the-netlify-cache-plugin-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F06%2F26%2Ftesting-the-netlify-cache-plugin-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/06/26/testing-the-netlify-cache-plugin-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Testing the Netlify Cache Plugin with Eleventy</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.youtube.com/watch?v=Nv5i_nuZOqw"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNv5i_nuZOqw/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=Nv5i_nuZOqw" class="avatar avatar-indieweb" loading="lazy" decoding="async">Journey to the Center of the Eleventy Data Cascade with Ben Myers</a> — <em>Ben Myers (2022)</em></li>
<li><a href="https://davidea.st/articles/11ty-tips-i-wish-i-knew-from-the-start/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdavidea.st%2Farticles%2F11ty-tips-i-wish-i-knew-from-the-start%2F/" width="150" height="150" alt="IndieWeb Avatar for https://davidea.st/articles/11ty-tips-i-wish-i-knew-from-the-start/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty tips I wish I knew from the start</a> — <em>David East (2022)</em></li>
<li><a href="https://www.cassey.dev/posts/2021-11-17-switching-data-file-with-env-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.cassey.dev%2Fposts%2F2021-11-17-switching-data-file-with-env-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.cassey.dev/posts/2021-11-17-switching-data-file-with-env-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Dynamically choosing a data file to use in Eleventy templates</a> — <em>Cassey Lottman (2021)</em></li>
<li><a href="https://anhvn.com/posts/2021/2021-09-21-media-diary-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fanhvn.com%2Fposts%2F2021%2F2021-09-21-media-diary-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://anhvn.com/posts/2021/2021-09-21-media-diary-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Media Diary with Eleventy</a> — <em>anhvn (2021)</em></li>
<li><a href="https://joshcrain.io/notes/2021/eleventy-garmin-connect/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjoshcrain.io%2Fnotes%2F2021%2Feleventy-garmin-connect%2F/" width="150" height="150" alt="IndieWeb Avatar for https://joshcrain.io/notes/2021/eleventy-garmin-connect/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A Running Log - Garmin Connect and Eleventy</a> — <em>Josh Crain (2021)</em></li>
<li><a href="https://multiline.co/mment/2021/07/building-notification-thingamajig-eleventy-data/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmultiline.co%2Fmment%2F2021%2F07%2Fbuilding-notification-thingamajig-eleventy-data%2F/" width="150" height="150" alt="IndieWeb Avatar for https://multiline.co/mment/2021/07/building-notification-thingamajig-eleventy-data/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a notification thingamajig with Eleventy data</a> — <em>Ashur Cabrera (2021)</em></li>
<li><a href="https://blog.kaan.fyi/stop-forgetting-the-eleventy-data-cascade"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.kaan.fyi%2Fstop-forgetting-the-eleventy-data-cascade/" width="150" height="150" alt="IndieWeb Avatar for https://blog.kaan.fyi/stop-forgetting-the-eleventy-data-cascade" class="avatar avatar-indieweb" loading="lazy" decoding="async">Stop forgetting the Eleventy Data Cascade</a> — <em>Kaan Divringi (2021)</em></li>
<li><a href="https://florian.ec/blog/eleventy-data-pages/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflorian.ec%2Fblog%2Feleventy-data-pages%2F/" width="150" height="150" alt="IndieWeb Avatar for https://florian.ec/blog/eleventy-data-pages/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating pages from data with Eleventy</a> — <em>Florian Eckerstorfer (2021)</em></li>
<li><a href="https://benmyers.dev/blog/eleventy-data-cascade/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbenmyers.dev%2Fblog%2Feleventy-data-cascade%2F/" width="150" height="150" alt="IndieWeb Avatar for https://benmyers.dev/blog/eleventy-data-cascade/" class="avatar avatar-indieweb" loading="lazy" decoding="async">I Finally Understand Eleventy's Data Cascade</a> — <em>Ben Myers (2021)</em></li>
<li><a href="https://11ty.rocks/tips/site-metadata/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Ftips%2Fsite-metadata%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/tips/site-metadata/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Site Metadata</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://11ty.rocks/posts/using-template-content-as-data/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Fposts%2Fusing-template-content-as-data%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/posts/using-template-content-as-data/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Template Content as Data for 11ty</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://www.maxkohler.com/posts/eleventy-csv/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.maxkohler.com%2Fposts%2Feleventy-csv%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.maxkohler.com/posts/eleventy-csv/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to use CSV data with Eleventy</a> — <em>Max Kohler (2021)</em></li>
<li><a href="https://www.maxivanov.io/add-structured-data-to-eleventy-blog/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.maxivanov.io%2Fadd-structured-data-to-eleventy-blog%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.maxivanov.io/add-structured-data-to-eleventy-blog/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Add structured data annotations to Eleventy blog</a> — <em>Max Ivanov (2020)</em></li>
<li><a href="https://www.madebymike.com.au/writing/11ty-filters-data-shortcodes/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.madebymike.com.au%2Fwriting%2F11ty-filters-data-shortcodes%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.madebymike.com.au/writing/11ty-filters-data-shortcodes/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Understanding Filters, Shortcodes and Data in 11ty</a> — <em>Mike (2020)</em></li>
<li><a href="https://www.falldowngoboone.com/blog/composing-data-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.falldowngoboone.com%2Fblog%2Fcomposing-data-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.falldowngoboone.com/blog/composing-data-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Composing data in Eleventy</a> — <em>Ryan Boone (2020)</em></li>
<li><a href="https://danabyerly.com/notes/using-eleventy-data-files-for-frequently-used-links/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanabyerly.com%2Fnotes%2Fusing-eleventy-data-files-for-frequently-used-links%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danabyerly.com/notes/using-eleventy-data-files-for-frequently-used-links/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy data files for frequently used links</a> — <em>Dana Byerly (2020)</em></li>
<li><a href="https://sia.codes/posts/architecting-data-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsia.codes%2Fposts%2Farchitecting-data-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://sia.codes/posts/architecting-data-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Architecting data in Eleventy</a> — <em>Sia Karamalegos (2020)</em></li>
<li><a href="https://khalidabuhakmeh.com/five-critical-things-before-working-with-11ty"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fkhalidabuhakmeh.com%2Ffive-critical-things-before-working-with-11ty/" width="150" height="150" alt="IndieWeb Avatar for https://khalidabuhakmeh.com/five-critical-things-before-working-with-11ty" class="avatar avatar-indieweb" loading="lazy" decoding="async">Five Critical Things To Do Before Working With 11ty</a> — <em>Khalid Abuhakmeh (2020)</em></li>
</ul>
</details>
Content Dates
2023-11-01T13:33:37Z
https://www.11ty.dev/docs/dates/
<h1>Content Dates</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/dates/#setting-a-content-date-in-front-matter">Setting a Content Date in Front Matter </a></li><li><a href="https://www.11ty.dev/docs/dates/#dates-off-by-one-day">Dates off by one day </a><ul><li><a href="https://www.11ty.dev/docs/dates/#example">Example </a></li><li><a href="https://www.11ty.dev/docs/dates/#also-on-youtube">Also on YouTube </a></li></ul></li><li><a href="https://www.11ty.dev/docs/dates/#collections-out-of-order-when-you-run-eleventy-on-your-server">Collections out of order when you run Eleventy on your Server </a></li><li><a href="https://www.11ty.dev/docs/dates/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<h2 id="setting-a-content-date-in-front-matter" tabindex="-1">Setting a Content Date in Front Matter <a class="direct-link" href="https://www.11ty.dev/docs/dates/#setting-a-content-date-in-front-matter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Add a <code>date</code> key to your front matter to override the default date (file creation) and customize how the file is sorted in a collection.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2016-01-01</span></span><br><span class="token punctuation">---</span></span></code></pre>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">date</span><span class="token punctuation">:</span> Last Modified</span><br><span class="token punctuation">---</span></span></code></pre>
<p>Valid <code>date</code> values:</p>
<ul>
<li><code>Last Modified</code>: automatically resolves to the file’s last modified date</li>
<li><code>Created</code>: automatically resolves to the file’s created date (default, this is what is used when <code>date</code> is omitted).</li>
<li><code>git Last Modified</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.1">Added in v1.0.1</span> automatically resolves to the file’s latest git commit. If a file is not yet checked in to git, it assigns <code>Date.now()</code> to <code>page.date</code> instead.
<ul>
<li>This one is a bit resource intensive, so you may want to limit this to your CI server environment only using JavaScript data files and <a href="https://www.11ty.dev/docs/environment-vars/">Environment Variables</a>. Check out <a href="https://github.com/11ty/11ty-website/blob/5403f2b853e09165bec8bc6f7466a6a041487bcc/src/docs/docs.11tydata.js#L5-L7">this real-world directory data file</a>.</li>
</ul>
</li>
<li><code>git Created</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.13">Added in v2.0.0</span> automatically resolves to the file’s first git commit. It uses git's <code>--follow</code> flag to make a "best effort" renaming tracking. If a file is not yet checked in to git, it assigns <code>Date.now()</code> to <code>page.date</code> instead.
<ul>
<li>This one is a bit resource intensive, so you may want to limit this to your CI server environment only using JavaScript data files and <a href="https://www.11ty.dev/docs/environment-vars/">Environment Variables</a>. Check out <a href="https://github.com/11ty/11ty-website/blob/5403f2b853e09165bec8bc6f7466a6a041487bcc/src/docs/docs.11tydata.js#L5-L7">this real-world directory data file</a>.</li>
</ul>
</li>
<li><code>2016-01-01</code> or any other valid <a href="https://yaml.org/type/timestamp.html">YAML date value</a> (leaving off the time assumes midnight in UTC, or <code>00:00:00Z</code>)</li>
<li><code>"2016-01-01"</code> or any other valid ISO 8601 <strong>string</strong> that <a href="https://moment.github.io/luxon/#/parsing?id=iso-8601">Luxon’s <code>DateTime.fromISO</code></a> can parse (see also the <a href="https://moment.github.io/luxon/api-docs/index.html#datetimefromiso">Luxon API docs</a>).</li>
</ul>
<p>If a <code>date</code> key is omitted from the file, we then look for a <code>YYYY-MM-DD</code> format anywhere in the file path (even folders). If there are multiple dates found, the first is used. ℹ️ <a href="https://github.com/11ty/eleventy/pull/1752">Note that starting in 1.0 for consistency with front matter formats file name date formats are now assumed to be UTC.</a></p>
<p>As a last resort, the file creation date is used. <a href="https://www.11ty.dev/docs/dates/#collections-out-of-order-when-you-run-eleventy-on-your-server">Careful when relying on file creation dates on a deployment server</a>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>Trying to use <code>date</code> in your templates?</strong> The <code>date</code> value will likely not be of much use, since Eleventy performs no transformation on this front matter value. You probably want <code>page.date</code> instead. Check out <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contents">the values available in the <code>page</code> variable</a>.</div></div>
<h2 id="dates-off-by-one-day" tabindex="-1">Dates off by one day? <a class="direct-link" href="https://www.11ty.dev/docs/dates/#dates-off-by-one-day">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>Common Pitfall</strong></a>.</div></div>
<p>You’re probably displaying UTC dates in a local time zone.</p>
<p>Many date formats in Eleventy (when set in your content‘s filename as <code>YYYY-MM-DD-myfile.md</code> or in your front matter as <code>date: YYYY-MM-DD</code>) assume midnight in UTC. When displaying your dates, make sure you’re using the UTC time and not your own local time zone, which may be the default.</p>
<h3 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/dates/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-01-01</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>If you output the Date object in a template, it will convert it to a string for display:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid, Nunjucks</div>
<pre><code>Using {{ page.date }} will display a date using a local time zone like:
Sun Dec 31 2017 18:00:00 GMT-0600 (Central Standard Time)
</code></pre>
<p>Note that this appears to be the wrong day!</p>
<p>Nunjucks allows you to call JavaScript methods in output <code>{{ page.date.toString() }}</code>. Liquid does not allow this.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre><code>But {{ page.date.toUTCString() }} will correctly
display a date with a UTC time zone like:
Mon, 01 Jan 2018 00:00:00 GMT
</code></pre>
<p>You could add your own <code>toUTCString</code> <a href="https://www.11ty.dev/docs/filters/">filter in Liquid</a> to perform the same task.</p>
<h3 id="also-on-youtube" tabindex="-1">Also on YouTube <a class="direct-link" href="https://www.11ty.dev/docs/dates/#also-on-youtube">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="VddJxNKKlE8" playlabel="Play: 11ty Second 11ty: Setting a date string in eleventyComputed to fix 11ty's Off by 1" style="background-image:url('https://i.ytimg.com/vi/VddJxNKKlE8/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=VddJxNKKlE8" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: 11ty Second 11ty: Setting a date string in eleventyComputed to fix 11ty's Off by 1</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=VddJxNKKlE8">11ty Second 11ty: Setting a date string in eleventyComputed to fix 11ty's Off by 1</a></is-land></div></div>
<h2 id="collections-out-of-order-when-you-run-eleventy-on-your-server" tabindex="-1">Collections out of order when you run Eleventy on your Server? <a class="direct-link" href="https://www.11ty.dev/docs/dates/#collections-out-of-order-when-you-run-eleventy-on-your-server">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>Common Pitfall</strong></a>.</div></div>
<p>Be careful relying on the default <code>date</code> associated with a piece of content. By default Eleventy uses file creation dates, which works fine if you run Eleventy locally but may reset in some conditions if you run Eleventy on a Continuous Integration server. Work around this by using explicit date assignments, either in your front matter or your content’s file name. Read more at <a href="https://www.11ty.dev/docs/dates/#setting-a-content-date-in-front-matter"><em>Setting a Content Date in Front Matter</em></a>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.1">Added in v1.0.1</span> The new <code>date: "git Last Modified"</code> feature will resolve this issue! Source control dates are available and will be consistent on most Continuous Integration servers. Read more at <a href="https://www.11ty.dev/docs/dates/#setting-a-content-date-in-front-matter"><em>Setting a Content Date in Front Matter</em></a>.</div></div>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/dates/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>×37 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://ttntm.me/blog/bukmark-club-intro/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fttntm.me%2Fblog%2Fbukmark-club-intro%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ttntm.me/blog/bukmark-club-intro/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Intro: Bukmark.club</a> — <em>Tom Doe (2024)</em></li>
<li><a href="https://localghost.dev/blog/automated-weekly-links-posts-with-raindrop-io-and-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flocalghost.dev%2Fblog%2Fautomated-weekly-links-posts-with-raindrop-io-and-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://localghost.dev/blog/automated-weekly-links-posts-with-raindrop-io-and-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automated weekly links posts with raindrop.io and Eleventy</a> — <em>Sophie Koonin (2024)</em></li>
<li><a href="https://rknight.me/blog/creating-an-opml-file-for-my-blogroll/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fblog%2Fcreating-an-opml-file-for-my-blogroll%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/blog/creating-an-opml-file-for-my-blogroll/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating an OPML File for my Blogroll</a> — <em>Robb Knight (2024)</em></li>
<li><a href="https://www.martingunnarsson.com/posts/right-here-right-now/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.martingunnarsson.com%2Fposts%2Fright-here-right-now%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.martingunnarsson.com/posts/right-here-right-now/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Right here, right now</a> — <em>Martin Gunnarsson (2024)</em></li>
<li><a href="https://tfedder.de/blog/deploying-my-website/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftfedder.de%2Fblog%2Fdeploying-my-website%2F/" width="150" height="150" alt="IndieWeb Avatar for https://tfedder.de/blog/deploying-my-website/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Deploying my website</a> — <em>Tobias Fedder (2023)</em></li>
</ul>
<details>
<summary>Expand to see 32 more resources.</summary>
<ul class="list-bare">
<li><a href="https://jamesdoc.com/blog/2023/git-changelog-in-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamesdoc.com%2Fblog%2F2023%2Fgit-changelog-in-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamesdoc.com/blog/2023/git-changelog-in-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding a git based changelog in 11ty</a> — <em>James Doc (2023)</em></li>
<li><a href="https://rknight.me/eleventy-post-graph-plugin/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Feleventy-post-graph-plugin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/eleventy-post-graph-plugin/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Post Graph Plugin</a> — <em>Robb Knight (2023)</em></li>
<li><a href="https://chriskirknielsen.com/blog/group-posts-by-year-with-nunjucks-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fchriskirknielsen.com%2Fblog%2Fgroup-posts-by-year-with-nunjucks-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://chriskirknielsen.com/blog/group-posts-by-year-with-nunjucks-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Grouping posts by year with nunjucks in Eleventy</a> — <em>Christopher Kirk-Nielsen (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/eleventy-date-only-filter/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Feleventy-date-only-filter%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/eleventy-date-only-filter/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Date-only Filter</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://bennypowers.dev/posts/sort-and-date-11ty-posts-by-name/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbennypowers.dev%2Fposts%2Fsort-and-date-11ty-posts-by-name%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bennypowers.dev/posts/sort-and-date-11ty-posts-by-name/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Sorting and Dating 11ty Posts by Name</a> — <em>Benny Powers (2023)</em></li>
<li><a href="https://lea.verou.me/blog/2023/11ty-indices/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flea.verou.me%2Fblog%2F2023%2F11ty-indices%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lea.verou.me/blog/2023/11ty-indices/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty: Index ALL the things!</a> — <em>Lea Verou (2023)</em></li>
<li><a href="https://www.simoncox.com/shorts/2023-07-07-solving-a-date-display-issue-in-11ty-templates/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.simoncox.com%2Fshorts%2F2023-07-07-solving-a-date-display-issue-in-11ty-templates%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.simoncox.com/shorts/2023-07-07-solving-a-date-display-issue-in-11ty-templates/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Solving a date display issue in 11ty templates</a> — <em>Simon Cox (2023)</em></li>
<li><a href="https://moosedog.io/posts/find-file-last-modified-in-eleventy.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmoosedog.io%2Fposts%2Ffind-file-last-modified-in-eleventy.html/" width="150" height="150" alt="IndieWeb Avatar for https://moosedog.io/posts/find-file-last-modified-in-eleventy.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">File Last Modified Is Available</a> — <em>Robin Hoover (2023)</em></li>
<li><a href="https://blog.r0b.io/post/host-an-ics-calendar-feed-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.r0b.io%2Fpost%2Fhost-an-ics-calendar-feed-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://blog.r0b.io/post/host-an-ics-calendar-feed-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Host an ics calendar feed with Eleventy</a> — <em>Rob Anderson (2023)</em></li>
<li><a href="https://randomerrors.dev/posts/2023/eleventy-last-post-date-liquid/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frandomerrors.dev%2Fposts%2F2023%2Feleventy-last-post-date-liquid%2F/" width="150" height="150" alt="IndieWeb Avatar for https://randomerrors.dev/posts/2023/eleventy-last-post-date-liquid/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Last Post Date Using Liquid</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://11tywebcfun.netlify.app/recipes/easy-date-and-time-formatting/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11tywebcfun.netlify.app%2Frecipes%2Feasy-date-and-time-formatting%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11tywebcfun.netlify.app/recipes/easy-date-and-time-formatting/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Easy Date and Time Formatting with Luxon</a> — <em>Evan Sheehan (2023)</em></li>
<li><a href="https://chris.bur.gs/jekyll-to-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fchris.bur.gs%2Fjekyll-to-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://chris.bur.gs/jekyll-to-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">From Jekyll & Hugo to Eleventy</a> — <em>Chris Burgess (2023)</em></li>
<li><a href="https://simpixelated.com/custom-date-formatting-in-eleventy-js/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsimpixelated.com%2Fcustom-date-formatting-in-eleventy-js%2F/" width="150" height="150" alt="IndieWeb Avatar for https://simpixelated.com/custom-date-formatting-in-eleventy-js/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Custom date formatting in Eleventy.js</a> — <em>Jordan Kohl (2023)</em></li>
<li><a href="https://eevis.codes/blog/2023-01-14/automating-advent-calendar-with-github-actions-and-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Feevis.codes%2Fblog%2F2023-01-14%2Fautomating-advent-calendar-with-github-actions-and-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://eevis.codes/blog/2023-01-14/automating-advent-calendar-with-github-actions-and-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automating Advent Calendar with Github Actions and Eleventy</a> — <em>Eevis (2023)</em></li>
<li><a href="https://dev.to/danielmorgan/better-looking-dates-in-eleventy-jan-01-2023-jan-1st-2023-46oe"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdev.to%2Fdanielmorgan%2Fbetter-looking-dates-in-eleventy-jan-01-2023-jan-1st-2023-46oe/" width="150" height="150" alt="IndieWeb Avatar for https://dev.to/danielmorgan/better-looking-dates-in-eleventy-jan-01-2023-jan-1st-2023-46oe" class="avatar avatar-indieweb" loading="lazy" decoding="async">Better Looking Dates in Eleventy: Jan 01 2023 --> Jan 1st 2023</a> — <em>Daniel Morgan (2023)</em></li>
<li><a href="https://www.brycewray.com/posts/2022/12/drafts-timestamp-based-publishing-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.brycewray.com%2Fposts%2F2022%2F12%2Fdrafts-timestamp-based-publishing-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.brycewray.com/posts/2022/12/drafts-timestamp-based-publishing-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Drafts and timestamp-based publishing in Eleventy</a> — <em>Bryce Wray (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/11/09/quick-liquidjs--eleventy-example-all-posts"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F11%2F09%2Fquick-liquidjs--eleventy-example-all-posts/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/11/09/quick-liquidjs--eleventy-example-all-posts" class="avatar avatar-indieweb" loading="lazy" decoding="async">Quick LiquidJS + Eleventy Example - All Posts</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/06/23/related-content-by-day-of-year-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F06%2F23%2Frelated-content-by-day-of-year-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/06/23/related-content-by-day-of-year-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Related Content by Day of Year in Eleventy</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.alpower.com/blog/setting-a-timestamp-for-posts-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.alpower.com%2Fblog%2Fsetting-a-timestamp-for-posts-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.alpower.com/blog/setting-a-timestamp-for-posts-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Setting a timestamp for posts and RSS feeds in eleventy</a> — <em>Al Power (2021)</em></li>
<li><a href="https://danabyerly.com/articles/time-is-on-your-side/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanabyerly.com%2Farticles%2Ftime-is-on-your-side%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danabyerly.com/articles/time-is-on-your-side/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Time is on your side</a> — <em>Dana Byerly (2021)</em></li>
<li><a href="https://saneef.com/blog/fix-dates-on-eleventy-rss-feeds/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsaneef.com%2Fblog%2Ffix-dates-on-eleventy-rss-feeds%2F/" width="150" height="150" alt="IndieWeb Avatar for https://saneef.com/blog/fix-dates-on-eleventy-rss-feeds/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fix dates on Eleventy RSS feeds</a> — <em>Saneef H. Ansari (2021)</em></li>
<li><a href="https://www.alpower.com/blog/formatting-dates-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.alpower.com%2Fblog%2Fformatting-dates-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.alpower.com/blog/formatting-dates-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Formatting dates nicely in 11ty with Luxon</a> — <em>Al Power (2021)</em></li>
<li><a href="https://events.lunch.dev/localize-datetimes-in-eleventy-with-js/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fevents.lunch.dev%2Flocalize-datetimes-in-eleventy-with-js%2F/" width="150" height="150" alt="IndieWeb Avatar for https://events.lunch.dev/localize-datetimes-in-eleventy-with-js/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Localize datetimes in Eleventy with JS</a> — <em>Michael Chan (2021)</em></li>
<li><a href="https://saneef.com/blog/hiding-posts-with-future-dates-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsaneef.com%2Fblog%2Fhiding-posts-with-future-dates-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://saneef.com/blog/hiding-posts-with-future-dates-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hiding posts with future dates in Eleventy</a> — <em>Saneef H. Ansari (2021)</em></li>
<li><a href="https://11ty.rocks/eleventyjs/dates/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Feleventyjs%2Fdates%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/eleventyjs/dates/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty Date Shortcodes and Filters</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://events.lunch.dev/fix-dst-dates-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fevents.lunch.dev%2Ffix-dst-dates-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://events.lunch.dev/fix-dst-dates-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fix DST Dates in Eleventy</a> — <em>Michael Chan (2021)</em></li>
<li><a href="https://bnijenhuis.nl/notes/dates-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbnijenhuis.nl%2Fnotes%2Fdates-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bnijenhuis.nl/notes/dates-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Dates in Eleventy</a> — <em>Bernard Nijenhuis (2021)</em></li>
<li><a href="https://darekkay.com/blog/eleventy-group-posts-by-year/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarekkay.com%2Fblog%2Feleventy-group-posts-by-year%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darekkay.com/blog/eleventy-group-posts-by-year/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Group posts by year in Eleventy</a> — <em>Darek Kay (2021)</em></li>
<li><a href="https://jamesdoc.com/blog/2021/11ty-posts-by-year/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamesdoc.com%2Fblog%2F2021%2F11ty-posts-by-year%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamesdoc.com/blog/2021/11ty-posts-by-year/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Grouping blog posts by year in Eleventy</a> — <em>James Doc (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2020/09/30/tracking-posts-by-week-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F09%2F30%2Ftracking-posts-by-week-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/09/30/tracking-posts-by-week-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Tracking Posts by Week in Eleventy</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://mtm.dev/eleventy-date-off-by-one-day.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmtm.dev%2Feleventy-date-off-by-one-day.html/" width="150" height="150" alt="IndieWeb Avatar for https://mtm.dev/eleventy-date-off-by-one-day.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to fix Eleventy's dates being off by one day</a> — <em>Mark Thomas Miller (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/02/06/adding-a-last-edited-field-to-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F02%2F06%2Fadding-a-last-edited-field-to-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/02/06/adding-a-last-edited-field-to-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding a Last Edited Field to Eleventy</a> — <em>Raymond Camden (2020)</em></li>
</ul>
</details>
Internationalization (i18n)
2023-11-01T13:33:37Z
https://www.11ty.dev/docs/i18n/
<h1>Internationalization (I18n)</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/i18n/#how-to-organize-your-files">How to organize your files </a></li><li><a href="https://www.11ty.dev/docs/i18n/#choose-your-url-style">Choose your URL style </a><ul><li><a href="https://www.11ty.dev/docs/i18n/#distinct-urls">Distinct URLs </a></li><li><a href="https://www.11ty.dev/docs/i18n/#content-negotiation">Content Negotiation </a></li><li><a href="https://www.11ty.dev/docs/i18n/#example-netlify-redirects">Example Netlify Redirects </a></li></ul></li><li><a href="https://www.11ty.dev/docs/i18n/#related">Related </a></li><li><a href="https://www.11ty.dev/docs/i18n/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>This page is a companion to the <a href="https://www.11ty.dev/docs/plugins/i18n/">Internationalization (I18n) plugin page</a>.</strong></div></div>
<p>There are two big decisions you’ll need to make up front when working on an Eleventy project that serves localized content:</p>
<ol>
<li>File Organization</li>
<li>URL Style</li>
</ol>
<p>Note that Eleventy works with a variety of third-party JavaScript libraries for organizing and localizing strings, numbers, dates, etc. A few popular choices include:</p>
<ul>
<li><a href="https://github.com/adamduncan/eleventy-plugin-i18n"><code>eleventy-plugin-i18n</code></a></li>
<li><a href="https://github.com/lukeed/rosetta"><code>rosetta</code></a></li>
<li><a href="https://www.npmjs.com/package/i18next"><code>i18next</code></a></li>
<li><a href="https://www.npmjs.com/package/y18n"><code>y18n</code></a></li>
<li><a href="https://www.npmjs.com/package/intl-messageformat"><code>intl-messageformat</code></a></li>
<li><a href="https://lingui.js.org/tutorials/javascript.html">LinguiJS</a>.</li>
</ul>
<h2 id="how-to-organize-your-files" tabindex="-1">How to organize your files <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#how-to-organize-your-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Most folks like to create a folder for each locale they want to serve in their project. This is by-far the most <a href="https://twitter.11ty.dev/1545436046527184896">popular approach</a> for most folks (and works best with Eleventy’s <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a> and default <a href="https://www.11ty.dev/docs/permalinks/">permalink setup</a> too).</p>
<p>This usually involves a directory structure something like this:</p>
<pre><code>📁 en -> 📄 about.html
📁 es -> 📄 about.html
📁 de -> 📄 about.html
📁 ja -> 📄 about.html
📂 and so on…
</code></pre>
<p>This allows you to use Eleventy’s <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a> with <a href="https://www.11ty.dev/docs/data-template-dir/">directory data files</a> to set data for the entire language directory. For example, <code>/en/en.json</code> with <code>{"lang": "en"}</code> and <code>/es/es.json</code> with <code>{"lang": "es"}</code> will make the <code>lang</code> variable available to all templates (even deeply nested) inside of the directory.</p>
<p>Alternatively (and much less popularly) some projects like to denote the language code in each individual file name:</p>
<pre><code>📄 about.en.html
📄 about.es.html
📄 and so on…
</code></pre>
<p>The latter method is more unwieldy and not recommended (but <a href="https://www.11ty.dev/docs/permalinks/#mapping-one-url-to-multiple-files-for-internationalization">still achievable with some <code>permalink</code> wrangling</a>).</p>
<h2 id="choose-your-url-style" tabindex="-1">Choose your URL style <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#choose-your-url-style">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ol>
<li>Distinct URLs, e.g. <code>/en/about/</code> and <code>/es/about/</code></li>
<li>Content negotiation, e.g. <code>/about/</code></li>
</ol>
<p>This choice is a <a href="https://twitter.11ty.dev/1544792312949063680">bit more contentious</a>. There are benefits and drawbacks to both methods. Some folks even mix the two approaches within a single project!</p>
<h3 id="distinct-urls" tabindex="-1">Distinct URLs <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#distinct-urls">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>Pro: Every piece of content is uniquely addressable, linkable, and cacheable.</li>
<li>Pro: Easy to statically host and works with few (if-any) internal redirects.</li>
<li>Con: Internal link URLs must be normalized on shared content (navigation and footer links).
<ul>
<li>e.g. <code>/es/about/</code> should link to other <code>/es/</code> pages.</li>
<li>Use the <code>locale_url</code> filter from Eleventy’s <a href="https://www.11ty.dev/docs/plugins/i18n/">Internationalization plugin</a>.</li>
</ul>
</li>
<li>Con: When a URL mismatches with an end user’s language preference (as specified in a language chooser widget or the <code>Accept-Language</code> request header in the browser), a redirect is <em>suggested</em> (but not required!). This is a subtle but important point that when using URLs the ultimate control is left in the hands of the end user.
<ul>
<li>Use the <code>locale_links</code> filter from Eleventy’s <a href="https://www.11ty.dev/docs/plugins/i18n/">Internationalization plugin</a> to show the available relevant localized content for a specific file.</li>
</ul>
</li>
</ul>
<h3 id="content-negotiation" tabindex="-1">Content Negotiation <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#content-negotiation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>Pro: URLs don’t need to be transformed and the appropriate content is selected (via a rewrite) on the server.</li>
<li>Pro: Redirects are not necessary to respect end user preferences.</li>
<li>Con: Requires <em>some</em> server configuration to handle the <code>Accept-Language</code> header and rewrite correctly.</li>
<li>Con: To view another localized version of a piece of content, you will <em>need</em> to rely on the user’s web browser preferences (<code>Accept-Language</code> request header) or implement a language override widget. End users subsequently have less control.</li>
</ul>
<h3 id="example-netlify-redirects" tabindex="-1">Example Netlify Redirects <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#example-netlify-redirects">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<style>
#preformatted-code-menu code {
white-space: pre;
}
</style>
<div id="preformatted-code-menu">
<ul>
<li><code>/en/ /en/blog/ /es/blog/</code> <a href="https://www.11ty.dev/docs/i18n/#distinct-urls-for-all-pages"><em>Distinct URLs</em></a></li>
<li><code>/ /blog/ /es/blog/</code> <a href="https://www.11ty.dev/docs/i18n/#distinct-urls-using-implied-default-language"><em>Distinct URLs with an implied default language</em></a></li>
<li><code>/ /blog/ /blog/ </code> <a href="https://www.11ty.dev/docs/i18n/#content-negotiation-on-all-pages"><em>Content Negotiation</em></a></li>
<li><code>/ /en/blog/ /es/blog/</code> <a href="https://www.11ty.dev/docs/i18n/#content-negotiation-on-/-only"><em>Content Negotation on <code>/</code> only</em></a></li>
</ul>
</div>
<p>To implement the above methods, you can use <a href="https://docs.netlify.com/routing/redirects/">Netlify’s Redirects and Rewrites features</a> (or <a href="https://www.netlify.com/products/edge/">Netlify Edge Functions</a> for more advanced use cases).</p>
<p>In the examples below, English (<code>en</code>) is the default fallback language and Spanish (<code>es</code>) is an additionally supported language. To add more languages, repeat each entry for Spanish (<code>es</code>) and change the language code.</p>
<h4 id="content-negotiation-on-all-pages" tabindex="-1">Content Negotiation on all pages <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#content-negotiation-on-all-pages">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><em>No language codes in URLs:</em></p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
View:
<a href="https://www.11ty.dev/docs/i18n/#i18n-cnall-redirects" role="tab">_redirects</a>
<a href="https://www.11ty.dev/docs/i18n/#i18n-cnall-toml" role="tab">netlify.toml</a>
</div>
<div id="i18n-cnall-redirects" role="tabpanel">
<pre><code># Redirect any URLs with the language code in them already
/es/* /:splat 301!
/en/* /:splat 301!
# Show the language-specific content file
/* /es/:splat 200 Language=es
/* /en/:splat 200
</code></pre>
</div>
<div id="i18n-cnall-toml" role="tabpanel">
<pre class="language-toml"><code class="language-toml"><span class="token comment"># Redirect any URLs with the language code in them already</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/es/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">301</span><br> <span class="token key property">force</span> <span class="token punctuation">=</span> <span class="token boolean">true</span><br><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/en/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">301</span><br> <span class="token key property">force</span> <span class="token punctuation">=</span> <span class="token boolean">true</span><br><br><span class="token comment"># Show the language-specific content file</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/es/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">200</span><br> <span class="token key property">conditions</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span><span class="token key property">Language</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"es"</span><span class="token punctuation">]</span><span class="token punctuation">}</span><br><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/en/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">200</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="distinct-urls-for-all-pages" tabindex="-1">Distinct URLs for all pages <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#distinct-urls-for-all-pages">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><em>URLs should always have language codes in them.</em></p>
<p>These redirects are specifically for content that is missing a language code in the URL (e.g. <code>/</code> redirect to <code>/en/</code>). To avoid a redirect on the home page (recommended) use <a href="https://www.11ty.dev/docs/i18n/#content-negotiation-on-/-only">Content Negotiation on <code>/</code> only</a>.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
View:
<a href="https://www.11ty.dev/docs/i18n/#i18n-distinct-redirects" role="tab">_redirects</a>
<a href="https://www.11ty.dev/docs/i18n/#i18n-distinct-toml" role="tab">netlify.toml</a>
</div>
<div id="i18n-distinct-redirects" role="tabpanel">
<pre><code># Important: Per shadowing rules, URLs for the language-specific
# content files are served without redirects.
# Redirect for end-user’s browser preference override
/* /es/:splat 302 Language=es
# Default
/* /en/:splat 302
</code></pre>
</div>
<div id="i18n-distinct-toml" role="tabpanel">
<pre class="language-toml"><code class="language-toml"><span class="token comment"># Important: Per shadowing rules (force = false) URLs for the</span><br><span class="token comment"># language-specific content files are served without redirects.</span><br><br><span class="token comment"># Redirect for end-user’s browser preference override</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/es/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">302</span><br> <span class="token key property">conditions</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span><span class="token key property">Language</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"es"</span><span class="token punctuation">]</span><span class="token punctuation">}</span><br><br><span class="token comment"># Default</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/en/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">302</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>Make sure you read the <a href="https://docs.netlify.com/routing/redirects/rewrites-proxies/#shadowing">Netlify shadowing rules</a> to understand why <code>/es/*</code> and <code>/en/*</code> URLs are <em>not</em> redirected.</p>
<h4 id="content-negotiation-on-/-only" tabindex="-1">Content Negotiation on <code>/</code> only <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#content-negotiation-on-/-only">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><em>Every URL but the home page should have a language codes in it.</em></p>
<p>This uses content negotiation for your home page and distinct URLs for everything else (it uses the redirects from both methods above). This mixed approach has the benefit of <em>avoiding</em> a top level redirect on your home page (e.g. from <code>/</code> to <code>/en/</code>).</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
View:
<a href="https://www.11ty.dev/docs/i18n/#i18n-cn-redirects" role="tab">_redirects</a>
<a href="https://www.11ty.dev/docs/i18n/#i18n-cn-toml" role="tab">netlify.toml</a>
</div>
<div id="i18n-cn-redirects" role="tabpanel">
<pre><code>/ /es/ 200 Language=es
/ /en/ 200
/* /es/:splat 302 Language=es
/* /en/:splat 302
</code></pre>
</div>
<div id="i18n-cn-toml" role="tabpanel">
<pre class="language-toml"><code class="language-toml"><span class="token comment"># Content negotiation for home page</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/es/"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">200</span><br> <span class="token key property">conditions</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span><span class="token key property">Language</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"es"</span><span class="token punctuation">]</span><span class="token punctuation">}</span><br><br><span class="token comment"># Content negotiation for home page</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/en/"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">200</span><br><br><span class="token comment"># Redirect for end-user’s browser preference override</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/es/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">302</span><br> <span class="token key property">conditions</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span><span class="token key property">Language</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"es"</span><span class="token punctuation">]</span><span class="token punctuation">}</span><br><br><span class="token comment"># Default</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/en/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">302</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="distinct-urls-using-implied-default-language" tabindex="-1">Distinct URLs using Implied Default Language <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#distinct-urls-using-implied-default-language">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><em>Only non-default languages should include the language code in the URLs.</em></p>
<p>This approach leaves off the language code in URLs for the default language. Non-default languages include the language code in the URL (e.g. <code>/</code> for English and <code>/es/</code> for Spanish).</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
View:
<a href="https://www.11ty.dev/docs/i18n/#i18n-distinctimplied-redirects" role="tab">_redirects</a>
<a href="https://www.11ty.dev/docs/i18n/#i18n-distinctimplied-toml" role="tab">netlify.toml</a>
</div>
<div id="i18n-distinctimplied-redirects" role="tabpanel">
<pre><code># Redirect any URLs with the language code in them already
/en/* /:splat 301!
# Important: Per shadowing rules, URLs for the
# _non-default_ language-specific content files
# are served without redirects.
# Redirect for end-user’s browser preference override
/* /es/:splat 302 Language=es
/* /en/:splat 200
</code></pre>
</div>
<div id="i18n-distinctimplied-toml" role="tabpanel">
<pre class="language-toml"><code class="language-toml"><span class="token comment"># Redirect any URLs with the language code in them already</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/en/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">301</span><br> <span class="token key property">force</span> <span class="token punctuation">=</span> <span class="token boolean">true</span><br><br><span class="token comment"># Important: Per shadowing rules, URLs for the</span><br><span class="token comment"># _non-default_ language-specific content files</span><br><span class="token comment"># are served without redirects.</span><br><br><span class="token comment"># Redirect for end-user’s browser preference override</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/es/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">302</span><br> <span class="token key property">conditions</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span><span class="token key property">Language</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"es"</span><span class="token punctuation">]</span><span class="token punctuation">}</span><br><br><span class="token comment"># Default</span><br><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">redirects</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br> <span class="token key property">from</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span><br> <span class="token key property">to</span> <span class="token punctuation">=</span> <span class="token string">"/en/:splat"</span><br> <span class="token key property">status</span> <span class="token punctuation">=</span> <span class="token number">200</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="related" tabindex="-1">Related <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#related">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="sfPNgt3joWI" params="start=900" playlabel="Play: Internationalization (i18n) Best Practices Documentation (Weekly №16)" style="background-image:url('https://i.ytimg.com/vi/sfPNgt3joWI/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=sfPNgt3joWI" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Internationalization (i18n) Best Practices Documentation (Weekly №16)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=sfPNgt3joWI&t=900">Internationalization (i18n) Best Practices Documentation (Weekly №16) <code>▶15m0s</code></a></is-land></div></div>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/i18n/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Internationalization has some <em>really</em> great community resources that served as the inspiration for both this and the official <a href="https://www.11ty.dev/docs/plugins/i18n/">i18n Plugin</a>.</p>
<div class="sites-vert sites-vert--lg">
<div class="lo-grid">
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.webstoemp.com/blog/language-switcher-multilingual-jamstack-sites/" class="elv-externalexempt" title="Language switcher for multilingual Jamstack sites">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.webstoemp.com%2Fblog%2Flanguage-switcher-multilingual-jamstack-sites%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.webstoemp.com/blog/language-switcher-multilingual-jamstack-sites/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Language switcher for multilingual Jamstack sites</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.webstoemp.com/blog/language-switcher-multilingual-jamstack-sites/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.webstoemp.com%2Fblog%2Flanguage-switcher-multilingual-jamstack-sites%2F/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.webstoemp.com/blog/multilingual-sites-eleventy/" class="elv-externalexempt" title="Multilingual sites with Eleventy">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.webstoemp.com%2Fblog%2Fmultilingual-sites-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.webstoemp.com/blog/multilingual-sites-eleventy/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Multilingual sites with Eleventy</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.webstoemp.com/blog/multilingual-sites-eleventy/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.webstoemp.com%2Fblog%2Fmultilingual-sites-eleventy%2F/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.hoeser.dev/blog/2022-07-08-i18n-urls/" class="elv-externalexempt" title="Internationalization of URLs">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.hoeser.dev%2Fblog%2F2022-07-08-i18n-urls%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.hoeser.dev/blog/2022-07-08-i18n-urls/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Internationalization of URLs</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.hoeser.dev/blog/2022-07-08-i18n-urls/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.hoeser.dev%2Fblog%2F2022-07-08-i18n-urls%2F/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/" class="elv-externalexempt" title="Internationalization And Localization For Static Sites">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.smashingmagazine.com%2F2020%2F11%2Finternationalization-localization-static-sites%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Internationalization And Localization For Static Sites</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.smashingmagazine.com/2020/11/internationalization-localization-static-sites/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.smashingmagazine.com%2F2020%2F11%2Finternationalization-localization-static-sites%2F/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/adamduncan/eleventy-plugin-i18n" class="elv-externalexempt" title="eleventy-plugin-i18n">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fadamduncan%2Feleventy-plugin-i18n/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/adamduncan/eleventy-plugin-i18n" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-plugin-i18n</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/adamduncan/eleventy-plugin-i18n" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fadamduncan%2Feleventy-plugin-i18n/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.lenesaile.com/en/blog/internationalization-with-eleventy-20-and-netlify/" class="elv-externalexempt" title="Internationalization with Eleventy 2.0 and Netlify">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.lenesaile.com%2Fen%2Fblog%2Finternationalization-with-eleventy-20-and-netlify%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.lenesaile.com/en/blog/internationalization-with-eleventy-20-and-netlify/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Internationalization with Eleventy 2.0 and Netlify</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.lenesaile.com/en/blog/internationalization-with-eleventy-20-and-netlify/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.lenesaile.com%2Fen%2Fblog%2Finternationalization-with-eleventy-20-and-netlify%2F/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.npmjs.com/package/eleventy-plugin-i18n-helpers" class="elv-externalexempt" title="eleventy-plugin-i18n-helpers">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Feleventy-plugin-i18n-helpers/" width="150" height="150" alt="IndieWeb Avatar for https://www.npmjs.com/package/eleventy-plugin-i18n-helpers" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-plugin-i18n-helpers</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.npmjs.com/package/eleventy-plugin-i18n-helpers" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Feleventy-plugin-i18n-helpers/small/1:1/" width="375" height="375">
</div>
</a>
</div>
<div class="lo-c-center">
+ <a href="https://github.com/11ty/11ty-website/blob/master/src/_data/community/" class="elv-externalexempt">Add yours!</a>
</div>
</div>
</div>
Pagination
2023-11-01T13:33:37Z
https://www.11ty.dev/docs/pagination/
<h1>Pagination</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/pagination/#paging-an-array">Paging an Array </a></li><li><a href="https://www.11ty.dev/docs/pagination/#creating-navigation-links-to-your-pages">Creating Navigation Links to your Pages </a></li><li><a href="https://www.11ty.dev/docs/pagination/#paging-an-object">Paging an Object </a></li><li><a href="https://www.11ty.dev/docs/pagination/#paginate-a-global-or-local-data-file">Paginate a global or local data file </a></li><li><a href="https://www.11ty.dev/docs/pagination/#remapping-with-permalinks">Remapping with permalinks </a><ul><li><a href="https://www.11ty.dev/docs/pagination/#use-page-item-data-in-the-permalink">Use page item data in the permalink </a></li></ul></li><li><a href="https://www.11ty.dev/docs/pagination/#aliasing-to-a-different-variable">Aliasing to a different variable </a></li><li><a href="https://www.11ty.dev/docs/pagination/#paging-a-collection">Paging a Collection </a></li><li><a href="https://www.11ty.dev/docs/pagination/#generating-an-empty-results-page">Generating an Empty Results Page </a></li><li><a href="https://www.11ty.dev/docs/pagination/#modifying-the-data-set-prior-to-pagination">Modifying the Data Set prior to Pagination </a><ul><li><a href="https://www.11ty.dev/docs/pagination/#reverse-the-data">Reverse the Data </a></li><li><a href="https://www.11ty.dev/docs/pagination/#filtering-values">Filtering Values </a></li><li><a href="https://www.11ty.dev/docs/pagination/#the-before-callback">The before Callback </a></li><li><a href="https://www.11ty.dev/docs/pagination/#order-of-operations">Order of Operations </a></li></ul></li><li><a href="https://www.11ty.dev/docs/pagination/#add-all-pagination-pages-to-collections">Add All Pagination Pages to Collections </a></li><li><a href="https://www.11ty.dev/docs/pagination/#full-pagination-option-list">Full Pagination Option List </a></li><li><a href="https://www.11ty.dev/docs/pagination/#related">Related </a></li><li><a href="https://www.11ty.dev/docs/pagination/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<p>Pagination allows you to iterate over a data set and create multiple files from a single template. The input data can be in the form of an array or object defined in your frontmatter or in <a href="https://www.11ty.dev/docs/data-global/">global data</a>, or you can paginate a collection to make an easily digestible list of your posts.</p>
<h2 id="paging-an-array" tabindex="-1">Paging an Array <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#paging-an-array">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>To iterate over a data set and create pages for individual chunks of data, use pagination. Enable in your template’s front matter by adding the <code>pagination</code> key.</p>
<p>Consider the following template, which will result in two pages being created, each of which will display two items from <code>testdata</code>:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/#paged-array-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/#paged-array-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/#paged-array-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/#paged-array-hbs" role="tab">Handlebars</a>
</div>
<div id="paged-array-liquid" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>paged.liquid</div><pre class="language-liquid"><code class="language-liquid">---<br>pagination:<br> data: testdata<br> size: 2<br>testdata:<br> - item1<br> - item2<br> - item3<br> - item4<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> item <span class="token keyword">in</span> pagination<span class="token punctuation">.</span>items <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> item <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
<p>If the above file were named <code>paged.liquid</code>, it would create two pages in your output folder: <code>_site/paged/index.html</code> and <code>_site/paged/1/index.html</code>. These output paths are configurable with <code>permalink</code> (see below).</p>
</div>
<div id="paged-array-njk" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>paged.njk</div><pre class="language-jinja2"><code class="language-jinja2">---<br>pagination:<br> data: testdata<br> size: 2<br>testdata:<br> - item1<br> - item2<br> - item3<br> - item4<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">item</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">items</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">item</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
<p>If the above file were named <code>paged.njk</code>, it would create two pages in your output folder: <code>_site/paged/index.html</code> and <code>_site/paged/1/index.html</code>. These output paths are configurable with <code>permalink</code> (see below).</p>
</div>
<div id="paged-array-js" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>paged.11ty.js</div><pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">pagination</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token string">"testdata"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">2</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">testdata</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"item1"</span><span class="token punctuation">,</span><br> <span class="token string">"item2"</span><span class="token punctuation">,</span><br> <span class="token string">"item3"</span><span class="token punctuation">,</span><br> <span class="token string">"item4"</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ol><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><br> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ol></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>If the above file were named <code>paged.11ty.js</code>, it would create two pages in your output folder: <code>_site/paged/index.html</code> and <code>_site/paged/1/index.html</code>. These output paths are configurable with <code>permalink</code> (see below).</p>
</div>
<div id="paged-array-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>We enable pagination and then give it a dataset with the <code>data</code> key. We control the number of items in each chunk with <code>size</code>. The pagination data variable will be populated with what you need to create each template. Here’s what’s in <code>pagination</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Array of current page’s chunk of data</span><br> <span class="token literal-property property">pageNumber</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// current page number, 0 indexed</span><br><br> <span class="token comment">// Cool URLs</span><br> <span class="token literal-property property">hrefs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Array of all page hrefs (in order)</span><br> <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">next</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span> <span class="token comment">// put inside <a href="">Next Page</a></span><br> <span class="token literal-property property">previous</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span> <span class="token comment">// put inside <a href="">Previous Page</a></span><br> <span class="token literal-property property">first</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">last</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token literal-property property">pages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Array of all chunks of paginated data (in order)</span><br> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">next</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Next page’s chunk of data</span><br> <span class="token literal-property property">previous</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Previous page’s chunk of data</span><br> <span class="token literal-property property">first</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">last</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<details>
<summary>Expand to see all of the extra stuff in the <code>pagination</code> object that you probably don’t need any more but it’s still in there for backwards compatibility.</summary>
<p>In addition to the <code>pagination</code> object entries documented above, it also has:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span> <span class="token comment">// the original string key to the dataset</span><br> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// page chunk sizes</span><br><br> <span class="token comment">// Cool URLs</span><br> <span class="token comment">// Use pagination.href.next, pagination.href.previous, et al instead.</span><br> <span class="token literal-property property">nextPageHref</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span> <span class="token comment">// put inside <a href="">Next Page</a></span><br> <span class="token literal-property property">previousPageHref</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span> <span class="token comment">// put inside <a href="">Previous Page</a></span><br> <span class="token literal-property property">firstPageHref</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">lastPageHref</span><span class="token operator">:</span> <span class="token string">"…"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Uncool URLs</span><br> <span class="token comment">// These include index.html file names, use `hrefs` instead</span><br> <span class="token literal-property property">links</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Array of all page links (in order)</span><br><br> <span class="token comment">// Deprecated things:</span><br> <span class="token comment">// nextPageLink</span><br> <span class="token comment">// previousPageLink</span><br> <span class="token comment">// firstPageLink</span><br> <span class="token comment">// lastPageLink</span><br> <span class="token comment">// pageLinks (alias to `links`)</span><br><span class="token punctuation">}</span></code></pre>
</details>
<h2 id="creating-navigation-links-to-your-pages" tabindex="-1">Creating Navigation Links to your Pages <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#creating-navigation-links-to-your-pages">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Learn how to create a list of links to every paginated page on a pagination template with a full <a href="https://www.11ty.dev/docs/pagination/nav/">Pagination Navigation</a> tutorial.</p>
<h2 id="paging-an-object" tabindex="-1">Paging an Object <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#paging-an-object">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>All of the examples thus far have paged Array data. Eleventy does allow paging objects too. Objects are resolved to pagination arrays using either the <code>Object.keys</code> or <code>Object.values</code> JavaScript functions. Consider the following templates:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/#pagedobj-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedobj-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedobj-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedobj-hbs" role="tab">Handlebars</a>
</div>
<div id="pagedobj-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>pagination:<br> data: testdata<br> size: 1<br>testdata:<br> itemkey1: itemvalue1<br> itemkey2: itemvalue2<br> itemkey3: itemvalue3<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> item <span class="token keyword">in</span> pagination<span class="token punctuation">.</span>items <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> item <span class="token delimiter punctuation">}}</span></span>=<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span>testdata<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="pagedobj-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>pagination:<br> data: testdata<br> size: 1<br>testdata:<br> itemkey1: itemvalue1<br> itemkey2: itemvalue2<br> itemkey3: itemvalue3<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">item</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">items</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">item</span> <span class="token delimiter punctuation">}}</span></span>=<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span><span class="token variable">testdata</span><span class="token punctuation">[</span><span class="token variable">item</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="pagedobj-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagedobj-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>In this example, we would get 3 pages that each print a key/value pair from <code>testdata</code>. The paged items hold the object keys:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token punctuation">[</span> <span class="token string">"itemkey1"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// pagination.items[0] holds the object key</span><br> <span class="token punctuation">[</span> <span class="token string">"itemkey2"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">[</span> <span class="token string">"itemkey3"</span> <span class="token punctuation">]</span><br><span class="token punctuation">]</span></code></pre>
<p>You can use these keys to get access to the original value: <code>testdata[ pagination.items[0] ]</code>.</p>
<p>If you’d like the pagination to iterate over the values instead of the keys (using <code>Object.values</code> instead of <code>Object.keys</code>), add <code>resolve: values</code> to your <code>pagination</code> front matter:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">resolve</span><span class="token punctuation">:</span> values<br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token key atrule">itemkey1</span><span class="token punctuation">:</span> itemvalue1<br> <span class="token key atrule">itemkey2</span><span class="token punctuation">:</span> itemvalue2<br> <span class="token key atrule">itemkey3</span><span class="token punctuation">:</span> itemvalue3</span><br><span class="token punctuation">---</span></span></code></pre>
<p>This resolves to:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token punctuation">[</span> <span class="token string">"itemvalue1"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// pagination.items[0] holds the object value</span><br> <span class="token punctuation">[</span> <span class="token string">"itemvalue2"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">[</span> <span class="token string">"itemvalue3"</span> <span class="token punctuation">]</span><br><span class="token punctuation">]</span></code></pre>
<h2 id="paginate-a-global-or-local-data-file" tabindex="-1">Paginate a global or local data file <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#paginate-a-global-or-local-data-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><a href="https://www.11ty.dev/docs/data/">Read more about Template Data Files</a>. The only change here is that you point your <code>data</code> pagination key to the global or local data instead of data in the front matter. For example, consider the following <code>globalDataSet.json</code> file in your global data directory.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"myData"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"item1"</span><span class="token punctuation">,</span><br> <span class="token string">"item2"</span><span class="token punctuation">,</span><br> <span class="token string">"item3"</span><span class="token punctuation">,</span><br> <span class="token string">"item4"</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span></code></pre>
<p>Your front matter would look like this:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/#pagedatafile-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedatafile-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedatafile-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedatafile-hbs" role="tab">Handlebars</a>
</div>
<div id="pagedatafile-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>pagination:<br> data: globalDataSet.myData<br> size: 1<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> item <span class="token keyword">in</span> pagination<span class="token punctuation">.</span>items <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> item <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="pagedatafile-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>pagination:<br> data: globalDataSet.myData<br> size: 1<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">item</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">items</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">item</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="pagedatafile-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagedatafile-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="remapping-with-permalinks" tabindex="-1">Remapping with permalinks <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#remapping-with-permalinks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Normally, front matter does not support template syntax, but <code>permalink</code> does, enabling parametric URLs via pagination variables. Here’s an example of a permalink using the pagination page number:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter using Liquid, Nunjucks</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"different/page-{{ pagination.pageNumber }}/index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Writes to <code>_site/different/page-0/index.html</code>, <code>_site/different/page-1/index.html</code>, et cetera.</p>
<p>That means Nunjucks will also let you start your page numbers with 1 instead of 0, by just adding 1 here:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter using Nunjucks</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"different/page-{{ pagination.pageNumber + 1 }}/index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Writes to <code>_site/different/page-1/index.html</code>, <code>_site/different/page-2/index.html</code>, et cetera.</p>
<p>You can even use template logic here too:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"different/{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Writes to <code>_site/different/index.html</code>, <code>_site/different/page-2/index.html</code>, et cetera.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that the above example works in Nunjucks but <code>{{ pagination.pageNumber + 1 }}</code> is not supported in Liquid. Use <code>{{ pagination.pageNumber | plus: 1 }}</code> instead.</div></div>
<h3 id="use-page-item-data-in-the-permalink" tabindex="-1">Use page item data in the permalink <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#use-page-item-data-in-the-permalink">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can do more advanced things like this:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter using Liquid, Nunjucks</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> My Item<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"different/{{ pagination.items[0] | slugify }}/index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Using a universal <code>slug</code> filter (transforms <code>My Item</code> to <code>my-item</code>), this outputs: <code>_site/different/my-item/index.html</code>.</p>
<h2 id="aliasing-to-a-different-variable" tabindex="-1">Aliasing to a different variable <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#aliasing-to-a-different-variable">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Ok, so <code>pagination.items[0]</code> is ugly. We provide an option to alias this to something different.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/#pagedalias-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedalias-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedalias-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedalias-hbs" role="tab">Handlebars</a>
</div>
<div id="pagedalias-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>pagination:<br> data: testdata<br> size: 1<br> alias: wonder<br>testdata:<br> - Item1<br> - Item2<br>permalink: "different/<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> wonder <span class="token operator">|</span> <span class="token function filter">slugify</span> <span class="token delimiter punctuation">}}</span></span>/index.html"<br>---<br>You can use the alias in your content too <span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> wonder <span class="token delimiter punctuation">}}</span></span>.</code></pre>
</div>
<div id="pagedalias-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>pagination:<br> data: testdata<br> size: 1<br> alias: wonder<br>testdata:<br> - Item1<br> - Item2<br>permalink: "different/<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">wonder</span> <span class="token operator">|</span> <span class="token variable">slugify</span> <span class="token delimiter punctuation">}}</span></span>/index.html"<br>---<br>You can use the alias in your content too <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">wonder</span> <span class="token delimiter punctuation">}}</span></span>.</code></pre>
</div>
<div id="pagedalias-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagedalias-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>This writes to <code>_site/different/item1/index.html</code> and <code>_site/different/item2/index.html</code>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that <code>page</code> is a reserved word so you cannot use <code>alias: page</code>. Read about Eleventy’s reserved data names in <a href="https://www.11ty.dev/docs/data-eleventy-supplied">Eleventy Supplied Data</a>.</div></div>
<p>If your chunk <code>size</code> is greater than 1, the alias will be an array instead of a single value.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/#pagedchunk-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedchunk-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedchunk-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedchunk-hbs" role="tab">Handlebars</a>
</div>
<div id="pagedchunk-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>pagination:<br> data: testdata<br> size: 2<br> alias: wonder<br>testdata:<br> - Item1<br> - Item2<br> - Item3<br> - Item4<br>permalink: "different/<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> wonder<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token function filter">slugify</span> <span class="token delimiter punctuation">}}</span></span>/index.html"<br>---<br>You can use the alias in your content too <span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> wonder<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span>.</code></pre>
</div>
<div id="pagedchunk-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>pagination:<br> data: testdata<br> size: 2<br> alias: wonder<br>testdata:<br> - Item1<br> - Item2<br> - Item3<br> - Item4<br>permalink: "different/<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">wonder</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token variable">slugify</span> <span class="token delimiter punctuation">}}</span></span>/index.html"<br>---<br>You can use the alias in your content too <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">wonder</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span>.</code></pre>
</div>
<div id="pagedchunk-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagedchunk-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>This writes to <code>_site/different/item1/index.html</code> and <code>_site/different/item3/index.html</code>.</p>
<h2 id="paging-a-collection" tabindex="-1">Paging a Collection <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#paging-a-collection">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>If you’d like to make a paginated list of all of your blog posts (any content with the tag <code>post</code> on it), use something like the following template to iterate over a specific collection:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/#pagedcollection-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedcollection-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedcollection-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/#pagedcollection-hbs" role="tab">Handlebars</a>
</div>
<div id="pagedcollection-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>title: My Posts<br>pagination:<br> data: collections.post<br> size: 6<br> alias: posts<br>---<br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> posts <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>url <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="pagedcollection-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>title: My Posts<br>pagination:<br> data: collections.post<br> size: 6<br> alias: posts<br>---<br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">posts</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="pagedcollection-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagedcollection-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>The above generates a list of links but you could do a lot more. See what’s available in the <a href="https://www.11ty.dev/docs/collections/#collection-item-data-structure">Collection documentation</a> (specifically <code>templateContent</code>). If you’d like to use this to automatically generate Tag pages for your content, please read <a href="https://www.11ty.dev/docs/quicktips/tag-pages/">Quick Tip #004—Create Tag Pages for your Blog</a>.</p>
<h2 id="generating-an-empty-results-page" tabindex="-1">Generating an Empty Results Page <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#generating-an-empty-results-page">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.10">Added in v2.0.0</span></p>
<p>By default, if the specified data set is empty, Eleventy will not render any pages. Use <code>generatePageOnEmptyData: true</code> to generate one pagination output with an empty chunk <code>[]</code> of items.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid, Nunjucks</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Available Products<br><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> collections.available<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">6</span><br> <span class="token key atrule">generatePageOnEmptyData</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></span><br><span class="token punctuation">---</span></span></code></pre>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="oCTAZumAGNc" params="start=207" playlabel="Play: Empty-results Pagination (Weekly №11)" style="background-image:url('https://i.ytimg.com/vi/oCTAZumAGNc/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=oCTAZumAGNc" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Empty-results Pagination (Weekly №11)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=oCTAZumAGNc&t=207">Empty-results Pagination (Weekly №11) <code>▶3m27s</code></a></is-land></div></div>
<h2 id="modifying-the-data-set-prior-to-pagination" tabindex="-1">Modifying the Data Set prior to Pagination <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#modifying-the-data-set-prior-to-pagination">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="reverse-the-data" tabindex="-1">Reverse the Data <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#reverse-the-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use <code>reverse: true</code>.</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">2</span><br> <span class="token key atrule">reverse</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> item1<br> <span class="token punctuation">-</span> item2<br> <span class="token punctuation">-</span> item3<br> <span class="token punctuation">-</span> item4</span><br><span class="token punctuation">---</span></span></code></pre>
<p>Paginates to:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token punctuation">[</span><span class="token string">"item4"</span><span class="token punctuation">,</span> <span class="token string">"item3"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">[</span><span class="token string">"item2"</span><span class="token punctuation">,</span> <span class="token string">"item1"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><span class="token punctuation">]</span></code></pre>
<p><em>(More discussion at <a href="https://github.com/11ty/eleventy/issues/194">Issue #194</a>)</em></p>
<p>As an aside, this could also be achieved in a more verbose way using the <a href="https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting">Collection API</a>. This could also be done using the new <code>before</code> callback .</p>
<h3 id="filtering-values" tabindex="-1">Filtering Values <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#filtering-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use the <code>filter</code> pagination property to remove values from paginated data.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">filter</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> item3<br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token key atrule">item1</span><span class="token punctuation">:</span> itemvalue1<br> <span class="token key atrule">item2</span><span class="token punctuation">:</span> itemvalue2<br> <span class="token key atrule">item3</span><span class="token punctuation">:</span> itemvalue3</span><br><span class="token punctuation">---</span></span></code></pre>
<p>Paginates to:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token punctuation">[</span> <span class="token string">"item1"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">[</span> <span class="token string">"item2"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span><br><span class="token punctuation">]</span></code></pre>
<p>This will work the same with paginated arrays or with <code>resolve: values</code> for paginated objects.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">resolve</span><span class="token punctuation">:</span> values<br> <span class="token key atrule">filter</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> itemvalue3<br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token key atrule">item1</span><span class="token punctuation">:</span> itemvalue1<br> <span class="token key atrule">item2</span><span class="token punctuation">:</span> itemvalue2<br> <span class="token key atrule">item3</span><span class="token punctuation">:</span> itemvalue3</span><br><span class="token punctuation">---</span></span></code></pre>
<p>Paginates to:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript Object</div>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token punctuation">[</span> <span class="token string">"itemvalue1"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">[</span> <span class="token string">"itemvalue2"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span><br><span class="token punctuation">]</span></code></pre>
<h3 id="the-before-callback" tabindex="-1">The <code>before</code> Callback <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#the-before-callback">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The most powerful tool to change the data. Use this callback to modify, filter, or otherwise change the pagination data however you see fit <em>before</em> pagination occurs.</p>
<pre class="language-js"><code class="language-js"><span class="token operator">--</span><span class="token operator">-</span>js<br><span class="token punctuation">{</span><br> <span class="token literal-property property">pagination</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token string">"testdata"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span><br> <span class="token function-variable function">before</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">paginationData<span class="token punctuation">,</span> fullData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// `fullData` is new in v1.0.1 and contains the full Data Cascade thus far</span><br><br> <span class="token keyword">return</span> paginationData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">entry</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>entry<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> with a suffix</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">testdata</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"item1"</span><span class="token punctuation">,</span><br> <span class="token string">"item2"</span><span class="token punctuation">,</span><br> <span class="token string">"item3"</span><span class="token punctuation">,</span><br> <span class="token string">"item4"</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span><br><span class="token operator">--</span><span class="token operator">-</span><br><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> the rest <span class="token keyword">of</span> the template <span class="token operator">--</span><span class="token operator">></span></code></pre>
<p>The above will iterate over a data set containing: <code>["item1 with a suffix", "item2 with a suffix", "item3 with a suffix", "item4 with a suffix"]</code>.</p>
<p>You can do anything in this <code>before</code> callback. Maybe a custom <code>.sort()</code>, <code>.filter()</code>, <code>.map()</code> to remap the entries, <code>.slice()</code> to paginate only a subset of the data, etc!</p>
<h4 id="use-javascript-template-functions-here" tabindex="-1">Use JavaScript Template Functions here <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#use-javascript-template-functions-here">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.16">Added in v2.0.0</span><a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript Template Functions</a> (which are also populated by universal filters and shortcodes) are available in the <code>before</code> callback.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// …</span><br><span class="token function-variable function">before</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> slug <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">slugify</span><span class="token punctuation">(</span><span class="token string">"My title."</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// use Universal filters or shortcodes too…</span><br><span class="token punctuation">}</span><span class="token punctuation">,</span><br><span class="token comment">// …</span></code></pre>
<h3 id="order-of-operations" tabindex="-1">Order of Operations <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#order-of-operations">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you use more than one of these data set modification features, here’s the order in which they operate:</p>
<ul>
<li>The <code>before</code> callback</li>
<li><code>reverse: true</code></li>
<li><code>filter</code> entries</li>
</ul>
<h2 id="add-all-pagination-pages-to-collections" tabindex="-1">Add All Pagination Pages to Collections <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#add-all-pagination-pages-to-collections">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>By default, any tags listed in a paginated template will only add the very first page to the appropriate collection.</p>
<p>Consider the following pagination template:</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-page.md</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> myCollection<br><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">2</span><br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> item1<br> <span class="token punctuation">-</span> item2<br> <span class="token punctuation">-</span> item3<br> <span class="token punctuation">-</span> item4<br><span class="token punctuation">---</span></code></pre>
<p>This means that <code>collections.myCollection</code> will have only the first page added to the collection array (<code>_site/my-page/index.html</code>). However, if you’d like to add all the pagination pages to the collections, use <code>addAllPagesToCollections: true</code> to the pagination front matter options like so:</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-page.md</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> myCollection<br><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> testdata<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">2</span><br> <span class="token key atrule">addAllPagesToCollections</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><br><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> item1<br> <span class="token punctuation">-</span> item2<br> <span class="token punctuation">-</span> item3<br> <span class="token punctuation">-</span> item4<br><span class="token punctuation">---</span></code></pre>
<p>Now <code>collections.myCollection</code> will have both output pages in the collection array (<code>_site/my-page/index.html</code> and <code>_site/my-page/1/index.html</code>).</p>
<h2 id="full-pagination-option-list" tabindex="-1">Full Pagination Option List <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#full-pagination-option-list">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><code>data</code> (String) <a href="https://lodash.com/docs/4.17.15#get">Lodash.get path</a> to point to the target data set.</li>
<li><code>size</code> (Number, required)</li>
<li><code>alias</code> (String) <a href="https://lodash.com/docs/4.17.15#set">Lodash.set path</a> to point to the property to set.</li>
<li><code>generatePageOnEmptyData</code> (Boolean) if target data set is empty, render first page with empty chunk <code>[]</code>.</li>
<li><code>resolve: values</code></li>
<li><code>filter</code> (Array)</li>
<li><code>reverse: true</code> (Boolean)</li>
<li><code>addAllPagesToCollections: true</code> (Boolean)</li>
</ul>
<h2 id="related" tabindex="-1">Related <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#related">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="kUC87Zr0dKg" params="start=344" playlabel="Play: Eleventy Build went from 54s to 17s—Pagination Memory/Performance Wins 🏆 (Weekly №10)" style="background-image:url('https://i.ytimg.com/vi/kUC87Zr0dKg/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=kUC87Zr0dKg" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Eleventy Build went from 54s to 17s—Pagination Memory/Performance Wins 🏆 (Weekly №10)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=kUC87Zr0dKg&t=344">Eleventy Build went from 54s to 17s—Pagination Memory/Performance Wins 🏆 (Weekly №10) <code>▶5m44s</code></a></is-land></div></div>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/pagination/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>×36 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://piccalil.li/blog/low-tech-eleventy-categories/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpiccalil.li%2Fblog%2Flow-tech-eleventy-categories%2F/" width="150" height="150" alt="IndieWeb Avatar for https://piccalil.li/blog/low-tech-eleventy-categories/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Low-tech Eleventy Categories</a> — <em>Andy Bell (2024)</em></li>
<li><a href="https://ttntm.me/blog/restoring-tags/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fttntm.me%2Fblog%2Frestoring-tags%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ttntm.me/blog/restoring-tags/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Update: Tags Are Back</a> — <em>Tom Doe (2024)</em></li>
<li><a href="https://flamedfury.com/posts/a-simple-guide-to-redirects-on-neocities-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fflamedfury.com%2Fposts%2Fa-simple-guide-to-redirects-on-neocities-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://flamedfury.com/posts/a-simple-guide-to-redirects-on-neocities-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A Simple Guide to Redirects on Neocities with Eleventy</a> — <em>fLaMEd (2024)</em></li>
<li><a href="https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-3/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpublishing-project.rivendellweb.net%2Fmigrating-from-wordpress-to-eleventy-part-3%2F/" width="150" height="150" alt="IndieWeb Avatar for https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-3/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating from WordPress to Eleventy (part 3)</a> — <em>Carlos Araya (2023)</em></li>
<li><a href="https://localghost.dev/blog/building-post-types-and-category-rss-feeds-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flocalghost.dev%2Fblog%2Fbuilding-post-types-and-category-rss-feeds-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://localghost.dev/blog/building-post-types-and-category-rss-feeds-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building post types and category RSS feeds in Eleventy</a> — <em>Sophie Koonin (2023)</em></li>
</ul>
<details>
<summary>Expand to see 31 more resources.</summary>
<ul class="list-bare">
<li><a href="https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-2/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpublishing-project.rivendellweb.net%2Fmigrating-from-wordpress-to-eleventy-part-2%2F/" width="150" height="150" alt="IndieWeb Avatar for https://publishing-project.rivendellweb.net/migrating-from-wordpress-to-eleventy-part-2/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating from WordPress to Eleventy (part 2)</a> — <em>Carlos Araya (2023)</em></li>
<li><a href="https://www.mikeaparicio.com/posts/2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikeaparicio.com%2Fposts%2F2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikeaparicio.com/posts/2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Wordpress as a headless CMS for Eleventy</a> — <em>Mike Aparicio (2023)</em></li>
<li><a href="https://www.bobmonsour.com/posts/pagination-in-a-javascript-template-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Fpagination-in-a-javascript-template-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/pagination-in-a-javascript-template-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Pagination in a Javacsript template with Eleventy</a> — <em>Bob Monsour (2023)</em></li>
<li><a href="https://www.lenesaile.com/en/blog/eleventy-excellent-demo-branches/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.lenesaile.com%2Fen%2Fblog%2Feleventy-excellent-demo-branches%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.lenesaile.com/en/blog/eleventy-excellent-demo-branches/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Excellent demo branches</a> — <em>Lene Saile (2023)</em></li>
<li><a href="https://ginger.wtf/posts/what-i-learned-making-top-level-dev/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fginger.wtf%2Fposts%2Fwhat-i-learned-making-top-level-dev%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ginger.wtf/posts/what-i-learned-making-top-level-dev/" class="avatar avatar-indieweb" loading="lazy" decoding="async">What I learned making top-level.dev</a> — <em>Ginger (2023)</em></li>
<li><a href="https://micah.torcellini.org/2023/09/23/author-page-manipulate-collections/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmicah.torcellini.org%2F2023%2F09%2F23%2Fauthor-page-manipulate-collections%2F/" width="150" height="150" alt="IndieWeb Avatar for https://micah.torcellini.org/2023/09/23/author-page-manipulate-collections/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Making Author Pages for an Academic Journal in Eleventy, or, How to Manipulate Collection Data in Eleventy</a> — <em>Micah Torcellini (2023)</em></li>
<li><a href="https://lea.verou.me/blog/2023/11ty-indices/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flea.verou.me%2Fblog%2F2023%2F11ty-indices%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lea.verou.me/blog/2023/11ty-indices/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty: Index ALL the things!</a> — <em>Lea Verou (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/fixed-category-page-generation/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Ffixed-category-page-generation%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/fixed-category-page-generation/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fixed Category Page Generation</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/generating-eleventy-category-pages-inside-eleventy-build/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Fgenerating-eleventy-category-pages-inside-eleventy-build%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/generating-eleventy-category-pages-inside-eleventy-build/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generating Eleventy Category Pages Inside Eleventy Build</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/eleventy-paginated-category-pages/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Feleventy-paginated-category-pages%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/eleventy-paginated-category-pages/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Paginated Category Pages</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://coryd.dev/posts/2023/lazy-select-based-pagination-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcoryd.dev%2Fposts%2F2023%2Flazy-select-based-pagination-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://coryd.dev/posts/2023/lazy-select-based-pagination-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Lazy select-based pagination in Eleventy</a> — <em>Cory Dransfeldt (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=DC28C0sGG4w"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DDC28C0sGG4w/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=DC28C0sGG4w" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating 11ty Dynamic Categories plugin (with 2-level pagination)</a> — <em>Bryan Robinson (2022)</em></li>
<li><a href="https://photogabble.co.uk/tutorials/using-puppeteer-with-11ty-to-automate-generating-social-share-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fphotogabble.co.uk%2Ftutorials%2Fusing-puppeteer-with-11ty-to-automate-generating-social-share-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://photogabble.co.uk/tutorials/using-puppeteer-with-11ty-to-automate-generating-social-share-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Puppeteer with 11ty to automate generating social share images</a> — <em>Simon Dann (2022)</em></li>
<li><a href="https://desmondrivet.com/2022/03/23/eleventy-pagination"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdesmondrivet.com%2F2022%2F03%2F23%2Feleventy-pagination/" width="150" height="150" alt="IndieWeb Avatar for https://desmondrivet.com/2022/03/23/eleventy-pagination" class="avatar avatar-indieweb" loading="lazy" decoding="async">Taming Eleventy Tags: Or How I Learned To Tolerate Double Pagination</a> — <em>Desmond Rivet (2022)</em></li>
<li><a href="https://boehs.org/node/11ty-aliases"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fboehs.org%2Fnode%2F11ty-aliases/" width="150" height="150" alt="IndieWeb Avatar for https://boehs.org/node/11ty-aliases" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty aliases the right way</a> — <em>Evan Boehs (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/02/11/adding-qr-codes-to-your-jamstack-site"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F02%2F11%2Fadding-qr-codes-to-your-jamstack-site/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/02/11/adding-qr-codes-to-your-jamstack-site" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding QR Codes to Your Jamstack Site</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://www.thepolyglotdeveloper.com/2022/01/add-pagination-eleventy-static-generated-website-minutes/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.thepolyglotdeveloper.com%2F2022%2F01%2Fadd-pagination-eleventy-static-generated-website-minutes%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.thepolyglotdeveloper.com/2022/01/add-pagination-eleventy-static-generated-website-minutes/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Add Pagination to Your Eleventy Static Generated Website in Minutes</a> — <em>Nic Raboy (2022)</em></li>
<li><a href="https://shivjm.blog/when-to-use-pagination-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fshivjm.blog%2Fwhen-to-use-pagination-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://shivjm.blog/when-to-use-pagination-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">When to Use Pagination in Eleventy</a> — <em>Shiv J.M. (2021)</em></li>
<li><a href="https://www.crossingtheruby.com/2021/05/17/sanity-with-11ty-paginating-data.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.crossingtheruby.com%2F2021%2F05%2F17%2Fsanity-with-11ty-paginating-data.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.crossingtheruby.com/2021/05/17/sanity-with-11ty-paginating-data.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Sanity with 11ty: Paginating Data</a> — <em>crossingtheruby (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/04/15/building-a-database-driven-eleventy-site"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F04%2F15%2Fbuilding-a-database-driven-eleventy-site/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/04/15/building-a-database-driven-eleventy-site" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a Database Driven Eleventy Site</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/03/16/using-pdfs-with-the-jamstack-now-with-thumbnails"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F03%2F16%2Fusing-pdfs-with-the-jamstack-now-with-thumbnails/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/03/16/using-pdfs-with-the-jamstack-now-with-thumbnails" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using PDFs with the Jamstack - Now with Thumbnails</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://www.brianperry.dev/til/2021/adding-simple-pagination-to-an-11ty-collection/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.brianperry.dev%2Ftil%2F2021%2Fadding-simple-pagination-to-an-11ty-collection%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.brianperry.dev/til/2021/adding-simple-pagination-to-an-11ty-collection/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding Simple Pagination to an 11ty Collection</a> — <em>Brian Perry (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2021/02/25/using-pdfs-with-the-jamstack"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2021%2F02%2F25%2Fusing-pdfs-with-the-jamstack/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2021/02/25/using-pdfs-with-the-jamstack" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using PDFs with the Jamstack</a> — <em>Raymond Camden (2021)</em></li>
<li><a href="https://jamesdoc.com/blog/2021/11ty-posts-by-year/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamesdoc.com%2Fblog%2F2021%2F11ty-posts-by-year%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamesdoc.com/blog/2021/11ty-posts-by-year/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Grouping blog posts by year in Eleventy</a> — <em>James Doc (2021)</em></li>
<li><a href="https://pheonic.com/blog/2021/eleventy:-paging-filtered-collections/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpheonic.com%2Fblog%2F2021%2Feleventy%3A-paging-filtered-collections%2F/" width="150" height="150" alt="IndieWeb Avatar for https://pheonic.com/blog/2021/eleventy:-paging-filtered-collections/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy: Paging Filtered Collections</a> — <em>Pheonic (2021)</em></li>
<li><a href="https://www.raymondcamden.com/2020/09/15/hooking-up-faunadb-to-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F09%2F15%2Fhooking-up-faunadb-to-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/09/15/hooking-up-faunadb-to-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hooking Up FaunaDB to Eleventy</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://multiline.co/mment/2020/09/eleventy-clock/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmultiline.co%2Fmment%2F2020%2F09%2Feleventy-clock%2F/" width="150" height="150" alt="IndieWeb Avatar for https://multiline.co/mment/2020/09/eleventy-clock/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Clock</a> — <em>Ashur Cabrera (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/24/supporting-multiple-authors-in-an-eleventy-blog"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F24%2Fsupporting-multiple-authors-in-an-eleventy-blog/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/24/supporting-multiple-authors-in-an-eleventy-blog" class="avatar avatar-indieweb" loading="lazy" decoding="async">Supporting Multiple Authors in an Eleventy Blog</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/06/migrating-from-node-and-express-to-the-jamstack-part-1"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F06%2Fmigrating-from-node-and-express-to-the-jamstack-part-1/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/06/migrating-from-node-and-express-to-the-jamstack-part-1" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating from Node and Express to the Jamstack - Part 1</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://dev.to/gabbersepp/add-pagination-for-dynamic-data-in-eleventy-5fk9"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdev.to%2Fgabbersepp%2Fadd-pagination-for-dynamic-data-in-eleventy-5fk9/" width="150" height="150" alt="IndieWeb Avatar for https://dev.to/gabbersepp/add-pagination-for-dynamic-data-in-eleventy-5fk9" class="avatar avatar-indieweb" loading="lazy" decoding="async">Add pagination for dynamic data in Eleventy</a> — <em>Josef Biehler (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2019/10/12/why-im-digging-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2019%2F10%2F12%2Fwhy-im-digging-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2019/10/12/why-im-digging-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Why I'm Digging Eleventy</a> — <em>Raymond Camden (2019)</em></li>
</ul>
</details>
Using a CMS
2023-11-01T13:26:14Z
https://www.11ty.dev/docs/cms/
<h1>Using a CMS</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/cms/#types-of-headless">Types of Headless </a></li><li><a href="https://www.11ty.dev/docs/cms/#headless-cms-providers">Headless CMS Providers </a></li><li><a href="https://www.11ty.dev/docs/cms/#related">Related </a><ul><li><a href="https://www.11ty.dev/docs/cms/#from-the-community">From the Community </a></li></ul></li></ul></div><p></p>
</details>
<p><em>Content Management Systems</em> (CMS) add a web-based interface to your site, allowing both technical and non-technical folks the ability to easily update the web site on-the-go.</p>
<p>Eleventy (like most site generators) is not tightly coupled to any specific CMS and offers the flexibility to work with a wide variety of available industry and community options! Content Management Systems decoupled in this way are known as <em>Headless</em>.</p>
<p>Using a Headless CMS offers a variety of benefits that will be immediately recognizable to developers familiar with more tightly-coupled/monolithic options, where the front and back-end are co-dependent on each other.</p>
<p>Primarily, using Headless allows developers more control over the front-end. This alleviates pressure on front-end performance and accessibility issues common to monolithic options. It’s worth noting that traditionally tightly-coupled solutions like Drupal, Joomla, or WordPress are also starting to offer Headless options too.</p>
<h2 id="types-of-headless" tabindex="-1">Types of Headless <a class="direct-link" href="https://www.11ty.dev/docs/cms/#types-of-headless">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Digging deeper, there are two main types of Headless CMS options:</p>
<ol>
<li><strong>Source Control</strong>: checks files directly into your code repository (<code>git</code> is a very popular one). You may hear these referred to as Git-based CMS solutions. A few benefits of this approach:
<ul>
<li>Your data and content are already versioned.</li>
<li>Works as-is with your existing deployment process, including branch/test/pre-production deploy previews.</li>
<li>No data migration is needed if you decide to swap providers—it’s <a href="http://www.aaronsw.com/weblog/000404">baked in (not fried)</a>.</li>
</ul>
</li>
<li><strong>API Based</strong>: provide an external API that can be queried in your build or serverless functions. This approach gives you access to a powerful query language that can unlock access to complex data structures.</li>
</ol>
<h2 id="headless-cms-providers" tabindex="-1">Headless CMS Providers <a class="direct-link" href="https://www.11ty.dev/docs/cms/#headless-cms-providers">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="sites-vert sites-vert--md sites--reverse sites--center">
<div class="lo-grid" style="--fl-gap-v: 5em;">
<div class="sites-site-vert sites-featured" data-filter-tags="">
<a href="https://cloudcannon.com/eleventy-cms/?utm_campaign=11ty-partner&utm_source=official-sponsor" class="elv-externalexempt" title="CloudCannon">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcloudcannon.com%2Feleventy-cms%2F%3Futm_campaign%3D11ty-partner%26utm_source%3Dofficial-sponsor/" width="150" height="150" alt="IndieWeb Avatar for https://cloudcannon.com/eleventy-cms/?utm_campaign=11ty-partner&utm_source=official-sponsor" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">CloudCannon</span>
<div class="sites-screenshot-container">
<img alt="The Eleventy CMS for Visual Editing, CloudCannon CMS" loading="lazy" decoding="async" class="sites-screenshot" src="https://www.11ty.dev/img/screenshot-fallbacks/cloudcannon-cms.png" width="" height="">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">Recommended Partner</span>
<span class="sites-tag">Git-based</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.wix.com/developers/headless/" class="elv-externalexempt" title="Wix Headless">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.wix.com%2Fdevelopers%2Fheadless%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.wix.com/developers/headless/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Wix Headless</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.wix.com/developers/headless/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.wix.com%2Fdevelopers%2Fheadless%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://ghost.org/" class="elv-externalexempt" title="Ghost">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fghost.org%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ghost.org/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Ghost</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://ghost.org/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fghost.org%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.sanity.io/" class="elv-externalexempt" title="Sanity">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.sanity.io%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.sanity.io/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Sanity</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.sanity.io/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.sanity.io%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://developer.wordpress.org/rest-api/" class="elv-externalexempt" title="WordPress REST API">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdeveloper.wordpress.org%2Frest-api%2F/" width="150" height="150" alt="IndieWeb Avatar for https://developer.wordpress.org/rest-api/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">WordPress REST API</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://developer.wordpress.org/rest-api/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdeveloper.wordpress.org%2Frest-api%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://getpublii.com/" class="elv-externalexempt" title="Publii">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgetpublii.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://getpublii.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Publii</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://getpublii.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgetpublii.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">Git-based</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.contentful.com/" class="elv-externalexempt" title="Contentful">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.contentful.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.contentful.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Contentful</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.contentful.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.contentful.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.builder.io/" class="elv-externalexempt" title="Builder.io">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.builder.io%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.builder.io/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Builder.io</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.builder.io/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.builder.io%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://prismic.io/" class="elv-externalexempt" title="Prismic">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fprismic.io%2F/" width="150" height="150" alt="IndieWeb Avatar for https://prismic.io/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Prismic</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://prismic.io/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fprismic.io%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://webflow.com/cms" class="elv-externalexempt" title="Webflow CMS">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwebflow.com%2Fcms/" width="150" height="150" alt="IndieWeb Avatar for https://webflow.com/cms" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Webflow CMS</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://webflow.com/cms" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwebflow.com%2Fcms/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.storyblok.com/" class="elv-externalexempt" title="Storyblok">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.storyblok.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.storyblok.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Storyblok</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.storyblok.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.storyblok.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://developers.notion.com/" class="elv-externalexempt" title="Notion">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdevelopers.notion.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://developers.notion.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Notion</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://developers.notion.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdevelopers.notion.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://directus.io/" class="elv-externalexempt" title="Directus">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdirectus.io%2F/" width="150" height="150" alt="IndieWeb Avatar for https://directus.io/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Directus</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://directus.io/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdirectus.io%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://decapcms.org/" class="elv-externalexempt" title="DecapCMS">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdecapcms.org%2F/" width="150" height="150" alt="IndieWeb Avatar for https://decapcms.org/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">DecapCMS</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://decapcms.org/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdecapcms.org%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">Git-based</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://agilitycms.com/" class="elv-externalexempt" title="Agility CMS">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fagilitycms.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://agilitycms.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Agility CMS</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://agilitycms.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fagilitycms.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://spinalcms.com/" class="elv-externalexempt" title="Spinal">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fspinalcms.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://spinalcms.com/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Spinal</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://spinalcms.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fspinalcms.com%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">Git-based</span>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://strapi.io/" class="elv-externalexempt" title="Strapi">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fstrapi.io%2F/" width="150" height="150" alt="IndieWeb Avatar for https://strapi.io/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Strapi</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://strapi.io/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fstrapi.io%2F/medium/1:1/smaller/" width="464" height="464">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<span class="sites-tag">API</span>
</div>
</div>
</div>
<p><em>The list above is not meant to be exhaustive.</em></p>
<h2 id="related" tabindex="-1">Related <a class="direct-link" href="https://www.11ty.dev/docs/cms/#related">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="yXcxvBJuULU" playlabel="Play: From Zero to CMS in 2 Minutes with CloudCannon and Eleventy" style="background-image:url('https://i.ytimg.com/vi/yXcxvBJuULU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=yXcxvBJuULU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: From Zero to CMS in 2 Minutes with CloudCannon and Eleventy</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=yXcxvBJuULU">From Zero to CMS in 2 Minutes with CloudCannon and Eleventy</a></is-land></div></div>
<h3 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/cms/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul class="list-bare">
<li><a href="https://jamstack.org/headless-cms/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamstack.org%2Fheadless-cms%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamstack.org/headless-cms/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Headless CMS List on Jamstack.org</a></li>
<li><a href="https://www.sanity.io/guides/how-to-get-started-with-the-11ty-eleventy-blog-starter"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.sanity.io%2Fguides%2Fhow-to-get-started-with-the-11ty-eleventy-blog-starter/" width="150" height="150" alt="IndieWeb Avatar for https://www.sanity.io/guides/how-to-get-started-with-the-11ty-eleventy-blog-starter" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to get started with the 11ty (Eleventy) Blog Starter</a></li>
</ul>
<p>×35 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://www.youtube.com/watch?v=e_H4DxqAiyY"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3De_H4DxqAiyY/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=e_H4DxqAiyY" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a meetup community site using Global Data Files</a> — <em>Juha-Matti Santala (2024)</em></li>
<li><a href="https://estelafranco.com/blog/eleventy-storyblok-2/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Festelafranco.com%2Fblog%2Feleventy-storyblok-2%2F/" width="150" height="150" alt="IndieWeb Avatar for https://estelafranco.com/blog/eleventy-storyblok-2/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to connect Eleventy and Storyblok</a> — <em>Estela Franco (2024)</em></li>
<li><a href="https://www.cassey.dev/adding-decap-cms-to-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.cassey.dev%2Fadding-decap-cms-to-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.cassey.dev/adding-decap-cms-to-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding Decap CMS to 11ty</a> — <em>Cassey Lottman (2024)</em></li>
<li><a href="https://steveabraham.com/notes/i-changed-my-mind/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsteveabraham.com%2Fnotes%2Fi-changed-my-mind%2F/" width="150" height="150" alt="IndieWeb Avatar for https://steveabraham.com/notes/i-changed-my-mind/" class="avatar avatar-indieweb" loading="lazy" decoding="async">I changed my mind, my CMS adventure</a> — <em>Steve Abraham (2024)</em></li>
<li><a href="https://www.zachleat.com/web/taylor-swift-fansite/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Ftaylor-swift-fansite%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/taylor-swift-fansite/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a multi-language Taylor Swift Fan Site with CloudCannon and Eleventy (Zach's version)</a> — <em>Zach Leatherman (2023)</em></li>
</ul>
<details>
<summary>Expand to see 30 more resources.</summary>
<ul class="list-bare">
<li><a href="https://cloudcannon.com/blog/create-a-microblog-with-visual-editing/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fcloudcannon.com%2Fblog%2Fcreate-a-microblog-with-visual-editing%2F/" width="150" height="150" alt="IndieWeb Avatar for https://cloudcannon.com/blog/create-a-microblog-with-visual-editing/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Let’s create a microblog with visual editing using Bookshop and Eleventy</a> — <em>Zach Leatherman (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=AsWt6BTjzyk"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DAsWt6BTjzyk/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=AsWt6BTjzyk" class="avatar avatar-indieweb" loading="lazy" decoding="async">Live Editing an Eleventy Project in CloudCannon with Bookshop</a> — <em>CloudCannon (2023)</em></li>
<li><a href="https://www.mikeaparicio.com/posts/2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikeaparicio.com%2Fposts%2F2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikeaparicio.com/posts/2023-11-07-using-wordpress-as-a-headless-cms-for-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Wordpress as a headless CMS for Eleventy</a> — <em>Mike Aparicio (2023)</em></li>
<li><a href="https://ginger.wtf/posts/setting-up-agitcms-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fginger.wtf%2Fposts%2Fsetting-up-agitcms-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ginger.wtf/posts/setting-up-agitcms-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to setup Agit CMS with your 11ty website</a> — <em>Ginger (2023)</em></li>
<li><a href="https://kevingimbel.de/blog/2023/11/integrating-wordpress-posts-with-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fkevingimbel.de%2Fblog%2F2023%2F11%2Fintegrating-wordpress-posts-with-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://kevingimbel.de/blog/2023/11/integrating-wordpress-posts-with-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Integrating WordPress Posts with 11ty</a> — <em>Kevin Gimbel (2023)</em></li>
<li><a href="https://claytonerrington.com/blog/implementing-tinacms-with-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fclaytonerrington.com%2Fblog%2Fimplementing-tinacms-with-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://claytonerrington.com/blog/implementing-tinacms-with-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">TinaCMS + 11ty</a> — <em>Clayton Errington (2023)</em></li>
<li><a href="https://rkblog.dev/posts/programming-general/cloudcannon-git-headless-cms/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frkblog.dev%2Fposts%2Fprogramming-general%2Fcloudcannon-git-headless-cms%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rkblog.dev/posts/programming-general/cloudcannon-git-headless-cms/" class="avatar avatar-indieweb" loading="lazy" decoding="async">CloudCannon as a git based headless CMS for static site generators</a> — <em>Piotr Maliński (2023)</em></li>
<li><a href="https://estelafranco.com/blog/eleventy-storyblok/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Festelafranco.com%2Fblog%2Feleventy-storyblok%2F/" width="150" height="150" alt="IndieWeb Avatar for https://estelafranco.com/blog/eleventy-storyblok/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy and Storyblok - My perfect combination</a> — <em>Estela Franco (2023)</em></li>
<li><a href="https://getkirby.com/docs/cookbook/setup/headless-kiosk-application"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgetkirby.com%2Fdocs%2Fcookbook%2Fsetup%2Fheadless-kiosk-application/" width="150" height="150" alt="IndieWeb Avatar for https://getkirby.com/docs/cookbook/setup/headless-kiosk-application" class="avatar avatar-indieweb" loading="lazy" decoding="async">Headless kiosk application (with Kirby CMS)</a> — <em>James Steel (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=yXcxvBJuULU"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DyXcxvBJuULU/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=yXcxvBJuULU" class="avatar avatar-indieweb" loading="lazy" decoding="async">From Zero to CMS in 2 Minutes with CloudCannon and Eleventy</a> — <em>CloudCannon (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/04/06/working-with-cloudcannon-and-eleventy-my-experience"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F04%2F06%2Fworking-with-cloudcannon-and-eleventy-my-experience/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/04/06/working-with-cloudcannon-and-eleventy-my-experience" class="avatar avatar-indieweb" loading="lazy" decoding="async">Working with CloudCannon and Eleventy - My Experience</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://darn.es/post-previews-with-ghost-eleventy-netlify/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarn.es%2Fpost-previews-with-ghost-eleventy-netlify%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darn.es/post-previews-with-ghost-eleventy-netlify/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Post previews with Ghost, Eleventy & Netlify</a> — <em>David Darnes (2023)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/adding-tina-cms-to-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Fadding-tina-cms-to-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/adding-tina-cms-to-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding Tina CMS to 11ty</a> — <em>Mike Street (2023)</em></li>
<li><a href="https://danabyerly.com/articles/wordpress-and-eleventy-part-two-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanabyerly.com%2Farticles%2Fwordpress-and-eleventy-part-two-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danabyerly.com/articles/wordpress-and-eleventy-part-two-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">WordPress & Eleventy part two: Eleventy</a> — <em>Dana Byerly (2022)</em></li>
<li><a href="https://danabyerly.com/articles/wordpress-and-eleventy-part-one-wordpress/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanabyerly.com%2Farticles%2Fwordpress-and-eleventy-part-one-wordpress%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danabyerly.com/articles/wordpress-and-eleventy-part-one-wordpress/" class="avatar avatar-indieweb" loading="lazy" decoding="async">WordPress & Eleventy part one: WordPress</a> — <em>Dana Byerly (2022)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/add-netlify-cms-to-an-existing-11ty-site/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Fadd-netlify-cms-to-an-existing-11ty-site%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/add-netlify-cms-to-an-existing-11ty-site/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Add Netlify CMS to an existing 11ty site</a> — <em>Mike Street (2022)</em></li>
<li><a href="https://www.cassey.dev/posts/2022-03-27-sanity-with-existing-eleventy-site/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.cassey.dev%2Fposts%2F2022-03-27-sanity-with-existing-eleventy-site%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.cassey.dev/posts/2022-03-27-sanity-with-existing-eleventy-site/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Sanity CMS to host an image gallery for an existing 11ty site</a> — <em>Cassey Lottman (2022)</em></li>
<li><a href="https://www.trovster.com/blog/2022/01/using-the-netlify-cms-locally"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.trovster.com%2Fblog%2F2022%2F01%2Fusing-the-netlify-cms-locally/" width="150" height="150" alt="IndieWeb Avatar for https://www.trovster.com/blog/2022/01/using-the-netlify-cms-locally" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using the Netlify CMS locally</a> — <em>Trevor Morris (2022)</em></li>
<li><a href="https://henry.codes/writing/how-to-use-contentful-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhenry.codes%2Fwriting%2Fhow-to-use-contentful-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://henry.codes/writing/how-to-use-contentful-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to use Contentful with Eleventy</a> — <em>Henry Desroches (2021)</em></li>
<li><a href="https://www.crossingtheruby.com/2021/05/16/sanity-with-eleventy.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.crossingtheruby.com%2F2021%2F05%2F16%2Fsanity-with-eleventy.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.crossingtheruby.com/2021/05/16/sanity-with-eleventy.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Sanity with 11ty</a> — <em>crossingtheruby (2021)</em></li>
<li><a href="https://dev.to/orbit/how-to-add-twitter-and-instagram-embeds-on-an-eleventy-website-using-sanity-4nog"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdev.to%2Forbit%2Fhow-to-add-twitter-and-instagram-embeds-on-an-eleventy-website-using-sanity-4nog/" width="150" height="150" alt="IndieWeb Avatar for https://dev.to/orbit/how-to-add-twitter-and-instagram-embeds-on-an-eleventy-website-using-sanity-4nog" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to: add Twitter and Instagram Embeds on an Eleventy website using Sanity</a> — <em>Nicolas Goutay (2021)</em></li>
<li><a href="https://bryanlrobinson.com/blog/using-11ty-javascript-data-files-to-mix-markdown-and-cms-content-into-one-collection/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbryanlrobinson.com%2Fblog%2Fusing-11ty-javascript-data-files-to-mix-markdown-and-cms-content-into-one-collection%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bryanlrobinson.com/blog/using-11ty-javascript-data-files-to-mix-markdown-and-cms-content-into-one-collection/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using 11ty JavaScript Data files to mix Markdown and CMS content into one collection</a> — <em>Bryan Robinson (2021)</em></li>
<li><a href="https://dev.to/hannataylor/how-to-add-netlify-cms-to-an-existing-eleventy-project-24bb"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdev.to%2Fhannataylor%2Fhow-to-add-netlify-cms-to-an-existing-eleventy-project-24bb/" width="150" height="150" alt="IndieWeb Avatar for https://dev.to/hannataylor/how-to-add-netlify-cms-to-an-existing-eleventy-project-24bb" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to add Netlify CMS to an existing Eleventy project</a> — <em>Hanna Taylor (2021)</em></li>
<li><a href="https://www.sitepoint.com/wordpress-headless-cms-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.sitepoint.com%2Fwordpress-headless-cms-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.sitepoint.com/wordpress-headless-cms-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to Use WordPress as a Headless CMS for Eleventy</a> — <em>Craig Buckler (2021)</em></li>
<li><a href="https://www.contentful.com/blog/integrating-contentful-with-eleventy-create-static-sites/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.contentful.com%2Fblog%2Fintegrating-contentful-with-eleventy-create-static-sites%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.contentful.com/blog/integrating-contentful-with-eleventy-create-static-sites/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Integrating Contentful with Eleventy to create static sites</a> — <em>Contentful (2020)</em></li>
<li><a href="https://hamatti.org/posts/building-a-website-with-a-static-site-generator-part-1/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fbuilding-a-website-with-a-static-site-generator-part-1%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/building-a-website-with-a-static-site-generator-part-1/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a website with a static site generator, part 1: Setup</a> — <em>Juha-Matti Santala (2020)</em></li>
<li><a href="https://hamatti.org/posts/how-my-site-is-built-with-eleventy-ghost/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fhow-my-site-is-built-with-eleventy-ghost%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/how-my-site-is-built-with-eleventy-ghost/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How my site is built with Eleventy + Ghost</a> — <em>Juha-Matti Santala (2020)</em></li>
<li><a href="https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.webstoemp.com%2Fblog%2Fheadless-cms-graphql-api-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Consuming a headless CMS GraphQL API with Eleventy</a> — <em>Jérôme Coupé (2019)</em></li>
<li><a href="https://ghost.org/changelog/eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fghost.org%2Fchangelog%2Feleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ghost.org/changelog/eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy and Ghost</a> — <em>Ghost (2019)</em></li>
<li><a href="https://darn.es/use-eleventy-to-generate-a-ghost-blog/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarn.es%2Fuse-eleventy-to-generate-a-ghost-blog%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darn.es/use-eleventy-to-generate-a-ghost-blog/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Use Eleventy to generate a Ghost blog</a> — <em>David Darnes (2019)</em></li>
</ul>
</details>
Template Filters
2023-11-01T13:26:14Z
https://www.11ty.dev/docs/filters/
<h1>Filters</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/filters/#eleventy-provided-filters">Eleventy Provided Filters </a><ul><li><a href="https://www.11ty.dev/docs/filters/#access-existing-filters-in-your-configuration-file">Access existing filters in your Configuration File </a></li></ul></li><li><a href="https://www.11ty.dev/docs/filters/#asynchronous-filters">Asynchronous Filters </a></li><li><a href="https://www.11ty.dev/docs/filters/#scoped-data-in-filters">Scoped Data in Filters </a></li><li><a href="https://www.11ty.dev/docs/filters/#per-engine-filters">Per-Engine filters </a></li><li><a href="https://www.11ty.dev/docs/filters/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<p>A <dfn>filter</dfn> is a function which can be used within templating syntax to transform data into a more presentable format. Filters are typically designed to be chained, so that the value returned from one filter is piped into the next filter.</p>
<p>Various template engines can be extended with custom filters to modify content. Here are a few examples:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/#filter-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/#filter-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/filters/#filter-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/filters/#filter-hbs" role="tab">Handlebars</a>
</div>
<div id="filter-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.njk</div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ name | makeUppercase }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="filter-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.liquid</div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ name | makeUppercase }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="filter-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.11ty.js</div><pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">makeUppercase</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="filter-hbs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.hbs</div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ makeUppercase name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>Filters can be added using the <a href="https://www.11ty.dev/docs/config/#using-the-configuration-api">Configuration API</a> and are available to multiple template engines, simultaneously. They are currently supported in JavaScript , Markdown, Nunjucks, Liquid, Handlebars, and WebC.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"makeUppercase"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// New in v2.0.0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"makeUppercase"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Markdown files are pre-processed as Liquid templates by default—any filters available in Liquid templates are also available in Markdown files. Likewise, if you <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">change the template engine for Markdown files</a>, the filters available for that templating language will also be available in Markdown files.
</div></div>
<p>Read more about filters on the individual Template Language documentation pages:</p>
<ul class="inlinelist"><li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/javascript/#filters">JavaScript <code>*.11ty.js</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/liquid/#filters">Liquid <code>*.liquid</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/nunjucks/#filters">Nunjucks <code>*.njk</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/handlebars/#filters">Handlebars <code>*.hbs</code></a></li></ul>
<h2 id="eleventy-provided-filters" tabindex="-1">Eleventy Provided Filters <a class="direct-link" href="https://www.11ty.dev/docs/filters/#eleventy-provided-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>We also provide a few universal filters, built-in:</p>
<ul><li><a href="https://www.11ty.dev/docs/filters/url/"><code>url</code></a>: Normalize absolute paths in your content, allows easily changing deploy subdirectories for your project.</li>
<li><a href="https://www.11ty.dev/docs/filters/slugify/"><code>slugify</code></a>: <code>"My string"</code> to <code>"my-string"</code> for permalinks.</li>
<li><a href="https://www.11ty.dev/docs/filters/log/"><code>log</code></a>: <code>console.log</code> inside templates.</li>
<li><a href="https://www.11ty.dev/docs/filters/collection-items/"><code>get*CollectionItem</code></a>: Get next or previous collection items for easy linking.</li></ul>
<h3 id="access-existing-filters-in-your-configuration-file" tabindex="-1">Access existing filters in your Configuration File <a class="direct-link" href="https://www.11ty.dev/docs/filters/#access-existing-filters-in-your-configuration-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you’d like to reuse existing filters, you can use the Configuration API’s <code>getFilter</code> method. When called with a valid filter name, it will return that filter’s callback function. It can be helpful when aliasing a filter to a different name, using a filter inside of your own filter, or using a filter inside of a shortcode.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"myCustomImage"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> alt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><img src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>eleventyConfig<span class="token punctuation">.</span><span class="token function">getFilter</span><span class="token punctuation">(</span><span class="token string">"url"</span><span class="token punctuation">)</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" alt="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>alt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="asynchronous-filters" tabindex="-1">Asynchronous Filters <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/filters/#asynchronous-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy has added a new universal filter API for asynchronous filters and extended the currently available <code>addFilter</code> method to be async-friendly. <em>Note that even though Handlebars is used for synchronous filters in <code>addFilter</code>, it is excluded from asynchronous filters because Handlebars is not async-friendly.</em></p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Async universal filters add to:</span><br> <span class="token comment">// * Liquid</span><br> <span class="token comment">// * Nunjucks</span><br> <span class="token comment">// * JavaScript</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// do some Async work</span><br> <span class="token keyword">return</span> value<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// do some Async work</span><br> <span class="token keyword">return</span> value<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="hJAtWQ9nmKU" params="start=774" playlabel="Play: Universal Asynchronous Filters (Nunjucks improvement) (Changelog №17)" style="background-image:url('https://i.ytimg.com/vi/hJAtWQ9nmKU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=hJAtWQ9nmKU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Universal Asynchronous Filters (Nunjucks improvement) (Changelog №17)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=hJAtWQ9nmKU&t=774">Universal Asynchronous Filters (Nunjucks improvement) (Changelog №17) <code>▶12m54s</code></a></is-land></div></div>
<h2 id="scoped-data-in-filters" tabindex="-1">Scoped Data in Filters <a class="direct-link" href="https://www.11ty.dev/docs/filters/#scoped-data-in-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>A few Eleventy-specific data properties are available to filter callbacks.</p>
<ul>
<li><code>this.page</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
<li><code>this.eleventy</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Make sure you’re not using an arrow function here: () => {}</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// this.page</span><br> <span class="token comment">// this.eleventy</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="per-engine-filters" tabindex="-1">Per-Engine filters <a class="direct-link" href="https://www.11ty.dev/docs/filters/#per-engine-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Filters can also be specified individually for one or more template engines. (The <code>addFilter</code> function is actually an alias for calling all of these functions.)</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Liquid Filter (async-friendly)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Nunjucks Filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Nunjucks Async Filter</span><br> <span class="token comment">// Read the Nunjucks docs before using this (link below)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Handlebars Filter (no async support)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addHandlebarsHelper</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// JavaScript Template Function (async-friendly)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Note that <a href="https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-nunjucks-filters">Nunjucks <code>addNunjucksAsyncFilter</code></a> requires the use of callbacks for async behavior. Make sure you read up on it!</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Markdown files are pre-processed as Liquid templates by default—any filters available in Liquid templates are also available in Markdown files. Likewise, if you <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">change the template engine for Markdown files</a>, the filters available for that templating language will also be available in Markdown files.
</div></div>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/filters/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>×50 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://gregmorris.co.uk/2024/02/25/displaying-limited-number-of-posts-in-11ty.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgregmorris.co.uk%2F2024%2F02%2F25%2Fdisplaying-limited-number-of-posts-in-11ty.html/" width="150" height="150" alt="IndieWeb Avatar for https://gregmorris.co.uk/2024/02/25/displaying-limited-number-of-posts-in-11ty.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Displaying Limited Number Of Posts In 11ty</a> — <em>Greg Morris (2024)</em></li>
<li><a href="https://blog.lukaszwojcik.net/eleventy-custom-markup-alongside-item-contents/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.lukaszwojcik.net%2Feleventy-custom-markup-alongside-item-contents%2F/" width="150" height="150" alt="IndieWeb Avatar for https://blog.lukaszwojcik.net/eleventy-custom-markup-alongside-item-contents/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy: custom markup alongside item contents</a> — <em>Łukasz Wójcik (2024)</em></li>
<li><a href="https://www.bobmonsour.com/posts/refactoring-by-shortcode/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Frefactoring-by-shortcode%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/refactoring-by-shortcode/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Refactor by shortcode</a> — <em>Bob Monsour (2024)</em></li>
<li><a href="https://www.martingunnarsson.com/posts/local-links-in-eleventy-part-2/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.martingunnarsson.com%2Fposts%2Flocal-links-in-eleventy-part-2%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.martingunnarsson.com/posts/local-links-in-eleventy-part-2/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Local links in Eleventy, Part 2</a> — <em>Martin Gunnarsson (2024)</em></li>
<li><a href="https://www.roboleary.net/webdev/2024/02/07/eleventy-fetch.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.roboleary.net%2Fwebdev%2F2024%2F02%2F07%2Feleventy-fetch.html/" width="150" height="150" alt="IndieWeb Avatar for https://www.roboleary.net/webdev/2024/02/07/eleventy-fetch.html" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy - Fetch data from the Github REST API to populate a projects page</a> — <em>Rob O'Leary (2024)</em></li>
</ul>
<details>
<summary>Expand to see 45 more resources.</summary>
<ul class="list-bare">
<li><a href="https://huphtur.nl/eleventy-filter-to-turn-url-into-domain-name/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhuphtur.nl%2Feleventy-filter-to-turn-url-into-domain-name%2F/" width="150" height="150" alt="IndieWeb Avatar for https://huphtur.nl/eleventy-filter-to-turn-url-into-domain-name/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Filter to Turn a URL Into a Domain Name</a> — <em>Marcel Appleman (2024)</em></li>
<li><a href="https://www.bobmonsour.com/posts/slashing-by-caching/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Fslashing-by-caching%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/slashing-by-caching/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Slashing by caching</a> — <em>Bob Monsour (2024)</em></li>
<li><a href="https://hamatti.org/posts/community-websites-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fcommunity-websites-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/community-websites-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Community websites with Eleventy</a> — <em>Juha-Matti Santala (2024)</em></li>
<li><a href="https://localghost.dev/blog/automated-weekly-links-posts-with-raindrop-io-and-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flocalghost.dev%2Fblog%2Fautomated-weekly-links-posts-with-raindrop-io-and-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://localghost.dev/blog/automated-weekly-links-posts-with-raindrop-io-and-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automated weekly links posts with raindrop.io and Eleventy</a> — <em>Sophie Koonin (2024)</em></li>
<li><a href="https://www.bobmonsour.com/posts/adding-webmentions-to-my-site/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2Fposts%2Fadding-webmentions-to-my-site%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/posts/adding-webmentions-to-my-site/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding webmentions to my site</a> — <em>Bob Monsour (2024)</em></li>
<li><a href="https://jamesdoc.com/blog/2023/git-changelog-in-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjamesdoc.com%2Fblog%2F2023%2Fgit-changelog-in-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://jamesdoc.com/blog/2023/git-changelog-in-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding a git based changelog in 11ty</a> — <em>James Doc (2023)</em></li>
<li><a href="https://nonnullish.pages.dev/posts/generating-images-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fnonnullish.pages.dev%2Fposts%2Fgenerating-images-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://nonnullish.pages.dev/posts/generating-images-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Generating Open Graph Images in Eleventy</a> — <em>nonnullish (2023)</em></li>
<li><a href="https://ginger.wtf/posts/updating-tag-cloud-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fginger.wtf%2Fposts%2Fupdating-tag-cloud-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ginger.wtf/posts/updating-tag-cloud-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Updating my Eleventy plugin tagCloud</a> — <em>Ginger (2023)</em></li>
<li><a href="https://chriskirknielsen.com/blog/group-posts-by-year-with-nunjucks-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fchriskirknielsen.com%2Fblog%2Fgroup-posts-by-year-with-nunjucks-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://chriskirknielsen.com/blog/group-posts-by-year-with-nunjucks-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Grouping posts by year with nunjucks in Eleventy</a> — <em>Christopher Kirk-Nielsen (2023)</em></li>
<li><a href="https://rknight.me/popular-pages-with-eleventy-and-fathom-analytics/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frknight.me%2Fpopular-pages-with-eleventy-and-fathom-analytics%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rknight.me/popular-pages-with-eleventy-and-fathom-analytics/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Popular Pages with Eleventy and Fathom Analytics</a> — <em>Robb Knight (2023)</em></li>
<li><a href="https://ginger.wtf/posts/building-a-tag-cloud-with-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fginger.wtf%2Fposts%2Fbuilding-a-tag-cloud-with-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ginger.wtf/posts/building-a-tag-cloud-with-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using 11ty to bring back tag clouds</a> — <em>Ginger (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/eleventy-date-only-filter/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Feleventy-date-only-filter%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/eleventy-date-only-filter/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Date-only Filter</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://ginger.wtf/posts/fixing-my-rss-feed-for-feedbin/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fginger.wtf%2Fposts%2Ffixing-my-rss-feed-for-feedbin%2F/" width="150" height="150" alt="IndieWeb Avatar for https://ginger.wtf/posts/fixing-my-rss-feed-for-feedbin/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Feedbin is rendering my RSS feed wrong, let's fix it!</a> — <em>Ginger (2023)</em></li>
<li><a href="https://www.trovster.com/blog/2023/09/eleventy-json-output"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.trovster.com%2Fblog%2F2023%2F09%2Feleventy-json-output/" width="150" height="150" alt="IndieWeb Avatar for https://www.trovster.com/blog/2023/09/eleventy-json-output" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy JSON Output</a> — <em>Trevor Morris (2023)</em></li>
<li><a href="https://michaelharley.net/posts/2023/09/27/how-to-add-a-custom-slugify-filter-to-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmichaelharley.net%2Fposts%2F2023%2F09%2F27%2Fhow-to-add-a-custom-slugify-filter-to-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://michaelharley.net/posts/2023/09/27/how-to-add-a-custom-slugify-filter-to-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">How to add a custom slugify filter to 11ty</a> — <em>Michael Harley (2023)</em></li>
<li><a href="https://thomasrigby.com/posts/creating-a-category-filter-in-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fthomasrigby.com%2Fposts%2Fcreating-a-category-filter-in-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://thomasrigby.com/posts/creating-a-category-filter-in-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating a Category Filter in Eleventy</a> — <em>Thomas Rigby (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/08/28/fun-with-frontmatter-part-1-related-posts"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F08%2F28%2Ffun-with-frontmatter-part-1-related-posts/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/08/28/fun-with-frontmatter-part-1-related-posts" class="avatar avatar-indieweb" loading="lazy" decoding="async">Fun With Frontmatter: Part 1 - Related Posts</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://lea.verou.me/blog/2023/11ty-indices/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flea.verou.me%2Fblog%2F2023%2F11ty-indices%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lea.verou.me/blog/2023/11ty-indices/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty: Index ALL the things!</a> — <em>Lea Verou (2023)</em></li>
<li><a href="https://johnwargo.com/posts/2023/eleventy-filter-parameters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjohnwargo.com%2Fposts%2F2023%2Feleventy-filter-parameters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://johnwargo.com/posts/2023/eleventy-filter-parameters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Filter Parameters</a> — <em>John M. Wargo (2023)</em></li>
<li><a href="https://joesahlsa.dev/blog/eleventy-tag-filter/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fjoesahlsa.dev%2Fblog%2Feleventy-tag-filter%2F/" width="150" height="150" alt="IndieWeb Avatar for https://joesahlsa.dev/blog/eleventy-tag-filter/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy tag filter</a> — <em>Joe Sahlsa (2023)</em></li>
<li><a href="https://photogabble.co.uk/changelog/alphabetising-glossary-terms/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fphotogabble.co.uk%2Fchangelog%2Falphabetising-glossary-terms%2F/" width="150" height="150" alt="IndieWeb Avatar for https://photogabble.co.uk/changelog/alphabetising-glossary-terms/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Alphabetising Glossary Terms</a> — <em>Simon Dann (2023)</em></li>
<li><a href="https://simpixelated.com/filtering-tags-within-eleventy-js-collections/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsimpixelated.com%2Ffiltering-tags-within-eleventy-js-collections%2F/" width="150" height="150" alt="IndieWeb Avatar for https://simpixelated.com/filtering-tags-within-eleventy-js-collections/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Filtering tags within Eleventy.js collections</a> — <em>Jordan Kohl (2023)</em></li>
<li><a href="https://photogabble.co.uk/changelog/adding-statistics-to-11ty/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fphotogabble.co.uk%2Fchangelog%2Fadding-statistics-to-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://photogabble.co.uk/changelog/adding-statistics-to-11ty/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding statistics to 11ty</a> — <em>Simon Dann (2023)</em></li>
<li><a href="https://illtron.net/2023/01/11ty-directory-data-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Filltron.net%2F2023%2F01%2F11ty-directory-data-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://illtron.net/2023/01/11ty-directory-data-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy filters in Directory Computed Data</a> — <em>Chris Coleman (2023)</em></li>
<li><a href="https://danurbanowicz.com/posts/2022/10/17/filter-an-eleventy-collection-using-your-own-custom-front-matter/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanurbanowicz.com%2Fposts%2F2022%2F10%2F17%2Ffilter-an-eleventy-collection-using-your-own-custom-front-matter%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danurbanowicz.com/posts/2022/10/17/filter-an-eleventy-collection-using-your-own-custom-front-matter/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Filter an Eleventy Collection Using Your Own Custom Front Matter</a> — <em>Dan Urbanoicz (2022)</em></li>
<li><a href="https://photogabble.co.uk/tutorials/using-puppeteer-with-11ty-to-automate-generating-social-share-images/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fphotogabble.co.uk%2Ftutorials%2Fusing-puppeteer-with-11ty-to-automate-generating-social-share-images%2F/" width="150" height="150" alt="IndieWeb Avatar for https://photogabble.co.uk/tutorials/using-puppeteer-with-11ty-to-automate-generating-social-share-images/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Puppeteer with 11ty to automate generating social share images</a> — <em>Simon Dann (2022)</em></li>
<li><a href="https://bryanlrobinson.com/blog/11ty-second-11ty-creating-template-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbryanlrobinson.com%2Fblog%2F11ty-second-11ty-creating-template-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bryanlrobinson.com/blog/11ty-second-11ty-creating-template-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty Second 11ty: Creating Template Filters</a> — <em>Bryan Robinson (2022)</em></li>
<li><a href="https://www.aleksandrhovhannisyan.com/blog/useful-11ty-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Fuseful-11ty-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.aleksandrhovhannisyan.com/blog/useful-11ty-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">A Set of Useful 11ty Filters</a> — <em>Aleksandr Hovhannisyan (2022)</em></li>
<li><a href="https://11ty.rocks/tips/filter-titles-for-rss-and-social-shares/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Ftips%2Ffilter-titles-for-rss-and-social-shares%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/tips/filter-titles-for-rss-and-social-shares/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Filter Titles for RSS and Social Shares</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://hamatti.org/posts/blog-post-filter-with-netlify-functions/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fhamatti.org%2Fposts%2Fblog-post-filter-with-netlify-functions%2F/" width="150" height="150" alt="IndieWeb Avatar for https://hamatti.org/posts/blog-post-filter-with-netlify-functions/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Blog post filter with Netlify Functions</a> — <em>Juha-Matti Santala (2021)</em></li>
<li><a href="https://events.lunch.dev/feature-content-by-date-in-eleventy-using-custom-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fevents.lunch.dev%2Ffeature-content-by-date-in-eleventy-using-custom-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://events.lunch.dev/feature-content-by-date-in-eleventy-using-custom-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Feature content by date in Eleventy using custom filters</a> — <em>Michael Chan (2021)</em></li>
<li><a href="https://www.mikestreety.co.uk/blog/accessing-11ty-filters-within-data-files/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.mikestreety.co.uk%2Fblog%2Faccessing-11ty-filters-within-data-files%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.mikestreety.co.uk/blog/accessing-11ty-filters-within-data-files/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Accessing 11ty filters within data files to keep your code DRY</a> — <em>Mike Street (2021)</em></li>
<li><a href="https://11ty.rocks/eleventyjs/dates/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Feleventyjs%2Fdates%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/eleventyjs/dates/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty Date Shortcodes and Filters</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://11ty.rocks/eleventyjs/content/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Feleventyjs%2Fcontent%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/eleventyjs/content/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Filters for 11ty Content</a> — <em>Stephanie Eckles (2021)</em></li>
<li><a href="https://www.marclittlemore.com/create-an-eleventy-podcast-feed/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.marclittlemore.com%2Fcreate-an-eleventy-podcast-feed%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.marclittlemore.com/create-an-eleventy-podcast-feed/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Create an Eleventy podcast feed</a> — <em>Marc Littlemore (2021)</em></li>
<li><a href="https://pheonic.com/blog/2021/eleventy:-paging-filtered-collections/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fpheonic.com%2Fblog%2F2021%2Feleventy%3A-paging-filtered-collections%2F/" width="150" height="150" alt="IndieWeb Avatar for https://pheonic.com/blog/2021/eleventy:-paging-filtered-collections/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy: Paging Filtered Collections</a> — <em>Pheonic (2021)</em></li>
<li><a href="https://www.madebymike.com.au/writing/11ty-filters-data-shortcodes/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.madebymike.com.au%2Fwriting%2F11ty-filters-data-shortcodes%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.madebymike.com.au/writing/11ty-filters-data-shortcodes/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Understanding Filters, Shortcodes and Data in 11ty</a> — <em>Mike (2020)</em></li>
<li><a href="https://victorcamnerin.com/articles/parsing-markdown-in-frontmatter-for-eleventy-templates-using-filters/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fvictorcamnerin.com%2Farticles%2Fparsing-markdown-in-frontmatter-for-eleventy-templates-using-filters%2F/" width="150" height="150" alt="IndieWeb Avatar for https://victorcamnerin.com/articles/parsing-markdown-in-frontmatter-for-eleventy-templates-using-filters/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Parsing markdown in frontmatter for Eleventy templates, using filters</a> — <em>Victor Camnerin (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/11/09/adding-a-warning-for-old-posts-to-your-jamstack-site"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F11%2F09%2Fadding-a-warning-for-old-posts-to-your-jamstack-site/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/11/09/adding-a-warning-for-old-posts-to-your-jamstack-site" class="avatar avatar-indieweb" loading="lazy" decoding="async">Adding a Warning for Old Posts to Your Jamstack Site</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/10/26/selecting-random-posts-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F10%2F26%2Fselecting-random-posts-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/10/26/selecting-random-posts-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Selecting Random Posts in Eleventy</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/24/supporting-multiple-authors-in-an-eleventy-blog"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F24%2Fsupporting-multiple-authors-in-an-eleventy-blog/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/24/supporting-multiple-authors-in-an-eleventy-blog" class="avatar avatar-indieweb" loading="lazy" decoding="async">Supporting Multiple Authors in an Eleventy Blog</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/08/07/hiding-future-content-with-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F08%2F07%2Fhiding-future-content-with-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/08/07/hiding-future-content-with-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Hiding Future Content with Eleventy</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://khalidabuhakmeh.com/five-critical-things-before-working-with-11ty"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fkhalidabuhakmeh.com%2Ffive-critical-things-before-working-with-11ty/" width="150" height="150" alt="IndieWeb Avatar for https://khalidabuhakmeh.com/five-critical-things-before-working-with-11ty" class="avatar avatar-indieweb" loading="lazy" decoding="async">Five Critical Things To Do Before Working With 11ty</a> — <em>Khalid Abuhakmeh (2020)</em></li>
<li><a href="https://www.raymondcamden.com/2020/02/07/checking-and-upgrading-template-engines-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2020%2F02%2F07%2Fchecking-and-upgrading-template-engines-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2020/02/07/checking-and-upgrading-template-engines-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Checking (and Upgrading) Template Engines in Eleventy</a> — <em>Raymond Camden (2020)</em></li>
<li><a href="https://remysharp.com/2019/06/26/scheduled-and-draft-11ty-posts"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fremysharp.com%2F2019%2F06%2F26%2Fscheduled-and-draft-11ty-posts/" width="150" height="150" alt="IndieWeb Avatar for https://remysharp.com/2019/06/26/scheduled-and-draft-11ty-posts" class="avatar avatar-indieweb" loading="lazy" decoding="async">Scheduled and draft 11ty posts</a> — <em>Remy Sharp (2019)</em></li>
</ul>
</details>
WebC
2023-11-01T13:26:14Z
https://www.11ty.dev/docs/languages/webc/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/webc/#why-use-webc">Why use WebC </a><ul><li><a href="https://www.11ty.dev/docs/languages/webc/#performance">Performance </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#compatible-with-standards">Compatible with Standards </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#authoring">Authoring </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/webc/#resources">Resources </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#installation">Installation </a><ul><li><a href="https://www.11ty.dev/docs/languages/webc/#syntax-highlighting">Syntax highlighting </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/webc/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/languages/webc/#add-a-new-.webc-file">Add a new .webc file </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#non-traditional-webc-usage">Non-traditional WebC usage </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webc-reference">WebC Reference </a><ul><li><a href="https://www.11ty.dev/docs/languages/webc/#html-only-components">HTML-only components </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#asset-bundling">Asset bundling </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webckeep">webc:keep </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcnokeep">webc:nokeep </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcimport">webc:import </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcif">webc:if </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcelseif-and-webcelse">webc:elseif and webc:else </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcfor-loops">webc:for Loops </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#slots">Slots </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot">Attributes and webc:root </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">Props (Properties) </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#dynamic-attributes-and-properties">Dynamic attributes and properties </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#@attributes">@attributes </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#@html">@html </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#@raw">@raw </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#@text">@text </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcis">webc:is </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcscoped">webc:scoped </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#using-javascript-to-setup-your-component">Using JavaScript to Setup your Component </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#using-template-syntax-to-generate-content">Using Template Syntax to Generate Content </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#using-javascript-to-generate-content">Using JavaScript to Generate Content </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcraw">webc:raw </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#webcignore">webc:ignore </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#server-only-comments">Server-only comments </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#custom-transforms">Custom Transforms </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#helper-functions">Helper Functions </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#subtleties-and-limitations">Subtleties and Limitations </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/webc/#eleventy-+-webc-features">Eleventy + WebC Features </a><ul><li><a href="https://www.11ty.dev/docs/languages/webc/#front-matter">Front Matter </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#defining-components">Defining Components </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#official-webc-components">Official WebC Components </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode)">CSS and JS (Bundler mode) </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#asset-bucketing">Asset bucketing </a></li><li><a href="https://www.11ty.dev/docs/languages/webc/#use-with-is-land">Use with is-land </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/webc/#from-the-community">From the Community </a></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eleventy Name</td>
<td><code>webc</code></td>
</tr>
<tr>
<td>File Extension</td>
<td><code>*.webc</code></td>
</tr>
<tr>
<td>npm</td>
<td><a href="https://www.npmjs.com/package/@11ty/webc"><code>@11ty/webc</code></a> and <a href="https://www.npmjs.com/package/@11ty/eleventy-plugin-webc"><code>@11ty/eleventy-plugin-webc</code></a></td>
</tr>
<tr>
<td>GitHub</td>
<td><a href="https://github.com/11ty/webc"><code>11ty/webc</code></a> and <a href="https://github.com/11ty/eleventy-plugin-webc"><code>11ty/eleventy-plugin-webc</code></a></td>
</tr>
</tbody>
</table>
<h2 id="why-use-webc" tabindex="-1">Why use WebC? <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#why-use-webc">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Brings first-class <strong>components</strong> to Eleventy.
<ul>
<li>Expand any HTML element (including custom elements) to HTML with defined conventions from web standards.</li>
<li>This means that Web Components created with WebC are compatible with server-side rendering (without duplicating author-written markup)</li>
<li>WebC components are <a href="https://www.youtube.com/watch?v=p0wDUK0Z5Nw">Progressive Enhancement friendly</a>.</li>
</ul>
</li>
</ul>
<h3 id="performance" tabindex="-1">Performance <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#performance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>Create streamlined component-driven, cache-friendly page-specific JavaScript and CSS bundles. Users will only load the code they need to render that page (or that <a href="https://www.11ty.dev/docs/plugins/partial-hydration/">island</a>).
<ul>
<li>Easily <a href="https://www.11ty.dev/docs/languages/webc/#asset-bucketing">configurable boundaries</a> for critical component CSS and JavaScript.</li>
<li>Works great with <a href="https://www.11ty.dev/docs/plugins/partial-hydration/">is-land</a> for web component hydration.</li>
</ul>
</li>
<li>Get first-class <strong>incremental builds</strong> (for page templates, components, and Eleventy layouts) when <a href="https://www.11ty.dev/docs/usage/#incremental-for-partial-incremental-builds">used with <code>--incremental</code></a></li>
<li>Streaming friendly (stream on the Edge 👀)</li>
</ul>
<h3 id="compatible-with-standards" tabindex="-1">Compatible with Standards <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#compatible-with-standards">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>Uses <a href="https://github.com/inikulin/parse5"><code>parse5</code></a> to parse WebC HTML as modern browsers do (a nod to <a href="https://twitter.com/DasSurma/status/1559159122964127744">@DasSurma’s</a> work with <a href="https://twitter.com/patak_dev/status/1564265006627176449">Vite</a> here)</li>
<li>Shadow DOM and Declarative Shadow DOM friendly (easily switch components between Light DOM and Shadow DOM)</li>
</ul>
<h3 id="authoring" tabindex="-1">Authoring <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#authoring">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>Encourages no-quirks mode HTML authoring (and a doctype is optional). WebC throws a helpful error if encounters quirks mode markup.</li>
<li>Easily scope component CSS (or use your own scoping utility).</li>
<li>Tired of importing components? Use global or per-page no-import components.</li>
<li>Async-friendly: All configuration extensions/hooks into WebC are async-friendly out of the box.</li>
<li>For more complex templating needs, render any existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside of WebC.</li>
</ul>
<h2 id="resources" tabindex="-1">Resources <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#resources">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/" class="avatar avatar-indieweb" loading="lazy" decoding="async"><a href="https://11ty.rocks/posts/introduction-webc/">Introduction to WebC (11ty.rocks)</a> by <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarthmall.net%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darthmall.net/" class="avatar avatar-indieweb" loading="lazy" decoding="async">W. Evan Sheehan</li>
<li><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/" class="avatar avatar-indieweb" loading="lazy" decoding="async"><a href="https://11ty.rocks/posts/understanding-webc-features-and-concepts/">Understanding WebC Features and Concepts (11ty.rocks)</a> by <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fthinkdobecreate.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://thinkdobecreate.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Stephanie Eckles</li>
<li><a href="https://github.com/11ty/demo-webc-counter">WebC Number Counter Example Source Code and Demo</a></li>
<li><a href="https://demo-webc-image-compare.netlify.app/">Seven Demos of Progressive Enhancement using Image Comparison Components</a> and <a href="https://github.com/11ty/demo-webc-image-compare">Source Code</a></li>
<li><a href="https://www.raymondcamden.com/2022/10/16/first-experience-building-with-eleventys-webc-plugin">First Experience Building with Eleventy's WebC Plugin</a></li>
</ul>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="X-Bpjrkz-V8" playlabel="Play: Crash Course in Eleventy’s new WebC Plugin" style="background-image:url('https://i.ytimg.com/vi/X-Bpjrkz-V8/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=X-Bpjrkz-V8" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Crash Course in Eleventy’s new WebC Plugin</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=X-Bpjrkz-V8">Crash Course in Eleventy’s new WebC Plugin</a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="p0wDUK0Z5Nw" playlabel="Play: Interactive Progressively-enhanced Web Components with WebC" style="background-image:url('https://i.ytimg.com/vi/p0wDUK0Z5Nw/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=p0wDUK0Z5Nw" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Interactive Progressively-enhanced Web Components with WebC</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=p0wDUK0Z5Nw">Interactive Progressively-enhanced Web Components with WebC</a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="iZvhQ484V8s" params="start=1552" playlabel="Play: Server-rendered Image Comparison Component" style="background-image:url('https://i.ytimg.com/vi/iZvhQ484V8s/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=iZvhQ484V8s" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Server-rendered Image Comparison Component</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=iZvhQ484V8s&t=1552">Server-rendered Image Comparison Component <code>▶25m52s</code></a></is-land></div></div>
<ul>
<li><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fzachleat.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://zachleat.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async"><a href="https://www.zachleat.com/web/webc-in-eleventy/">zachleat.com: Adding Components to Eleventy with WebC</a>: a brief history of the motivation behind WebC including influences from the Svelte and Vue communities.</li>
<li><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdarthmall.net%2F/" width="150" height="150" alt="IndieWeb Avatar for https://darthmall.net/" class="avatar avatar-indieweb" loading="lazy" decoding="async"><a href="https://11tywebcfun.netlify.app/">11ty.webc.fun</a>: a collection of WebC recipes!</li>
<li><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.robincussol.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.robincussol.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async"><a href="https://www.robincussol.com/optimize-your-img-tags-with-eleventy-image-and-webc/">Robin Cussol: Optimize your img tags with Eleventy Image and WebC</a></li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that WebC support in Eleventy is <strong>not bundled</strong> with core! You must install the officially supported Eleventy plugin and the plugin <strong>requires Eleventy v2.0.0</strong> or newer.</div></div>
<p>It’s on <a href="https://www.npmjs.com/package/@11ty/eleventy-plugin-webc">npm at <code>@11ty/eleventy-plugin-webc</code></a>!</p>
<pre><code>npm install @11ty/eleventy-plugin-webc
</code></pre>
<p>To add support for <code>.webc</code> files in Eleventy, add the plugin in your Eleventy configuration file:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginWebc <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginWebc<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><em>You’re only allowed one <code>module.exports</code> in your configuration file. If you already have a configuration file, only copy the <code>require</code> and the <code>addPlugin</code> lines above!</em></p>
<details>
<summary><strong>Full options list</strong> (defaults shown)</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginWebc <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginWebc<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// Glob to find no-import global components</span><br> <span class="token comment">// (The default changed from `false` in Eleventy WebC v0.7.0)</span><br> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">"_components/**/*.webc"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Adds an Eleventy WebC transform to process all HTML output</span><br> <span class="token literal-property property">useTransform</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Additional global data used in the Eleventy WebC transform</span><br> <span class="token literal-property property">transformData</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Options passed to @11ty/eleventy-plugin-bundle</span><br> <span class="token literal-property property">bundlePluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>View the <a href="https://github.com/11ty/eleventy-plugin-bundle#installation">full options list for <code>@11ty/eleventy-plugin-bundle</code></a>. As an example, you can use the <a href="https://github.com/11ty/eleventy-plugin-bundle#modify-the-bundle-output"><code>transforms</code> array to modify bundle content with postcss</a>.</p>
</details>
<h3 id="syntax-highlighting" tabindex="-1">Syntax highlighting <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#syntax-highlighting">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Because WebC <em>is</em> HTML you can configure your editor to treat <code>.webc</code> files as<br>
HTML, this should correctly syntax highlight your WebC files. Your editor of<br>
choice should have some documentation on how to get this working.</p>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>There are a few different ways to use WebC in Eleventy:</p>
<h3 id="add-a-new-.webc-file" tabindex="-1">Add a new <code>.webc</code> file <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#add-a-new-.webc-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Adding the plugin will enable support for <code>.webc</code> files in your Eleventy project. Just make a new <code>.webc</code> HTML file in your Eleventy input directory and Eleventy will process it for you! Notably, <code>.webc</code> files will operate <a href="https://github.com/11ty/webc#aggregating-css-and-js">WebC in bundler mode</a>, aggregating the CSS and JS in use on each individual page to create a bundle of the assets in use on the page.</p>
<p>WebC uses an HTML parser to process input files: use any HTML here!</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> WebC *is* HTML.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<h3 id="non-traditional-webc-usage" tabindex="-1">Non-traditional WebC usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#non-traditional-webc-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="use-the-render-plugin" tabindex="-1">Use the Render plugin <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#use-the-render-plugin">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Using Eleventy’s built-in <a href="https://www.11ty.dev/docs/plugins/render/">Render plugin</a> allows you to render WebC inside of an existing Liquid, Nunjucks, or 11ty.js template.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/languages/webc/#webc-render-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/languages/webc/#webc-render-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/languages/webc/#webc-render-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/languages/webc/#webc-render-hbs" role="tab">Handlebars</a>
</div>
<div id="webc-render-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderTemplate <span class="token string">"webc"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-custom-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-custom-component</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endrenderTemplate <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="webc-render-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderTemplate</span> <span class="token string">"webc"</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token operator"><</span><span class="token variable">my</span><span class="token operator">-</span><span class="token variable">custom</span><span class="token operator">-</span><span class="token variable">component</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">my</span><span class="token operator">-</span><span class="token variable">custom</span><span class="token operator">-</span><span class="token variable">component</span><span class="token operator">></span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">endrenderTemplate</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
</div>
<div id="webc-render-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> content <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTemplate</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><my-custom-component></my-custom-component></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">"webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> content<span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="webc-render-hbs" role="tabpanel">
<p>The <code>renderTemplate</code> shortcode <a href="https://www.11ty.dev/docs/languages/webc/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="pre-process-html-input-as-webc" tabindex="-1">Pre-process HTML input as WebC <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#pre-process-html-input-as-webc">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can use the configuration option to change the default HTML preprocessor (from <code>liquid</code>) to <code>webc</code>. This might look like <code>htmlTemplateEngine: "webc"</code>. Read more on the <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-html-files">Eleventy documentation: Default Template Engine for HTML Files</a>.</p>
<h4 id="post-process-html-output-as-webc" tabindex="-1">Post-process HTML output as WebC <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#post-process-html-output-as-webc">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>This is a (last-resort?) catch-all option to let WebC process <code>.html</code> output files in your project (skipping any <code>.webc</code> input files to avoid double-processing templates). This feature makes use of <a href="https://www.11ty.dev/docs/config/#transforms">Eleventy transforms</a> and is most useful when you want to get up and running with WebC on an existing project quickly.</p>
<p>A few drawbacks to the transform method:</p>
<ol>
<li>This is the slowest build-performance method to implement WebC in a project, so try the other methods first!</li>
<li>The WebC Eleventy transform operates with <a href="https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode)">bundler mode disabled</a>, which means that processes WebC but <em>does not</em> aggregate component JS or CSS. (<a href="https://github.com/11ty/eleventy-plugin-webc/issues/55">Upvote this enhancement request</a>)</li>
</ol>
<details>
<summary>The transform is disabled by default, you will need to use the <code>useTransform</code> option to enable it.</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginWebc <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginWebc<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">useTransform</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h2 id="webc-reference" tabindex="-1">WebC Reference <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webc-reference">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Note that all <code>webc:</code> attributes are removed from the rendered output HTML.</p>
<h3 id="html-only-components" tabindex="-1">HTML-only components <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#html-only-components">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><em>Related: <a href="https://www.11ty.dev/docs/languages/webc/#defining-components">Defining Components in WebC</a></em></li>
</ul>
<p>When a component has only content HTML (no CSS or JavaScript) it will ignore the host component tag in the output HTML. This enables HTML-only components to have zero overhead HTML. <em>(You can opt-out of this behavior with <code>webc:keep</code>.)</em></p>
<details>
<summary>Expand for Example</summary>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">WebC components are not limited to custom element name restrictions (e.g. <code>my-component</code>) here. You can use <code>p</code>, <code>blockquote</code>, <code>h1</code>, <code>img</code>, or any valid HTML tag name.</div></div>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html">Components don’t need a root element, y’all.</code></pre>
<p>Outputs:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_site/page.html</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> Components don’t need a root element, y’all.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</details>
<h3 id="asset-bundling" tabindex="-1">Asset bundling <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#asset-bundling">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>For components that are <em>not</em> HTML-only (they <em>do</em> have CSS or JS), WebC will include the component tag in the output markup (e.g. <code><my-component></code>) (for styling or client scripting). <em>(You can opt-out of this behavior with <code>webc:nokeep</code>.)</em></p>
<details>
<summary>Expand for Example</summary>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">WebC components are not limited to custom element name restrictions (e.g. <code>my-component</code>) here. You can use <code>p</code>, <code>blockquote</code>, <code>h1</code>, <code>img</code>, or any valid HTML tag name.</div></div>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html">Components don’t need a root element, y’all.<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* Hi */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<p>Outputs:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_site/page.html</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span>Components don’t need a root element, y’all.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</details>
<p>Eleventy runs WebC in Bundler mode. That means that when it finds <code><style></code>, <code><link rel="stylesheet"></code>, or <code><script></code> elements in component definitions they are removed from the output markup and <em>their content</em> is aggregated together for re-use in asset bundles on the page. Read more about <a href="https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode)">CSS and JS in WebC</a>. <em>(You can opt-out of this behavior with <code>webc:keep</code>.)</em></p>
<h3 id="webckeep" tabindex="-1"><code>webc:keep</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webckeep">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>With an <a href="https://www.11ty.dev/docs/languages/webc/#html-only-components">HTML-only component</a>, you can use <code>webc:keep</code> on the host component to keep the tag around:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html-only-component</span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html-only-component</span><span class="token punctuation">></span></span></code></pre>
<p>You can also use <code>webc:keep</code> to opt-out of <a href="https://www.11ty.dev/docs/languages/webc/#asset-bundling">asset bundling</a> for individual elements inside of a component definition:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>You can also use <code>webc:keep</code> to save a <a href="https://www.11ty.dev/docs/languages/webc/#slots"><code><slot></code></a> for use in a client-side custom element.</p>
<h3 id="webcnokeep" tabindex="-1"><code>webc:nokeep</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcnokeep">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>With an CSS/JS component (not an <a href="https://www.11ty.dev/docs/languages/webc/#html-only-components">HTML-only component</a>), you can use <code>webc:nokeep</code> on the host component to drop the tag:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>css-js-component</span> <span class="token attr-name"><span class="token namespace">webc:</span>nokeep</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>css-js-component</span><span class="token punctuation">></span></span></code></pre>
<h3 id="webcimport" tabindex="-1"><code>webc:import</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcimport">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>WebC will expand any component it finds using known components. You can also use <code>webc:import</code> to inline import a component definition. This import path is relative to the component file path. WebC checks for circular component dependencies and throws an error if one is encountered.</p>
<ul>
<li><em>Related: <a href="https://www.11ty.dev/docs/languages/webc/#defining-components">Defining Components in WebC</a> (global or scoped)</em></li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>any-tag-name</span> <span class="token attr-name"><span class="token namespace">webc:</span>import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./components/my-component.webc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>any-tag-name</span><span class="token punctuation">></span></span></code></pre>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.6.2">Added in @11ty/webc@0.6.2</span>You can import directly from an installed npm package. Eleventy will begin to supply WebC components with existing plugins. The Syntax Highlighter (<code>4.2.0</code> or newer) supplies one that you can use today:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>syntax-highlight</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>npm:@11ty/eleventy-plugin-syntaxhighlight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>function myFunction() {<br> return true;<br>}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>syntax-highlight</span><span class="token punctuation">></span></span></code></pre>
<p>This uses the component tag name (<code>syntax-highlight</code>) to look for a WebC component at <code>node_modules/@11ty/eleventy-plugin-syntaxhighlight/syntax-highlight.webc</code> and imports it for use on this node. This works with a tag name override via <code>webc:is</code> too.</p>
<h3 id="webcif" tabindex="-1"><code>webc:if</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcif">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span></p>
<p>Use <code>webc:if</code> to conditionally render elements. Accepts arbitrary JavaScript (and is async-friendly). Similar to dynamic attributes, this also has access to component attributes and properties.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This will render<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This will not render<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAsyncHelper()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>If the helper promise resolves to a truthy value, this will render<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>You can use <code>webc:type="js"</code> <em>(WebC v0.7.1+)</em> to use JavaScript for more complex conditional logic (read more below).</p>
<h3 id="webcelseif-and-webcelse" tabindex="-1"><code>webc:elseif</code> and <code>webc:else</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcelseif-and-webcelse">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.10.0">Added in @11ty/webc@0.10.0</span></p>
<p>Adjacent siblings of <code>webc:if</code> can use <code>webc:elseif=""</code> and <code>webc:else</code> for additional conditional logic.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This will not render<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token comment"><!-- interspersing comments works ok --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>elseif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This will render<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>else</span><span class="token punctuation">></span></span>This will not render<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="webcfor-loops" tabindex="-1"><code>webc:for</code> Loops <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcfor-loops">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.10.0">Added in @11ty/webc@0.10.0</span></p>
<p>Use <code>webc:for</code> to loop over data with HTML. It works with Objects and any <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#built-in_iterables">Iterable</a> (String, Array, Map, Set, etc).</p>
<p>The syntax should feel similar to JavaScript’s <code>for</code> statement.</p>
<h4 id="arrays-(or-any-other-iterable)" tabindex="-1">Arrays (or any other Iterable) <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#arrays-(or-any-other-iterable)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- renders three div elements --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of [1, 2, 3]<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- access the loop index (zero-indexed) --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(item, index) of [1, 2, 3]<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- name these whatever you’d like --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myItem of [1, 2, 3]<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myItem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(myItem, myIndex) of [1, 2, 3]<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myIndex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- any iterable --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of new Set([1, 2, 3])<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h4 id="objects" tabindex="-1">Objects <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#objects">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Note the use of <code>in</code> instead of <code>of</code>.</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- renders two div elements --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>key in { a: 1, b: 2 }<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- access the value --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(key, value) in { a: 1, b: 2 }<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- access the loop index (zero-indexed) --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(key, value, index) in { a: 1, b: 2 }<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- name these whatever you’d like --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(myKey, myValue, myIndex) in { a: 1, b: 2 }<span class="token punctuation">"</span></span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myIndex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- use `Object.values` or `Object.keys`, sure --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value of Object.values({ a: 1, b: 2 })<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>key of Object.keys({ a: 1, b: 2 })<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="slots" tabindex="-1">Slots <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#slots">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Child content optionally precompiles using <code><slot></code> and <code>[slot]</code> too. This example is using an <a href="https://www.11ty.dev/docs/languages/webc/#html-only-components">HTML-only component</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span>This is the default slot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span><span class="token punctuation">></span></span>Fallback slot content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Compiles to:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Fallback slot content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is the default slot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>If your WebC component wants to <em>output</em> a <code><slot></code> tag in the compiled markup (for use in client JavaScript), use the <a href="https://www.11ty.dev/docs/languages/webc/#webckeep"><code>webc:keep</code> attribute</a> (e.g. <code><slot webc:keep></code>).</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Per web component standard conventions, if your component file contains <em>no content markup</em> (e.g. empty or only <code><style></code>/<code><script></code>), <code><slot></slot></code> is implied and the default slot content will be included automatically. If the WebC component file does contain content markup, the content passed in as the default slot requires <code><slot></code> to be included.</div></div>
<h4 id="named-slots" tabindex="-1">Named slots <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#named-slots">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>This works with named slots (e.g. <code><span slot="named-slot"></code>) too.</p>
<details>
<summary>Expand for Example</summary>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><br> This is the default slot.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>named-slot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a named slot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><br> This is also the default slot.<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>named-slot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Compiles to:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>This is a named slot.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
</details>
<h3 id="attributes-and-webcroot" tabindex="-1">Attributes and <code>webc:root</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<p>Inside of your component definition, you can add attributes to the outer host component using <code>webc:root</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>another-class<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Some component content<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<p><code>class</code> and <code>style</code> attribute values are <em>merged</em> as expected between the host component and the <code>webc:root</code> element.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">Comparing WebC Attribute Data Types</div><div class="elv-callout-c"><ol>
<li><a href="https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot">Attributes</a>: HTML attribute strings.</li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">Properties</a>: server-only private HTML attribute strings (not rendered to output).</li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#dynamic-attributes-and-properties">Dynamic Attributes and Properties</a>: evaluate as JavaScript (any data type, not just strings).</li>
</ol>
</div></div>
<h4 id="override-the-host-component-tag" tabindex="-1">Override the host component tag <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#override-the-host-component-tag">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can use <code>webc:root="override"</code> together to override the host component tag name! This isn’t very useful for HTML-only components (which leave out the host component tag) but is very useful when your component has style/scripts.</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>override<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some component content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* Hi */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>This was changed from <code>webc:root webc:keep</code> in WebC v0.9.0.</li>
</ul>
<h4 id="nesting" tabindex="-1">Nesting <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#nesting">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>It’s worth noting also that <code>webc:root</code> can be nested inside of other content—it does not need to exist at the top level of the component definition (framework folks love nested things deeply in <code>div</code> right).</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>override<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>another-class<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Some component content<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="props-(properties)" tabindex="-1">Props (Properties) <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Make any attribute into a prop by prefixing it with <code>@</code>. Props are server-only “private” attributes that don’t end up in the output HTML (they are private to WebC). They are identical to attributes except that they are filtered from the output HTML.</p>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span> <span class="token attr-name">@prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prop<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token comment"><!-- outputs <p>Hello</p> --></span></code></pre>
<ul>
<li>In the HTML specification, attribute names are lower-case. <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.8.0">Added in @11ty/webc@0.8.0</span>Attribute or property names with dashes are converted to camelcase for JS (e.g. <code><my-component @prop-name="test"></code> can be used like <code>@text="propName"</code>). More at <a href="https://github.com/11ty/webc/issues/71">issue #71</a>.</li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">Comparing WebC Attribute Data Types</div><div class="elv-callout-c"><ol>
<li><a href="https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot">Attributes</a>: HTML attribute strings.</li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">Properties</a>: server-only private HTML attribute strings (not rendered to output).</li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#dynamic-attributes-and-properties">Dynamic Attributes and Properties</a>: evaluate as JavaScript (any data type, not just strings).</li>
</ol>
</div></div>
<h3 id="dynamic-attributes-and-properties" tabindex="-1">Dynamic attributes and properties <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#dynamic-attributes-and-properties">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Make any attribute or property dynamic (using JavaScript for the value instead of a string) by prefixing it with a colon (<code>:</code>). You have access to host component attributes, props, and page data here!</p>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>avatar-image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-image.jpeg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zach is documenting this project<span class="token punctuation">"</span></span> <span class="token attr-name">:@dynamic-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>hello'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>avatar-image</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/avatar-image.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>src<span class="token punctuation">"</span></span> <span class="token attr-name">:alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alt<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>The <code>:@</code> dynamic property prefix was added in WebC v0.9.0.</li>
<li>In the HTML specification, attribute names are lower-case. <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.8.0">Added in @11ty/webc@0.8.0</span>Attribute or property names with dashes are converted to camelcase for JS (e.g. <code><my-component @prop-name="test"></code> can be used like <code>@text="propName"</code>). More at <a href="https://github.com/11ty/webc/issues/71">#71</a>.</li>
</ul>
<!-- * <span data-pagefind-ignore class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span>`this.` is no longer required in dynamic attributes (e.g. `this.src`/`this.alt`) when referencing helpers/data/attributes/property values. -->
<ul>
<li>The only currently supported <code>webc:*</code> configuration attribute that supports dynamic values is <a href="https://www.11ty.dev/docs/languages/webc/#asset-bucketing"><code>webc:bucket</code></a>. More to come here: <a href="https://github.com/11ty/webc/issues/143">#143</a> <a href="https://github.com/11ty/webc/issues/148">#148</a></li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">Comparing WebC Attribute Data Types</div><div class="elv-callout-c"><ol>
<li><a href="https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot">Attributes</a>: HTML attribute strings.</li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">Properties</a>: server-only private HTML attribute strings (not rendered to output).</li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#dynamic-attributes-and-properties">Dynamic Attributes and Properties</a>: evaluate as JavaScript (any data type, not just strings).</li>
</ol>
</div></div>
<h3 id="@attributes" tabindex="-1"><code>@attributes</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#@attributes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>You can use <code>@attributes</code> to render all of the attributes (including on host component) to the current node.</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/avatar-image.webc</div>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- will render all attributes including `src` and `alt` from the host component --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">@attributes</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>You can use this to render an arbitrary object as attributes too (note the parentheses to avoid JavaScript parsing as a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block"><code>block</code></a> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label"><code>label</code></a>):</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">@attributes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>({ myattribute: 'myValue'})<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h3 id="@html" tabindex="-1"><code>@html</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#@html">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>We surface a special <code>@html</code> <a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">prop</a> to override any tag content with custom JavaScript.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>Template HTML'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dataProperty<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- webc:nokeep will replace the outer element --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>Template HTML'<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>nokeep</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>Content returned from the <code>@html</code> prop will be processed as WebC—return any WebC content here! <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span></li>
</ul>
<!-- * <span data-pagefind-ignore class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span>`this.` is no longer required in `@html` or `@raw` (e.g. `this.dataProperty`) when referencing helpers/data/attributes/property values. -->
<ul>
<li>Using <code>webc:raw</code> will prevent processing the result as WebC <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.6.0">Added in @11ty/webc@0.6.0</span></li>
<li>Use <code>@raw</code> as an alias for <code>webc:raw @html</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span></li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- No reprocessing as WebC (useful in Eleventy layouts) --></span><br><span class="token comment"><!-- Where `myHtmlContent` is a variable holding an arbitrary HTML string --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myHtmlContent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>nokeep</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<h3 id="@raw" tabindex="-1"><code>@raw</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#@raw">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span></p>
<p>As noted in <a href="https://www.11ty.dev/docs/languages/webc/#@html"><code>@html</code></a>, you can use <code>@raw</code> as an alias for <code>webc:raw @html</code>.</p>
<h3 id="@text" tabindex="-1"><code>@text</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#@text">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.6.0">Added in @11ty/webc@0.6.0</span></p>
<p>We provide a special <code>@text</code> <a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">prop</a> to override any tag content with custom JavaScript. The entire value returned here will be escaped!</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dataProperty<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- When dataProperty contains `<p>This is text</p>`, this renders: --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>p<span class="token entity named-entity" title=">">&gt;</span>This is text<span class="token entity named-entity" title="<">&lt;</span>/p<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- webc:nokeep will replace the outer element --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">@text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dataProperty<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>nokeep</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>Content returned from the <code>@text</code> prop will <strong>not</strong> be processed as WebC.</li>
</ul>
<h3 id="webcis" tabindex="-1"><code>webc:is</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcis">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Remap a component to another component name.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-component<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- equivalent to --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<h3 id="webcscoped" tabindex="-1"><code>webc:scoped</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcscoped">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>We include a lightweight mechanism (<code>webc:scoped</code>) to scope component CSS. Selectors are prefixed with a new component class name. The class name is based on a hash of the style content (for fancy de-duplication of identical component styles).</p>
<details>
<summary>Expand for example</summary>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span>Default slot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<p>If you use <code>:host</code> it will be replaced with that class selector.</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name"><span class="token namespace">webc:</span>scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br><span class="token selector">:host</span> <span class="token punctuation">{</span><br> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">:host:defined</span> <span class="token punctuation">{</span><br> <span class="token property">color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<p>This outputs:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wcl2xedjk<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default slot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span></code></pre>
<p>and aggregates the following CSS to <a href="https://www.11ty.dev/docs/languages/webc/#asset-bundling">the bundle</a>:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.wcl2xedjk</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">}</span><br><span class="token selector">.wcl2xedjk:defined</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>rebeccapurple<span class="token punctuation">}</span></code></pre>
</details>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><em><strong>CSS bundling opinion alert</strong>:</em> Some folks recommend using Declarative Shadow DOM for component style encapsulation. This is a great method! It has 2 major drawbacks:<br>
<br>
1. The progressive enhancement story requires <a href="https://caniuse.com/declarative-shadow-dom">ubiquitous browser support</a> before using it for content in the critical rendering path.<br>
2. It requires <code><style></code> duplication in each instance of the component.<br>
<br>
Just be aware of these tradeoffs and note that you can use both methods in WebC!<br>
</div></div>
<h4 id="webcscopedmy-prefix" tabindex="-1"><code>webc:scoped="my-prefix"</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcscopedmy-prefix">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can also specify an attribute value to <code>webc:scoped</code> to hard code your own component prefix (e.g. <code><style webc:scoped="my-prefix"></code>). This allows the CSS to look a bit more friendly and readable. We will automatically check for duplicate values in your component tree and throw an error if collisions occur.</p>
<h3 id="using-javascript-to-setup-your-component" tabindex="-1">Using JavaScript to Setup your Component <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#using-javascript-to-setup-your-component">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>You can now also use <code><script webc:setup></code> to run arbitrary JavaScript and provide data and markup to your component. Any top level variables declared here are available in your component as local data.</p>
<p>This is similar to using <a href="https://www.11ty.dev/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter">JavaScript as a custom Eleventy Front Matter type</a> although data in <code>webc:setup</code> is scoped to the component and <em>does not</em> flow back up in the Data Cascade.</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br><span class="token keyword">const</span> myHtml <span class="token operator">=</span> <span class="token string">"<my-webc-component></my-webc-component>"</span><span class="token punctuation">;</span><br><br><span class="token keyword">function</span> <span class="token function">alwaysBlue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token string">"blue"</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token comment"><!-- @raw does not reprocess as WebC --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alwaysBlue()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Works with <code>var</code>, <code>let</code>, <code>const</code>, <code>function</code>, <code>Array</code> and <code>Object</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a>.</p>
<ul>
<li>Uses the <a href="https://github.com/zachleat/node-retrieve-globals/"><code>node-retrieve-globals</code> package</a>.</li>
</ul>
<h3 id="using-template-syntax-to-generate-content" tabindex="-1">Using Template Syntax to Generate Content <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#using-template-syntax-to-generate-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The <a href="https://github.com/11ty/webc#custom-transforms">Custom Transforms feature</a> (e.g. <code>webc:type</code>) in the Eleventy WebC plugin has been wired up to the <a href="https://www.11ty.dev/docs/plugins/render/">Eleventy Render plugin</a> to allow you to use existing Eleventy template syntax inside of WebC.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that the <code>webc:type="11ty"</code> feature is exclusive to the <strong>Eleventy</strong> WebC plugin and is not available in non-Eleventy independent WebC.</div></div>
<p>Use <code>webc:type="11ty"</code> with the <code>11ty:type</code> attribute to specify a <a href="https://www.11ty.dev/docs/plugins/render/#rendertemplate">valid template syntax</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-page.webc</div>
<pre class="language-liquid"><code class="language-liquid">---<br>frontmatterdata: "Hello from Front Matter"<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11ty<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">11ty:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>liquid,md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> t <span class="token operator">=</span> <span class="token string">"Liquid in WebC"</span> <span class="token delimiter punctuation">%}</span></span><br>## <span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> t <span class="token delimiter punctuation">}}</span></span><br><br>_<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> frontmatterdata <span class="token delimiter punctuation">}}</span></span>_<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>You have full access to the data cascade here (note <code>frontmatterdata</code> is <a href="https://www.11ty.dev/docs/languages/webc/#front-matter">set in front matter</a> above).</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span>Content returned from custom transforms on <code><template></code> (or <code>webc:is="template"</code>) nodes will be processed as WebC—return any WebC content here!</li>
</ul>
<h3 id="using-javascript-to-generate-content" tabindex="-1">Using JavaScript to Generate Content <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#using-javascript-to-generate-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can also transform individual element content using <code>webc:type</code>. In addition to <code>webc:type="11ty"</code>, there are three more bundled types:</p>
<ol>
<li><code>webc:type="js"</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span></li>
<li><code>webc:type="render"</code> (superceded by <code>webc:type="js"</code>)</li>
<li><code>webc:type="css:scoped"</code> (internal for <code>webc:scoped</code>—but overridable!)</li>
</ol>
<h4 id="javascript-render-functions-webctypejs-and-webctyperender" tabindex="-1">JavaScript Render Functions: <code>webc:type="js"</code> and <code>webc:type="render"</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#javascript-render-functions-webctypejs-and-webctyperender">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span> Run any arbitrary server JavaScript in WebC. Outputs the result of the very last statement executed in the script. Async-friendly (return a promise and we’ll resolve it).</p>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-image.jpeg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>An excited Zach is trying to finish this documentation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/img.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br><span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>alt<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"oh no you didn’t"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><img src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" alt="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>alt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<details>
<summary>Expand to see this example with <code>webc:type="render"</code></summary>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>render<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>alt<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"oh no you didn’t"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token comment">// Free idea: use the Eleventy Image plugin to return optimized markup</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><img src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" alt="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>alt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
</details>
<p>Or use a JavaScript render function to generate some CSS:</p>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>add-banner-to-css<span class="token punctuation">"</span></span> <span class="token attr-name">@license</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MIT licensed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br><span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>components/add-banner-to-css.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>override<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/* </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>license<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> */</span><span class="token template-punctuation string">`</span></span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<details>
<summary>Expand to see this example with <code>webc:type="render"</code></summary>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>override<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>render<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/* </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>license<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> */</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
</details>
<details>
<summary>Expand to see another example of a more complex conditional using <code>webc:type="js"</code></summary>
<p>Note that you can also use <code>webc:if</code>!</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br><span class="token keyword">if</span><span class="token punctuation">(</span>alt<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><img src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" alt="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>alt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token template-punctuation string">`</span></span><br><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><br> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>src<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Your image didn’t have an alt so you get this link instead.</a></span><span class="token template-punctuation string">`</span></span><br><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
</details>
<p>Bonus tips:</p>
<ul>
<li>You can use <code>webc:scoped webc:is="style" webc:type="js"</code> (or <code>webc:type="render"</code>) to generate scoped CSS using JavaScript! Read more at <a href="https://www.11ty.dev/docs/languages/webc/#webcscoped"><code>webc:scoped</code></a>.</li>
<li>You have access to the component attributes and props in the render function (which is covered in another section!).</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>Using <code>webc:type="js"</code> has an implied <code>webc:is="template"</code> to return content that will be reprocessed as WebC (HTML). You can override this with your own <code>webc:is</code> attribute to generate a different tag (e.g. <code>webc:is="script"</code> or <code>webc:is="style"</code>).</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>Using <code>webc:type="js"</code> has an implied <code>webc:nokeep</code> to skip outputting the outer node. You can add <code>webc:keep</code> to override this behavior.</li>
</ul>
<h4 id="extra-data-for-javascript-render-functions" tabindex="-1">Extra data for JavaScript Render Functions <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#extra-data-for-javascript-render-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><code>webc.attributes</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span> an object literal representing the current element’s attributes.</li>
<li><code>webc.renderAttributes</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span> a method to render <em>public</em> attributes to a string.</li>
<li><code>webc.filterPublicAttributes</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.10.1">Added in @11ty/webc@0.10.1</span> a method to filter <code>webc.attributes</code>, returning an object with only <em>public</em> attributes. Usage: <code>webc.filterPublicAttributes(webc.attributes)</code></li>
<li><code>webc.escapeText</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.10.1">Added in @11ty/webc@0.10.1</span> encodes all characters that have to be escaped in HTML text (via the <a href="https://github.com/fb55/entities/blob/b6cd547c8088b55a18b2ef449bc9dc8f9c294f0c/src/escape.ts#L126"><code>entities</code> package</a>)</li>
<li><code>webc.escapeAttribute</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.10.1">Added in @11ty/webc@0.10.1</span> encodes all characters that have to be escaped in HTML attributes (via the <a href="https://github.com/fb55/entities/blob/b6cd547c8088b55a18b2ef449bc9dc8f9c294f0c/src/escape.ts#L111"><code>entities</code> package</a>)</li>
</ul>
<p>Read more at <a href="https://github.com/11ty/webc/issues/104">Issue #104</a>.</p>
<details>
<summary>Expand to see an <code>img</code> component example</summary>
<p>One might imagine an <code><img></code> component definition that merges and re-uses all host component attributes correctly like this:</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/img.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>root</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>override<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><img </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>webc<span class="token punctuation">.</span><span class="token function">renderAttributes</span><span class="token punctuation">(</span>webc<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">></span><span class="token template-punctuation string">`</span></span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
</details>
<h3 id="webcraw" tabindex="-1"><code>webc:raw</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcraw">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use <code>webc:raw</code> to opt-out of WebC template processing for all child content of the current node. Notably, attributes on the current node will be processed. This works well with <code><template></code>!</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>raw</span><span class="token punctuation">></span></span><br>Leave me out of this.<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br><span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>Related: <a href="https://www.11ty.dev/docs/languages/webc/#@raw"><code>@raw</code> property</a></li>
</ul>
<h3 id="webcignore" tabindex="-1"><code>webc:ignore</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#webcignore">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>Use <code>webc:ignore</code> to completely ignore a node and not process or output anything to do with it. Useful for server-side comments or documentation on a component.</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name"><span class="token namespace">webc:</span>ignore</span><span class="token punctuation">></span></span><br>Here’s how you might use this component:<br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span>Nothing in here will be processed<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<h3 id="server-only-comments" tabindex="-1">Server-only comments <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#server-only-comments">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.10.0">Added in @11ty/webc@0.10.0</span></p>
<p>Instead of an HTML comment that will show up in rendered output, you can add one or more dashes to the beginning/end to tell WebC to strip this from the output. Great for server-side comments.</p>
<div class="codetitle codetitle-left"><b>Filename </b>components/my-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token comment"><!--- WebC will remove this ---></span><br><span class="token comment"><!-- This will *not* be removed and is rendered to the output --></span><br><span class="token comment"><!------- WebC will remove this, too -------></span></code></pre>
<h3 id="custom-transforms" tabindex="-1">Custom Transforms <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#custom-transforms">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This plugin provides a few transforms out of the box: <code>webc:type="js"</code>, <code>webc:type="render"</code>, <code>webc:type="css:scoped"</code>, and <code>webc:type="11ty"</code>.</p>
<p>However, adding your own <a href="https://github.com/11ty/webc#custom-transforms"><code>webc:type</code> Custom Transform</a> <strong>directly</strong> to WebC is not yet available in the Eleventy WebC plugin! If this is something folks would like to see added, <a href="https://fosstodon.org/@eleventy">please let us know</a>!</p>
<p>Do note that you <strong>can</strong> <a href="https://www.11ty.dev/docs/languages/custom/">add your own custom template engine</a> which would be available via <code>webc:type="11ty"</code> (e.g. <code><style webc:type="11ty" 11ty:type="sass"></code>).</p>
<h3 id="helper-functions" tabindex="-1">Helper Functions <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#helper-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>WebC <a href="https://github.com/11ty/webc#helper-functions">Helpers</a> are JavaScript functions available in dynamic attributes, <code>@html</code>, <code>@raw</code>, and render functions.</p>
<h4 id="eleventy-provided-helpers" tabindex="-1">Eleventy-provided Helpers <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#eleventy-provided-helpers">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/eleventy-plugin-webc@0.5.0">Added in @11ty/eleventy-plugin-webc@0.5.0</span>Included with Eleventy WebC, <a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript template functions</a> and <a href="https://www.11ty.dev/docs/filters/#universal-filters">Universal Filters</a> are provided automatically as WebC Helpers.</p>
<p>This includes <a href="https://www.11ty.dev/docs/filters/#eleventy-provided-universal-filters"><code>url</code>, <code>slugify</code>, <code>log</code> and others</a>!</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- Use the Eleventy provided `url` universal filter --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url('/local-path/')<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<h4 id="supply-your-own-helper" tabindex="-1">Supply your own Helper <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#supply-your-own-helper">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// via Universal Filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"alwaysRed"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">"Red"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// or via JavaScript Template Function directly</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"alwaysBlue"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">"Blue"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Don’t forget to add the WebC plugin in your config file too!</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alwaysRed()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">@html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alwaysBlue()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- renders as: --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Red<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Blue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="subtleties-and-limitations" tabindex="-1">Subtleties and Limitations <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#subtleties-and-limitations">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="void-elements" tabindex="-1">Void elements <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#void-elements">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Custom elements (per specification) are not supported as void elements: they require both a starting and ending tag.</p>
<p>Practically speaking, this means a WebC component can not be self-closing. You can workaround this limitation using <a href="https://www.11ty.dev/docs/languages/webc/#webcis"><code>webc:is</code></a> (e.g. <code><img webc:is="my-component"></code>).</p>
<h4 id="components" tabindex="-1"><code><head></code> Components <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#components">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>There are a few wrinkles when using an HTML parser with custom elements. Notably, the parser tries to force custom element children in the <code><head></code> over to the <code><body></code>. To workaround this limitation, use <a href="https://www.11ty.dev/docs/languages/webc/#webcis"><code>webc:is</code></a>.</p>
<details>
<summary>Expand for a few example workarounds</summary>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-custom-head<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- this is slot content, yes you can use named slots here too --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- <my-custom-head> is not allowed here but<br> <meta webc:is="my-custom-head> is --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-custom-head<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span> <span class="token attr-name"><span class="token namespace">webc:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-custom-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
</details>
<h4 id="rendering-modes" tabindex="-1">Rendering Modes <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#rendering-modes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>There are two different rendering modes in Eleventy: <code>page</code> and <code>component</code>. We attempt to guess the rendering mode that you’d like based on the markup you supply. The <code>page</code> rendering mode is for rendering full HTML pages. The <code>component</code> rendering mode is for fragments of HTML. Most of the time you won’t need to worry about this distinction but it is included in the documentation for completeness.</p>
<ul>
<li><code>page</code> is used when the markup starts with <code><!doctype</code> (or <code><!DOCTYPE</code>) or <code><html</code> (WebC forces no-quirks parsing).</li>
<li><code>component</code> is used otherwise.</li>
</ul>
<h4 id="differences-from-html-parsing" tabindex="-1">Differences from HTML parsing <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#differences-from-html-parsing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.0">Added in @11ty/webc@0.9.0</span>WebC processes content inside of both <code><template></code> and <code><noscript></code> tags. The HTML parser treats these as plaintext.</p>
<h2 id="eleventy-+-webc-features" tabindex="-1">Eleventy + WebC Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#eleventy-+-webc-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="front-matter" tabindex="-1">Front Matter <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#front-matter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>WebC in Eleventy works automatically with standard Eleventy conventions for <a href="https://www.11ty.dev/docs/data-frontmatter/">front matter</a> (though front matter in Eleventy is <em>optional</em>).</p>
<div class="codetitle codetitle-left"><b>Filename </b>with-front-matter.webc</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"my-layout.webc"</span><br><span class="token punctuation">---</span><br>WebC <span class="token important">*is*</span> HTML.</code></pre>
<details>
<summary>Expand to see an example <code>my-layout.webc</code></summary>
<p>The above example assumes the existence of <code>_includes/my-layout.webc</code> (an <a href="https://www.11ty.dev/docs/layouts/">Eleventy layout</a>).</p>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/my-layout.webc</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>Read more about the WebC properties: <a href="https://www.11ty.dev/docs/languages/webc/#@raw"><code>@raw</code></a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span> and <a href="https://www.11ty.dev/docs/languages/webc/#@html"><code>@html</code></a>.</li>
</ul>
<!-- * <span data-pagefind-ignore class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span>`this.` is no longer required in `@html` or `@raw` (e.g. `this.content`) when referencing helpers/data/attributes/property values. -->
</details>
<p><em>Notable note</em>: front matter (per standard Eleventy conventions) is supported in page-level templates only (<code>.webc</code> files in your input directory) and not in components (see below).</p>
<h3 id="defining-components" tabindex="-1">Defining Components <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#defining-components">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Components are the <span aria-hidden="true" class="emoji">✨</span>magic<span aria-hidden="true" class="emoji">✨</span> of WebC and there are a few ways to define components in WebC:</p>
<ol>
<li>Use global no-import components specified in your config file.</li>
<li>Specify a glob of no-import components at a directory or template level in the data cascade.</li>
<li>You can use <a href="https://www.11ty.dev/docs/languages/webc/#webcimport"><code>webc:import</code></a> inside of your components to import another component directly.</li>
</ol>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Notably, WebC components can have any valid HTML tag name and are not restricted to the same naming limitations as custom elements (which require a dash in the name).
</div></div>
<h4 id="global-no-import-components" tabindex="-1">Global no-import Components <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#global-no-import-components">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Use the <code>components</code> property in the options passed to <code>addPlugin</code> in your Eleventy configuration file to specify project-wide WebC component files available for use in any page.</p>
<p>We accept:</p>
<ul>
<li>String (file path or glob)</li>
<li>Array (of file paths or globs) <a href="https://github.com/11ty/eleventy-plugin-webc/releases/tag/v0.9.2"><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/eleventy-plugin-webc@0.9.2">Added in @11ty/eleventy-plugin-webc@0.9.2</span></a></li>
<li><a href="https://www.11ty.dev/docs/languages/webc/#webcimport"><code>npm:</code> prefix aliases</a> <a href="https://github.com/11ty/eleventy-plugin-webc/releases/tag/v0.9.2"><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/eleventy-plugin-webc@0.9.2">Added in @11ty/eleventy-plugin-webc@0.9.2</span></a></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginWebc <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginWebc<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// Glob to find no-import global components</span><br> <span class="token comment">// This path is relative to the project-root!</span><br> <span class="token comment">// The default value is shown:</span><br> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">"_components/**/*.webc"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// or an Array (Eleventy WebC v0.9.2+)</span><br> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"_components/**/*.webc"</span><span class="token punctuation">,</span><br> <span class="token string">"npm:@11ty/is-land/*.webc"</span><br> <span class="token string">"npm:@11ty/eleventy-plugin-syntaxhighlight/*.webc"</span><br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Notably, the path for <code>components</code> is relative to your project root (<strong>not</strong> your <a href="https://www.11ty.dev/docs/config/#input-directory">project’s <code>input</code> directory</a>).</p>
<p>The file names of components found in the glob determine the global tag name used in your project (e.g. <code>_components/my-component.webc</code> will give you access to <code><my-component></code>).</p>
<h4 id="declaring-components-in-front-matter" tabindex="-1">Declaring Components in Front Matter <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#declaring-components-in-front-matter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can also use and configure specific components in front matter (or, via any part of the data cascade—scoped to a folder or a template) by assigning a glob (or array of globs) to the property at <code>webc.components</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-directory/my-page.webc</div>
<pre class="language-html"><code class="language-html">---<br>layout: "my-layout.webc"<br>webc:<br> components: "./webc/*.webc"<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-webc-component</span><span class="token punctuation">></span></span>WebC *is* HTML.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-webc-component</span><span class="token punctuation">></span></span></code></pre>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><p>By default these paths are relative to the template file. If you’re setting this in the data cascade in a directory data file that will apply multiple child folders deep, it might be better to:</p>
<ol>
<li>Use the global no-import components option.</li>
<li>Use <code>~/</code> as a prefix (e.g. <code>~/my-directory/webc/*.webc</code>) to alias to the project’s root directory.</li>
</ol>
</div></div>
<h3 id="official-webc-components" tabindex="-1">Official WebC Components <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#official-webc-components">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The following plugins offer official WebC components for use in your projects:</p>
<ul>
<li><code>@11ty/is-land</code> supplies <code><is-land></code>
<ul>
<li>Example: <code><is-land webc:import="npm:@11ty/is-land"></code></li>
<li>Read more at <a href="https://www.11ty.dev/docs/languages/webc/#use-with-is-land">Use with <code>is-land</code></a></li>
</ul>
</li>
<li><code>@11ty/eleventy-plugin-syntaxhighlight</code> supplies <code><syntax-highlight></code>
<ul>
<li>Example: <code><syntax-highlight language="js" webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight"></code></li>
<li>Read more at <a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#syntax-highlight-source-code">Syntax Highlighting Plugin</a></li>
</ul>
</li>
<li><code>@11ty/eleventy-img</code> supplies <code><eleventy-image></code>
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Image v3.1.0">Added in Image v3.1.0</span></li>
<li>Example: <code><img webc:is="eleventy-image" webc:import="npm:@11ty/eleventy-img"></code></li>
<li>Read more at <a href="https://www.11ty.dev/docs/plugins/image/#webc">the Image utility</a>.</li>
</ul>
</li>
</ul>
<h3 id="css-and-js-(bundler-mode)" tabindex="-1">CSS and JS (Bundler mode) <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Eleventy WebC will bundle any specific page’s assets (CSS and JS used by components on the page). These are automatically rolled up when a component uses <code><script></code>, <code><script src></code>, <code><style></code>, or <code><link rel="stylesheet"></code>. You can use this to implement component-driven Critical CSS.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note on <strong>Declarative Shadow DOM</strong>: elements inside of <a href="https://web.dev/declarative-shadow-dom/">declarative shadow root</a> template (<code><template shadowrootmode></code> or the deprecated <code><template shadowroot></code>) are left as is and <strong>not bundled</strong>.</div></div>
<div class="codetitle codetitle-left"><b>Filename </b>_components/my-webc-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* This is component CSS */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token comment">/* This is component JS */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- Local file references work too --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-file.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-file.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>As shown above this also includes <code><link rel="stylesheet"></code> and <code><script src></code> when the URLs point to files on the file system (<a href="https://github.com/11ty/webc/issues/15">remote URL sources are not yet supported</a>).</p>
<p>You can opt-out of bundling on a per-element basis <a href="https://www.11ty.dev/docs/languages/webc/#webckeep">using <code>webc:keep</code></a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/layout.webc</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br><br> <span class="token comment"><!-- inline bundles --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundle('css')<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundle('js')<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><br> <span class="token comment"><!-- or write your bundle to a file --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundleFileUrl('css')<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundleFileUrl('js')<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/eleventy-plugin-webc@0.9.0">Added in @11ty/eleventy-plugin-webc@0.9.0</span>Eleventy WebC uses <a href="https://github.com/11ty/eleventy-plugin-bundle/#use-with-webc"><code>eleventy-plugin-bundle</code></a> behind the scenes to implement bundling. <code>getBundle('css')</code> and <code>getBundle('js')</code> can now be used instead of <code>getCss(page.url)</code> and <code>getJs(page.url)</code> respectively.</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.8.0">Added in @11ty/webc@0.8.0</span><code>webc:keep</code> is required on <code><style></code> and <code><script></code> in your layout files to prevent re-bundling the bundles.</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.8.0">Added in @11ty/webc@0.8.0</span>The <code>getCss</code> and <code>getJs</code> helpers are now available to all WebC templates without restriction. Previous versions required them to be used in an <em>Eleventy Layout</em> file.</li>
<li><code>@raw</code> was <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.7.1">Added in @11ty/webc@0.7.1</span>. Previous versions can use <code>webc:raw @html</code>.</li>
</ul>
<!-- * <span data-pagefind-ignore class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span>`this.` is no longer required in `@html` or `@raw` (e.g. `this.getCss`/`this.page.url`) when referencing helpers/data/attributes/property values. -->
<h4 id="bundle-code-ordering" tabindex="-1">Bundle Code Ordering <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#bundle-code-ordering">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>The order of the code in these bundles is determined by the dependency order of the components, from most specific to least specific!</p>
<details>
<summary>Expand to see an example</summary>
<p>Say we have an <code>index.webc</code> page that uses a <code>header.webc</code> component.</p>
<div class="codetitle codetitle-left"><b>Filename </b>index.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* index.webc */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>_components/header.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* header.webc */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<p>The CSS bundle will look like:</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* header.webc */</span><br><span class="token comment">/* index.webc */</span></code></pre>
</details>
<h4 id="access-bundles-in-other-template-engines" tabindex="-1">Access Bundles in other Template Engines <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#access-bundles-in-other-template-engines">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can access these bundles in other templates types too (<code>.njk</code>, <code>.liquid</code>, etc.).</p>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/eleventy-plugin-webc@0.9.0">Added in @11ty/eleventy-plugin-webc@0.9.0</span>Eleventy WebC uses <a href="https://github.com/11ty/eleventy-plugin-bundle/#use-with-webc"><code>eleventy-plugin-bundle</code></a> behind the scenes to implement bundling. This plugin provides <a href="https://github.com/11ty/eleventy-plugin-bundle/#render-bundle-code"><code>getBundle</code></a> and <a href="https://github.com/11ty/eleventy-plugin-bundle/#write-a-bundle-to-a-file"><code>getBundleFileUrl</code></a> universal shortcodes for use in any template type (including WebC as shown above).</p>
<details>
<summary><em>WebC v0.8.0 and older:</em> Check out the deprecated (but still in place for backwards compatibility) <code>webcGetCss</code> and <code>webcGetJs</code> universal filters for bundle output.</summary>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/layout.njk</div>
<pre class="language-njk"><code class="language-njk"><span class="token operator"><</span><span class="token variable">style</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">|</span> <span class="token variable">webcGetCss</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">style</span><span class="token operator">></span><br><span class="token operator"><</span><span class="token variable">script</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">|</span> <span class="token variable">webcGetJs</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">script</span><span class="token operator">></span><br><span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span> <span class="token variable">write</span> <span class="token variable">to</span> <span class="token variable">a</span> <span class="token variable">file</span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span><br><span class="token operator"><</span><span class="token variable">link</span> <span class="token variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{% getBundleFileUrl "</span><span class="token variable">css</span><span class="token string">" %}"</span><span class="token operator">></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/layout.liquid</div>
<pre class="language-njk"><code class="language-njk"><span class="token operator"><</span><span class="token variable">style</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">|</span> <span class="token variable">webcGetCss</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">style</span><span class="token operator">></span><br><span class="token operator"><</span><span class="token variable">script</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">|</span> <span class="token variable">webcGetJs</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">script</span><span class="token operator">></span></code></pre>
</details>
<h3 id="asset-bucketing" tabindex="-1">Asset bucketing <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#asset-bucketing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>There is an additional layer of bundling here that you can use that we call Bucketing. Components can use <code>webc:bucket</code> to output to any arbitrary bucket name.</p>
<p>In this component, we have component code that outputs to two separate buckets:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_components/my-webc-component.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* This CSS is put into the default bucket */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token comment">/* This JS is put into the default bucket */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name"><span class="token namespace">webc:</span>bucket</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* This CSS is put into the `defer` bucket */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name"><span class="token namespace">webc:</span>bucket</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token comment">/* This JS is put into the `defer` bucket */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>When <code><my-webc-component></code> is used on a page, it will roll the assets to the page-specific bucket bundles for CSS and JavaScript.</p>
<p>Then you can output those bucket bundles anywhere on your page like this (here we’re using an Eleventy layout file):</p>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/layout.webc</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebC Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- Default bucket --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundle('css')<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundle('js')<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>nokeep</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br><br> <span class="token comment"><!-- `defer` bucket --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundle('css', 'defer')<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">@raw</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getBundle('js', 'defer')<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.8.0">Added in @11ty/webc@0.8.0</span><code>webc:keep</code> is required on <code><style></code> and <code><script></code> in your layout files to prevent re-bundling the bundles.</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.1">Added in @11ty/webc@0.9.1</span><code>:webc:bucket</code> (dynamic attribute) is supported to set this value via JavaScript. <a href="https://github.com/11ty/webc/issues/120">#120</a></li>
</ul>
<!-- * <span data-pagefind-ignore class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.5.0">Added in @11ty/webc@0.5.0</span>`this.` is no longer required in `@html` or `@raw` (e.g. `this.getCss`/`this.page.url`) when referencing helpers/data/attributes/property values. -->
<h4 id="cascading-asset-buckets" tabindex="-1">Cascading Asset Buckets <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#cascading-asset-buckets">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><a href="https://github.com/11ty/webc/releases/tag/v0.9.1"><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="@11ty/webc@0.9.1">Added in @11ty/webc@0.9.1</span></a> Additionally <code>webc:bucket</code> can be added to any tag and will cascade to all child content.</p>
<p>Consider this WebC page:</p>
<div class="codetitle codetitle-left"><b>Filename </b>index.webc</div>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- has an implied webc:bucket="default" --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>bucket</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- each of these have webc:bucket="defer" --></span><br> <span class="token comment"><!-- (including any nested components inside, too) --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footnote-references</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footnote-references</span><span class="token punctuation">></span></span><br><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-footer</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-footer</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Setting <code>webc:bucket</code> now cascades to all of the children as if they had <code>webc:bucket="defer"</code> assigned to each of them individually. All assets used in those components will now be rolled up into the <code>defer</code> bucket.</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="fzo_S9UiYYk" playlabel="Play: Learn how we used webc:bucket to create Critical CSS and JS bundles for 11ty.dev" style="background-image:url('https://i.ytimg.com/vi/fzo_S9UiYYk/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=fzo_S9UiYYk" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Learn how we used webc:bucket to create Critical CSS and JS bundles for 11ty.dev</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=fzo_S9UiYYk">Learn how we used webc:bucket to create Critical CSS and JS bundles for 11ty.dev</a></is-land></div></div>
<h5>Conflicts and hoisting</h5>
<p>What happens when a component is used in multiple distinct buckets?</p>
<div class="codetitle codetitle-left"><b>Filename </b>index.webc</div>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- has an implied webc:bucket="default" --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">webc:</span>bucket</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>When duplicates and conflicts occur, WebC will hoist the component code to find the nearest shared bucket for you. In the above example, the CSS and JS for <code><my-component></code> will be loaded in the <code>default</code> bucket and only in the <code>default</code> bucket.</p>
<h3 id="use-with-is-land" tabindex="-1">Use with <code>is-land</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#use-with-is-land">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can also use this out of the box with Eleventy’s <a href="https://www.11ty.dev/docs/plugins/partial-hydration/"><code>is-land</code> component for web component hydration</a>.</p>
<p>At the component level, components can declare their own is-land loading conditions.</p>
<div class="codetitle codetitle-left"><b>Filename </b>index.webc</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name"><span class="token namespace">webc:</span>import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>npm:@11ty/is-land<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">data-island</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- CSS --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token comment">/* This CSS applies on:visible */</span><br> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>arbitrary.css<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><br><br> <span class="token comment"><!-- JS --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This JavaScript runs on:visible"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>arbitrary.js<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>keep</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h2 id="from-the-community" tabindex="-1">From the Community <a class="direct-link" href="https://www.11ty.dev/docs/languages/webc/#from-the-community">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>×31 resources courtesy of <strong><a href="https://11tybundle.dev/">11tybundle.dev</a></strong> curated by <a href="https://www.bobmonsour.com/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.bobmonsour.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.bobmonsour.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Bob Monsour</a></p>
<ul class="list-bare">
<li><a href="https://www.zachleat.com/web/transcripts/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Ftranscripts%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/transcripts/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Elevating Video Transcripts as Searchable Content</a> — <em>Zach Leatherman (2024)</em></li>
<li><a href="https://www.zachleat.com/web/good-bad-web-components/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Fgood-bad-web-components%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/good-bad-web-components/" class="avatar avatar-indieweb" loading="lazy" decoding="async">The Good, the Bad, the Web Components</a> — <em>Zach Leatherman (2024)</em></li>
<li><a href="https://sandroroth.com/blog/migrationl-to-eleventy/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsandroroth.com%2Fblog%2Fmigrationl-to-eleventy%2F/" width="150" height="150" alt="IndieWeb Avatar for https://sandroroth.com/blog/migrationl-to-eleventy/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Migrating my site from NextJS to Eleventy</a> — <em>Sandro Roth (2023)</em></li>
<li><a href="https://blog.r0b.io/post/eleventy-webc-in-a-nutshell/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fblog.r0b.io%2Fpost%2Feleventy-webc-in-a-nutshell%2F/" width="150" height="150" alt="IndieWeb Avatar for https://blog.r0b.io/post/eleventy-webc-in-a-nutshell/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy WebC in a nutshell</a> — <em>Rob Anderson (2023)</em></li>
<li><a href="https://dryan.com/articles/11ty-tasks-vs-code/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdryan.com%2Farticles%2F11ty-tasks-vs-code%2F/" width="150" height="150" alt="IndieWeb Avatar for https://dryan.com/articles/11ty-tasks-vs-code/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Automating Eleventy Server with Visual Studio Code Tasks</a> — <em>Dan Ryan (2023)</em></li>
</ul>
<details>
<summary>Expand to see 26 more resources.</summary>
<ul class="list-bare">
<li><a href="https://chringel.dev/blog/2023/11/11ty-quick-tip-minify-inline-javascript-in-webc/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fchringel.dev%2Fblog%2F2023%2F11%2F11ty-quick-tip-minify-inline-javascript-in-webc%2F/" width="150" height="150" alt="IndieWeb Avatar for https://chringel.dev/blog/2023/11/11ty-quick-tip-minify-inline-javascript-in-webc/" class="avatar avatar-indieweb" loading="lazy" decoding="async">11ty Quick Tip: Minify inline JavaScript in WebC</a> — <em>Christian Engel (2023)</em></li>
<li><a href="https://lostinbrittany.dev/under-the-hood/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flostinbrittany.dev%2Funder-the-hood%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lostinbrittany.dev/under-the-hood/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Under the hood</a> — <em>Horacio Gonzalez (2023)</em></li>
<li><a href="https://dev.to/graphqleditor/eleventy-components-woes-3nap"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdev.to%2Fgraphqleditor%2Feleventy-components-woes-3nap/" width="150" height="150" alt="IndieWeb Avatar for https://dev.to/graphqleditor/eleventy-components-woes-3nap" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy components woes</a> — <em>Tomek Poniatowicz (2023)</em></li>
<li><a href="https://stevenwoodson.com/blog/eleventy-style-guide-generator-with-webc-component-support/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fstevenwoodson.com%2Fblog%2Feleventy-style-guide-generator-with-webc-component-support%2F/" width="150" height="150" alt="IndieWeb Avatar for https://stevenwoodson.com/blog/eleventy-style-guide-generator-with-webc-component-support/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy Style Guide Generator with WebC Component Support</a> — <em>Steven Woodson (2023)</em></li>
<li><a href="https://bennypowers.dev/posts/webc-dsd-slot-workaround/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbennypowers.dev%2Fposts%2Fwebc-dsd-slot-workaround%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bennypowers.dev/posts/webc-dsd-slot-workaround/" class="avatar avatar-indieweb" loading="lazy" decoding="async">WebC Declarative Shadow DOM Slot Workarounds</a> — <em>Benny Powers (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/06/19/creating-bootstrap-webc-components-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F06%2F19%2Fcreating-bootstrap-webc-components-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/06/19/creating-bootstrap-webc-components-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Creating Bootstrap WebC Components in Eleventy</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://aaadaaam.com/notes/extending-11ty-page-variable/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Faaadaaam.com%2Fnotes%2Fextending-11ty-page-variable%2F/" width="150" height="150" alt="IndieWeb Avatar for https://aaadaaam.com/notes/extending-11ty-page-variable/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Extending 11ty’s page variable</a> — <em>Adam Stoddard (2023)</em></li>
<li><a href="https://bennypowers.dev/posts/webc-impressions/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbennypowers.dev%2Fposts%2Fwebc-impressions%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bennypowers.dev/posts/webc-impressions/" class="avatar avatar-indieweb" loading="lazy" decoding="async">WebC First Impressions</a> — <em>Benny Powers (2023)</em></li>
<li><a href="https://github.com/solution-loisir/webc-starter-kit"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fsolution-loisir%2Fwebc-starter-kit/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/solution-loisir/webc-starter-kit" class="avatar avatar-indieweb" loading="lazy" decoding="async">webc-starter-kit (Github repo)</a> — <em>Mathieu Huot (2023)</em></li>
<li><a href="https://www.zachleat.com/web/styling-web-components/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Fstyling-web-components%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/styling-web-components/" class="avatar avatar-indieweb" loading="lazy" decoding="async">3 Methods for scoped styles in web components that work everywhere</a> — <em>Zach Leatherman (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/04/04/webc-updates-in-eleventy-looping"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F04%2F04%2Fwebc-updates-in-eleventy-looping/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/04/04/webc-updates-in-eleventy-looping" class="avatar avatar-indieweb" loading="lazy" decoding="async">WebC Updates in Eleventy - Looping</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/03/28/webc-updates-in-eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F03%2F28%2Fwebc-updates-in-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/03/28/webc-updates-in-eleventy" class="avatar avatar-indieweb" loading="lazy" decoding="async">WebC Updates in Eleventy</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://lewisdale.dev/post/using-webc-for-progressively-enhanced-ui-elements/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flewisdale.dev%2Fpost%2Fusing-webc-for-progressively-enhanced-ui-elements%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lewisdale.dev/post/using-webc-for-progressively-enhanced-ui-elements/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using WebC for progressively-enhanced UI elements</a> — <em>Lewis Dale (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=hCSmA7n7TTM"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhCSmA7n7TTM/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=hCSmA7n7TTM" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using Eleventy and WebC for Simpler, Performant Web Components - YouTube</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/02/03/using-javascript-in-a-webc-component"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F02%2F03%2Fusing-javascript-in-a-webc-component/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/02/03/using-javascript-in-a-webc-component" class="avatar avatar-indieweb" loading="lazy" decoding="async">Using JavaScript in a WebC Component</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.raymondcamden.com/2023/01/27/quick-webc-tip"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2023%2F01%2F27%2Fquick-webc-tip/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2023/01/27/quick-webc-tip" class="avatar avatar-indieweb" loading="lazy" decoding="async">Quick WebC Tip</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://www.youtube.com/watch?v=PGjvjumbWKg"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DPGjvjumbWKg/" width="150" height="150" alt="IndieWeb Avatar for https://www.youtube.com/watch?v=PGjvjumbWKg" class="avatar avatar-indieweb" loading="lazy" decoding="async">Quick Tip for Eleventy's WebC support</a> — <em>Raymond Camden (2023)</em></li>
<li><a href="https://multiline.co/mment/2022/12/importing-external-webc-components/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmultiline.co%2Fmment%2F2022%2F12%2Fimporting-external-webc-components%2F/" width="150" height="150" alt="IndieWeb Avatar for https://multiline.co/mment/2022/12/importing-external-webc-components/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Importing external components in WebC via NPM</a> — <em>Ashur Cabrera (2022)</em></li>
<li><a href="https://martinhicks.net/articles/eleventy-and-webc"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fmartinhicks.net%2Farticles%2Feleventy-and-webc/" width="150" height="150" alt="IndieWeb Avatar for https://martinhicks.net/articles/eleventy-and-webc" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy 2.0 & WebC</a> — <em>Martin Hicks (2022)</em></li>
<li><a href="https://www.constantvallee.dev/posts/exploring-webc/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.constantvallee.dev%2Fposts%2Fexploring-webc%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.constantvallee.dev/posts/exploring-webc/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Exploring WebC</a> — <em>Constant Vallee (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/11/17/building-a-youtube-embed-web-component-both-vanilla-and-webc-flavored"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F11%2F17%2Fbuilding-a-youtube-embed-web-component-both-vanilla-and-webc-flavored/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/11/17/building-a-youtube-embed-web-component-both-vanilla-and-webc-flavored" class="avatar avatar-indieweb" loading="lazy" decoding="async">Building a YouTube Embed Web Component (both vanilla and WebC flavored)</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://levimcg.com/blog/my-notes-on-eleventy-webc-components/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flevimcg.com%2Fblog%2Fmy-notes-on-eleventy-webc-components%2F/" width="150" height="150" alt="IndieWeb Avatar for https://levimcg.com/blog/my-notes-on-eleventy-webc-components/" class="avatar avatar-indieweb" loading="lazy" decoding="async">My notes on Eleventy WebC components</a> — <em>Levi McGranahan (2022)</em></li>
<li><a href="https://11ty.rocks/posts/understanding-webc-features-and-concepts/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Fposts%2Funderstanding-webc-features-and-concepts%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/posts/understanding-webc-features-and-concepts/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Understanding WebC Features and Concepts</a> — <em>Stephanie Eckles (2022)</em></li>
<li><a href="https://fuzzylogic.me/posts/webc/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ffuzzylogic.me%2Fposts%2Fwebc%2F/" width="150" height="150" alt="IndieWeb Avatar for https://fuzzylogic.me/posts/webc/" class="avatar avatar-indieweb" loading="lazy" decoding="async">WebC</a> — <em>Fuzzy Logic (2022)</em></li>
<li><a href="https://www.raymondcamden.com/2022/10/16/first-experience-building-with-eleventys-webc-plugin"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.raymondcamden.com%2F2022%2F10%2F16%2Ffirst-experience-building-with-eleventys-webc-plugin/" width="150" height="150" alt="IndieWeb Avatar for https://www.raymondcamden.com/2022/10/16/first-experience-building-with-eleventys-webc-plugin" class="avatar avatar-indieweb" loading="lazy" decoding="async">First Experience Building with Eleventy's WebC Plugin</a> — <em>Raymond Camden (2022)</em></li>
<li><a href="https://11ty.rocks/posts/introduction-webc/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty.rocks%2Fposts%2Fintroduction-webc%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty.rocks/posts/introduction-webc/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Introduction to WebC</a> — <em>Stephanie Eckles (2022)</em></li>
</ul>
</details>
Install Eleventy Globally
2023-10-28T19:27:16Z
https://www.11ty.dev/docs/global-installation/
<h1>Install Eleventy Globally</h1>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">It is <strong>not recommended</strong> to install Eleventy globally (though it does work fine).</div></div>
<p><strong>It is preferred to use <a href="https://www.11ty.dev/docs/get-started/#step-2-install-eleventy"><code>package.json</code> installation</a></strong> instead. <code>package.json</code> installation will avoid versioning issues if you come back to this project later or decide to use Eleventy on multiple projects that may need different versions.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">If you’re planning on deploying your site using a <a href="https://www.11ty.dev/docs/deployment/">service like Netlify</a> (running a build a deployment server), you <strong>must</strong> use <code>package.json</code> installation and <strong>not</strong> global installation.</div></div>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> @11ty/eleventy</code></pre>
<p>The above adds an <code>eleventy</code> command that you can use in any directory. When you run Eleventy globally, it might look like this:</p>
<div data-preprefix-cmdhomedir="">
<pre class="language-bash"><code class="language-bash"><span class="highlight-line">eleventy <span class="token parameter variable">--version</span></span><br><span class="highlight-line"><span class="token number">2.0</span>.1</span></code></pre>
</div>
Eleventy 中文文档
2023-10-28T19:27:16Z
https://www.11ty.dev/docs/local-installation/
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">This documentation has moved into the <a href="https://www.11ty.dev/docs/get-started/">Get Started</a> instructions.</div></div>
Edge
2023-10-28T19:27:16Z
https://www.11ty.dev/docs/plugins/edge/
<h1>Eleventy Edge <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.7">Added in v2.0.0</span></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/edge/#try-out-the-demos">Try out the demos </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#how-does-it-work">How does it work </a><ul><li><a href="https://www.11ty.dev/docs/plugins/edge/#1.-installation">1. Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#2.-add-to-your-configuration-file">2. Add to your configuration file </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#3.-additions-to-.gitignore">3. Additions to .gitignore </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#4.-netlify.toml">4. netlify.toml </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#5.-make-your-content-template">5. Make your content template </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#6.-run-your-local-server">6. Run your local server </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#learn-more">Learn More </a><ul><li><a href="https://www.11ty.dev/docs/plugins/edge/#always-escape-input">Always Escape Input </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#edge-shortcode-examples">edge shortcode examples </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#frequently-asked-questions">Frequently Asked Questions </a><ul><li><a href="https://www.11ty.dev/docs/plugins/edge/#limitations">Limitations </a></li><li><a href="https://www.11ty.dev/docs/plugins/edge/#how-does-it-compare-to-serverless">How does it compare to Serverless </a></li></ul></li></ul></div><p></p>
</details>
<p>A plugin to run Eleventy in an Edge Function to add dynamic content to your Eleventy sites.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">This feature is considered <strong>experimental</strong> and requires Eleventy <code>v2.0.0</code> or higher. Our first release is limited to <a href="https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/">Netlify Edge Functions</a> support only.</div></div>
<p>Eleventy Edge is an exciting new way to add dynamic content to your Eleventy templates. With a simple Eleventy shortcode you can opt-in a part of your Eleventy template to run on an Edge server, allowing your site to use dynamic, user-specific content!</p>
<p>Here are a few ideas:</p>
<ul>
<li>Any user personalized content (User accounts, premium-only content, AB testing)</li>
<li>Accessing/setting HTTP Headers (e.g. Cookies, Save-Data, Client Hints, etc)</li>
<li><a href="https://demo-eleventy-edge.netlify.app/forms/">Handling Forms</a></li>
<li>Using Geolocation information to localize content</li>
<li>A zero-clientside JavaScript <a href="https://demo-eleventy-edge.netlify.app/appearance/">Dark mode/Light mode toggle</a></li>
</ul>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="e8cx7NYlxX0" params="start=151" playlabel="Play: Eleventy Edge (Weekly №8)" style="background-image:url('https://i.ytimg.com/vi/e8cx7NYlxX0/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=e8cx7NYlxX0" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Eleventy Edge (Weekly №8)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=e8cx7NYlxX0&t=151">Eleventy Edge (Weekly №8) <code>▶2m31s</code></a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="rW_SqnvRDww" params="start=269" playlabel="Play: Using Edge to save a Template Syntax preference (Weekly №9)" style="background-image:url('https://i.ytimg.com/vi/rW_SqnvRDww/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=rW_SqnvRDww" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Using Edge to save a Template Syntax preference (Weekly №9)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=rW_SqnvRDww&t=269">Using Edge to save a Template Syntax preference (Weekly №9) <code>▶4m29s</code></a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="oCTAZumAGNc" params="start=405" playlabel="Play: Edge-powered Search (Weekly №11)" style="background-image:url('https://i.ytimg.com/vi/oCTAZumAGNc/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=oCTAZumAGNc" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Edge-powered Search (Weekly №11)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=oCTAZumAGNc&t=405">Edge-powered Search (Weekly №11) <code>▶6m45s</code></a></is-land></div></div>
<h2 id="try-out-the-demos" tabindex="-1">Try out the demos <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#try-out-the-demos">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://demo-eleventy-edge.netlify.app/">Eleventy Edge demos using Netlify’s Edge Functions</a>.
<ul>
<li>Read the <a href="https://github.com/11ty/demo-eleventy-edge"><code>demo-eleventy-edge</code> Source Code on GitHub</a></li>
</ul>
</li>
<li><a href="https://demo-edge-search--eleventy-base-blog.netlify.app/search/?q=first">Eleventy Edge search on <code>eleventy-base-blog</code></a> with <a href="https://github.com/11ty/eleventy-base-blog/compare/demo-edge-search">Source code</a></li>
<li>The template language syntax tabs on this very web site are rendered using the Edge plugin (here’s <a href="https://www.11ty.dev/docs/plugins/edge/#5.-make-your-content-template">one small example on this very page</a>). Try saving your template language syntax preference to persist in examples throughout the site. Learn more at <a href="https://github.com/11ty/11ty-website/pull/1462"><code>11ty-website/#1462</code> on GitHub</a>.</li>
</ul>
<h2 id="how-does-it-work" tabindex="-1">How does it work? <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#how-does-it-work">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>If you don’t yet have an Eleventy project, go through the <a href="https://www.11ty.dev/docs/get-started/">Get Started Guide first</a> and come back here when you’re done!</p>
<h3 id="1.-installation" tabindex="-1">1. Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#1.-installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The Eleventy Edge plugin is bundled with Eleventy, but do note that the plugin requires version <code>v2.0.0</code> or newer.</p>
<p>At time of initial launch, you will need to use Netlify CLI to run Eleventy Edge locally (<code>netlify-cli</code> version <code>10.0.0</code> or higher).</p>
<pre><code>npm install netlify-cli
</code></pre>
<h3 id="2.-add-to-your-configuration-file" tabindex="-1">2. Add to your configuration file <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#2.-add-to-your-configuration-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyEdgePlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyEdgePlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary>Expand to read about the advanced options (you probably don’t need these)</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyEdgePlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyEdgePlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// controls the shortcode name</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"edge"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Used for the default deno import URL</span><br> <span class="token literal-property property">eleventyEdgeVersion</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Version check for the Edge runtime</span><br> <span class="token literal-property property">compatibility</span><span class="token operator">:</span> <span class="token string">">=2"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// controls where the Edge Function bundles go</span><br> <span class="token literal-property property">functionsDir</span><span class="token operator">:</span> <span class="token string">"./netlify/edge-functions/"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Directory to write the import_map.json to</span><br> <span class="token comment">// Also supported: `false`</span><br> <span class="token literal-property property">importMap</span><span class="token operator">:</span> <span class="token string">"./.netlify/edge-functions/"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<p>The above plugin will automatically generate an Eleventy Edge Function file for you at: <code>./netlify/edge-functions/eleventy-edge.js</code>.</p>
<details>
<summary>Expand to see a sample Eleventy Edge Function</summary>
<p>Note that <a href="https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/">Edge Functions</a> run in Deno so they require ESM (<code>import</code> not <code>require</code>).</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> EleventyEdge<span class="token punctuation">,</span> precompiledAppData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./_generated/eleventy-edge-app.js"</span><span class="token punctuation">;</span><br><br><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">try</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> edge <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EleventyEdge</span><span class="token punctuation">(</span><span class="token string">"edge"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> request<span class="token punctuation">,</span><br> context<span class="token punctuation">,</span><br> <span class="token literal-property property">precompiled</span><span class="token operator">:</span> precompiledAppData<span class="token punctuation">,</span><br><br> <span class="token comment">// default is [], add more keys to opt-in e.g. ["appearance", "username"]</span><br> <span class="token literal-property property">cookies</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> edge<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Run some more Edge-specific configuration</span><br> <span class="token comment">// e.g. Add a sample filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"json"</span><span class="token punctuation">,</span> <span class="token parameter">obj</span> <span class="token operator">=></span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token keyword">await</span> edge<span class="token punctuation">.</span><span class="token function">handleResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"ERROR"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> e <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> context<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h4 id="read-more-about-netlifys-edge-functions" tabindex="-1">Read more about Netlify’s Edge Functions <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#read-more-about-netlifys-edge-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><a href="https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/">Netlify Docs: Edge Functions overview</a></li>
<li><a href="https://deno.com/blog/netlify-edge-functions-on-deno-deploy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdeno.com%2Fblog%2Fnetlify-edge-functions-on-deno-deploy/" width="150" height="150" alt="IndieWeb Avatar for https://deno.com/blog/netlify-edge-functions-on-deno-deploy" class="avatar avatar-indieweb" loading="lazy" decoding="async">Netlify Edge Functions on Deno Deploy</a></li>
<li><a href="https://www.netlify.com/blog/announcing-serverless-compute-with-edge-functions">Netlify Edge Functions: A new serverless runtime powered by Deno</a></li>
</ul>
<h3 id="3.-additions-to-.gitignore" tabindex="-1">3. Additions to <code>.gitignore</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#3.-additions-to-.gitignore">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-gitignore"><code class="language-gitignore"><span class="token comment"># Netlify generated stuff</span><br><span class="token entry string">.netlify<span class="token punctuation">/</span></span><br><br><span class="token comment"># Eleventy Edge Build Data files</span><br><span class="token entry string">netlify<span class="token punctuation">/</span>edge-functions<span class="token punctuation">/</span>_generated</span></code></pre>
<h3 id="4.-netlify.toml" tabindex="-1">4. <code>netlify.toml</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#4.-netlify.toml">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<details><summary>If you don’t already have a <code>netlify.toml</code>, expand this to view a sample starter.</summary>
<div class="codetitle codetitle-left"><b>Filename </b>netlify.toml</div>
<pre class="language-toml"><code class="language-toml"><span class="token punctuation">[</span><span class="token table class-name">dev</span><span class="token punctuation">]</span><br><span class="token key property">framework</span> <span class="token punctuation">=</span> <span class="token string">"#static"</span><br><span class="token key property">command</span> <span class="token punctuation">=</span> <span class="token string">"npx @11ty/eleventy --quiet --watch"</span><br><br><span class="token punctuation">[</span><span class="token table class-name">build</span><span class="token punctuation">]</span><br><span class="token key property">command</span> <span class="token punctuation">=</span> <span class="token string">"npx @11ty/eleventy"</span><br><span class="token key property">publish</span> <span class="token punctuation">=</span> <span class="token string">"_site"</span></code></pre>
</details>
<p>Add this to your <code>netlify.toml</code> file.</p>
<div class="codetitle codetitle-left"><b>Filename </b>netlify.toml</div>
<pre class="language-toml"><code class="language-toml"><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">edge_functions</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br><span class="token key property">function</span> <span class="token punctuation">=</span> <span class="token string">"eleventy-edge"</span><br><span class="token key property">path</span> <span class="token punctuation">=</span> <span class="token string">"/*"</span></code></pre>
<p><code>eleventy-edge</code> points to the file that was created above at <code>./netlify/edge-functions/eleventy-edge.js</code>. Using <code>path= "/*"</code> will run Eleventy Edge on all of the pages on your site. You can change this setting to something more granular (e.g. <code>path = "/"</code> for just the home page).</p>
<h3 id="5.-make-your-content-template" tabindex="-1">5. Make your content template <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#5.-make-your-content-template">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Here we are making a simple template file. We can use the <code>{% edge %}</code> shortcode to run the Liquid template syntax inside on the Edge server.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/edge/#edgetmpl-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgetmpl-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgetmpl-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgetmpl-hbs" role="tab">Handlebars</a>
</div>
<div id="edgetmpl-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.liquid</div>
<pre class="language-liquid"><code class="language-liquid">The content outside of the `edge` shortcode is generated with the Build.<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> edge <span class="token delimiter punctuation">%}</span></span><br>The content inside of the `edge` shortcode is generated on the Edge.<br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> eleventy <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endedge <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgetmpl-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.njk</div>
<pre class="language-jinja2"><code class="language-jinja2">The content outside of the `edge` shortcode is generated with the Build.<br><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">edge</span> <span class="token delimiter punctuation">%}</span></span><br>The content inside of the `edge` shortcode is generated on the Edge.<br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">eleventy</span> <span class="token operator">|</span> <span class="token function">dump</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endedge</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgetmpl-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The content outside of the \`edge\` shortcode is generated with the Build.<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edge</span><span class="token punctuation">(</span>`The content inside <span class="token keyword">of</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> is generated on the Edge<span class="token punctuation">.</span><br><span class="token operator"><</span>pre<span class="token operator">></span><br><span class="token punctuation">{</span><span class="token punctuation">{</span> eleventy <span class="token operator">|</span> json <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator"><</span><span class="token operator">/</span>pre<span class="token operator">></span><span class="token punctuation">,</span> <span class="token string">"liquid"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>As documented in <a href="https://www.11ty.dev/docs/plugins/edge/#limitations">Limitations</a>, we are using <code>liquid</code> here because <code>11ty.js</code> is not <em>yet</em> supported as an Edge content target.</p>
</div>
<div id="edgetmpl-hbs" role="tabpanel">
<p>The <code>edge</code> shortcode <a href="https://www.11ty.dev/docs/plugins/edge/#limitations">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>Learn more about <a href="https://www.11ty.dev/docs/plugins/edge/#edge-shortcode-examples">the <code>edge</code> shortcode</a>.</p>
<h3 id="6.-run-your-local-server" tabindex="-1">6. Run your local server <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#6.-run-your-local-server">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre><code>npx netlify dev
</code></pre>
<p>Navigation to <code>index.liquid</code> by going to <code>http://localhost:8888/</code> in your browser. (Double check your console output to make sure the port is <code>8888</code>).</p>
<h2 id="learn-more" tabindex="-1">Learn More <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#learn-more">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="always-escape-input" tabindex="-1">Always Escape Input <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#always-escape-input">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>When using any dynamic user input (via query parameters or cookies), the values here should be treated as potentially malicious user input and you must escape these if you use them in templates. The way to do this is template language specific.</p>
<ul>
<li>Liquid has both an <code>escape</code> and <code>escape_once</code> filter.</li>
<li>Nunjucks has autoescape turned on by default. If you’ve disabled it, you can use the <code>escape</code> filter.</li>
<li>Read more at <a href="https://www.11ty.dev/docs/layouts/#prevent-double-escaping-in-layouts">the Layouts documentation</a>, which lists both methods for escaped and unescaped output in template languages.</li>
</ul>
<h3 id="edge-shortcode-examples" tabindex="-1"><code>edge</code> shortcode examples <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#edge-shortcode-examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="changing-the-template-language-of-the-edge-content" tabindex="-1">Changing the Template Language of the <code>edge</code> Content <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#changing-the-template-language-of-the-edge-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>In what might feel familiar to folks that have used the <a href="https://www.11ty.dev/docs/plugins/render/">Render plugin</a>, adding an additional argument to the <code>edge</code> shortcode allows you to change the content’s template language. If no argument is specified, it uses the template syntax of the parent template.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">If you use the <code>edge</code> shortcode inside of a <a href="https://www.11ty.dev/docs/layouts/">layout file</a>, it’s best to explicitly specify the template language!</div></div>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/edge/#edgelang-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgelang-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgelang-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgelang-hbs" role="tab">Handlebars</a>
</div>
<div id="edgelang-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> edge <span class="token string">"md"</span> <span class="token delimiter punctuation">%}</span></span><br># Markdown Heading<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endedge <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgelang-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.njk</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">edge</span> <span class="token string">"md"</span> <span class="token delimiter punctuation">%}</span></span><br># Markdown Heading<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endedge</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgelang-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edge</span><span class="token punctuation">(</span><span class="token string">"# Markdown heading"</span><span class="token punctuation">,</span> <span class="token string">"md"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="edgelang-hbs" role="tabpanel">
<p>The <code>edge</code> shortcode <a href="https://www.11ty.dev/docs/plugins/edge/#limitations">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="passing-build-time-data-to-your-edge-function" tabindex="-1">Passing Build-time Data to your Edge Function <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#passing-build-time-data-to-your-edge-function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Edge content is a separate template, processed and built on the Edge. As such it has no access to your build’s data cascade. However, you can pass data in to be re-used!</p>
<p>When the build data argument is a literal (a string or number), it is mapped to <code>_</code> in the template.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedata-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedata-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedata-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedata-hbs" role="tab">Handlebars</a>
</div>
<div id="edgedata-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>name: Zach<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> edge <span class="token string">"liquid,md"</span> name <span class="token delimiter punctuation">%}</span></span><br># Markdown heading for <span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> _ <span class="token delimiter punctuation">}}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endedge <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgedata-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.njk</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>name: Zach<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">edge</span> <span class="token string">"liquid,md"</span><span class="token punctuation">,</span> <span class="token variable">name</span> <span class="token delimiter punctuation">%}</span></span><br># Markdown heading for <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">_</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endedge</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgedata-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Zach"</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edge</span><span class="token punctuation">(</span><span class="token string">"# Markdown heading for {{ _ }}"</span><span class="token punctuation">,</span> <span class="token string">"liquid,md"</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="edgedata-hbs" role="tabpanel">
<p>The <code>edge</code> shortcode <a href="https://www.11ty.dev/docs/plugins/edge/#limitations">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>When the build data argument is an object, the object properties are available as top-level globals in the template.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedataobj-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedataobj-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedataobj-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgedataobj-hbs" role="tab">Handlebars</a>
</div>
<div id="edgedataobj-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>buildData:<br> name: Zach<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> edge <span class="token string">"liquid,md"</span> buildData <span class="token delimiter punctuation">%}</span></span><br># Markdown heading for <span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> name <span class="token delimiter punctuation">}}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endedge <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgedataobj-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.njk</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>buildData:<br> name: Zach<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">edge</span> <span class="token string">"liquid,md"</span><span class="token punctuation">,</span> <span class="token variable">buildData</span> <span class="token delimiter punctuation">%}</span></span><br># Markdown heading for <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">name</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endedge</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgedataobj-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">buildData</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Zach"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edge</span><span class="token punctuation">(</span><span class="token string">"# Markdown heading for {{ name }}"</span><span class="token punctuation">,</span> <span class="token string">"liquid,md"</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>buildData<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="edgedataobj-hbs" role="tabpanel">
<p>The <code>edge</code> shortcode <a href="https://www.11ty.dev/docs/plugins/edge/#limitations">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="add-global-data-to-your-edge-function" tabindex="-1">Add Global Data to your Edge Function <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#add-global-data-to-your-edge-function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>If you open up your generated <code>netlify/edge-functions/eleventy-edge.js</code> file, you’ll notice that you are able to run your own arbitrary configuration code on Edge. This means you can run <code>eleventyConfig.addGlobalData</code> to add your own global data to the edge templates. Any data you add here will automatically be available as a global inside of any <code>{% edge %}</code> shortcodes <em>without having to pass it as an argument</em>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>netlify/edge-functions/eleventy-edge.js</div>
<pre class="language-diff-js"><code class="language-diff-js"><span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token keyword">import</span> <span class="token punctuation">{</span> EleventyEdge<span class="token punctuation">,</span> precompiledAppData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./_generated/eleventy-edge-app.js"</span><span class="token punctuation">;</span><br></span><span class="token inserted-sign inserted language-js"><span class="token prefix inserted">+</span><span class="token keyword">import</span> searchData <span class="token keyword">from</span> <span class="token string">"./_generated/search-data.js"</span><span class="token punctuation">;</span><br></span><br><span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br><span class="token prefix unchanged"> </span> <span class="token keyword">try</span> <span class="token punctuation">{</span><br><span class="token prefix unchanged"> </span> <span class="token keyword">let</span> edge <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EleventyEdge</span><span class="token punctuation">(</span><span class="token string">"edge"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br><span class="token prefix unchanged"> </span> request<span class="token punctuation">,</span><br><span class="token prefix unchanged"> </span> context<span class="token punctuation">,</span><br><span class="token prefix unchanged"> </span> <span class="token literal-property property">precompiled</span><span class="token operator">:</span> precompiledAppData<span class="token punctuation">,</span><br><span class="token prefix unchanged"> </span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></span><br><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> edge<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br></span><span class="token inserted-sign inserted language-js"><span class="token prefix inserted">+</span> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"search"</span><span class="token punctuation">,</span> searchData<span class="token punctuation">)</span><span class="token punctuation">;</span><br></span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></span><br><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> <span class="token keyword">return</span> <span class="token keyword">await</span> edge<span class="token punctuation">.</span><span class="token function">handleResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token prefix unchanged"> </span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><br><span class="token prefix unchanged"> </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"ERROR"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> e <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token prefix unchanged"> </span> <span class="token keyword">return</span> context<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token prefix unchanged"> </span> <span class="token punctuation">}</span><br><span class="token prefix unchanged"> </span><span class="token punctuation">}</span><span class="token punctuation">;</span><br></span></code></pre>
<p>Notably, the above adds a <code>search</code> global from a file we’ve created to populate search data. Now we can reference it in our templates like so:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/edge/#edgeglobaldata-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgeglobaldata-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/edge/#edgeglobaldata-js" role="tab">11ty.js</a>
</div>
<div id="edgeglobaldata-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> edge <span class="token string">"liquid"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token object">search</span> <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endedge <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgeglobaldata-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.njk</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">edge</span> <span class="token string">"liquid"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">search</span> <span class="token operator">|</span> <span class="token variable">json</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endedge</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="edgeglobaldata-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edge</span><span class="token punctuation">(</span><span class="token string">"{{ search | json }}"</span><span class="token punctuation">,</span> <span class="token string">"liquid"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="frequently-asked-questions" tabindex="-1">Frequently Asked Questions <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#frequently-asked-questions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="limitations" tabindex="-1">Limitations <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#limitations">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>The <code>edge</code> shortcode is only available in async-friendly template languages. Right now that includes: <code>11ty.js</code>, <code>njk</code>, <code>liquid</code>, and <code>markdown</code> (requires another <a href="https://www.11ty.dev/docs/languages/markdown/">pre-processing language, and the default is Liquid</a>). You can find a bunch of different test cases and examples on <a href="https://demo-eleventy-edge.netlify.app/tests/"><code>demo-eleventy-edge</code></a></li>
<li>Content <em>inside</em> of the <code>edge</code> shortcode (rendered on the Edge) is further limited to <code>liquid</code>, <code>njk</code>, or <code>markdown</code>.</li>
</ul>
<h3 id="how-does-it-compare-to-serverless" tabindex="-1">How does it compare to Serverless? <a class="direct-link" href="https://www.11ty.dev/docs/plugins/edge/#how-does-it-compare-to-serverless">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>They can be used together! Eleventy Edge can be used to process both serverless and build templates. Keep in mind that Edge functions are <em>not</em> cached so if you want to use them with Serverless, you’ll likely get the most value out pairing with On-demand Builders.</p>
<ul>
<li>Relevant talk video (21 minutes): <a href="https://www.zachleat.com/web/eleventy-rendering-modes/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fweb%2Feleventy-rendering-modes%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.zachleat.com/web/eleventy-rendering-modes/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Eleventy: Build vs. Serverless vs. Edge</a></li>
</ul>
Internationalization (i18n)
2023-10-28T19:27:16Z
https://www.11ty.dev/docs/plugins/i18n/
<h1>Internationalization (I18n) <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.13">Added in v2.0.0</span></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/i18n/#installation">Installation </a><ul><li><a href="https://www.11ty.dev/docs/plugins/i18n/#add-to-your-configuration-file">Add to your configuration file </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/i18n/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/i18n/#page.lang">page.lang </a></li><li><a href="https://www.11ty.dev/docs/plugins/i18n/#locale_url-filter">locale_url Filter </a></li><li><a href="https://www.11ty.dev/docs/plugins/i18n/#locale_links-filter">locale_links Filter </a></li><li><a href="https://www.11ty.dev/docs/plugins/i18n/#using-with-get*collectionitem-filters">Using with get*CollectionItem filters </a></li></ul></li></ul></div><p></p>
</details>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>Required reading:</strong> the <a href="https://www.11ty.dev/docs/i18n/">Eleventy docs page on Internationalization (I18n)</a> provides crucial context on project organization and URL strategies for multi-language projects. Please review it before continuing on here.</div></div>
<p>Utilities to manage pages and linking between localized content on Eleventy projects.</p>
<p>Note that this plugin specifically helps you manage links between content but does <em>not</em> localize that content’s strings, numbers, dates, etc. You’ll likely want to pick a third-party library for this! A few popular choices include <a href="https://github.com/adamduncan/eleventy-plugin-i18n"><code>eleventy-plugin-i18n</code></a>, <a href="https://github.com/lukeed/rosetta"><code>rosetta</code></a>, <a href="https://www.npmjs.com/package/i18next"><code>i18next</code></a>, <a href="https://www.npmjs.com/package/y18n"><code>y18n</code></a>, <a href="https://www.npmjs.com/package/intl-messageformat"><code>intl-messageformat</code></a>, and <a href="https://lingui.js.org/tutorials/javascript.html">LinguiJS</a>.</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="sfPNgt3joWI" params="start=1122" playlabel="Play: Internationalization (i18n) Plugin (Weekly №16)" style="background-image:url('https://i.ytimg.com/vi/sfPNgt3joWI/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=sfPNgt3joWI" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Internationalization (i18n) Plugin (Weekly №16)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=sfPNgt3joWI&t=1122">Internationalization (i18n) Plugin (Weekly №16) <code>▶18m42s</code></a></is-land></div></div>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>The Internationalization (i18n) plugin is bundled with Eleventy and does not require separate installation. Available in version <code>v2.0.0</code> or newer.</p>
<p>If you don’t yet have an Eleventy project, go through the <a href="https://www.11ty.dev/docs/get-started/">Get Started Guide first</a> and come back here when you’re done!</p>
<h3 id="add-to-your-configuration-file" tabindex="-1">Add to your configuration file <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#add-to-your-configuration-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyI18nPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyI18nPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// any valid BCP 47-compatible language tag is supported</span><br> <span class="token literal-property property">defaultLanguage</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token comment">// Required, this site uses "en"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary>Expand to see the full list of advanced options</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyI18nPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyI18nPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// any valid BCP 47-compatible language tag is supported</span><br> <span class="token literal-property property">defaultLanguage</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token comment">// Required, this site uses "en"</span><br><br> <span class="token comment">// Rename the default universal filter names</span><br> <span class="token literal-property property">filters</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// transform a URL with the current page’s locale code</span><br> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">"locale_url"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// find the other localized content for a specific input file</span><br> <span class="token literal-property property">links</span><span class="token operator">:</span> <span class="token string">"locale_links"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// When to throw errors for missing localized content files</span><br> <span class="token literal-property property">errorMode</span><span class="token operator">:</span> <span class="token string">"strict"</span><span class="token punctuation">,</span> <span class="token comment">// throw an error if content is missing at /en/slug</span><br> <span class="token comment">// errorMode: "allow-fallback", // only throw an error when the content is missing at both /en/slug and /slug</span><br> <span class="token comment">// errorMode: "never", // don’t throw errors for missing content</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This plugin provides two <a href="https://www.11ty.dev/docs/filters/#universal-filters">universal filters</a> (Nunjucks, Liquid, Handlebars, 11ty.js) and one addition to the <code>page</code> variable.</p>
<h3 id="page.lang" tabindex="-1"><code>page.lang</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#page.lang">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Adding the i18n plugin to your project will make <code>page.lang</code> available to your templates. This represents the language tag for the current page template, and will default to the value you’ve passed to the plugin via <code>defaultLanguage</code> above.</p>
<p>Check out <a href="https://www.11ty.dev/docs/data-eleventy-supplied/">the rest of the data available on the <code>page</code> object</a>.</p>
<h3 id="locale_url-filter" tabindex="-1"><code>locale_url</code> Filter <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#locale_url-filter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Accepts any arbitrary URL string and transforms it using the current page’s locale. Works as expected if the URL already contains a language code. This is most useful in any shared code used by internationalized content (layouts, partials, includes, etc).</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurl-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurl-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurl-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurl-hbs" role="tab">Handlebars</a>
</div>
<div id="localeurl-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.njk</div>
<pre class="language-njk"><code class="language-njk"><span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{{ "</span><span class="token operator">/</span><span class="token variable">blog</span><span class="token operator">/</span><span class="token string">" | locale_url }}"</span><span class="token operator">></span><span class="token variable">Blog</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span><br><span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span> <span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"/en/blog/"</span><span class="token operator">></span><span class="token variable">Blog</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>/es/index.njk</div>
<pre class="language-njk"><code class="language-njk"><span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{{ "</span><span class="token operator">/</span><span class="token variable">blog</span><span class="token operator">/</span><span class="token string">" | locale_url }}"</span><span class="token operator">></span><span class="token variable">Blog</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span><br><span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span> <span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"/es/blog/"</span><span class="token operator">></span><span class="token variable">Blog</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span></code></pre>
</div>
<div id="localeurl-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"/blog/"</span> <span class="token operator">|</span> <span class="token function filter">locale_url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token comment"><!-- <a href="/en/blog/">Blog</a> --></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>/es/index.liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"/blog/"</span> <span class="token operator">|</span> <span class="token function filter">locale_url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token comment"><!-- <a href="/es/blog/">Blog</a> --></span></code></pre>
</div>
<div id="localeurl-hbs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.hbs</div>
<pre class="language-hbs"><code class="language-hbs"><span class="token punctuation"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token punctuation">=</span><span class="token string">"{{ locale_url "</span><span class="token block keyword">/blog/</span><span class="token string">" }}"</span><span class="token punctuation">></span><span class="token variable">Blog</span><span class="token punctuation"><</span><span class="token punctuation">/</span><span class="token variable">a</span><span class="token punctuation">></span><br><span class="token punctuation"><</span><span class="token punctuation">!</span><span class="token variable">--</span> <span class="token punctuation"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token punctuation">=</span><span class="token string">"/en/blog/"</span><span class="token punctuation">></span><span class="token variable">Blog</span><span class="token punctuation"><</span><span class="token punctuation">/</span><span class="token variable">a</span><span class="token punctuation">></span> <span class="token variable">--</span><span class="token punctuation">></span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>/es/index.hbs</div>
<pre class="language-hbs"><code class="language-hbs"><span class="token punctuation"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token punctuation">=</span><span class="token string">"{{ locale_url "</span><span class="token block keyword">/blog/</span><span class="token string">" }}"</span><span class="token punctuation">></span><span class="token variable">Blog</span><span class="token punctuation"><</span><span class="token punctuation">/</span><span class="token variable">a</span><span class="token punctuation">></span><br><span class="token punctuation"><</span><span class="token punctuation">!</span><span class="token variable">--</span> <span class="token punctuation"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token punctuation">=</span><span class="token string">"/es/blog/"</span><span class="token punctuation">></span><span class="token variable">Blog</span><span class="token punctuation"><</span><span class="token punctuation">/</span><span class="token variable">a</span><span class="token punctuation">></span> <span class="token variable">--</span><span class="token punctuation">></span></code></pre>
</div>
<div id="localeurl-11tyjs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">locale_url</span><span class="token punctuation">(</span><span class="token string">"/blog/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Blog</a></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token comment">// returns <a href="/en/blog/">Blog</a></span><br><span class="token punctuation">}</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>/es/index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">locale_url</span><span class="token punctuation">(</span><span class="token string">"/blog/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Blog</a></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token comment">// returns <a href="/es/blog/">Blog</a></span><br><span class="token punctuation">}</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>If the link argument already has a valid language code, it will be swapped. The following all return <code>/en/blog/</code> when rendered in <code>/en/*</code> templates (or <code>/es/blog/</code> in <code>/es/*</code> templates):</p>
<ul>
<li><code>{{ "/blog/" | locale_url }}</code></li>
<li><code>{{ "/en/blog/" | locale_url }}</code></li>
<li><code>{{ "/es/blog/" | locale_url }}</code></li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">It’s important to note that this filter <em>checks for the existence of the file</em> in the target locale. If the specific content file in the target locale does not exist, an error will be thrown! You can change this behavior using the plugin’s <code>errorMode</code> option (see advanced usage above).<br>
</div></div>
<p>It’s unlikely that you’ll need to but you <em>can</em> override the root locale with a second argument:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurlforce-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurlforce-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurlforce-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localeurlforce-hbs" role="tab">Handlebars</a>
</div>
<div id="localeurlforce-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.njk</div>
<pre class="language-njk"><code class="language-njk"><span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{{ "</span><span class="token operator">/</span><span class="token variable">blog</span><span class="token operator">/</span><span class="token string">" | locale_url("</span><span class="token variable">es</span><span class="token string">") }}"</span><span class="token operator">></span><span class="token variable">Blog</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span><br><span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span> <span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"/es/blog/"</span><span class="token operator">></span><span class="token variable">Blog</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span></code></pre>
</div>
<div id="localeurlforce-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"/blog/"</span> <span class="token operator">|</span> <span class="token function filter">locale_url</span><span class="token operator">:</span> <span class="token string">"es"</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token comment"><!-- <a href="/es/blog/">Blog</a> --></span></code></pre>
</div>
<div id="localeurlforce-hbs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.hbs</div>
<pre class="language-hbs"><code class="language-hbs"><span class="token punctuation"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token punctuation">=</span><span class="token string">"{{ locale_url "</span><span class="token block keyword">/blog/</span><span class="token string">" "</span><span class="token variable">es</span><span class="token string">" }}"</span><span class="token punctuation">></span><span class="token variable">Blog</span><span class="token punctuation"><</span><span class="token punctuation">/</span><span class="token variable">a</span><span class="token punctuation">></span><br><span class="token punctuation"><</span><span class="token punctuation">!</span><span class="token variable">--</span> <span class="token punctuation"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token punctuation">=</span><span class="token string">"/es/blog/"</span><span class="token punctuation">></span><span class="token variable">Blog</span><span class="token punctuation"><</span><span class="token punctuation">/</span><span class="token variable">a</span><span class="token punctuation">></span> <span class="token variable">--</span><span class="token punctuation">></span></code></pre>
</div>
<div id="localeurlforce-11tyjs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/index.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">locale_url</span><span class="token punctuation">(</span><span class="token string">"/blog/"</span><span class="token punctuation">,</span> <span class="token string">"es"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Blog</a></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token comment">// returns <a href="/es/blog/">Blog</a></span><br><span class="token punctuation">}</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="locale_links-filter" tabindex="-1"><code>locale_links</code> Filter <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#locale_links-filter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Returns an array of the relevant alternative content for a specified URL (or, defaults to the current page). The original page passed to the filter is <em>not</em> included in the results. Each array entry is an object with <code>url</code>, <code>lang</code>, and (localized) <code>label</code> properties, for example:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">[</span><br> <span class="token punctuation">{</span><span class="token property">"url"</span><span class="token operator">:</span><span class="token string">"/es/blog/"</span><span class="token punctuation">,</span><span class="token property">"lang"</span><span class="token operator">:</span><span class="token string">"es"</span><span class="token punctuation">,</span><span class="token property">"label"</span><span class="token operator">:</span><span class="token string">"Español"</span><span class="token punctuation">}</span><br><span class="token punctuation">]</span></code></pre>
<h4 id="this-page-also-available-in-example" tabindex="-1">“This page also available in:” Example <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#this-page-also-available-in-example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinks-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinks-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinks-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinks-hbs" role="tab">Handlebars</a>
</div>
<div id="localelinks-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/blog.njk</div>
<pre class="language-njk"><code class="language-njk"><span class="token variable">This</span> <span class="token variable">page</span> <span class="token keyword">is</span> <span class="token test function">also</span> <span class="token variable">available</span> <span class="token keyword">in</span><span class="token punctuation">:</span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token keyword">for</span> <span class="token variable">link</span> <span class="token keyword">in</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">|</span> <span class="token variable">locale_links</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token punctuation">{</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token keyword">if</span> <span class="token keyword">not</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">first</span> <span class="token operator">%</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">endif</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{{link.url}}"</span> <span class="token variable">lang</span><span class="token operator">=</span><span class="token string">"{{link.lang}}"</span> <span class="token variable">hreflang</span><span class="token operator">=</span><span class="token string">"{{link.lang}}"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token variable">link</span><span class="token punctuation">.</span><span class="token variable">label</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">endfor</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
</div>
<div id="localelinks-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/blog.liquid</div>
<pre class="language-liquid"><code class="language-liquid">This page is also available in:<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> links <span class="token operator">=</span> <span class="token object">page</span><span class="token punctuation">.</span>url <span class="token operator">|</span> <span class="token function filter">locale_links</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> <span class="token object">link</span> <span class="token keyword">in</span> links <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">unless</span> <span class="token object">forloop</span><span class="token punctuation">.</span><span class="token function">first</span> <span class="token delimiter punctuation">%}</span></span>,<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endunless</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">link</span><span class="token punctuation">.</span>url<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">link</span><span class="token punctuation">.</span>lang<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">link</span><span class="token punctuation">.</span>lang<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">link</span><span class="token punctuation">.</span>label<span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span></code></pre>
</div>
<div id="localelinks-11tyjs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/en/blog.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> links <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">locale_links</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Don’t forget to localize this text too</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">This page is also available in:<br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>links<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>link<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" lang="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>link<span class="token punctuation">.</span>lang<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" hreflang="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>link<span class="token punctuation">.</span>lang<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>link<span class="token punctuation">.</span>label<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></span><span class="token template-punctuation string">`</span></span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">", "</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="localelinks-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/plugins/i18n.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>Renders as:</p>
<pre><code>This page is also available in <a href="/es/blog/" lang="es" hreflang="es">Español</a>
</code></pre>
<h4 id="example" tabindex="-1"><code><link rel="alternate"></code> Example <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Here’s another example in a layout file.</p>
<p>The <code>href</code> attributes here must be fully qualified (include the full domain with the protocol). Read more on the <a href="https://developers.google.com/search/docs/advanced/crawling/localized-versions">Google Search Central documentation</a>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The top level <code>lang</code> data property used here is most commonly set by you in the data cascade. For example: <code>/en/en.json</code> with <code>{"lang": "en"}</code> and <code>/es/es.json</code> with <code>{"lang": "es"}</code>.</div></div>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinksrel-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinksrel-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinksrel-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/i18n/#localelinksrel-hbs" role="tab">Handlebars</a>
</div>
<div id="localelinksrel-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>_includes/mylayout.njk</div>
<pre class="language-njk"><code class="language-njk"><span class="token punctuation">{</span># `<span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token variable">lang</span><span class="token punctuation">}</span><span class="token punctuation">}</span>` <span class="token variable">must</span> <span class="token variable">be</span> <span class="token variable">set</span> <span class="token keyword">by</span> <span class="token variable">you</span> <span class="token keyword">in</span> <span class="token variable">the</span> <span class="token variable">data</span> <span class="token variable">cascade</span><span class="token punctuation">,</span> <span class="token variable">see</span> <span class="token variable">above</span> <span class="token variable">note</span> #<span class="token punctuation">}</span><br><span class="token operator"><</span>!<span class="token variable">doctype</span> <span class="token variable">html</span><span class="token operator">></span><br><span class="token operator"><</span><span class="token variable">html</span> <span class="token variable">lang</span><span class="token operator">=</span><span class="token string">"{{lang}}"</span><span class="token operator">></span><br> <span class="token operator"><</span><span class="token variable">head</span><span class="token operator">></span><br> <span class="token operator"><</span><span class="token variable">link</span> <span class="token variable">rel</span><span class="token operator">=</span><span class="token string">"alternate"</span> <span class="token variable">hreflang</span><span class="token operator">=</span><span class="token string">"{{lang}}"</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{{page.url}}"</span><span class="token operator">></span><br> <span class="token punctuation">{</span><span class="token operator">%</span> <span class="token keyword">for</span> <span class="token variable">link</span> <span class="token keyword">in</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">|</span> <span class="token variable">locale_links</span> <span class="token operator">%</span><span class="token punctuation">}</span><br> <span class="token operator"><</span><span class="token variable">link</span> <span class="token variable">rel</span><span class="token operator">=</span><span class="token string">"alternate"</span> <span class="token variable">hreflang</span><span class="token operator">=</span><span class="token string">"{{link.lang}}"</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"https://www.11ty.dev{{link.url}}"</span><span class="token operator">></span><br> <span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">endfor</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
</div>
<div id="localelinksrel-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>_includes/mylayout.njk</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">comment</span> <span class="token delimiter punctuation">%}</span><span class="token comment"> `{{lang}}` must be set by you in the data cascade, see above note </span><span class="token delimiter punctuation">{%</span> <span class="token keyword">endcomment</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span>lang<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span>lang<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">page</span><span class="token punctuation">.</span>url<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> links <span class="token operator">=</span> <span class="token object">page</span><span class="token punctuation">.</span>url <span class="token operator">|</span> <span class="token function filter">locale_links</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> <span class="token object">link</span> <span class="token keyword">in</span> links <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">link</span><span class="token punctuation">.</span>lang<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.11ty.dev<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span><span class="token object">link</span><span class="token punctuation">.</span>url<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span></code></pre>
</div>
<div id="localelinksrel-11tyjs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>/_includes/mylayout.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> links <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">locale_links</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// side note: url argument is optional for current page</span><br><br> <span class="token comment">// `${data.lang}` must be set by you in the data cascade, see above note</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><!doctype html><br><html lang="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>lang<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"><br> <head><br> <link rel="alternate" hreflang="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>lang<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" href="{{data.page.url}}"><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>links<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">link</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <link rel="alternate" hreflang="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>link<span class="token punctuation">.</span>lang<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" href="https://www.11ty.dev</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>link<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token template-punctuation string">`</span></span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="localelinksrel-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/plugins/i18n.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="using-with-get*collectionitem-filters" tabindex="-1">Using with <a href="https://www.11ty.dev/docs/filters/collection-items/"><code>get*CollectionItem</code> filters</a> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/i18n/#using-with-get*collectionitem-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The <code>getPreviousCollectionItem</code>, <code>getNextCollectionItem</code> and <code>getCollectionItem</code> filters all provide a mechanism to retrieve a specific collection item from a collection.</p>
<p>The i18n plugin modifies the behavior of these filters to prefer a collection item in the current page language’s <em>without requiring any changes to your project</em>.</p>
<p>For example, assume that English (<code>en</code>) is the default language for your project. Assume we’ve configured all of the blog posts in <code>/en/blog/*.md</code> to have the <code>post</code> tag, placing them into a <code>post</code> collection. Now you want to provide alternative localized versions of this blog post, so you create the following files:</p>
<ul>
<li><code>/es/blog/my-blog-post.md</code></li>
<li><code>/ja/blog/my-blog-post.md</code></li>
</ul>
<p>Using the above filters on these localized templates will automatically prefer <code>/en/blog/my-blog-post.md</code> as the root collection item when navigating the collection. This allows you to do things like:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">set</span> <span class="token variable">nextPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">post</span> <span class="token operator">|</span> <span class="token variable">getNextCollectionItem</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token punctuation">{</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token keyword">if</span> <span class="token variable">nextPost</span> <span class="token operator">%</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token variable">a</span> <span class="token variable">href</span><span class="token operator">=</span><span class="token string">"{{ nextPost.url | locale_url }}"</span><span class="token operator">></span><span class="token variable">Next</span> <span class="token variable">post</span><span class="token operator"><</span><span class="token operator">/</span><span class="token variable">a</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">endif</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
<p>This will <em>prefer</em> a localized version of the next post’s URL (Spanish pages will prefer linking to other pages in Spanish, when available). If a localized version does not exist, it will fall back to the default language instead.</p>
Eleventy 中文文档
2023-06-23T03:38:00Z
https://www.11ty.dev/docs/accessibility/
<h1>Accessibility Statement</h1>
<p>The Eleventy project recognizes that Accessibility is an incredibly important baseline to developing inclusive and quality software. On Eleventy web properties specifically, we aim to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG 2.1 AA standards</a> and to support our development community to do the same.</p>
<p>If you’ve encountered an issue with our web site—accessibility or otherwise—please let us know! The best way to do this is filing a <a href="https://github.com/11ty/11ty-website/issues">new GitHub issue on the <code>11ty-website</code> repository</a>.</p>
<p>We are also available on Mastodon at <a href="https://fosstodon.org/@eleventy">eleventy</a> or feel free to contact <a href="https://fediverse.zachleat.com/@zachleat">zachleat</a> directly.</p>
<p>Our <a href="https://www.11ty.dev/speedlify/">Eleventy Leaderboards</a> encourage best practices on sites that were Built with Eleventy through performance and accessibility auditing (via Lighthouse and axe) but automated auditing systems are only a starting point.</p>
<p>It’s very important that we take responsibility for the code we publish and deliver and strive to correct accessibility issues with the same veracity as a full service outage.</p>
<h2 id="accessibility-resources" tabindex="-1">Accessibility Resources <a class="direct-link" href="https://www.11ty.dev/docs/accessibility/#accessibility-resources">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.a11yproject.com/">The A11Y Project</a> (their website is Built with Eleventy!), including their incredible <a href="https://www.a11yproject.com/checklist/">Accessibility Checklist</a></li>
<li><a href="https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag">GOV.UK Service Manual: Understanding WCAG 2.1</a></li>
<li><a href="https://webaim.org/standards/wcag/checklist">WebAIM’s WCAG 2 Checklist</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/quickref/">W3C Web Accessibility Initiative: How to Meet WCAG (Quick Reference)</a></li>
<li><a href="https://www.microsoft.com/design/inclusive/">Microsoft’s Inclusive Design</a> Initiative</li>
</ul>
<h3 id="tools" tabindex="-1">Tools <a class="direct-link" href="https://www.11ty.dev/docs/accessibility/#tools">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="automated-auditing" tabindex="-1">Automated Auditing <a class="direct-link" href="https://www.11ty.dev/docs/accessibility/#automated-auditing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><a href="https://www.deque.com/axe/">axe</a></li>
<li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> (uses axe)</li>
<li><a href="https://webhint.io/">webhint</a></li>
<li><a href="https://pa11y.org/">pa11y</a></li>
<li><a href="https://wave.webaim.org/">WAVE by WebAIM</a></li>
<li><a href="https://accessibilityinsights.io/">Accessibility Insights</a></li>
<li><a href="https://tenon.io/">tenon.io</a> (Paid)</li>
</ul>
<h4 id="compatibility-tests" tabindex="-1">Compatibility Tests <a class="direct-link" href="https://www.11ty.dev/docs/accessibility/#compatibility-tests">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><a href="https://a11ysupport.io/">Accessibility Support</a>, screen reader compatibility tables</li>
<li><a href="https://www.powermapper.com/tests/">PowerMapper Assistive Technology Compatibility Tests</a></li>
</ul>
<h3 id="people-to-follow" tabindex="-1">People to Follow <a class="direct-link" href="https://www.11ty.dev/docs/accessibility/#people-to-follow">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>One of the best ways to immerse yourself in the accessibility development community is to follow the experts. Many of these folks are <a href="https://www.11ty.dev/authors/">participants in the Eleventy community</a> too!</p>
<ul>
<li><a href="https://marcysutton.com/writing/">Marcy Sutton</a></li>
<li><a href="https://www.scottohara.me/writing/">Scott O’Hara</a></li>
<li><a href="http://adrianroselli.com/tag/accessibility">Adrian Roselli</a></li>
<li><a href="https://www.sarasoueidan.com/blog/">Sara Soueidan</a></li>
<li><a href="https://ericwbailey.design/">Eric Bailey</a></li>
<li><a href="https://www.marcozehe.de/">Marco Zehe</a></li>
<li><a href="https://davatron5000.github.io/a11y-nutrition-cards/">Dave Rupert</a></li>
<li><a href="https://karlgroves.com/">Karl Groves</a></li>
<li><a href="https://heydonworks.com/">Heydon Pickering</a></li>
<li><a href="https://github.com/11ty/11ty-website/blob/master/src/docs/accessibility.md">and you?</a> (Edit this page on GitHub)</li>
</ul>
<h3 id="organizations-to-follow" tabindex="-1">Organizations to Follow <a class="direct-link" href="https://www.11ty.dev/docs/accessibility/#organizations-to-follow">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><a href="https://www.paciellogroup.com/">The Paciello Group</a></li>
<li><a href="https://www.deque.com/">deque</a></li>
</ul>
Eleventy Dev Server
2023-04-24T22:12:47Z
https://www.11ty.dev/docs/dev-server/
<h1>Eleventy Dev Server <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/dev-server/#options">Options </a></li><li><a href="https://www.11ty.dev/docs/dev-server/#swap-back-to-browsersync">Swap back to Browsersync </a><ul><li><a href="https://www.11ty.dev/docs/dev-server/#setbrowsersyncconfig">setBrowserSyncConfig </a></li></ul></li></ul></div><p></p>
</details>
<p>The Eleventy 2.0 release bundles a new development server. Check out the <a href="https://github.com/11ty/eleventy-dev-server"><code>11ty/eleventy-dev-server</code> repository on GitHub</a>.</p>
<p>At time of release, this new server helps Eleventy by:</p>
<ul>
<li>🏋🏻♀️ Minimal footprint: 1.4 MB node_modules
<ul>
<li>Eleventy <code>node_modules</code> dropped from 155 MB to 34.3 MB</li>
<li>Faster Eleventy <code>npm install</code> times (30.5% faster)</li>
<li>Reduced Eleventy dependency count from 311 -> 211</li>
</ul>
</li>
<li>📦 Decoupled from any Bundler</li>
<li>🚄 Fast ~2ms startup times</li>
<li>⚡️ WebSockets-based Live reload</li>
<li>🔬 DOM-diffing HTML updates</li>
<li>⚠️ No unresolved <code>npm audit</code> errors or warnings 👀</li>
<li>🚤 Supports <a href="https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve">emulated passthrough file copy</a> for faster builds!</li>
</ul>
<p>Read more on the <a href="https://github.com/11ty/eleventy-dev-server/releases/tag/v1.0.0">Eleventy Dev Server 1.0 release notes</a>.</p>
<h2 id="options" tabindex="-1">Options <a class="direct-link" href="https://www.11ty.dev/docs/dev-server/#options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can configure the server with the new <code>setServerOptions</code> Configuration API method.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setServerOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token comment">// Default values are shown:</span><br><br> <span class="token comment">// Whether the live reload snippet is used</span><br> <span class="token literal-property property">liveReload</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Whether DOM diffing updates are applied where possible instead of page reloads</span><br> <span class="token literal-property property">domDiff</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br><br> <span class="token comment">// The starting port number</span><br> <span class="token comment">// Will increment up to (configurable) 10 times if a port is already in use.</span><br> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Additional files to watch that will trigger server updates</span><br> <span class="token comment">// Accepts an Array of file paths or globs (passed to `chokidar.watch`).</span><br> <span class="token comment">// Works great with a separate bundler writing files to your output folder.</span><br> <span class="token comment">// e.g. `watch: ["_site/**/*.css"]`</span><br> <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Show local network IP addresses for device testing</span><br> <span class="token literal-property property">showAllHosts</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Use a local key/certificate to opt-in to local HTTP/2 with https</span><br> <span class="token literal-property property">https</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// key: "./localhost.key",</span><br> <span class="token comment">// cert: "./localhost.cert",</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Change the default file encoding for reading/serving files</span><br> <span class="token literal-property property">encoding</span><span class="token operator">:</span> <span class="token string">"utf-8"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Show the dev server version number on the command line</span><br> <span class="token literal-property property">showVersion</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary><strong>Expand to see the Full options list</strong></summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setServerOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token comment">// Show the server version number on the command line</span><br> <span class="token literal-property property">showVersion</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Change the name of the folder name used for injected scripts</span><br> <span class="token literal-property property">injectedScriptsFolder</span><span class="token operator">:</span> <span class="token string">".11ty"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Number of times to increment a port is already in use</span><br> <span class="token literal-property property">portReassignmentRetryCount</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Alias for backwards compatibility, renamed to `injectedScriptsFolder` in Dev Server 1.0+</span><br> <span class="token literal-property property">folder</span><span class="token operator">:</span> <span class="token string">".11ty"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Alias for backwards compatibility, renamed to `liveReload` in Dev Server 1.0+</span><br> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Alias for backwards compatibility, renamed to `domDiff` in Dev Server 1.0+</span><br> <span class="token literal-property property">domdiff</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<ul>
<li>Read more about <a href="https://github.com/paulmillr/chokidar"><code>chokidar.watch</code> compatible paths</a></li>
<li>For a full list of <code>encoding</code> values supported by Node (also used in the <code>Content-Type</code> HTTP Header), check out <a href="https://nodejs.org/api/buffer.html#buffers-and-character-encodings">Node’s Buffer documentation</a>.</li>
<li>Using a root <code>404.html</code> file (a popular convention supported by Netlify, GitHub Pages, Vercel, and others) supported! We use the content from a <code>404.html</code> in your output folder when serving the error page for missing content.</li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Try out the <a href="https://github.com/davewasmer/devcert-cli"><code>devcert-cli</code></a> package to generate a localhost key and certificate for <code>https</code> and HTTP/2.</div></div>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="wWs38M38vr8" playlabel="Play: New Dev Server Preview (Weekly №3)" style="background-image:url('https://i.ytimg.com/vi/wWs38M38vr8/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=wWs38M38vr8" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: New Dev Server Preview (Weekly №3)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=wWs38M38vr8">New Dev Server Preview (Weekly №3)</a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="7hER8HddlhQ" playlabel="Play: Shipping the New Dev Server (Weekly №4)" style="background-image:url('https://i.ytimg.com/vi/7hER8HddlhQ/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=7hER8HddlhQ" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Shipping the New Dev Server (Weekly №4)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=7hER8HddlhQ">Shipping the New Dev Server (Weekly №4)</a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="ZE5Np95-PeU" params="start=463" playlabel="Play: Dev Server CLI (Weekly №14)" style="background-image:url('https://i.ytimg.com/vi/ZE5Np95-PeU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=ZE5Np95-PeU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Dev Server CLI (Weekly №14)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=ZE5Np95-PeU&t=463">Dev Server CLI (Weekly №14) <code>▶7m43s</code></a></is-land></div></div>
<h2 id="swap-back-to-browsersync" tabindex="-1">Swap back to Browsersync <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/dev-server/#swap-back-to-browsersync">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can swap back to Eleventy Dev Server using the <code>setServerOptions</code> configuration API and the <a href="https://github.com/11ty/eleventy-server-browsersync"><code>@11ty/eleventy-server-browsersync</code> package</a>.</p>
<p>First, install it:</p>
<pre><code>npm install @11ty/eleventy-server-browsersync
</code></pre>
<p>Then, enable it in your configuration file:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setServerOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token string">"@11ty/eleventy-server-browsersync"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Default Browsersync options shown:</span><br> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span><span class="token punctuation">,</span><br> <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">notify</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">ghostMode</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Opt-out of the Browsersync snippet</span><br> <span class="token comment">// snippet: false,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>View the <a href="https://browsersync.io/docs/options">full list of Browsersync options</a>.</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="7hER8HddlhQ" params="start=235" playlabel="Play: Fallback to browsersync (Weekly №4)" style="background-image:url('https://i.ytimg.com/vi/7hER8HddlhQ/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=7hER8HddlhQ" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Fallback to browsersync (Weekly №4)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=7hER8HddlhQ&t=235">Fallback to browsersync (Weekly №4) <code>▶3m55s</code></a></is-land></div></div>
<h3 id="setbrowsersyncconfig" tabindex="-1"><code>setBrowserSyncConfig</code> <a class="direct-link" href="https://www.11ty.dev/docs/dev-server/#setbrowsersyncconfig">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><code>eleventyConfig.setBrowserSyncConfig</code> was the previous Configuration API method used in versions of Eleventy prior to v2. It was changed to be a no-op in Eleventy v2 (it has no functional purpose).</p>
<!--Check out the previous version docs to learn how to:
* [Override Browsersync server options](https://v1-0-0.11ty.dev/docs/watch-serve/#override-browsersync-server-options)
* [Opt-out of the Browsersync JavaScript snippet](https://v1-0-0.11ty.dev/docs/watch-serve/#opt-out-of-the-browsersync-javascript-snippet)-->
Next or Previous Collection Item Filters
2023-04-24T22:12:47Z
https://www.11ty.dev/docs/filters/collection-items/
<h1>Get Next or Previous Collection Item Universal Filters</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/filters/collection-items/#getpreviouscollectionitem-and-getnextcollectionitem">getPreviousCollectionItem and getNextCollectionItem </a></li><li><a href="https://www.11ty.dev/docs/filters/collection-items/#getcollectionitemindex">getCollectionItemIndex </a></li><li><a href="https://www.11ty.dev/docs/filters/collection-items/#getcollectionitem">getCollectionItem </a></li></ul></div><p></p>
</details>
<h2 id="getpreviouscollectionitem-and-getnextcollectionitem" tabindex="-1"><code>getPreviousCollectionItem</code> and <code>getNextCollectionItem</code> <a class="direct-link" href="https://www.11ty.dev/docs/filters/collection-items/#getpreviouscollectionitem-and-getnextcollectionitem">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Fetch the previous and next items in a collection when you pass in the current <code>page</code> object.</p>
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprev-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprev-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprev-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprev-hbs" role="tab">Handlebars</a>
</div>
<div id="nextprev-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> previousPost <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getPreviousCollectionItem</span><span class="token operator">:</span> <span class="token object">page</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> nextPost <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getNextCollectionItem</span><span class="token operator">:</span> <span class="token object">page</span> <span class="token delimiter punctuation">%}</span></span><br><br><span class="token comment"><!-- in v2.0.0 the page argument is optional --></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> previousPost <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getPreviousCollectionItem</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> nextPost <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getNextCollectionItem</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="nextprev-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">previousPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token function">getPreviousCollectionItem</span><span class="token punctuation">(</span><span class="token variable">page</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">nextPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token function">getNextCollectionItem</span><span class="token punctuation">(</span><span class="token variable">page</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><br><span class="token comment"><!-- in v2.0.0 the page argument is optional --></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">previousPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token variable">getPreviousCollectionItem</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">nextPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token variable">getNextCollectionItem</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="nextprev-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="nextprev-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
<p>Useful when you’d like to link to the previous or next template in your collection:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprevlink-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprevlink-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprevlink-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#nextprevlink-hbs" role="tab">Handlebars</a>
</div>
<div id="nextprevlink-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">if</span> previousPost <span class="token delimiter punctuation">%}</span></span>Previous Blog Post: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> previousPost<span class="token punctuation">.</span>url <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> previousPost<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">if</span> nextPost <span class="token delimiter punctuation">%}</span></span>Next Blog Post: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> nextPost<span class="token punctuation">.</span>url <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> nextPost<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="nextprevlink-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">previousPost</span> <span class="token delimiter punctuation">%}</span></span>Previous Blog Post: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">previousPost</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">previousPost</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">nextPost</span> <span class="token delimiter punctuation">%}</span></span>Next Blog Post: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">nextPost</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">nextPost</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="nextprevlink-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="nextprevlink-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>The <a href="https://www.11ty.dev/docs/collections/#sorting">Collections documentation</a> outlines the default sorting algorithm and how to override it.</p>
<h2 id="getcollectionitemindex" tabindex="-1"><code>getCollectionItemIndex</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/filters/collection-items/#getcollectionitemindex">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>The <code>getCollectionItemIndex</code> filter returns the 0-based numeric index of the current (or passed) page in the collection.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitemindex-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitemindex-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitemindex-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitemindex-hbs" role="tab">Handlebars</a>
</div>
<div id="getitemindex-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> index <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getCollectionItemIndex</span> <span class="token delimiter punctuation">%}</span></span><br><br>Or pass it in:<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> index <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getCollectionItemIndex</span><span class="token operator">:</span> <span class="token object">page</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="getitemindex-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">index</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token variable">getCollectionItemIndex</span> <span class="token delimiter punctuation">%}</span></span><br><br>Or pass it in:<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">index</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token function">getCollectionItemIndex</span><span class="token punctuation">(</span><span class="token variable">page</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="getitemindex-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="getitemindex-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="getcollectionitem" tabindex="-1"><code>getCollectionItem</code> <a class="direct-link" href="https://www.11ty.dev/docs/filters/collection-items/#getcollectionitem">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>For completeness, a <code>getCollectionItem</code> filter is also included that fetches the current page from a collection.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitem-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitem-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitem-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/filters/collection-items/#getitem-hbs" role="tab">Handlebars</a>
</div>
<div id="getitem-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> currentPost <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getCollectionItem</span><span class="token operator">:</span> <span class="token object">page</span> <span class="token delimiter punctuation">%}</span></span><br><br><span class="token comment"><!-- in v2.0.0 the page argument is optional --></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> currentPost <span class="token operator">=</span> collections<span class="token punctuation">.</span>posts <span class="token operator">|</span> <span class="token function filter">getCollectionItem</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="getitem-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">currentPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token function">getCollectionItem</span><span class="token punctuation">(</span><span class="token variable">page</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><br><span class="token comment"><!-- in v2.0.0 the page argument is optional --></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">currentPost</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">posts</span> <span class="token operator">|</span> <span class="token variable">getCollectionItem</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="getitem-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="getitem-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/filters/collection-items.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<ul>
<li><a href="https://www.11ty.dev/docs/filters/">← Back to Filters documentation.</a></li>
</ul>
Partial Hydration
2023-04-24T22:12:47Z
https://www.11ty.dev/docs/plugins/partial-hydration/
<h1>Partial Hydration</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/partial-hydration/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/partial-hydration/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/partial-hydration/#controlling-fallback-content">Controlling Fallback Content </a></li><li><a href="https://www.11ty.dev/docs/plugins/partial-hydration/#framework-support">Framework Support </a></li></ul></li></ul></div><p></p>
</details>
<p>A plugin to smartly and efficiently add client-side components to your web site.</p>
<p>Or, more technically: a framework independent partial hydration islands architecture implementation.</p>
<ul>
<li>Check out <a href="https://github.com/11ty/is-land"><code>11ty/is-land</code> on GitHub</a></li>
<li>View the <a href="https://is-land.11ty.dev/">demos</a></li>
<li><a href="https://jasonformat.com/islands-architecture/">Learn more about Islands Architecture</a></li>
</ul>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="YYJpFdEaAuc" params="start=188" playlabel="Play: Partial Hydration and Islands Architecture (Weekly №12)" style="background-image:url('https://i.ytimg.com/vi/YYJpFdEaAuc/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=YYJpFdEaAuc" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Partial Hydration and Islands Architecture (Weekly №12)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=YYJpFdEaAuc&t=188">Partial Hydration and Islands Architecture (Weekly №12) <code>▶3m8s</code></a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="V9hWgVV_5mg" params="start=399" playlabel="Play: Hydrating Components with `is-land` and Framework SSR (Weekly №13)" style="background-image:url('https://i.ytimg.com/vi/V9hWgVV_5mg/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=V9hWgVV_5mg" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Hydrating Components with `is-land` and Framework SSR (Weekly №13)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=V9hWgVV_5mg&t=399">Hydrating Components with `is-land` and Framework SSR (Weekly №13) <code>▶6m39s</code></a></is-land></div></div>
<p>Features:</p>
<ul>
<li>Easy to add to existing components</li>
<li>Zero dependencies</li>
<li>Small footprint (4.56 kB minimized; 1.47 kB with Brotli compression)</li>
<li>Not tightly coupled to a server framework or site generator tool.</li>
<li>Server-rendered (SSR) component examples available for SSR-friendly frameworks (Lit, Svelte, Vue, Preact are provided)</li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre><code>npm install @11ty/is-land
</code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><em>You can skip the next steps if you <a href="https://www.11ty.dev/docs/languages/webc/#use-with-is-land">use <code><is-land></code> via WebC</a>.</em><br>
</div></div>
<p>Add <code>is-land.js</code> to your primary bundle. It can be deferred and/or loaded asynchronously.</p>
<p>When using with web components it must be the first custom element defined (via <code>customElements.define</code>) on the page. Choose your style:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/is-land.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br><span class="token keyword">import</span> <span class="token string">"/is-land.js"</span><span class="token punctuation">;</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span><span class="token punctuation">></span></span>This is an island.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<p>Add any number of loading conditions to this tag to control how and when the island is initialized. You can mix and match:</p>
<ul>
<li><code>on:visible</code></li>
<li><code>on:idle</code></li>
<li><code>on:interaction</code> (defaults to <code>touchstart,click</code>)
<ul>
<li>Change events with <code>on:interaction="mouseenter,focusin"</code></li>
</ul>
</li>
<li><code>on:media</code>
<ul>
<li>Viewport size: <code>on:media="(min-width: 64em)"</code></li>
<li>Reduced motion:
<ul>
<li>Opt-in with <code>on:media="(prefers-reduced-motion)"</code></li>
<li>Opt-out with <code>on:media="(prefers-reduced-motion: no-preference)"</code></li>
</ul>
</li>
</ul>
</li>
<li>Save Data (<a href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData">read about Save Data on MDN</a>)
<ul>
<li>Opt-in with <code>on:save-data</code></li>
<li>Opt-out with <code>on:save-data="false"</code></li>
</ul>
</li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name"><span class="token namespace">on:</span>idle</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- your HTML here --></span><br><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 64em)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- Islands can be nested --></span><br> <span class="token comment"><!-- Islands inherit all of their parents’ loading conditions --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h3 id="controlling-fallback-content" tabindex="-1">Controlling Fallback Content <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#controlling-fallback-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="pre-js" tabindex="-1">Pre-JS <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#pre-js">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name"><span class="token namespace">on:</span>idle</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vanilla-web-component</span><span class="token punctuation">></span></span><br> Put your pre-JS fallback content in your web component.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vanilla-web-component</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h4 id="post-js-with" tabindex="-1">Post-JS with <code><template></code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#post-js-with">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Place any post-JS content inside of one or more <code><template data-island></code> elements anywhere in the <code><is-land></code>. These will be swapped with their template content. You can nest an <code><is-land></code> in there if you want!</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name"><span class="token namespace">on:</span>idle</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">data-island</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vanilla-web-component</span><span class="token punctuation">></span></span><br> This component is post-JS.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vanilla-web-component</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h4 id="run-your-own-custom-javascript-load-your-own-css" tabindex="-1">Run your own custom JavaScript, load your own CSS <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#run-your-own-custom-javascript-load-your-own-css">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Embed a script inside the template to run custom JS when the island’s loading conditions have been satisfied!</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">data-island</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- CSS --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token comment">/* My custom CSS */</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-css-file.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><br> <span class="token comment"><!-- JS --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hydrating!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-js-file.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<p>You can also use the <code>ready</code> attribute for styling, added to the <code><is-land></code> when the island has been hydrated.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br><span class="token selector">is-land[ready]</span> <span class="token punctuation">{</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<h3 id="framework-support" tabindex="-1">Framework Support <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#framework-support">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><a href="https://is-land.11ty.dev/">Demos and source in the HTML</a> are available for each framework listed here.</p>
<h4 id="autoinit" tabindex="-1"><code>autoinit</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#autoinit">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Use the <code>autoinit</code> and <code>import</code> attributes together to import a third party library (or component code). <code>autoinit</code> can be one of <code>petite-vue</code>, <code>vue</code>, <code>preact</code>, or <code>svelte</code>. It is recommended to use a self-hosted framework library (future Eleventy integrations will automate this for you).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">autoinit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>petite-vue<span class="token punctuation">"</span></span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js<span class="token punctuation">"</span></span> <span class="token attr-name">v-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ name: 'post-JS' }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Hello from <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>pre-JS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- when import maps support is better, this simplifies with an entry for petite-vue in your import map --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>petite-vue<span class="token punctuation">"</span></span> <span class="token attr-name">v-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ name: 'post-JS' }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Hello from <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>pre-JS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h4 id="petite-vue" tabindex="-1">Petite Vue <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#petite-vue">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Small library (8K)</li>
<li>Rendering modes: Client</li>
<li>Progressive-enhancement friendly (full control of fallback content)</li>
<li>Support for <code>autoinit</code></li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">autoinit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>petite-vue<span class="token punctuation">"</span></span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js<span class="token punctuation">"</span></span> <span class="token attr-name">v-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ name: 'post-JS' }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Hello from <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>pre-JS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h4 id="vue" tabindex="-1">Vue <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#vue">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Larger library (51 kB)</li>
<li>Rendering modes: Client-only, Server-only, Server + Client (Hydration)</li>
<li>Support for <code>autoinit</code></li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vue-app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Hello from <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>pre-JS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module/island<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> <span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"https://unpkg.com/vue@3.2.36/dist/vue.esm-browser.prod.js"</span><span class="token punctuation">;</span><br><br> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"post-JS"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">"#vue-app"</span><span class="token punctuation">)</span><br> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<h4 id="svelte" tabindex="-1">Svelte <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#svelte">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Smaller library (12 kB)</li>
<li>Rendering modes: Client-only, Server-only, Server + Client (Hydration)
<ul>
<li>Requires a compiler for both client and server modes (tighter server coupling)</li>
</ul>
</li>
<li>Support for <code>autoinit</code></li>
</ul>
<p>This example uses <a href="https://github.com/11ty/is-land/blob/main/11ty/SveltePlugin.cjs">an Eleventy/Svelte integration</a> to compile a Svelte component.</p>
<pre class="language-html"><code class="language-html">{% assign component = "./lib/svelte/my-component.svelte" | svelte %}<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">autoinit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svelte<span class="token punctuation">"</span></span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ component.clientJsUrl }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<details>
<summary>Example component code <code>./lib/svelte/my-component.svelte:</code></summary>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> <span class="token comment">// using export to allow overrides via props</span><br> <span class="token keyword">export</span> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span><br><br> <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span><br><br> <span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> count <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello {name}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{handleClick}</span><span class="token punctuation">></span></span><br> Clicked {count} {count === 1 ? 'time' : 'times'}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
</details>
<h4 id="preact" tabindex="-1">Preact <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#preact">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Very small library (~5 kB)</li>
<li>Rendering modes: Client-only, Server-only, Server + Client (Hydration)</li>
<li>Support for <code>autoinit</code></li>
</ul>
<p>This example uses <a href="https://github.com/developit/htm"><code>htm</code> instead of JSX</a>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">autoinit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preact<span class="token punctuation">"</span></span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/lib/preact/preact-component.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<details>
<summary>Example component code <code>./lib/preact/preact-component.js</code>:</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> html<span class="token punctuation">,</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'https://unpkg.com/htm/preact/index.mjs?module'</span><br><br><span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p><strong>Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</strong></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">render</span><span class="token punctuation">(</span>html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>App<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> name="from Preact" /></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> el<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</details>
<h4 id="lit" tabindex="-1">Lit <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#lit">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Small library (~7 kB)</li>
<li>Rendering modes: Client-only, Server + Client (Hydration)
<ul>
<li>Note: Server-only is not supported: it requires Declarative Shadow DOM support to work without JS.</li>
</ul>
</li>
<li>No support for <code>autoinit</code></li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./lib/lit/lit-component.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lit-component</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Post-JS<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pre-JS Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lit-web-component</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
<details>
<summary>Example component code <code>./lib/lit/lit-component.js</code>:</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> css<span class="token punctuation">,</span> LitElement<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js"</span><span class="token punctuation">;</span><br><br>customElements<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">'lit-component'</span><span class="token punctuation">,</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> LitElement <span class="token punctuation">{</span><br> <span class="token keyword">static</span> properties <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p>Hello, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">||</span> <span class="token string">"Stranger"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</details>
<h4 id="alpine.js" tabindex="-1">Alpine.js <a class="direct-link" href="https://www.11ty.dev/docs/plugins/partial-hydration/#alpine.js">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Smaller library (15 kB)</li>
<li>Rendering modes: Client-only</li>
<li>No <code>autoinit</code> but it is not needed (functionality included for-free by Alpine.js)</li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>is-land</span> <span class="token attr-name"><span class="token namespace">on:</span>visible</span> <span class="token attr-name">import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/alpinejs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">x-data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ count: 0 }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Hello from Alpine.js!<br><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>⬆️<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count--<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>⬇️<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">x-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>is-land</span><span class="token punctuation">></span></span></code></pre>
Serverless
2023-04-24T22:12:47Z
https://www.11ty.dev/docs/plugins/serverless/
<h1>Serverless <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/serverless/#what-is-serverless">What is Serverless </a><ul><li><a href="https://www.11ty.dev/docs/plugins/serverless/#rendering-modes">Rendering Modes </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#demos-and-community-resources">Demos and Community Resources </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/serverless/#step-1-add-the-bundler-plugin">Step 1: Add the Bundler Plugin </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#your-generated-serverless-function">Your Generated Serverless Function </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#step-2-add-to-.gitignore">Step 2: Add to .gitignore </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#step-3-use-a-permalink-object">Step 3: Use a permalink Object </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#escaping-user-input">Escaping User Input </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#advanced">Advanced </a><ul><li><a href="https://www.11ty.dev/docs/plugins/serverless/#dynamic-slugs-to-subset-your-pagination">Dynamic Slugs to Subset Your Pagination </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#input-via-query-parameters">Input via Query Parameters </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#re-use-build-time-cache-from-the-fetch-plugin">Re-use build-time cache from the Fetch plugin </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#collections-in-serverless">Collections in Serverless </a></li><li><a href="https://www.11ty.dev/docs/plugins/serverless/#swap-to-dynamic-using-the-data-cascade-and-eleventycomputed">Swap to Dynamic using the Data Cascade and eleventyComputed </a></li></ul></li></ul></div><p></p>
</details>
<p>A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with <a href="https://www.netlify.com/blog/2021/04/14/faster-builds-for-large-sites-on-netlify-with-on-demand-builders-now-in-early-access/">On-demand Builders</a>.</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="JNFooPfzV9g" playlabel="Play: Defer generating 400+ pages using Eleventy Serverless" style="background-image:url('https://i.ytimg.com/vi/JNFooPfzV9g/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=JNFooPfzV9g" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Defer generating 400+ pages using Eleventy Serverless</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=JNFooPfzV9g">Defer generating 400+ pages using Eleventy Serverless</a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="EiwIe8lduGs" playlabel="Play: Add authentication with Eleventy Serverless and OAuth" style="background-image:url('https://i.ytimg.com/vi/EiwIe8lduGs/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=EiwIe8lduGs" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Add authentication with Eleventy Serverless and OAuth</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=EiwIe8lduGs">Add authentication with Eleventy Serverless and OAuth</a></is-land></div></div>
<h2 id="what-is-serverless" tabindex="-1">What is Serverless? <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#what-is-serverless">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy Serverless complements your existing statically generated site by running one or more template files <em>at request time</em> to generate dynamic pages. It can unlock many new use cases to move beyond static files into dynamically generated content.</p>
<ul>
<li>Server side rendering for fully dynamic pages, e.g. content preview in your Content Management System.</li>
<li>Rendering of individual templates using On-demand Builders, useful to improve large site build times both locally and in production.</li>
</ul>
<blockquote>
<p>“You can write a JavaScript function that you run and receive a response from by hitting a URL.”—<a href="https://web.archive.org/web/20220103184003/https://serverless.css-tricks.com/">The Power of Serverless</a> from <a href="https://twitter.com/chriscoyier">Chris Coyier</a></p>
</blockquote>
<h3 id="rendering-modes" tabindex="-1">Rendering Modes <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#rendering-modes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>These different use cases and rendering modes are important to understand and have different trade-offs and risks associated with them. In a Jamstack world, the order of preference should be:</p>
<ol>
<li><strong>Build template:</strong> Render in the build (preferred, start here)</li>
<li><strong>On-demand Builder template:</strong> Render on first request (use when your build gets beefy)</li>
<li><strong>Dynamic template:</strong> Render on every request (unlocks some new app-like use cases; can accept user input)</li>
</ol>
<p><strong>Build-time (non-serverless) templates</strong> should be the preferred rendering mode. They are the most reliable and stable. A failure in a build generated template will fail your deployment and prevent user-facing errors in production.</p>
<p>For <strong>On-demand Builders and Dynamic templates</strong>, rendering failures will not fail your deployment—and as such, incur more risk. Dynamic templates must also be closely performance monitored—unlike build templates, a slow render in a dynamic template means a slow web site for end-users.</p>
<h2 id="demos-and-community-resources" tabindex="-1">Demos and Community Resources <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#demos-and-community-resources">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="sites-vert sites-vert--md">
<div class="lo-grid">
<div class="sites-site-vert" data-filter-tags="">
<a href="https://api-explorer.11ty.dev/" class="elv-externalexempt" title="Eleventy API Explorer">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fapi-explorer.11ty.dev%2F/" width="150" height="150" alt="IndieWeb Avatar for https://api-explorer.11ty.dev/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy API Explorer</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://api-explorer.11ty.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fapi-explorer.11ty.dev%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/11ty/api-explorer/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/api-explorer/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/11ty/api-explorer" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/SomeAnticsDev/eleventy-serverless-color-contrast" class="elv-externalexempt" title="Eleventy Serverless Color Contrast">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FSomeAnticsDev%2Feleventy-serverless-color-contrast/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/SomeAnticsDev/eleventy-serverless-color-contrast" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Serverless Color Contrast</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/SomeAnticsDev/eleventy-serverless-color-contrast" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2FSomeAnticsDev%2Feleventy-serverless-color-contrast/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/SomeAnticsDev/eleventy-serverless-color-contrast" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/SomeAnticsDev/eleventy-serverless-color-contrast" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/SomeAnticsDev/eleventy-serverless-color-contrast" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://demo-eleventy-serverless.netlify.app/" class="elv-externalexempt" title="Eleventy Serverless Demo">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdemo-eleventy-serverless.netlify.app%2F/" width="150" height="150" alt="IndieWeb Avatar for https://demo-eleventy-serverless.netlify.app/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Serverless Demo</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://demo-eleventy-serverless.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdemo-eleventy-serverless.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/11ty/demo-eleventy-serverless" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/demo-eleventy-serverless" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/11ty/demo-eleventy-serverless" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">The starter project to learn about Eleventy Serverless
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://objectfit-focalpoint.netlify.app/" class="elv-externalexempt" title="Object-fit Focal Point">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fobjectfit-focalpoint.netlify.app%2F/" width="150" height="150" alt="IndieWeb Avatar for https://objectfit-focalpoint.netlify.app/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Object-fit Focal Point</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://objectfit-focalpoint.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fobjectfit-focalpoint.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://rainglow.zachleat.dev/" class="elv-externalexempt" title="Rainglow">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Frainglow.zachleat.dev%2F/" width="150" height="150" alt="IndieWeb Avatar for https://rainglow.zachleat.dev/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Rainglow</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://rainglow.zachleat.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Frainglow.zachleat.dev%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/zachleat/rainglow" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/zachleat/rainglow" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/zachleat/rainglow" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://uniclode.zachleat.dev/" class="elv-externalexempt" title="Uniclode">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Funiclode.zachleat.dev%2F/" width="150" height="150" alt="IndieWeb Avatar for https://uniclode.zachleat.dev/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Uniclode</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://uniclode.zachleat.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Funiclode.zachleat.dev%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/zachleat/uniclode" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/zachleat/uniclode" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/zachleat/uniclode" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://bryanlrobinson.com/blog/creating-a-dynamic-color-converter-with-11ty-serverless/" class="elv-externalexempt" title="Creating a dynamic color converter with 11ty Serverless">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fbryanlrobinson.com%2Fblog%2Fcreating-a-dynamic-color-converter-with-11ty-serverless%2F/" width="150" height="150" alt="IndieWeb Avatar for https://bryanlrobinson.com/blog/creating-a-dynamic-color-converter-with-11ty-serverless/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Creating a dynamic color converter with 11ty Serverless</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://bryanlrobinson.com/blog/creating-a-dynamic-color-converter-with-11ty-serverless/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbryanlrobinson.com%2Fblog%2Fcreating-a-dynamic-color-converter-with-11ty-serverless%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/" class="elv-externalexempt" title="Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.smashingmagazine.com%2F2021%2F10%2Fstatic-first-madlib-generator-portable-text-netlify-builder-functions%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.smashingmagazine.com%2F2021%2F10%2Fstatic-first-madlib-generator-portable-text-netlify-builder-functions%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://www.algolia.com/blog/engineering/building-server-rendered-search-for-static-sites-with-11ty-serverless-netlify-and-algolia/" class="elv-externalexempt" title="Building server-rendered search for static sites with 11ty Serverless, Netlify, and Algolia">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.algolia.com%2Fblog%2Fengineering%2Fbuilding-server-rendered-search-for-static-sites-with-11ty-serverless-netlify-and-algolia%2F/" width="150" height="150" alt="IndieWeb Avatar for https://www.algolia.com/blog/engineering/building-server-rendered-search-for-static-sites-with-11ty-serverless-netlify-and-algolia/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Building server-rendered search for static sites with 11ty Serverless, Netlify, and Algolia</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.algolia.com/blog/engineering/building-server-rendered-search-for-static-sites-with-11ty-serverless-netlify-and-algolia/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.algolia.com%2Fblog%2Fengineering%2Fbuilding-server-rendered-search-for-static-sites-with-11ty-serverless-netlify-and-algolia%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://someantics.dev/first-look-eleventy-serverless/" class="elv-externalexempt" title="A First Look at Eleventy Serverless, with Zach Leatherman">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsomeantics.dev%2Ffirst-look-eleventy-serverless%2F/" width="150" height="150" alt="IndieWeb Avatar for https://someantics.dev/first-look-eleventy-serverless/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">A First Look at Eleventy Serverless, with Zach Leatherman</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://someantics.dev/first-look-eleventy-serverless/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fsomeantics.dev%2Ffirst-look-eleventy-serverless%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
</div>
</div>
</div>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="step-1-add-the-bundler-plugin" tabindex="-1">Step 1: Add the Bundler Plugin <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#step-1-add-the-bundler-plugin">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This plugin is bundled with Eleventy core and doesn’t require you to <code>npm install</code> anything. Use the <code>addPlugin()</code> configuration API to add it to your Eleventy config file (probably <code>.eleventy.js</code>):</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyServerlessBundlerPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyServerlessBundlerPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"possum"</span><span class="token punctuation">,</span> <span class="token comment">// The serverless function name from your permalink object</span><br> <span class="token literal-property property">functionsDir</span><span class="token operator">:</span> <span class="token string">"./netlify/functions/"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>You can add the Bundler plugin more than once to accommodate multiple Eleventy Serverless rendering modes simultaneously. Your templates can render in multiple modes!</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><p>You won’t need to set up bundler plugins for every individual template, but instead you’ll want to use one plugin for each rendering mode.</p>
<ul>
<li>Dynamic pages via server side rendering will need one plugin (perhaps named <code>onrequest</code> or <code>dynamic</code>).</li>
<li>Delayed rendering using On-demand Builders will need another plugin (perhaps named <code>onfirstrequest</code> or <code>odb</code>).</li>
</ul>
</div></div>
<h4 id="bundler-options" tabindex="-1">Bundler Options <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#bundler-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<table>
<thead>
<tr>
<th>Key: Default Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>name</code> <em>(Required)</em></td>
<td>Above we used <code>"possum"</code>, but you should use <code>serverless</code> if you’re not sure what to call it.</td>
</tr>
<tr>
<td><code>functionsDir: "./functions/"</code></td>
<td>The directory that holds your serverless functions. Netlify supports <code>./netlify/functions/</code> without configuration.</td>
</tr>
<tr>
<td><code>copy: []</code></td>
<td>An Array of extra files to bundle with your serverless function. We copy your templates files for you but this is useful for additional files that may be used at build-time. Array entries can be:
<ul>
<li>a String for a single file or a directory (e.g., <code>"logo.svg"</code> or <code>"folder/"</code>).</li>
<li>an Object with <code>from</code> and <code>to</code> keys to change the output directory inside your bundle (e.g., <code>{ from: ".cache", to: "cache" }</code>).</li>
</ul>
</td>
</tr>
<tr>
<td>
<code>redirects: "netlify-toml"</code>
</td>
<td>How we manage your serverless redirects. This will add serverless redirects to your <code>netlify.toml</code> file and remove stale routes for you.<ul>
<li><code>redirects: false</code> will skip this entirely.</li>
<li><code>redirects: "netlify-toml"</code> (default) to use Netlify Functions.</li>
<li><code>redirects: "netlify-toml-functions"</code> (alias for <code>netlify-toml</code>)<!-- --></li>
<li><code>redirects: "netlify-toml-builders"</code> to use <a href="https://www.11ty.dev/docs/plugins/serverless/#use-with-on-demand-builders">Netlify On-demand Builders</a><!-- --></li>
<li>Write your own: Use a custom Function instead of a String: <code>function(<var>name</var>, <var>outputMap</var>)</code>. Don’t forget to handle removal of stale routes too!</li>
</ul></td>
</tr>
<tr>
<td><del><code>inputDir: "."</code></del></td>
<td>The Eleventy input directory (containing your Eleventy templates). <strong>This is no longer necessary.</strong> Eleventy injects this for you automatically.</td>
</tr>
<!-- I don’t think this belongs here !!! It belongs in the default serverless function -->
<tr>
<td><code>config: function(<var>eleventyConfig</var>) {}</code></td>
<td>Run your own custom Eleventy Configuration API code inside of the serverless function. Useful for a wide variety of things, but was added to facilitate developers wiring up additional serverless information from the <code>event</code> object to templates using <code>eleventyConfig.addGlobalData()</code>. For example, wire up cookies using <code>event.headers.cookie</code> or form post data using <code>event.body</code>.<!-- --></td>
</tr>
<tr>
<td colspan="2"><strong><em>Advanced Options:</em></strong></td>
</tr>
<tr>
<td><code>copyEnabled: true</code></td>
<td>Useful for local development. This Boolean enables or disables the copying of project files into your serverless bundle. (File copying is pretty cheap so you will likely want to leave this as-is.)
<ul>
<li>Try <code>copyEnabled: process.env.NODE_ENV !== "development"</code> (and set environment variables when running Eleventy locally e.g. <code>NODE_ENV=development npx @11ty/eleventy</code>)</li>
</ul>
</td>
</tr>
<tr>
<td><code>copyOptions: {}</code></td>
<td>Advanced configuration of copy behavior. Consult the <a href="https://www.npmjs.com/package/recursive-copy#usage"><code>recursive-copy</code> docs on NPM</a>. You probably won’t need this.</td>
</tr>
<tr>
<td><code>excludeDependencies: []</code></td>
<td>Array of dependencies explicitly excluded from the list found in your configuration file and global data files. These will not be visible to the serverless bundler.</td>
</tr>
</tbody>
</table>
<h3 id="your-generated-serverless-function" tabindex="-1">Your Generated Serverless Function <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#your-generated-serverless-function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Based on your plugin configuration, Eleventy will create your initial boilerplate serverless function for you. After initial creation, this serverless function code is managed by you.</p>
<p>Here is an over-simplified version for educational purposes only:</p>
<div class="codetitle codetitle-left"><b>Limitation </b>⚠️ This snippet is for educational purposes only—don’t copy and paste it!</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyServerless <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EleventyServerless</span><span class="token punctuation">(</span><span class="token string">"possum"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">path</span><span class="token operator">:</span> event<span class="token punctuation">.</span>path<span class="token punctuation">,</span> <span class="token comment">// (required) the URL path</span><br> <span class="token literal-property property">query</span><span class="token operator">:</span> event<span class="token punctuation">.</span>queryStringParameters<span class="token punctuation">,</span> <span class="token comment">// (optional)</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">try</span> <span class="token punctuation">{</span><br> <span class="token comment">// returns the HTML for the Eleventy template that matches to the URL</span><br> <span class="token comment">// Can use with `eleventyConfig.dataFilterSelectors` to put data cascade data into `page.data` here.</span><br> <span class="token keyword">let</span> <span class="token punctuation">[</span>page<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">await</span> elev<span class="token punctuation">.</span><span class="token function">getOutput</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> html <span class="token operator">=</span> page<span class="token punctuation">.</span>content<span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">statusCode</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span><br> <span class="token literal-property property">body</span><span class="token operator">:</span> html<br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">statusCode</span><span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span><br> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">error</span><span class="token operator">:</span> e<span class="token punctuation">.</span>message <span class="token punctuation">}</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>exports<span class="token punctuation">.</span>handler <span class="token operator">=</span> handler<span class="token punctuation">;</span></code></pre>
<p>Read more about <a href="https://www.11ty.dev/docs/config/#data-filter-selectors"><code>dataFilterSelectors</code></a>.</p>
<h4 id="use-with-on-demand-builders" tabindex="-1">Use with On-demand Builders <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#use-with-on-demand-builders">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>Note:</strong> As of right now, <strong>On-demand Builders</strong> are a Netlify-specific feature.<br>
</div></div>
<p>If, instead, you want to use an <a href="https://docs.netlify.com/configure-builds/on-demand-builders/"><strong>On-demand Builder</strong></a> to render the content on first-request and cache at the CDN for later requests, you will need to do two things:</p>
<p><strong>Thing 1:</strong> Swap the export in your template (and <code>npm install @netlify/functions</code>):</p>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span>handler <span class="token operator">=</span> handler<span class="token punctuation">;</span></code></pre>
<p>Replace the above with:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> builder <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@netlify/functions"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>exports<span class="token punctuation">.</span>handler <span class="token operator">=</span> <span class="token function">builder</span><span class="token punctuation">(</span>handler<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><strong>Thing 2:</strong> Use <code>redirects: "netlify-toml-builders"</code> in your <a href="https://www.11ty.dev/docs/plugins/serverless/#bundler-options">bundler config</a>.</p>
<p>The redirects need to point to <code>/.netlify/builders/</code> instead of <code>/.netlify/functions</code> so if you have written your own redirects handler, you’ll need to update that.</p>
<h3 id="step-2-add-to-.gitignore" tabindex="-1">Step 2: Add to <code>.gitignore</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#step-2-add-to-.gitignore">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Add the following rules to your <code>.gitignore</code> file (where <code>possum</code> is the name of your serverless function name):</p>
<pre><code>netlify/functions/possum/**
!netlify/functions/possum/index.js
</code></pre>
<h3 id="step-3-use-a-permalink-object" tabindex="-1">Step 3: Use a <code>permalink</code> Object <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#step-3-use-a-permalink-object">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Making a template file dynamic is as easy as changing your <a href="https://www.11ty.dev/docs/permalinks/"><code>permalink</code></a>. You might be familiar with this well-worn <code>permalink</code> syntax:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> /build<span class="token punctuation">-</span>generated<span class="token punctuation">-</span>path/<br><span class="token punctuation">---</span></code></pre>
<p>Serverless templates introduce a slight change: they use a <code>permalink</code> <em>Object</em>. So a <code>possum</code> serverless function <code>permalink</code> looks like this:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">possum</span><span class="token punctuation">:</span> /dynamic<span class="token punctuation">-</span>path/<br><span class="token punctuation">---</span></code></pre>
<p>These objects can be set anywhere in the data cascade (even inside of <a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a>).</p>
<p>Here’s an example of a serverless URL for our <code>possum</code> serverless function. Any requests to <code>/dynamic-path/</code> will now be generated at request-time.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>NOTE:</strong> <code>build</code> is the only reserved key in a <code>permalink</code> Object. If you want your template to continue to be built at build-time, use the <code>build</code> key.<br>
</div></div>
<p>The following is functionally equivalent to <code>permalink: /build-generated-path/</code>:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">build</span><span class="token punctuation">:</span> /build<span class="token punctuation">-</span>generated<span class="token punctuation">-</span>path/<br><span class="token punctuation">---</span></code></pre>
<p>Anything other than <code>build</code> is assumed to map to a serverless function. We used the name <code>possum</code>, but you can use any string. (Just make sure it maps to the <code>name</code> you passed to the Bundler Plugin above.)</p>
<h4 id="build-time-and-serverless" tabindex="-1">Build-time and Serverless <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#build-time-and-serverless">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You <em>can</em> mix both <code>build</code> and <code>possum</code> in the same permalink object! This will make the same input file render both at build-time <em>and</em> in a serverless function.</p>
<p>This might be useful when you want a specific URL for a CMS preview, but still want the production build to use full build-time templates.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">build</span><span class="token punctuation">:</span> /build<span class="token punctuation">-</span>generated<span class="token punctuation">-</span>path/<br> <span class="token key atrule">possum</span><span class="token punctuation">:</span> /dynamic<span class="token punctuation">-</span>path/<br><span class="token punctuation">---</span></code></pre>
<h4 id="multiple-serverless-functions" tabindex="-1">Multiple Serverless Functions <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#multiple-serverless-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Any number of serverless functions are allowed here.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">possum</span><span class="token punctuation">:</span> /dynamic<span class="token punctuation">-</span>path/<br> <span class="token key atrule">quokka</span><span class="token punctuation">:</span> /some<span class="token punctuation">-</span>other<span class="token punctuation">-</span>dynamic<span class="token punctuation">-</span>path/<br><span class="token punctuation">---</span></code></pre>
<h4 id="multiple-urls-per-serverless-function" tabindex="-1">Multiple URLs per Serverless Function <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#multiple-urls-per-serverless-function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>If you want to drive multiple URLs with one serverless template, pass in an Array of URLs.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">possum</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> /dynamic<span class="token punctuation">-</span>path/<br> <span class="token punctuation">-</span> /some<span class="token punctuation">-</span>other<span class="token punctuation">-</span>dynamic<span class="token punctuation">-</span>path/<br><span class="token punctuation">---</span></code></pre>
<h4 id="dynamic-slugs-and-serverless-global-data" tabindex="-1">Dynamic Slugs and Serverless Global Data <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#dynamic-slugs-and-serverless-global-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Perhaps most interestingly, this works with dynamic URLs, too! This will work with any syntax supported by the <a href="https://www.npmjs.com/package/path-to-regexp"><code>path-to-regexp</code> package</a>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Astute users of the 1.0 canary prereleases will note that starting in Beta 1, this package changed from <a href="https://www.npmjs.com/package/url-pattern"><code>url-pattern</code></a> to <code>path-to-regexp</code>. <a href="https://github.com/11ty/eleventy/issues/1988">Read more at Issue 1988</a>.<br>
</div></div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">possum</span><span class="token punctuation">:</span> /dynamic<span class="token punctuation">-</span>path/<span class="token punctuation">:</span>id/<br><span class="token punctuation">---</span></code></pre>
<p>This will match any requested URL that fits the <code>/dynamic-path/</code> followed by an open-ended folder name (e.g., <code>/dynamic-path/hello/</code> or <code>/dynamic-path/goodbye/</code>).</p>
<p>The above uses <code>:id</code> for the key name. When the templates are rendered, the key name puts the matched path String value for <code>id</code> into your Serverless Global Data in the Data Cascade at: <code>eleventy.serverless.path.id</code>. (Here, <code>id</code> matches <code>:id</code> above).</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">These should be treated as <em>potentially malicious user input</em>, and <em>you <strong>must</strong> escape these</em> if you use them in templates!<br>
<br>
Read more about <a href="https://www.11ty.dev/docs/plugins/serverless/#escaping-user-input">Escaping User Input</a>.<br>
</div></div>
<p>Here’s what your Serverless Global Data might look like:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">eleventy</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">serverless</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"hello"</span> <span class="token comment">// from /dynamic-path/hello/</span><br> <span class="token comment">//id: "goodbye" // from /dynamic-path/goodbye/</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="escaping-user-input" tabindex="-1">Escaping User Input <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#escaping-user-input">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>These should be treated as <em>potentially malicious user input</em>, and <em>you <strong>must</strong> escape these</em> if you use them in templates!<br>
The way to do this is specific to each template language.</p>
<ul>
<li><strong>Liquid</strong> has both an <code>escape</code> and <code>escape_once</code> filter.</li>
<li><strong>Nunjucks</strong> has autoescape turned on by default. (If you’ve disabled it, you can use the <code>escape</code> filter.)</li>
<li><strong>Other template languages:</strong> Read more <a href="https://www.11ty.dev/docs/layouts/#prevent-double-escaping-in-layouts">in the Layouts documentation</a>, which has other template languages’ methods for both escaped and unescaped output.</li>
</ul>
<h2 id="advanced" tabindex="-1">Advanced <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#advanced">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="dynamic-slugs-to-subset-your-pagination" tabindex="-1">Dynamic Slugs to Subset Your Pagination <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#dynamic-slugs-to-subset-your-pagination">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use the new <code>serverless</code> option in <code>pagination</code> to slice up your paginated data set using a dynamic slug!</p>
<p>Here’s how we use it for the <a href="https://www.11ty.dev/authors/">Eleventy Author Pages</a>.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> authors<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">serverless</span><span class="token punctuation">:</span> eleventy.serverless.path.id<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span><br> <span class="token key atrule">possum</span><span class="token punctuation">:</span> <span class="token string">"/authors/:id/"</span></code></pre>
<p>Eleventy fetches the value stored at <code>eleventy.serverless.path.id</code> (using <a href="https://lodash.com/docs/4.17.15#get">lodash <code>get</code></a>) and does an additional get on the pagination data in <code>authors</code>.</p>
<p>For example:</p>
<ol>
<li>A request is made to <code>/authors/zachleat/</code></li>
<li>The dynamic URL slug for the <code>possum</code> serverless function <code>/authors/:id/</code> matches <code>zachleat</code> to <code>:id</code>. This sets <code>"zachleat"</code> in the <code>eleventy.serverless.path.id</code> Global Data.</li>
<li>Because <code>pagination.serverless</code> has the value <code>"eleventy.serverless.path.id"</code>, we use lodash.get to select the key <code>"zachleat"</code> from Global Data.</li>
<li>An additional <code>lodash.get(authors, "zachleat")</code> returns a single chunk of data for one author.</li>
<li>Pagination only operates on that one selected page for rendering.</li>
</ol>
<h3 id="input-via-query-parameters" tabindex="-1">Input via Query Parameters <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#input-via-query-parameters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>In <strong>Dynamic <em>Templates</em></strong> (<em>not <strong>On-demand Builders</strong></em>), you can use query parameters as user input. Query parameters are available in the <code>eleventy.serverless.query</code> object.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">These should be treated as <em>potentially malicious user input</em>, and <em>you <strong>must</strong> escape these</em> if you use them in templates!<br>
<br>
Read more about <a href="https://www.11ty.dev/docs/plugins/serverless/#escaping-user-input">Escaping User Input</a>.<br>
</div></div>
<p><code>/my-url/?id=hello</code> might look like this in the Data Cascade of a dynamic template:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">eleventy</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">serverless</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"hello"</span> <span class="token comment">// from /my-url/?id=hello</span><br> <span class="token comment">//id: "goodbye" // from /my-url/?id=goodbye</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<!-- ### How do `permalink` Objects work with `page.url`?
_Documentation in progress_ (The new `serverlessURL` filter) -->
<h3 id="re-use-build-time-cache-from-the-fetch-plugin" tabindex="-1">Re-use build-time cache from the <a href="https://www.11ty.dev/docs/plugins/fetch/">Fetch plugin</a> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#re-use-build-time-cache-from-the-fetch-plugin">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>To speed up serverless rendering and avoid requests to external sources, you can re-use the <code>cache</code> folder from your build!</p>
<p>First, we’ll need to copy the cache folder into our bundle.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyServerlessBundlerPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyServerlessBundlerPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"possum"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">".cache/eleventy-fetch/"</span><span class="token punctuation">,</span><br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>And re-use the <code>directory</code> in your data files:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_data/github.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token comment">// Use the same folder declared above</span><br> <span class="token literal-property property">directory</span><span class="token operator">:</span> <span class="token string">".cache/eleventy-fetch/"</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token keyword">if</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ELEVENTY_SERVERLESS</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Infinite duration (until the next build)</span><br> options<span class="token punctuation">.</span>duration <span class="token operator">=</span> <span class="token string">"*"</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Bypass writing new cache files, which would error in serverless mode</span><br> options<span class="token punctuation">.</span>dryRun <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span><span class="token string">"https://example.com/"</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// …</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><span id="re-use-build-time-collections"></span></p>
<h3 id="collections-in-serverless" tabindex="-1">Collections in Serverless <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#collections-in-serverless">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Eleventy Serverless typically operates on a subset of templates in your project. As such, collections that are outside the scope of the serverless build are not available in serverless mode. You have two options to workaround this limitation:</p>
<ol>
<li>Precompile your collections manually at build-time</li>
<li>Build the data cascade for the project (no rendering required)</li>
</ol>
<h4 id="precompile-collections-at-build-time" tabindex="-1">Precompile Collections at Build-Time <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#precompile-collections-at-build-time">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>In this example we’ll build a static data file with collections data in it at build time and inject it into our serverless build at run time!</p>
<p>Consider a <code>sidebarNav</code> collection that populates a navigation menu (via the <a href="https://www.11ty.dev/docs/plugins/navigation/"><code>eleventy-navigation</code> plugin</a>).</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"sidebarNav"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>data<span class="token operator">?.</span>eleventyNavigation<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This might be used in your templates (serverless or build) via <code>{{ collections.sidebarNav | eleventyNavigation }}</code>.</p>
<p>Now, the <code>sidebarNav</code> collection would not normally be available in a serverless context, because all of the templates that populate the menu are not in the scope of the serverless build. But we can generate a static copy of that collection for use in serverless mode. In fact, this is how the sidebar works on each (serverless) Author’s page (e.g. the <a href="https://www.11ty.dev/authors/zachleat/">one for <code>@zachleat</code></a>).</p>
<p>Consider the following Eleventy template which creates an array of collection-like entries for the sidebar navigation.</p>
<details>
<summary><strong>Expand to see code sample</strong></summary>
<div class="codetitle codetitle-left"><b>Filename </b>serverless-collections-export.11ty.js</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">data</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token comment">// generate directly to the serverless bundle folder</span><br> <span class="token literal-property property">permalink</span><span class="token operator">:</span> <span class="token string">"./netlify/functions/serverless/_generated-serverless-collections.json"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">permalinkBypassOutputDir</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">eleventyExcludeFromCollections</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>collections<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> entries <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br> <span class="token comment">// Iterate over any items with the `sidebarNav` tag</span><br> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> entry <span class="token keyword">of</span> collections<span class="token punctuation">.</span>sidebarNav<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> entries<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">page</span><span class="token operator">:</span> entry<span class="token punctuation">.</span>data<span class="token punctuation">.</span>page<span class="token punctuation">,</span><br> <span class="token literal-property property">eleventyNavigation</span><span class="token operator">:</span> entry<span class="token punctuation">.</span>data<span class="token punctuation">.</span>eleventyNavigation<span class="token punctuation">,</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">sidebarNav</span><span class="token operator">:</span> entries<br> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that it isn’t currently possible to serialize <code>entry.data.collections</code> to JSON as it may contain circular references. We hope to improve this in the future with a new collections API!</div></div>
<p>Inside of your serverless function file, you can import this file and use it directly:</p>
<div class="codetitle codetitle-left"><b>Filename </b>./netlify/functions/possum/index.js</div>
<pre class="language-js"><code class="language-js"><mark class="highlight-line highlight-line-active"><span class="token keyword">const</span> precompiledCollections <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./_generated-serverless-collections.json"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></mark><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EleventyServerless</span><span class="token punctuation">(</span><span class="token string">"possum"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> event<span class="token punctuation">.</span>path<span class="token punctuation">,</span></span><br><span class="highlight-line"> <span class="token literal-property property">query</span><span class="token operator">:</span> event<span class="token punctuation">.</span>queryStringParameters<span class="token punctuation">,</span></span><br><mark class="highlight-line highlight-line-active"> precompiledCollections</mark><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token comment">// Some content truncated</span></span><br><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
</details>
<h4 id="compile-the-data-cascade-for-the-project" tabindex="-1">Compile the data cascade for the project <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#compile-the-data-cascade-for-the-project">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>As we have just learned, Eleventy Serverless operates on a subset of templates in your project. You can disable this subset scope with the <code>singleTemplateScope</code> option on the <code>EleventyServerless</code> class (defaults to <code>true</code>). <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.27">Added in v2.0.0</span></p>
<p>This uses incremental builds with the new ignore initial build feature to only render one file (while building the larger data cascade for the project). The downside here is that while this is much friendlier to any use of <code>collections</code> on your templates, it is slower! Here are the conditions I’d expect folks to want to make this tradeoff:</p>
<ul>
<li>If your project is small/fast enough and you don’t want to spend the extra development effort.</li>
<li>If your project is larger but you’re using On-demand Builders where the extra rendering cost is only paid once.</li>
<li>For larger projects I would <em>not recommend</em> use of <code>singleTemplateScope: false</code> in a dynamic template that renders with each request.</li>
</ul>
<p>Here’s how to enable this feature in your serverless function file:</p>
<div class="codetitle codetitle-left"><b>Filename </b>./netlify/functions/possum/index.js</div>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">let</span> elev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EleventyServerless</span><span class="token punctuation">(</span><span class="token string">"possum"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> event<span class="token punctuation">.</span>path<span class="token punctuation">,</span></span><br><span class="highlight-line"> <span class="token literal-property property">query</span><span class="token operator">:</span> event<span class="token punctuation">.</span>queryStringParameters<span class="token punctuation">,</span></span><br><mark class="highlight-line highlight-line-active"> <span class="token literal-property property">singleTemplateScope</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// true by default</span></mark><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token comment">// Some content truncated</span></span><br><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
<p>At some point we may enable this feature by default <a href="https://github.com/11ty/eleventy/issues/2737">if performance improves enough</a>!</p>
<h3 id="swap-to-dynamic-using-the-data-cascade-and-eleventycomputed" tabindex="-1">Swap to Dynamic using the Data Cascade and <code>eleventyComputed</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/serverless/#swap-to-dynamic-using-the-data-cascade-and-eleventycomputed">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>In this example we’re using a global data entry to control whether a downstream temple renders in serverless or build mode (at build time). In some more limited use cases this can solved using your hosting providers Redirects feature (e.g. on <a href="https://docs.netlify.com/routing/redirects/">Netlify this means a <code>netlify.toml</code> or <code>_redirects</code> file</a>).</p>
<p>If you want to make a decision at serverless runtime to render a build template, you’ll need to add logic to your <a href="https://www.11ty.dev/docs/plugins/serverless/#your-generated-serverless-function">serverless function</a> to redirect to the build URL from the serverless template.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Templates will generate via the Build</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"runInServerlessMode"</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Or render in Serverless mode</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"runInServerlessMode"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>And then in your template files you can use this global data value with <a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a> to swap rendering modes:</p>
<div class="codetitle codetitle-left"><b>Filename </b>my-template-file.njk</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span>js<br><span class="token punctuation">{</span><br> <span class="token key atrule">eleventyComputed</span><span class="token punctuation">:</span> <span class="token punctuation">{</span><br> <span class="token key atrule">permalink</span><span class="token punctuation">:</span> function(<span class="token punctuation">{</span>runInServerlessMode<span class="token punctuation">}</span>) <span class="token punctuation">{</span><br> return <span class="token punctuation">{</span><br> <span class="token punctuation">[</span><span class="token key atrule">runInServerlessMode ? "serverless"</span> <span class="token punctuation">:</span> <span class="token string">"build"</span><span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token string">"/"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><span class="token punctuation">---</span><br>Template Content goes here</code></pre>
<ul>
<li>If you’re here you <em>may</em> also be interested in the <a href="https://github.com/11ty/demo-eleventy-serverless-oauth">Eleventy Serverless OAuth demo</a></li>
</ul>
<hr>
<p><strong>For internal use</strong></p>
<details>
<summary>Dependency Bundle Sizes</summary>
<table>
<thead>
<tr>
<th>Bundle size</th>
<th>Package name</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy" alt="Bundle size for @11ty/eleventy" loading="lazy"></td>
<td><code>@11ty/eleventy</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy@canary" alt="Bundle size for @11ty/eleventy" loading="lazy"></td>
<td><code>@11ty/eleventy@canary</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy-img" alt="Bundle size for @11ty/eleventy-img" loading="lazy"></td>
<td><code>@11ty/eleventy-img</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy-fetch" alt="Bundle size for @11ty/eleventy-fetch" loading="lazy"></td>
<td><code>@11ty/eleventy-fetch</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy-plugin-syntaxhighlight" alt="Bundle size for @11ty/eleventy-plugin-syntaxhighlight" loading="lazy"></td>
<td><code>@11ty/eleventy-plugin-syntaxhighlight</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy-navigation" alt="Bundle size for @11ty/eleventy-navigation" loading="lazy"></td>
<td><code>@11ty/eleventy-navigation</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy-plugin-vue" alt="Bundle size for @11ty/eleventy-plugin-vue" loading="lazy"></td>
<td><code>@11ty/eleventy-plugin-vue</code></td>
</tr>
<tr>
<td><img src="https://packagephobia.com/badge?p=@11ty/eleventy-plugin-rss" alt="Bundle size for @11ty/eleventy-plugin-rss" loading="lazy"></td>
<td><code>@11ty/eleventy-plugin-rss</code></td>
</tr>
</tbody>
</table>
</details>
Syntax Highlighting
2023-04-24T22:12:47Z
https://www.11ty.dev/docs/plugins/syntaxhighlight/
<h1>Syntax Highlighting Plugin</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#syntax-highlight-source-code">Syntax Highlight Source Code </a></li><li><a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#show-changes-using-diff-syntax">Show changes using diff- syntax </a></li></ul></li></ul></div><p></p>
</details>
<p>A pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript here, these highlight transformations are all done at build-time. Supports individual line highlighting.</p>
<ul>
<li>This documentation applies to <code>eleventy-plugin-syntaxhighlight</code> <code>v3.2.0</code> and newer.</li>
<li><a href="https://github.com/11ty/eleventy-plugin-syntaxhighlight">GitHub</a>.</li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Available on <a href="https://www.npmjs.com/package/@11ty/eleventy-plugin-syntaxhighlight">npm</a>.</p>
<pre><code>npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev
</code></pre>
<p>Open up your Eleventy config file (probably <code>.eleventy.js</code>) and use <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> syntaxHighlight <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-syntaxhighlight"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>syntaxHighlight<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</div></div>
<p>Optionally pass in an options object as the second argument to <code>addPlugin</code> to further customize this plugin pack.</p>
<details>
<summary>Expand to see Advanced Options</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> syntaxHighlight <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-syntaxhighlight"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>syntaxHighlight<span class="token punctuation">,</span> <span class="token punctuation">{</span><br><br> <span class="token comment">// Line separator for line breaks</span><br> <span class="token literal-property property">lineSeparator</span><span class="token operator">:</span> <span class="token string">"\n"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Change which Eleventy template formats use syntax highlighters</span><br> <span class="token literal-property property">templateFormats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"*"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// default</span><br><br> <span class="token comment">// Use only a subset of template types (11ty.js added in v4.0.0)</span><br> <span class="token comment">// templateFormats: ["liquid", "njk", "md", "11ty.js"],</span><br><br> <span class="token comment">// init callback lets you customize Prism</span><br> <span class="token function-variable function">init</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> Prism <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> Prism<span class="token punctuation">.</span>languages<span class="token punctuation">.</span>myCustomLanguage <span class="token operator">=</span> <span class="token comment">/* */</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Added in 3.1.1, add HTML attributes to the <pre> or <code> tags</span><br> <span class="token literal-property property">preAttributes</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">tabindex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Added in 4.1.0 you can use callback functions too</span><br> <span class="token string-property property">"data-language"</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> language<span class="token punctuation">,</span> content<span class="token punctuation">,</span> options <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> language<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">codeAttributes</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Added in 5.0.0, throw errors on invalid language names</span><br> <span class="token literal-property property">errorOnInvalidLanguage</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<p>You are responsible for including your favorite PrismJS theme CSS and there are many ways to do that. The default themes are provided by <a href="https://prismjs.com/#basic-usage-cdn">several CDNs</a> and could be easily included in a base layout, like in the example below:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- Some html boilerplate omitted --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>You could also download the css file or paste its content inside a style tag. This approach allows the use of <a href="https://github.com/PrismJS/prism-themes">other themes</a> from a Prism extension repository.</p>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This plugin provides the following syntax highlighters using PrismJS, all of which currently support individual line highlighting.</p>
<ul>
<li>Markdown Highlighter (triple backtick <code>```</code>)</li>
<li>Liquid Custom Tag <code>{% highlight %}</code></li>
<li>Nunjucks Paired Shortcode <code>{% highlight %}</code></li>
<li>JavaScript Function <code>this.highlight()</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Syntax Highlighter v4.0.0">Added in Syntax Highlighter v4.0.0</span></li>
<li>WebC component <code><syntax-highlight></code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Syntax Highlighter v4.2.0">Added in Syntax Highlighter v4.2.0</span></li>
</ul>
<h3 id="syntax-highlight-source-code" tabindex="-1">Syntax Highlight Source Code <a class="direct-link" href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#syntax-highlight-source-code">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><a href="http://prismjs.com/#languages-list">Review the list of supported PrismJS languages</a></li>
</ul>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlight-md" role="tab">Markdown</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlight-webc" role="tab">WebC</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlight-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlight-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlight-js" role="tab">11ty.js</a>
</div>
<div id="highlight-md" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Markdown</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span><br><span class="token code-block language-js"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></span><br><span class="token punctuation">```</span></span></code></pre>
<p>Optionally specify a language after the start of the markdown fenced code block.</p>
</div>
<div id="highlight-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> highlight js <span class="token delimiter punctuation">%}</span></span><br>function myFunction() {<br> return true;<br>}<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endhighlight <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="highlight-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">highlight</span> <span class="token string">"js"</span> <span class="token delimiter punctuation">%}</span></span><br>function myFunction() {<br> return true;<br>}<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endhighlight</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="highlight-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> code <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>function myFunction() {<br> return true;<br>}</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">highlight</span><span class="token punctuation">(</span><span class="token string">"js"</span><span class="token punctuation">,</span> code<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>The <code>highlight</code> JavaScript function was <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Syntax Highlighter v4.0.0">Added in Syntax Highlighter v4.0.0</span>.</p>
</div>
<div id="highlight-webc" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>webc</div>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- Requires WebC v0.6.2+ --></span><br><span class="token comment"><!-- Requires Syntax Highlighter v4.2.0+ --></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>syntax-highlight</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>npm:@11ty/eleventy-plugin-syntaxhighlight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>function myFunction() {<br> return true;<br>}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>syntax-highlight</span><span class="token punctuation">></span></span></code></pre>
<details>
<summary>Expand to see an example of importing this as a global component in your configuration file.</summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginWebc <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-webc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginWebc<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// Array `components` requires Eleventy WebC v0.9.2+</span><br> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"_components/**/*.webc"</span><span class="token punctuation">,</span><br> <span class="token string">"npm:@11ty/eleventy-plugin-syntaxhighlight/*.webc"</span><br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html">---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>syntax-highlight</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>function myFunction() {<br> return true;<br>}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>syntax-highlight</span><span class="token punctuation">></span></span></code></pre>
</details>
<details>
<summary>Expand to see an example of importing for use anywhere on the page via front matter.</summary>
<div class="codetitle codetitle-left"><b>Filename </b>page.webc</div>
<pre class="language-html"><code class="language-html">---<br>webc:<br> components: ./node_modules/@11ty/eleventy-plugin-syntaxhighlight/syntax-highlight.webc<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>syntax-highlight</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>function myFunction() {<br> return true;<br>}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>syntax-highlight</span><span class="token punctuation">></span></span></code></pre>
</details>
</div>
</seven-minute-tabs>
</is-land>
<p>Will render like this in the browser:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div></div>
<h3 id="show-changes-using-diff-syntax" tabindex="-1">Show changes using <code>diff-</code> syntax <a class="direct-link" href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#show-changes-using-diff-syntax">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Syntax Highlighter v3.2.2">Added in Syntax Highlighter v3.2.2</span></p>
<p>Add the <code>diff-</code> prefix to the language name on the previous examples to show code changes. Use a <code>+</code> or <code>-</code> at the beginning of the line to denote the addition or removal of that line.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlightdiff-md" role="tab">Markdown</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlightdiff-webc" role="tab">WebC</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlightdiff-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlightdiff-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/#highlightdiff-js" role="tab">11ty.js</a>
</div>
<div id="highlightdiff-md" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Markdown</div>
<pre><code>```diff-js
+function myFunction() {
// …
- return true;
}
```
</code></pre>
</div>
<div id="highlightdiff-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-markdown"><code class="language-markdown">{% highlight diff-js %}<br>+function myFunction() {<br> // …<br><span class="token list punctuation">-</span> return true;<br> }<br>{% endhighlight %}</code></pre>
</div>
<div id="highlightdiff-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-markdown"><code class="language-markdown">{% highlight "diff-js" %}<br>+function myFunction() {<br> // …<br><span class="token list punctuation">-</span> return true;<br> }<br>{% endhighlight %}</code></pre>
</div>
<div id="highlightdiff-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> code <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>+function myFunction() {<br> // …<br>- return true;<br> }</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">highlight</span><span class="token punctuation">(</span><span class="token string">"diff-js"</span><span class="token punctuation">,</span> code<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>The <code>highlight</code> JavaScript function was <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Syntax Highlighter v4.0.0">Added in Syntax Highlighter v4.0.0</span>.</p>
</div>
<div id="highlightdiff-webc" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>webc</div>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- Requires WebC v0.6.2+ --></span><br><span class="token comment"><!-- Requires Syntax Highlighter v4.2.0+ --></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>syntax-highlight</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>diff-js<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">webc:</span>import</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>npm:@11ty/eleventy-plugin-syntaxhighlight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>+function myFunction() {<br> // …<br>- return true;<br> }<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>syntax-highlight</span><span class="token punctuation">></span></span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>Will render like this in the browser:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-diff-js"><code class="language-diff-js"><span class="token inserted-sign inserted language-js"><span class="token prefix inserted">+</span><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br></span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> <span class="token comment">// …</span><br></span><span class="token deleted-sign deleted language-js"><span class="token prefix deleted">-</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br></span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token punctuation">}</span></span></code></pre>
</div></div>
<p>Alternatively, you can use <code>diff</code> <em>without</em> another language name to enable plaintext line highlighting.</p>
<details>
<summary>Don’t forget to add styles too! Here’s a sample <code>diff-</code> CSS</summary>
<div class="codetitle codetitle-left"><b>Syntax </b>CSS</div>
<pre class="language-css"><code class="language-css"><span class="token selector">.token.deleted</span> <span class="token punctuation">{</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>350deg 100% 88% / 47%<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.token.inserted</span> <span class="token punctuation">{</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>120deg 73% 75% / 35%<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token comment">/* Make the + and - characters unselectable for copy/paste */</span><br><span class="token selector">.token.prefix.unchanged,<br>.token.prefix.inserted,<br>.token.prefix.deleted</span> <span class="token punctuation">{</span><br> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token comment">/* Optional: full-width background color */</span><br><span class="token selector">.token.inserted:not(.prefix),<br>.token.deleted:not(.prefix)</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</details>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Starting with <code>v3.2</code> of this plugin, this plugin now bundles the official <a href="https://prismjs.com/plugins/diff-highlight/">Prism <code>diff-highlight</code> plugin</a>. The previous line highlighting feature is considered deprecated but still available. Check out <a href="https://v0-12-1.11ty.dev/docs/plugins/syntaxhighlight/">the old documentation if you want to learn how to use the deprecated line-highlighting feature</a>.</div></div>
Community
2023-03-29T09:04:25Z
https://www.11ty.dev/docs/community/
<h1>社区</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/community/#step-1-%E5%88%86%E4%BA%AB">Step 1 分享 </a></li><li><a href="https://www.11ty.dev/docs/community/#step-2-%E8%B7%9F%E8%BF%9B%E5%8A%A8%E6%80%81">Step 2 跟进动态 </a></li><li><a href="https://www.11ty.dev/docs/community/#step-3-%E9%80%9A%E8%BF%87-open-collective-%E6%8D%90%E8%B5%A0">Step 3 通过 Open Collective 捐赠 </a></li></ul></div><p></p>
</details>
<h2 id="step-1-分享" tabindex="-1"><span class="numberflag"><span class="sr-only">Step</span> 1</span> 分享 <a class="direct-link" href="https://www.11ty.dev/docs/community/#step-1-%E5%88%86%E4%BA%AB">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><strong>Build something</strong>—join the <a href="https://www.11ty.dev/authors/">797 developers building with Eleventy</a>.
<ul>
<li>Want to brave the <a href="https://www.11ty.dev/speedlify/">Eleventy Leaderboards</a> and track the Lighthouse scores of your web site over time? <a href="https://www.11ty.dev/docs/leaderboards-add/">Add your site to the <code>11ty-community</code> repo</a>!</li>
<li>It’s also helpful if you add <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#use-with-meta-namegenerator"><code><meta name="generator"></code> to your existing Eleventy project</a>.</li>
</ul>
</li>
<li><strong>Ask a question, answer a question</strong>: We welcome questions from people of all experience levels on <a href="https://www.11ty.dev/blog/discord/">Discord</a>, <a href="https://github.com/11ty/eleventy/discussions">GitHub Discussions</a>, and the <a href="https://github.com/11ty/eleventy/issues">issue tracker</a>. We <em>really</em> appreciate help answering those questions too!</li>
<li><strong>Tell a friend!</strong> Our project doesn’t have a big marketing budget so we rely on word of mouth!</li>
<li><a href="https://github.com/11ty/eleventy" class="minilink minilink-github elv-skipicon"><span>★</span> <strong title="15914">15.9k</strong></a> <a href="https://github.com/11ty/eleventy"><strong>Star Eleventy on GitHub!</strong></a> This is an easy way to support our underrated project and help boost our rank on both GitHub and <a href="https://jamstack.org/generators/">jamstack.org</a>’s list of site generators.</li>
<li>Looking to <strong>Hire an Eleventy developer</strong>? Browse the <a href="https://www.11ty.dev/super-professional-business-network/">Eleventy Super Professional Business Network 💼</a></li>
</ul>
<h2 id="step-2-跟进动态" tabindex="-1"><span class="numberflag"><span class="sr-only">Step</span> 2</span> 跟进动态 <a class="direct-link" href="https://www.11ty.dev/docs/community/#step-2-%E8%B7%9F%E8%BF%9B%E5%8A%A8%E6%80%81">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://fosstodon.org/@eleventy"><strong>Follow @eleventy@fosstodon.org on Mastodon</strong></a></li>
<li>Read the <a href="https://www.11ty.dev/blog/"><strong>Eleventy Blog</strong></a></li>
<li>Subscribe/unsubscribe to the <a href="https://www.youtube.com/channel/UCskGTioqrMBcw8pd14_334A">Eleventy YouTube Channel</a></li>
<li>We publish RSS feeds for: <a href="https://www.11ty.dev/firehose/?type=youtube&type=github&type=blog&type=quick-tips"><strong>Everything</strong> (the firehose)</a>, just <a href="https://www.11ty.dev/blog/feed.xml"><strong>Blog Posts</strong></a> or just <a href="https://www.11ty.dev/docs/feed.xml"><strong>Documentation Updates</strong></a></li>
<li>View the full <a href="https://www.11ty.dev/docs/versions/">Eleventy Release History</a> (with documentation for previous versions)</li>
</ul>
<h2 id="step-3-通过-open-collective-捐赠" tabindex="-1"><span class="numberflag"><span class="sr-only">Step</span> 3</span> 通过 <a href="https://opencollective.com/11ty">Open Collective</a> 捐赠 <a class="direct-link" href="https://www.11ty.dev/docs/community/#step-3-%E9%80%9A%E8%BF%87-open-collective-%E6%8D%90%E8%B5%A0">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy is supported by <a href="https://www.11ty.dev/docs/supporters/">folks <strong>like <span aria-hidden="true" class="emoji">👋</span> <span class="nowrap" data-investors-avatar="prepend">you</span></strong></a> that want to invest in better, longer lasting tools to create on the web.</p>
<div class="fl">
<div>
<a href="https://opencollective.com/11ty" class="btn-primary btn-primary-sm benchnine rainbow-active rainbow-active-noanim elv-externalexempt">Contribute</a>
</div>
<div style="flex-basis: 30em">
<p>As a thank you to our Supporters, Eleventy will:</p>
<ol>
<li>Display your <a href="https://www.11ty.dev/docs/supporters/">name and avatar on the Eleventy documentation</a>. Monthly supporter avatars are listed in the footer of <em>almost</em> all documentation pages.</li>
<li>No advertisements, tag managers, or third party trackers on Eleventy documentation pages. (Okay, everyone gets this)</li>
<li>Backer tier and above can join the <a href="https://www.11ty.dev/super-professional-business-network/">Eleventy Super Professional Business Network</a>.</li>
<li><em>More to come!</em></li>
</ol>
<!-- 1. **Future Roadmap** Access to documentation offline (Progressive Web App). -->
</div></div>
<p>All Eleventy contributors on Open Collective will be given a <a href="https://www.11ty.dev/docs/account/">Contributor Account</a> with access to Contributor-only features. To sign up, donate to <a href="https://opencollective.com/11ty"><strong>Support Eleventy</strong> on Open Collective <span aria-hidden="true" class="emoji">🎁</span></a>!</p>
Glossary
2023-03-29T09:04:25Z
https://www.11ty.dev/docs/glossary/
<h1>术语表</h1>
<p>本页面提供了两个术语列表,一个是 <a href="https://www.11ty.dev/docs/glossary/#eleventy-specific-terminology">Eleventy 特定术语</a>,在使用 Eleventy 构建项目时有用;另一个是 <a href="https://www.11ty.dev/docs/glossary/#industry-terms-and-buzzwords">行业属于</a>,对理解上下文有帮助。</p>
<p><em>Work in progress: <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/glossary.md" class="elv-externalexempt">Edit this page</a></em></p>
<h2 id="eleventy-特定术语" tabindex="-1">Eleventy 特定术语 <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#eleventy-%E7%89%B9%E5%AE%9A%E6%9C%AF%E8%AF%AD">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="模板(template)" tabindex="-1">模板(Template) <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#%E6%A8%A1%E6%9D%BF%EF%BC%88template%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A content file written in a <a href="https://www.11ty.dev/docs/languages/">format such as Markdown, HTML, Liquid, Nunjucks, and more</a>, which Eleventy transforms into a page (or pages) in the built site. Templates can access <a href="https://www.11ty.dev/docs/glossary/#data">data</a> exposed through the <a href="https://www.11ty.dev/docs/glossary/#data-cascade">data cascade</a> with templating syntax.</p>
<h3 id="layout" tabindex="-1">Layout <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#layout">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A template which wraps around another template, typically to provide the scaffolding markup for content to sit in.</p>
<p><a href="https://www.11ty.dev/docs/layouts/">Read more about using layouts.</a></p>
<h3 id="data" tabindex="-1">Data <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Exposed via variables that can be used inside <a href="https://www.11ty.dev/docs/glossary/#template">templates</a> and <a href="https://www.11ty.dev/docs/glossary/#layout">layouts</a> using templating syntax. The data for a given template is aggregated through a process called the <a href="https://www.11ty.dev/docs/glossary/#data-cascade">data cascade</a>.</p>
<h3 id="data-cascade" tabindex="-1">Data Cascade <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#data-cascade">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Eleventy's order of operations for evaluating all <a href="https://www.11ty.dev/docs/glossary/#data">data</a> for any given <a href="https://www.11ty.dev/docs/glossary/#template">template</a>, and for resolving conflicts that arise. The data cascade follows the principle of colocation, so data defined broadly to apply to many templates will be overruled by data that targets the given template more specifically.</p>
<p><a href="https://www.11ty.dev/docs/data-cascade/">Read more about the data cascade.</a></p>
<h3 id="filter" tabindex="-1">Filter <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#filter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A function which can be used within templating syntax to transform <a href="https://www.11ty.dev/docs/glossary/#data">data</a> into a more presentable format. Filters are typically designed to be chained, so that the value returned from one filter is piped into the next filter.</p>
<p><a href="https://www.11ty.dev/docs/filters/">Read more about filters.</a></p>
<h3 id="shortcode" tabindex="-1">Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A function which can be used within templating syntax to inject content into templates. Shortcodes can take many arguments, and can be thought of as a templating approach to reusable markup.</p>
<p><a href="https://www.11ty.dev/docs/shortcodes/">Read more about shortcodes.</a></p>
<h3 id="collection" tabindex="-1">Collection <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#collection">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>An array of <a href="https://www.11ty.dev/docs/glossary/#template">templates</a>, used to group similar content. Collections can be created by using <a href="https://www.11ty.dev/docs/collections/#tag-syntax">tags</a> or by calling the <a href="https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting">collections API in the Eleventy configuration</a>.</p>
<p><a href="https://www.11ty.dev/docs/collections/">Read more about collections.</a></p>
<h3 id="pagination" tabindex="-1">Pagination <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#pagination">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A way to create pages by iterating over data. The same template is applied to each chunk of the paginated data.</p>
<p><a href="https://www.11ty.dev/docs/pagination/">Read more about pagination.</a></p>
<h3 id="plugin" tabindex="-1">Plugin <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#plugin">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A portable, installable Eleventy configuration which can add <a href="https://www.11ty.dev/docs/glossary/#data">data</a>, <a href="https://www.11ty.dev/docs/glossary/#filter">filters</a>, <a href="https://www.11ty.dev/docs/glossary/#shortcode">shortcodes</a>, and more to a project's setup.</p>
<p><a href="https://www.11ty.dev/docs/plugins/">Read more about plugins.</a></p>
<h3 id="eleventy-edge" tabindex="-1">Eleventy Edge <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#eleventy-edge">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Opt-in shortcodes for Eleventy in which pieces of dynamic functionality can be coupled with build-generated or serverless templates.</p>
<p><a href="https://www.11ty.dev/docs/plugins/edge/">Read more about Eleventy Edge.</a></p>
<h3 id="eleventy-serverless" tabindex="-1">Eleventy Serverless <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#eleventy-serverless">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>An opt-in build mode for Eleventy in which specified pages are built when a user requests them, rather than ahead of time during a build step. Optionally, pages that are built on request can be cached by the content delivery network to be used for future visits to that page.</p>
<p><a href="https://www.11ty.dev/docs/plugins/serverless/">Read more about Eleventy Serverless.</a></p>
<h2 id="行业术语和流行语" tabindex="-1">行业术语和流行语 <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#%E8%A1%8C%E4%B8%9A%E6%9C%AF%E8%AF%AD%E5%92%8C%E6%B5%81%E8%A1%8C%E8%AF%AD">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Bask in the warm glow of this <em>“Nobody ever got fired for buying IBM”</em>-style feel-good industry jargon.</p>
<p>Our industry can be particularly bad about inventing words for things that already exist. Hopefully this page will help you navigate the labyrinth.</p>
<h3 id="static-sites" tabindex="-1">Static Sites <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#static-sites">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>A static site is a group of generated HTML files. Content is built into the HTML files rather than using a dynamic back end language to generate the content on-the-fly. A dynamic site can appear static when you add caching rules to make the content stickier. A static site can appear dynamic when you run your build quickly and often.</p>
<h3 id="jamstack" tabindex="-1">Jamstack <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#jamstack">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<blockquote>
<p>Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.—<a href="https://jamstack.org/">jamstack.org</a></p>
</blockquote>
<p>Eleventy facilitates Jamstack sites—but you maintain full control over the JavaScript.</p>
<h3 id="progressive-enhancement" tabindex="-1">Progressive Enhancement <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#progressive-enhancement">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<!-- You’re safe here. But a static site generator that is Progressive Enhancement friendly is only the beginning. -->
<p>The idea that <em>content</em> should be the priority for a website's development. In other words, start with only essential content and functionality that works with as many users as possible, and then progressively enhance from there.</p>
<p>As stated in the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement">MDN Web Docs</a>: "Special notice should be taken of accessibility. Acceptable alternatives should be provided where possible."</p>
<h3 id="data-driven" tabindex="-1">Data-Driven <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#data-driven">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Make components and markup data-driven so that you don’t have a bunch of one-off copy-pasted HTML instances littered throughout your project.</p>
<h3 id="serverless-friendly" tabindex="-1">Serverless Friendly <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#serverless-friendly">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<blockquote>
<p>“You can take your front-end skills and do things that typically only a back-end can do. You can write a JavaScript function that you run and receive a response from by hitting a URL.”—<a href="https://serverless.css-tricks.com/">The Power of Serverless</a> from <a href="https://twitter.com/chriscoyier">Chris Coyier</a></p>
</blockquote>
<p>Take care to make sure that <span class="buzzword">serverless</span> functions are <span class="buzzword">progressively enhanced</span>. If you call <span class="buzzword">serverless</span> functions in client-side JavaScript, they should be used for features that are outside the core functionality of the site. Use <a href="https://www.11ty.dev/docs/plugins/serverless/">Eleventy Serverless</a> to generate pages on-request without any client-side JavaScript.</p>
<h3 id="lean-web" tabindex="-1">Lean Web <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#lean-web">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>To be honest it’s kind of a stretch to relate Lean methodology to this project but the term just kinda feels right.</p>
<h3 id="zero-config" tabindex="-1">Zero Config <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#zero-config">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Zero config means that Eleventy can run without any command line parameters or configuration files.</p>
<p>We’ve taken care to setup Eleventy so that that running the stock <code>eleventy</code> command uses sensible defaults. Lower the barrier to entry for that first project build to get up and running faster.</p>
<h3 id="convention-over-configuration-routing" tabindex="-1">Convention over Configuration Routing <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#convention-over-configuration-routing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Can you believe that some frameworks require a centralized piece of configuration for routing? <code>eleventy</code> routes map the file system, unless you override with a <code>permalink</code>.</p>
<h3 id="pre-rendered-templates-by-default" tabindex="-1">Pre-rendered Templates by Default <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#pre-rendered-templates-by-default">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>With the rise of client side rendering of templates in JavaScript came significant performance problems, especially with users of less-capable (but none-the-less still modern) hardware. Did you know they’re selling new mobile devices that are pretty hardware-limited?</p>
<p>Many frameworks switched to Server Side Rendering, which meant running an application server with middleware that would render the markup on demand for each request. Eleventy templates by default are generated (some call this pre-rendering) at build time for maximum performance. This way the web server only needs to fetch the static file and send it back to the user.</p>
<ul>
<li>If you want to add dynamic server-side functionality to your Eleventy project, use <a href="https://www.11ty.dev/docs/plugins/edge/">Eleventy Edge</a> on top of your build or server generated templates.</li>
<li>Eleventy can also run in <a href="https://www.11ty.dev/docs/plugins/serverless/">Serverless mode</a> for server side rendering <em>On Request</em> or even <em>On Request Once and Cached for Subsequent Visitors</em>.</li>
</ul>
<h3 id="hydration-less" tabindex="-1">Hydration-less <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#hydration-less">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Well, uh, we don’t inject or use any client-side JavaScript in Eleventy, so there’s nothing that needs hydration.</p>
<h3 id="apps-not-app-servers" tabindex="-1">Apps not App Servers <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#apps-not-app-servers">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Application servers can be slow. Instead of PHP, Java, or even Node.js dynamically generating page responses on the fly when the request comes in, have your pre-rendered templates ready to go for delivery! Maximum performance.</p>
<h3 id="single-page-applications-(spa)-versus-multi-page-applications-(mpa)" tabindex="-1">Single Page Applications (SPA) versus Multi-Page Applications (MPA) <a class="direct-link" href="https://www.11ty.dev/docs/glossary/#single-page-applications-(spa)-versus-multi-page-applications-(mpa)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Single Page Applications (SPA) use JavaScript to enable navigations between pages on a web site. Multi-Page Applications use the classic navigation model of the web and do a full page refresh to a new page.</p>
<p>Should you <a href="https://www.11ty.dev/docs/single-page-applications/">build a Single Page Application with Eleventy</a>?</p>
HTML
2023-03-29T09:04:25Z
https://www.11ty.dev/docs/languages/html/
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>html</code></td>
<td><code>.html</code></td>
<td>N/A</td>
</tr>
</tbody>
</table>
<p>HTML files are pre-processed by default as <a href="https://www.11ty.dev/docs/languages/liquid/">Liquid templates</a>. This is an optional feature and can be changed to a different template engine of your choice or disabled entirely. Furthermore, it can be configured on a per-template basis or globally. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<div id="same-input-output"></div>
<h2 id="使用相同的输入和输出目录" tabindex="-1">使用相同的输入和输出目录 <a class="direct-link" href="https://www.11ty.dev/docs/languages/html/#%E4%BD%BF%E7%94%A8%E7%9B%B8%E5%90%8C%E7%9A%84%E8%BE%93%E5%85%A5%E5%92%8C%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">这是一个 <a href="https://www.11ty.dev/docs/pitfalls/"><strong>常见错误</strong></a>。</div></div>
<p>当 <code>--input</code> 和 <code>--output</code> 被设置为同一个目录时(这不是默认设置),请留意 HTML 模版类型的文件。</p>
<p>如果你多次运行 eleventy,输出的 HTML 文件会被误处理的!</p>
<pre><code>$ eleventy --input=. --output=. --formats=md,html
Writing ./README/index.html from ./README.md
$ eleventy --input=. --output=. --formats=md,html
Writing ./README/index.html from ./README.md
Writing ./README/index-o.html from ./README/index.html
</code></pre>
<p>如果你要是设置 <code>--formats=html</code> 参数时,最好不要将输入和输出目录设置为同一目录。</p>
<p>此外,你可能会注意到上面第二个示例的输出中,第二个模板(即 <code>./README/index.html</code>)的输出文件名为 <code>index-o.html</code>。当输入和输出目录相同 <em>并且</em> 模板名为 <code>index.html</code> 时,我们会为输出文件的文件名添加一个 <code>-o</code> 后缀,以避免覆盖自身。这是一种特殊情况,仅适用于 <code>index.html</code> 文件名。你可以设置 <a href="https://www.11ty.dev/docs/config/#change-exception-case-suffix-for-html-files"><code>htmlOutputSuffix</code> 参数</a> 来改变默认的 <code>-o</code> 后缀。</p>
Plugins
2023-03-29T09:04:25Z
https://www.11ty.dev/docs/plugins/
<p>插件是 Eleventy 可以从外部仓库导入到项目中的自定义代码。</p>
<h2 id="官方插件列表" tabindex="-1">官方插件列表 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E5%AE%98%E6%96%B9%E6%8F%92%E4%BB%B6%E5%88%97%E8%A1%A8">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>所有官方插件都是用 <code>@11ty</code> 组织名,并且插件名称都包含 <code>@11ty/</code> 前缀。</p>
<ul>
<li><a href="https://www.11ty.dev/docs/plugins/edge/">Edge</a>: A plugin to run Eleventy in an Edge Function to add dynamic content to your Eleventy sites.</li>
<li><a href="https://www.11ty.dev/docs/plugins/serverless/">Serverless</a>: A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with <a href="https://www.netlify.com/blog/2021/04/14/faster-builds-for-large-sites-on-netlify-with-on-demand-builders-now-in-early-access/">On-demand Builders</a>.</li>
<li><a href="https://www.11ty.dev/docs/plugins/image/">Image</a>: A utility to resize and generate images.</li>
<li><a href="https://www.11ty.dev/docs/plugins/fetch/">Fetch</a>: A utility to fetch and cache network requests.</li>
<li><a href="https://www.11ty.dev/docs/plugins/partial-hydration/">Partial Hydration <code><is-land></code></a>: A plugin to smartly and efficiently add client-side components to your web site.</li>
<li><a href="https://www.11ty.dev/docs/plugins/render/">Render</a>: A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.</li>
<li><a href="https://www.11ty.dev/docs/plugins/rss/">RSS</a>: Generate an Atom feed to allow others to subscribe to your content using a feed reader.</li>
<li><a href="https://www.11ty.dev/docs/plugins/i18n/">Internationalization (i18n)</a>: Utilities to manage pages and linking between localized content on Eleventy projects.</li>
<li><a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/">Syntax Highlighting</a>: Code syntax highlighting using PrismJS without client-side JavaScript.</li>
<li><a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation</a>: A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!</li>
<li><a href="https://www.11ty.dev/docs/plugins/html-base/">HTML <code><base></code></a>: Emulate the <code><base></code> element by adding a prefix to all URLs in <code>.html</code> output files.</li>
<li><a href="https://www.11ty.dev/docs/plugins/directory-output/">Directory Output</a>: A plugin to group and sort console output by directory, with file size and benchmarks.</li>
<li><a href="https://www.11ty.dev/docs/plugins/inclusive-language/">Inclusive Language</a>: A plugin to check for inclusive language in markdown files.</li>
</ul>
<h3 id="社区贡献的插件" tabindex="-1">社区贡献的插件 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E7%A4%BE%E5%8C%BA%E8%B4%A1%E7%8C%AE%E7%9A%84%E6%8F%92%E4%BB%B6">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><a href="https://www.npmjs.com/search?q=eleventy-plugin"><strong>在 <code>npm</code> 上查看所有带有 <code>eleventy-plugin</code> 标签的软件包</strong></a>。以下列表是由社区添加到此网站的(没有排列顺序)。 <a href="https://github.com/11ty/11ty-website/tree/master/src/_data/plugins#readme">你的插件也可以添加哦</a>!</p>
<ul>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-pwa-v2">eleventy-plugin-pwa-v2</a> generates PWA service worker using Google Workbox v6, compatible with Eleventy 2.0 and up <a href="https://www.11ty.dev/authors/lwojcik/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flwojcik%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lwojcik" class="avatar avatar-large" loading="lazy" decoding="async">lwojcik</a></li>
<li><a href="https://www.npmjs.com/package/@grimlink/eleventy-plugin-lucide-icons">@grimlink/eleventy-plugin-lucide-icons</a> This Eleventy plugin enables the inclusion of lucide-icons as inline SVG elements <a href="https://www.11ty.dev/authors/grimlink/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgrimlink%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for grimlink" class="avatar avatar-large" loading="lazy" decoding="async">grimlink</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-hubspot">eleventy-plugin-hubspot</a> will generate HubSpot forms or meeting calendars. <a href="https://www.11ty.dev/authors/reatlat/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freatlat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reatlat" class="avatar avatar-large" loading="lazy" decoding="async">reatlat</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-img2picture">eleventy-plugin-img2picture</a> replaces <img> using <picture> with resized and optimized images. <a href="https://www.11ty.dev/authors/saneef/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsaneef%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for saneef" class="avatar avatar-large" loading="lazy" decoding="async">saneef</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-postcss">eleventy-plugin-postcss</a> Easy to use modern Eleventy plugin for PostCSS prepreprocessor</li>
<li><a href="https://www.npmjs.com/package/eleventy-sass">eleventy-sass</a> Yet another Sass/SCSS plugin for Eleventy <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkentaroi%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kentaroi" class="avatar avatar-large" loading="lazy" decoding="async">kentaroi</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-helmet">eleventy-plugin-helmet</a> will manage your document head. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fvseventer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for vseventer" class="avatar avatar-large" loading="lazy" decoding="async">vseventer</span></li>
<li><a href="https://www.npmjs.com/package/@infinity-interactive/eleventy-plugin-injector">@infinity-interactive/eleventy-plugin-injector</a> allows you to run an arbitrary callback at build time or when using <code>--serve</code> or <code>--watch</code> <a href="https://www.11ty.dev/authors/genehack/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgenehack%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for genehack" class="avatar avatar-large" loading="lazy" decoding="async">genehack</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-nbsp-filter">eleventy-nbsp-filter</a> Filter for Eleventy to replace spaces between words with &nbsp; characters. <a href="https://www.11ty.dev/authors/jeremenichelli/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjeremenichelli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jeremenichelli" class="avatar avatar-large" loading="lazy" decoding="async">jeremenichelli</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-edit-on-github">eleventy-plugin-edit-on-github</a> An Eleventy shortcode to add an "Edit on Github" link to your pages. <a href="https://www.11ty.dev/authors/christopherpickering/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchristopherpickering%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for christopherpickering" class="avatar avatar-large" loading="lazy" decoding="async">christopherpickering</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-shopify">eleventy-plugin-shopify</a> Import your Shopify products, pages, and collections into Eleventy as global data. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdanleatherman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for danleatherman" class="avatar avatar-large" loading="lazy" decoding="async">danleatherman</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-link_to">eleventy-plugin-link_to</a> a nunjucks tag to link to another internal content in Eleventy <a href="https://www.11ty.dev/authors/nhoizey/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnhoizey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nhoizey" class="avatar avatar-large" loading="lazy" decoding="async">nhoizey</a></li>
<li><a href="https://www.npmjs.com/package/markdown-it-eleventy-img">markdown-it-eleventy-img</a> A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. Fully compatible with Eleventy! <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F%40huot_mathieu%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for @huot_mathieu" class="avatar avatar-large" loading="lazy" decoding="async">@huot_mathieu</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-critical-css">eleventy-critical-css</a> extracts and inlines critical CSS from your HTML templates <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgregiv_es%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gregiv_es" class="avatar avatar-large" loading="lazy" decoding="async">gregiv_es</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-plausible">eleventy-plugin-plausible</a> Add the Plausible analytics script tag with a shortcode and remove <em>some</em> of the worry <a href="https://www.11ty.dev/authors/gingerchew/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgingerchew%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gingerchew" class="avatar avatar-large" loading="lazy" decoding="async">gingerchew</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-sharp-respfigure">eleventy-plugin-sharp-respfigure</a> will perform build-time image transformations with Sharp and generate responsive image markup inside <figure> tags. <a href="https://www.11ty.dev/authors/tannerdolby/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async">tannerdolby</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-code-demo">eleventy-plugin-code-demo</a> Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FhovhaDovah%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hovhaDovah" class="avatar avatar-large" loading="lazy" decoding="async">hovhaDovah</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-i18n-gettext">eleventy-plugin-i18n-gettext</a> adds i18n support with Gettext string translation and moment.js date and times localization. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsgissinger%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for sgissinger" class="avatar avatar-large" loading="lazy" decoding="async">sgissinger</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-drawio">eleventy-plugin-drawio</a> embed diagrams.net (.drawio) diagrams in your pages <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkev4ev%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kev4ev" class="avatar avatar-large" loading="lazy" decoding="async">kev4ev</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-njk-unpkg-inliner">eleventy-njk-unpkg-inliner</a> Inline npm modules from unpkg in Eleventy Nunjucks templates. <a href="https://www.11ty.dev/authors/jaredgorski/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjaredgorski%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jaredgorski" class="avatar avatar-large" loading="lazy" decoding="async">jaredgorski</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-pwa">eleventy-plugin-pwa</a> will generate a Service Worker for you. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fokitavera%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for okitavera" class="avatar avatar-large" loading="lazy" decoding="async">okitavera</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-metagen">eleventy-plugin-metagen</a> will generate metadata for Open Graph, Twitter card, generic meta tags and a canonical link. <a href="https://www.11ty.dev/authors/tannerdolby/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async">tannerdolby</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-ghost">eleventy-plugin-ghost</a> Access the Ghost Content API in Eleventy 👻 <a href="https://www.11ty.dev/authors/daviddarnes/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FDavidDarnes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for DavidDarnes" class="avatar avatar-large" loading="lazy" decoding="async">DavidDarnes</a></li>
<li><a href="https://www.npmjs.com/package/@code-blocks/eleventy-plugin">@code-blocks/eleventy-plugin</a> Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fidrismaps%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for idrismaps" class="avatar avatar-large" loading="lazy" decoding="async">idrismaps</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-heroicons">eleventy-plugin-heroicons</a> Shortcodes to add Heroicons to your Eleventy projects <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsnmcp%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for snmcp" class="avatar avatar-large" loading="lazy" decoding="async">snmcp</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-webmentions">eleventy-plugin-webmentions</a> A plugin for eleventy to fetch and filter webmentions from Webmention.io. <a href="https://www.11ty.dev/authors/codefoodpixels/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FCodeFoodPixels%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for CodeFoodPixels" class="avatar avatar-large" loading="lazy" decoding="async">CodeFoodPixels</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-green-links">eleventy-plugin-green-links</a> Checks all links on a website and returns those which are hosted on verified green hosting providers from The Green Web Foundation's Green Web dataset. <a href="https://www.11ty.dev/authors/fershad/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffershad%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fershad" class="avatar avatar-large" loading="lazy" decoding="async">fershad</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-mastoarchive">eleventy-plugin-mastoarchive</a> Create a global data object "mastodon" that contains all your public posts on Mastodon. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdeclan_byrd%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for declan_byrd" class="avatar avatar-large" loading="lazy" decoding="async">declan_byrd</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-html-validate">eleventy-plugin-html-validate</a> Validate your site's HTML on build. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattatt4ck%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattatt4ck" class="avatar avatar-large" loading="lazy" decoding="async">mattatt4ck</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-redirects">eleventy-plugin-redirects</a> Automatically generate a Netlify _redirects file, a Vercel vercel.json config file, or pages with client-side redirects from frontmatter aliases. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F%40type__error%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for @type__error" class="avatar avatar-large" loading="lazy" decoding="async">@type__error</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-babel">eleventy-plugin-babel</a> Compiles JS with gulp-babel.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-images-responsiver">eleventy-plugin-images-responsiver</a> allows authors to use the simple and standard Markdown syntax for images and yet get responsive images in the generated HTML, with srcset and sizes attributes. <a href="https://www.11ty.dev/authors/nhoizey/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnhoizey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nhoizey" class="avatar avatar-large" loading="lazy" decoding="async">nhoizey</a></li>
<li><a href="https://www.npmjs.com/package/@pcdevil/eleventy-plugin-intl-utils">@pcdevil/eleventy-plugin-intl-utils</a> a set of internationalization utils <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpcdevil%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pcdevil" class="avatar avatar-large" loading="lazy" decoding="async">pcdevil</span></li>
<li><a href="https://www.npmjs.com/package/@resoc/eleventy-plugin-social-image">@resoc/eleventy-plugin-social-image</a> adds automated social images based on HTML & CSS templates and generated at access time by a Netlify on-demand builder <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fph_bernard%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ph_bernard" class="avatar avatar-large" loading="lazy" decoding="async">ph_bernard</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-respimg">eleventy-plugin-respimg</a> will take care of the <code>srcset</code> attribute for responsive images for you. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fetportis%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for etportis" class="avatar avatar-large" loading="lazy" decoding="async">etportis</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-feathericons">eleventy-plugin-feathericons</a> Shortcode, allows feather-icons to be embedded as inline svg into templates. <a href="https://www.11ty.dev/authors/reatlat/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freatlat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reatlat" class="avatar avatar-large" loading="lazy" decoding="async">reatlat</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-filter-npm-package-downloads">eleventy-filter-npm-package-downloads</a> will show you the number of downloads for the given npm package. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAndreJaenisch%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AndreJaenisch" class="avatar avatar-large" loading="lazy" decoding="async">AndreJaenisch</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-reading-time">eleventy-plugin-reading-time</a> will generate a tag for the estimated reading time. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjohanbrook%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for johanbrook" class="avatar avatar-large" loading="lazy" decoding="async">johanbrook</span></li>
<li><a href="https://www.npmjs.com/package/@grimlink/eleventy-plugin-sass">@grimlink/eleventy-plugin-sass</a> Simple 11ty config wrapper, for running Sass directly as custom template <a href="https://www.11ty.dev/authors/grimlink/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgrimlink%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for grimlink" class="avatar avatar-large" loading="lazy" decoding="async">grimlink</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-git-commit-date">eleventy-plugin-git-commit-date</a> to get recent Git commit time of a file, or an Eleventy collection. <a href="https://www.11ty.dev/authors/saneef/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsaneef%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for saneef" class="avatar avatar-large" loading="lazy" decoding="async">saneef</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-ignore">eleventy-plugin-ignore</a> Ignore templates based on their front matter. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTheDocTrier%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for TheDocTrier" class="avatar avatar-large" loading="lazy" decoding="async">TheDocTrier</span></li>
<li><a href="https://www.npmjs.com/package/@chrisburnell/eleventy-cache-webmentions">@chrisburnell/eleventy-cache-webmentions</a> Cache webmentions using eleventy-cache-assets and make them available to use in collections, templates, pages, etc. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fiamchrisburnell%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for iamchrisburnell" class="avatar avatar-large" loading="lazy" decoding="async">iamchrisburnell</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-postcss-extension">eleventy-postcss-extension</a> Add CSS processing with PostCSS to your Eleventy build.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-time-to-read">eleventy-plugin-time-to-read</a> A reading time calculator supporting output in hundreds of languages. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjkc_codes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jkc_codes" class="avatar avatar-large" loading="lazy" decoding="async">jkc_codes</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-vidyard">eleventy-plugin-vidyard</a> generate embeds responsive Vidyard videos from share URLs. <a href="https://www.11ty.dev/authors/reatlat/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freatlat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reatlat" class="avatar avatar-large" loading="lazy" decoding="async">reatlat</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-lazyimages">eleventy-plugin-lazyimages</a> will add progressive lazy loading to your images.</li>
<li><a href="https://www.npmjs.com/package/@inframanufaktur/eleventy-plugin-clean-urls">@inframanufaktur/eleventy-plugin-clean-urls</a> Removes those pesky <code>utm_bla</code> or <code>fbclid</code> tracking params from all external links in your HTML. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F_ovlb%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for _ovlb" class="avatar avatar-large" loading="lazy" decoding="async">_ovlb</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-plantuml">eleventy-plugin-plantuml</a> allows processing of Plantuml markdown code blocks into beautiful diagrams <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fawaragi%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for awaragi" class="avatar avatar-large" loading="lazy" decoding="async">awaragi</span></li>
<li><a href="https://www.npmjs.com/package/@vidhill/fortawesome-free-regular-11ty-shortcode">@vidhill/fortawesome-free-regular-11ty-shortcode</a> Shortcode, allows @fortawesome/free-regular-svg-icons to be embedded as inline svg into templates.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-social-img">eleventy-plugin-social-img</a> will generate social share images at build-time and return an image URL. <a href="https://www.11ty.dev/authors/tannerdolby/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async">tannerdolby</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-i18n">eleventy-plugin-i18n</a> will add a clever <code>i18n</code> universal filter to assist with internationalization and dictionary translations. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fduncanadam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for duncanadam" class="avatar avatar-large" loading="lazy" decoding="async">duncanadam</span></li>
<li><a href="https://www.npmjs.com/package/@shawnsandy/npm_info">@shawnsandy/npm_info</a> will provide you with package detail for an npm package or GitHub info.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-backlinks">eleventy-plugin-backlinks</a> Collect and display backlinks from your notes. <a href="https://www.11ty.dev/authors/binyamin/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbinyamin%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for binyamin" class="avatar avatar-large" loading="lazy" decoding="async">binyamin</a></li>
<li><a href="https://www.npmjs.com/package/@sardine/eleventy-plugin-code-highlighter">@sardine/eleventy-plugin-code-highlighter</a> An 11ty plugin to style your <code> with Prism.js <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmarabyte_%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for marabyte_" class="avatar avatar-large" loading="lazy" decoding="async">marabyte_</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-gen-favicons">eleventy-plugin-gen-favicons</a> From a single svg or image, generate "the ultimate favicon setup" with all six commonly used icons plus a webmanifest using 2022 best practices. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnjaldwin%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for njaldwin" class="avatar avatar-large" loading="lazy" decoding="async">njaldwin</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-responsive-images">eleventy-plugin-responsive-images</a> adds a shortcode to take care of the <code>srcset</code> attribute for responsive images via Cloudinary and all other <code>img</code> attributes. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fadamculpepper%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for adamculpepper" class="avatar avatar-large" loading="lazy" decoding="async">adamculpepper</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-embed-everything">eleventy-plugin-embed-everything</a> Automatically embed YouTube, Vimeo, Spotify, Twitter, and more, based on just their URLs. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgfscott%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gfscott" class="avatar avatar-large" loading="lazy" decoding="async">gfscott</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-purgecss">eleventy-plugin-purgecss</a> will remove unused CSS using PurgeCSS. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fproog%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for proog" class="avatar avatar-large" loading="lazy" decoding="async">proog</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-footnotes">eleventy-plugin-footnotes</a> will help rendering accessible footnotes with Liquid. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKittyGiraudel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KittyGiraudel" class="avatar avatar-large" loading="lazy" decoding="async">KittyGiraudel</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-reader-bar">eleventy-plugin-reader-bar</a> adds a reader bar as you scroll through the page. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fthigoap%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for thigoap" class="avatar avatar-large" loading="lazy" decoding="async">thigoap</span></li>
<li><a href="https://www.npmjs.com/package/@silexlabs/eleventy-plugin-directus">@silexlabs/eleventy-plugin-directus</a> Expose Directus collections as global data in 11ty <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flexoyo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lexoyo" class="avatar avatar-large" loading="lazy" decoding="async">lexoyo</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-automatic-noopener">eleventy-plugin-automatic-noopener</a> Automatically add rel='noopener' attributes to unsafe <a>, <area> and <form> elements. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjkc_codes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jkc_codes" class="avatar avatar-large" loading="lazy" decoding="async">jkc_codes</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-inline-link-favicon">eleventy-plugin-inline-link-favicon</a> Add an inline favicon image to a link. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbmuenzenmeyer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bmuenzenmeyer" class="avatar avatar-large" loading="lazy" decoding="async">bmuenzenmeyer</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-sharp">eleventy-plugin-sharp</a> will add the full power of Sharp's image processing to your templates. <a href="https://www.11ty.dev/authors/luwes/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fluwes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for luwes" class="avatar avatar-large" loading="lazy" decoding="async">luwes</a></li>
<li><a href="https://www.npmjs.com/package/@tigersway/eleventy-plugin-ancestry">@tigersway/eleventy-plugin-ancestry</a> Real hierarchical navigation, following folders and documents. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftigerswaynet%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tigerswaynet" class="avatar avatar-large" loading="lazy" decoding="async">tigerswaynet</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-phosphoricons">eleventy-plugin-phosphoricons</a> Shortcode, allows phosphor-icons to be embedded as inline svg into templates. <a href="https://www.11ty.dev/authors/reatlat/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freatlat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reatlat" class="avatar avatar-large" loading="lazy" decoding="async">reatlat</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-embedded-demos">eleventy-plugin-embedded-demos</a> A plugin for eleventy that allows you to have embedded demos using HTML, CSS and JavaScript, as well as having the code from those demos displayed in the page. <a href="https://www.11ty.dev/authors/codefoodpixels/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FCodeFoodPixels%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for CodeFoodPixels" class="avatar avatar-large" loading="lazy" decoding="async">CodeFoodPixels</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-react-ssr">eleventy-plugin-react-ssr</a> Write your static content using React SSR (JSX) and transform it using Babel <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F%40scinos%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for @scinos" class="avatar avatar-large" loading="lazy" decoding="async">@scinos</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-svg-sprite">eleventy-plugin-svg-sprite</a> will compile a directory of SVG files into a single SVG sprite and install shortcodes to embed SVG sprite and SVG content <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FPatrick153%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Patrick153" class="avatar avatar-large" loading="lazy" decoding="async">Patrick153</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-sass">eleventy-plugin-sass</a> will add the ability to use Sass for your stylesheets.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-code-style-hooks">eleventy-plugin-code-style-hooks</a> Syntax highlighter supporting CSS colour previews in all template languages with no client side JS. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjkc_codes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jkc_codes" class="avatar avatar-large" loading="lazy" decoding="async">jkc_codes</span></li>
<li><a href="https://www.npmjs.com/package/@factorial/eleventy-plugin-fstack">@factorial/eleventy-plugin-fstack</a> Linting, building and watching your assets with as little overhead and configuration as possible by integrating @factorial/stack-core <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdnnsjrng%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dnnsjrng" class="avatar avatar-large" loading="lazy" decoding="async">dnnsjrng</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-tailwindcss">eleventy-plugin-tailwindcss</a> will add Tailwind CSS support for your website. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdafiulh%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dafiulh" class="avatar avatar-large" loading="lazy" decoding="async">dafiulh</span></li>
<li><a href="https://www.npmjs.com/package/@mightyplow/eleventy-plugin-cache-buster">@mightyplow/eleventy-plugin-cache-buster</a> will add content hashes to JavaScript and CSS resources. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmightyplow%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mightyplow" class="avatar avatar-large" loading="lazy" decoding="async">mightyplow</span></li>
<li><a href="https://www.npmjs.com/package/@sardine/eleventy-plugin-tinycss">@sardine/eleventy-plugin-tinycss</a> An 11ty plugin to inline and optimise CSS <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmarabyte_%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for marabyte_" class="avatar avatar-large" loading="lazy" decoding="async">marabyte_</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-broken-links">eleventy-plugin-broken-links</a> A plugin to check your build for broken external links and redirects <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbradleyburgess%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bradleyburgess" class="avatar avatar-large" loading="lazy" decoding="async">bradleyburgess</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-sharp-respimg">eleventy-plugin-sharp-respimg</a> will perform build-time image transformations with Sharp and generate responsive image markup using <picture>. <a href="https://www.11ty.dev/authors/tannerdolby/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async">tannerdolby</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-find">eleventy-plugin-find</a> A utility filter to find array members that match a set of rules, helpful for hoisting data from one template to another. <a href="https://www.11ty.dev/authors/ashur/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fashur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ashur" class="avatar avatar-large" loading="lazy" decoding="async">ashur</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-pdfembed">eleventy-plugin-pdfembed</a> A shortcode to simplify usage of Adobe's PDF Embed API <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fraymondcamden%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for raymondcamden" class="avatar avatar-large" loading="lazy" decoding="async">raymondcamden</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-typeset">eleventy-plugin-typeset</a> will make your typography nicer. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjohanbrook%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for johanbrook" class="avatar avatar-large" loading="lazy" decoding="async">johanbrook</span></li>
<li><a href="https://www.npmjs.com/package/@quasibit/eleventy-plugin-schema">@quasibit/eleventy-plugin-schema</a> adds a shortcode for generating JSON-LD structured data. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnunof07%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nunof07" class="avatar avatar-large" loading="lazy" decoding="async">nunof07</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-page-assets">eleventy-plugin-page-assets</a> Automatically copy images and assets relative to a template to /dist folder and rewrite paths to hashes (Similar to webpack html-loader, or Hexo Post Asset)</li>
<li><a href="https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime">@11tyrocks/eleventy-plugin-emoji-readtime</a> provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator. <a href="https://www.11ty.dev/authors/5t3ph/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async">5t3ph</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-toc">eleventy-plugin-toc</a> will generate a table of contents from your headings. <a href="https://www.11ty.dev/authors/jdsteinbach/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjdsteinbach%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jdsteinbach" class="avatar avatar-large" loading="lazy" decoding="async">jdsteinbach</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-favicon">eleventy-favicon</a> Generates your favicon files and declarations from a single image source <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fatomrc%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for atomrc" class="avatar avatar-large" loading="lazy" decoding="async">atomrc</span></li>
<li><a href="https://www.npmjs.com/package/@fec/eleventy-plugin-remark">@fec/eleventy-plugin-remark</a> Process Markdown files with Remark and use Remark plugins to add new features to your Markdown.</li>
<li><a href="https://www.npmjs.com/package/eleventy-multisite">eleventy-multisite</a> Add multi-site building support for Eleventy <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbnoctis%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bnoctis" class="avatar avatar-large" loading="lazy" decoding="async">bnoctis</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-emoji">eleventy-plugin-emoji</a> An accessible emoji shortcode and filter for your Eleventy projects <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsnmcp%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for snmcp" class="avatar avatar-large" loading="lazy" decoding="async">snmcp</span></li>
<li><a href="https://www.npmjs.com/package/@orchidjs/eleventy-plugin-ids">@orchidjs/eleventy-plugin-ids</a> Add ids to html headings and other elements <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Foyejorge%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for oyejorge" class="avatar avatar-large" loading="lazy" decoding="async">oyejorge</span></li>
<li><a href="https://www.npmjs.com/package/wikity">wikity</a> Wikitext as a templating language, with built-in Eleventy support. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FNixinova%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Nixinova" class="avatar avatar-large" loading="lazy" decoding="async">Nixinova</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-asciidoc">eleventy-plugin-asciidoc</a> to add support for AsciiDoc files. <a href="https://www.11ty.dev/authors/saneef/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsaneef%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for saneef" class="avatar avatar-large" loading="lazy" decoding="async">saneef</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-unified">eleventy-plugin-unified</a> Use the unified ecosystem in Eleventy with remark and rehype. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FNickColley%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for NickColley" class="avatar avatar-large" loading="lazy" decoding="async">NickColley</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-mathjax">eleventy-plugin-mathjax</a> A plugin for rendering math equations using MathJax.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-yamldata"><s>eleventy-plugin-yamldata</s></a> <s>will allow you to use a yaml file as local data file.</s> This plugin has been superceded by <a href="https://www.11ty.dev/docs/data-custom/">Eleventy Custom Data Formats</a>.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-dart-sass">eleventy-plugin-dart-sass</a> Build, watch and template tags for Sass stylesheets via Dart Sass. Includes CSS code splitting and source maps. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchronotope%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chronotope" class="avatar avatar-large" loading="lazy" decoding="async">chronotope</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-torchlight">eleventy-plugin-torchlight</a> Plugin to syntax highlight your code blocks with torchlight.dev. <a href="https://www.11ty.dev/authors/timkley/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftimkley%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for timkley" class="avatar avatar-large" loading="lazy" decoding="async">timkley</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-cloudinary">eleventy-plugin-cloudinary</a> adds a universal shortcode allowing you to add images from your cloudinary account. <a href="https://www.11ty.dev/authors/juanfernandes/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjuanfernandes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for juanfernandes" class="avatar avatar-large" loading="lazy" decoding="async">juanfernandes</a></li>
<li><a href="https://www.npmjs.com/package/@sardine/eleventy-plugin-tinyhtml">@sardine/eleventy-plugin-tinyhtml</a> An 11ty plugin to optimise HTML <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmarabyte_%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for marabyte_" class="avatar avatar-large" loading="lazy" decoding="async">marabyte_</span></li>
<li><a href="https://www.npmjs.com/package/@sardine/eleventy-plugin-external-links">@sardine/eleventy-plugin-external-links</a> An 11ty plugin to protect you external links. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmarabyte_%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for marabyte_" class="avatar avatar-large" loading="lazy" decoding="async">marabyte_</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-hast-jsx">eleventy-hast-jsx</a> use JSX as a template language <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjed_fox1%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jed_fox1" class="avatar avatar-large" loading="lazy" decoding="async">jed_fox1</span></li>
<li><a href="https://www.npmjs.com/package/@johnwargo/eleventy-plugin-post-stats">@johnwargo/eleventy-plugin-post-stats</a> Adds a post statistics collection to a site you can use to generate a table or graph of posts over time as well as average days between posts. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjohnwargo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for johnwargo" class="avatar avatar-large" loading="lazy" decoding="async">johnwargo</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-load">eleventy-load</a> brings webpack-like loaders to Eleventy <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgregiv_es%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gregiv_es" class="avatar avatar-large" loading="lazy" decoding="async">gregiv_es</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-mtos">eleventy-plugin-mtos</a> A plugin for Eleventy that turns your site into a single page application. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsatireven%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for satireven" class="avatar avatar-large" loading="lazy" decoding="async">satireven</span></li>
<li><a href="https://www.npmjs.com/package/@aaashur/eleventy-plugin-classnames">@aaashur/eleventy-plugin-classnames</a> Conditionally join class names using a filter or shortcode, inspired by the 'classnames' package by JedWatson <a href="https://www.11ty.dev/authors/ashur/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fashur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ashur" class="avatar avatar-large" loading="lazy" decoding="async">ashur</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-nesting-toc">eleventy-plugin-nesting-toc</a> will generate a nested table of contents from your site's headings.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-og-image">eleventy-plugin-og-image</a> Generate OG images from your templates, data and CSS. Fast and reproducible – no need for a headless browser. <a href="https://www.11ty.dev/authors/kiwikilian/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKiwiKilian%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KiwiKilian" class="avatar avatar-large" loading="lazy" decoding="async">KiwiKilian</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-google-fonts">eleventy-google-fonts</a> A Nunjucks shortcode to optimize Google Fonts. This shortcode download and inline Google Font's CSS. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftakanorip%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for takanorip" class="avatar avatar-large" loading="lazy" decoding="async">takanorip</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-slide-decks">eleventy-plugin-slide-decks</a> 🎵 It makes an itsy-bitsy, teeny-weeny, web-component slide deck prezzy 🎶. 🎚️ Write slide decks with 11ty and share them over the web 🎴. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F%40bp%40bennypowers.dev%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for @bp@bennypowers.dev" class="avatar avatar-large" loading="lazy" decoding="async">@bp@bennypowers.dev</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-xml-plugin">eleventy-xml-plugin</a> adds Liquid filters used for sitemap and RSS/feed file generation. <a href="https://www.11ty.dev/authors/jeremenichelli/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjeremenichelli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jeremenichelli" class="avatar avatar-large" loading="lazy" decoding="async">jeremenichelli</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-img-helper">eleventy-img-helper</a> Adds responsive images to any template's output using eleventy-img, configurable with CSS selectors. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAlexDueppen%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AlexDueppen" class="avatar avatar-large" loading="lazy" decoding="async">AlexDueppen</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-target-safe">eleventy-plugin-target-safe</a> Link tags with the target attribute may need a rel attribute. This plugin does that for you automatically. <a href="https://www.11ty.dev/authors/gingerchew/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgingerchew%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gingerchew" class="avatar avatar-large" loading="lazy" decoding="async">gingerchew</a></li>
<li><a href="https://www.npmjs.com/package/@vidhill/fortawesome-brands-11ty-shortcode">@vidhill/fortawesome-brands-11ty-shortcode</a> Shortcode, allows @fortawesome/free-brands-svg-icons to be embedded as inline svg into templates.</li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-social-share-card-generator">eleventy-plugin-social-share-card-generator</a> Automagically creates a share card for social media platforms <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftpiros%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tpiros" class="avatar avatar-large" loading="lazy" decoding="async">tpiros</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-json-feed">eleventy-plugin-json-feed</a> adds a Nunjucks shortcode for outputing a JSON feed. <a href="https://www.11ty.dev/authors/genehack/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgenehack%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for genehack" class="avatar avatar-large" loading="lazy" decoding="async">genehack</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-add-web-component-definitions">eleventy-plugin-add-web-component-definitions</a> will add Web Component definitions automatically, by reading custom tags from HTML pages. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjdvivar%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jdvivar" class="avatar avatar-large" loading="lazy" decoding="async">jdvivar</span></li>
<li><a href="https://www.npmjs.com/package/@sardine/eleventy-plugin-tinysvg">@sardine/eleventy-plugin-tinysvg</a> An 11ty plugin to minify and optimise SVG <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmarabyte_%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for marabyte_" class="avatar avatar-large" loading="lazy" decoding="async">marabyte_</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-i18n">eleventy-i18n</a> i18n for Eleventy: Enabling Website Translation <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmathieuprog%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mathieuprog" class="avatar avatar-large" loading="lazy" decoding="async">mathieuprog</span></li>
<li><a href="https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap">@quasibit/eleventy-plugin-sitemap</a> adds a shortcode for generating a sitemap. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnunof07%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nunof07" class="avatar avatar-large" loading="lazy" decoding="async">nunof07</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-markdown-shortcode">eleventy-plugin-markdown-shortcode</a> adds a universal shortcode to render markdown. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftylerwilliamsct%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tylerwilliamsct" class="avatar avatar-large" loading="lazy" decoding="async">tylerwilliamsct</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-recent-changes">eleventy-plugin-recent-changes</a> will generate a collection containing your recent commit history. <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdefaced%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for defaced" class="avatar avatar-large" loading="lazy" decoding="async">defaced</span></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-unfurl">eleventy-plugin-unfurl</a> Unfurl links into rich 'cards', as seen in places like Slack and Twitter <a href="https://www.11ty.dev/authors/daviddarnes/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FDavidDarnes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for DavidDarnes" class="avatar avatar-large" loading="lazy" decoding="async">DavidDarnes</a></li>
<li><a href="https://www.npmjs.com/package/eleventy-plugin-rollup">eleventy-plugin-rollup</a> Allows you to build js bundles directly from your templates using rollup. <a href="https://www.11ty.dev/authors/snapstromegon/" class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FSnapstromegon%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Snapstromegon" class="avatar avatar-large" loading="lazy" decoding="async">Snapstromegon</a></li>
<li><a href="https://www.npmjs.com/package/@factorial/eleventy-plugin-twig">@factorial/eleventy-plugin-twig</a> Add Twig templating engine to Eleventy with the help of twig.js <span class="nowrap"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdnnsjrng%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dnnsjrng" class="avatar avatar-large" loading="lazy" decoding="async">dnnsjrng</span></li>
<li><a href="https://github.com/11ty/11ty-website/tree/master/src/_data/plugins#readme">Add your own</a>!</li>
</ul>
<h2 id="安装插件" tabindex="-1">安装插件 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="利用-npm-安装插件。" tabindex="-1">利用 npm 安装插件。 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E5%88%A9%E7%94%A8-npm-%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6%E3%80%82">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> @11ty/eleventy-plugin-rss <span class="token parameter variable">--save</span></code></pre>
<h3 id="在配置文件中为-eleventy-添加插件" tabindex="-1">在配置文件中为 Eleventy 添加插件 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E5%9C%A8%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E4%B8%AD%E4%B8%BA-eleventy-%E6%B7%BB%E5%8A%A0%E6%8F%92%E4%BB%B6">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>假设你的配置文件名为 <code>.eleventy.js</code>。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginRss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-rss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginRss<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="插件的配置参数" tabindex="-1">插件的配置参数 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E6%8F%92%E4%BB%B6%E7%9A%84%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>为 <code>addPlugin</code> 函数设置第二个参数(可选)来自定义插件的行为。这一参数是特定于插件的。请查阅相应插件的文档 (例如,<a href="https://github.com/11ty/eleventy-plugin-syntaxhighlight/blob/master/README.md"><code>eleventy-plugin-syntaxhighlight</code> 的 README 文件</a>) 以了解其支持哪些参数。</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginSyntaxHighlight <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-syntaxhighlight"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginSyntaxHighlight<span class="token punctuation">,</span> <span class="token punctuation">{</span><br><br> <span class="token comment">// only install the markdown highlighter</span><br> <span class="token literal-property property">templateFormats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"md"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token function-variable function">init</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> Prism <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Add your own custom language to Prism!</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="为插件添加命名空间" tabindex="-1">为插件添加命名空间 <a class="direct-link" href="https://www.11ty.dev/docs/plugins/#%E4%B8%BA%E6%8F%92%E4%BB%B6%E6%B7%BB%E5%8A%A0%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>你可以利用 <code>eleventyConfig.namespace</code> 函数为部分配置分配命名空间。这将为所有过滤器(filters)、标签(tags)、助手(helpers)、快捷方式(shortcodes)、集合(collections)以及转换(transforms)添加前缀。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginRss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-rss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">namespace</span><span class="token punctuation">(</span><span class="token string">"myPrefix_"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginRss<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
插件的命名空间是 Eleventy 赋予网站程序的功能,不能用在你自己创建的插件(配置)中。请查看 <a href="https://github.com/11ty/eleventy/issues/256">Issue #256</a>。
</div></div>
Template Shortcodes
2023-03-29T09:04:25Z
https://www.11ty.dev/docs/shortcodes/
<h1>快捷码(Shortcodes)</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/shortcodes/#%E9%85%8D%E5%AF%B9%E5%BF%AB%E6%8D%B7%E7%A0%81%EF%BC%88paired-shortcodes%EF%BC%89">配对快捷码(Paired Shortcodes) </a></li><li><a href="https://www.11ty.dev/docs/shortcodes/#asynchronous-shortcodes">Asynchronous Shortcodes </a></li><li><a href="https://www.11ty.dev/docs/shortcodes/#scoped-data-in-shortcodes">Scoped Data in Shortcodes </a></li><li><a href="https://www.11ty.dev/docs/shortcodes/#per-engine-shortcodes">Per-Engine Shortcodes </a><ul><li><a href="https://www.11ty.dev/docs/shortcodes/#async-friendly-per-engine-shortcodes">Async Friendly Per-Engine Shortcodes </a></li></ul></li></ul></div><p></p>
</details>
<p>各种模板引擎都支持通过快捷码(shortcodes)实现内容重用。快捷码(shortcodes)是模板语言(Template Language)基于 <a href="https://www.11ty.dev/docs/custom-tags/">自定义标签(Custom Tags)</a> 提供的一种语法糖。JavaScript、Liquid、Nunjucks、Handlebars 模板语言是支持 快捷码(Shortcodes)的。</p>
<p>以下是几个示例:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/shortcodes/#shortcode-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/shortcodes/#shortcode-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/shortcodes/#shortcode-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/shortcodes/#shortcode-hbs" role="tab">Handlebars</a>
</div>
<div id="shortcode-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.liquid</div><pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> user firstName<span class="token punctuation">,</span> lastName <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>在 Liquid 模板中,参数间的逗号是 <strong>可有可无的</strong>。</p>
<div class="codetitle codetitle-left"><b>Filename </b>sample.liquid</div><pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> user firstName lastName <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="shortcode-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.njk</div><pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">user</span> <span class="token variable">firstName</span><span class="token punctuation">,</span> <span class="token variable">lastName</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>在 Nunjucks 模板中,参数间的逗号是 <strong>必须的</strong>。</p>
</div>
<div id="shortcode-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.11ty.js</div><pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">user</span><span class="token punctuation">(</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="shortcode-hbs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>sample.hbs</div><pre class="language-handlebars"><code class="language-handlebars"><span class="token comment"><!-- Note the three opening and closing curly brackets (the triple-stash) --></span><br><span class="token handlebars language-handlebars"><span class="token delimiter punctuation">{{{</span> <span class="token variable">user</span> <span class="token variable">firstName</span> <span class="token variable">lastName</span> <span class="token delimiter punctuation">}}}</span></span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">请注意,如果你在 Handlebars 快捷码中返回 HTML,你需要使用 Handlebars 的 triple-stash 语法(三个开头和三个结尾的花括号,例如 <code>{{{ shortcodeName }}}</code>)以避免对 HTML 进行二次转义。如果被二次转义了,HTML 的段落标签将会被输出为 <code>&lt;p&gt;</code> 形式</div></div>
</div>
</seven-minute-tabs>
</is-land>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Shortcodes added in this way are available in:</span><br> <span class="token comment">// * Markdown</span><br> <span class="token comment">// * Liquid</span><br> <span class="token comment">// * Nunjucks</span><br> <span class="token comment">// * Handlebars (not async)</span><br> <span class="token comment">// * JavaScript</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Async support for `addShortcode` is new in Eleventy v2.0.0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Async method available</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>A shortcode returns content (a JavaScript string or template literal) that is used in the template. You can use these however you’d like—you could even think of them as reusable components.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Markdown files are pre-processed as Liquid templates by default—any shortcodes available in Liquid templates are also available in Markdown files. Likewise, if you <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">change the template engine for Markdown files</a>, the shortcodes available for that templating language will also be available in Markdown files.
</div></div>
<p>请阅读各个模板语言关于快捷码(shortcodes)的文档以了解更多信息:</p>
<ul>
<li><a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript <code>*.11ty.js</code></a> (支持异步)</li>
<li><a href="https://www.11ty.dev/docs/languages/liquid/#shortcodes">Liquid <code>*.liquid</code></a> (支持异步)</li>
<li><a href="https://www.11ty.dev/docs/languages/nunjucks/#shortcodes">Nunjucks <code>*.njk</code></a> (支持异步)</li>
<li><a href="https://www.11ty.dev/docs/languages/handlebars/#shortcodes">Handlebars <code>*.hbs</code></a> (不支持异步)</li>
</ul>
<h2 id="配对快捷码(paired-shortcodes)" tabindex="-1">配对快捷码(Paired Shortcodes) <a class="direct-link" href="https://www.11ty.dev/docs/shortcodes/#%E9%85%8D%E5%AF%B9%E5%BF%AB%E6%8D%B7%E7%A0%81%EF%BC%88paired-shortcodes%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>从上面所了解到的快捷码(shortcodes)信息来看,它还是挺不错的。但实际上,快捷码和过滤器(filter)没有什么不同。其实,当快捷码(Shortcodes)配对使用时才能体现出它的强大之处。配对快捷码(Paired Shortcodes)由一个开始标签和一个结束标签组成,并且允许你在其中嵌套其它模板内容!</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/shortcodes/#pairedshortcodes-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/shortcodes/#pairedshortcodes-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/shortcodes/#pairedshortcodes-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/shortcodes/#pairedshortcodes-hbs" role="tab">Handlebars</a>
</div>
<div id="pairedshortcodes-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> user firstName<span class="token punctuation">,</span> lastName <span class="token delimiter punctuation">%}</span></span><br> Hello <span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> someOtherVariable <span class="token delimiter punctuation">}}</span></span>.<br><br> Hello <span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> anotherShortcode <span class="token delimiter punctuation">%}</span></span>.<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> enduser <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>在 Liquid 模板中,参数之间的逗号是 <strong>可有可无的</strong>。</p>
</div>
<div id="pairedshortcodes-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">user</span> <span class="token variable">firstName</span><span class="token punctuation">,</span> <span class="token variable">lastName</span> <span class="token delimiter punctuation">%}</span></span><br> Hello <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">someOtherVariable</span> <span class="token delimiter punctuation">}}</span></span>.<br><br> Hello <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">anotherShortcode</span> <span class="token delimiter punctuation">%}</span></span>.<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">enduser</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>在 Nunjucks 模板中,参数之间的逗号是 <strong>必须的</strong>。</p>
</div>
<div id="pairedshortcodes-hbs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Handlebars</div>
<pre class="language-handlebars"><code class="language-handlebars"><span class="token handlebars language-handlebars"><span class="token delimiter punctuation">{{</span><span class="token punctuation">#</span> <span class="token variable">user</span> <span class="token variable">firstName</span> <span class="token variable">lastName</span> <span class="token delimiter punctuation">}}</span></span><br> Hello <span class="token handlebars language-handlebars"><span class="token delimiter punctuation">{{</span> <span class="token variable">someOtherVariable</span> <span class="token delimiter punctuation">}}</span></span>.<br><br> Hello <span class="token handlebars language-handlebars"><span class="token delimiter punctuation">{{</span> <span class="token variable">anotherShortcode</span> <span class="token delimiter punctuation">}}</span></span>.<br><span class="token handlebars language-handlebars"><span class="token delimiter punctuation">{{</span><span class="token punctuation">/</span> <span class="token variable">user</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="pairedshortcodes-js" role="tabpanel">
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> userContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>someOtherVariable<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br><br>Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">anotherShortCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><br> <span class="token comment">// pass the content as the first parameter.</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">user</span><span class="token punctuation">(</span>userContent<span class="token punctuation">,</span> data<span class="token punctuation">.</span>firstName<span class="token punctuation">,</span> data<span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>当使用 Eleventy 的 API 添加配对快捷码(paired shortcodes)时,第一个参数是配对快捷码的起止标签之间所嵌入的内容。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Shortcodes added in this way are available in:</span><br> <span class="token comment">// * Markdown</span><br> <span class="token comment">// * Liquid</span><br> <span class="token comment">// * Nunjucks</span><br> <span class="token comment">// * Handlebars (not async)</span><br> <span class="token comment">// * JavaScript</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Async support for `addPairedShortcode` is new in Eleventy v2.0.0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Async method available</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Markdown files are pre-processed as Liquid templates by default—any shortcodes available in Liquid templates are also available in Markdown files. Likewise, if you <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">change the template engine for Markdown files</a>, the shortcodes available for that templating language will also be available in Markdown files.
</div></div>
<p>Read more about using paired shortcodes on the individual Template Language documentation pages:</p>
<ul>
<li><a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript <code>*.11ty.js</code></a> (支持异步)</li>
<li><a href="https://www.11ty.dev/docs/languages/liquid/#shortcodes">Liquid <code>*.liquid</code></a> (支持异步)</li>
<li><a href="https://www.11ty.dev/docs/languages/nunjucks/#shortcodes">Nunjucks <code>*.njk</code></a> (支持异步)</li>
<li><a href="https://www.11ty.dev/docs/languages/handlebars/#shortcodes">Handlebars <code>*.hbs</code></a> (不支持异步)</li>
</ul>
<h2 id="asynchronous-shortcodes" tabindex="-1">Asynchronous Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/shortcodes/#asynchronous-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This is supported by Liquid, Nunjucks, and JavaScript template types (Handlebars is not async-friendly).</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Async support for `addShortcode` and `addPairedShortcode` is new in Eleventy v2.0.0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"single"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"paired"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Async methods available in Eleventy v0.10.0+</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"single"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"paired"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> myName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="scoped-data-in-shortcodes" tabindex="-1">Scoped Data in Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/shortcodes/#scoped-data-in-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>A few Eleventy-specific data properties are available to shortcode callbacks.</p>
<ul>
<li><code>this.page</code></li>
<li><code>this.eleventy</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.5">Added in v2.0.0</span></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Make sure you’re not using an arrow function here: () => {}</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"myShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// this.page</span><br> <span class="token comment">// this.eleventy</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="per-engine-shortcodes" tabindex="-1">Per-Engine Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/shortcodes/#per-engine-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can also specify different functionality for shortcodes in each engine, if you’d like. Using the <code>addShortcode</code> or <code>addPairedShortcode</code> function is equivalent to adding the shortcode to every supported template engine.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Liquid</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Nunjucks</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Handlebars</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addHandlebarsShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedHandlebarsShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// JavaScript Template Function (New in 0.7.0)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Faux-paired shortcode</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Markdown files are pre-processed as Liquid templates by default—any shortcodes available in Liquid templates are also available in Markdown files. Likewise, if you <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">change the template engine for Markdown files</a>, the shortcodes available for that templating language will also be available in Markdown files.
</div></div>
<h3 id="async-friendly-per-engine-shortcodes" tabindex="-1">Async Friendly Per-Engine Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/shortcodes/#async-friendly-per-engine-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Learn more about these on the individual template engine pages for <a href="https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-shortcodes">Nunjucks</a>, <a href="https://www.11ty.dev/docs/languages/liquid/#asynchronous-shortcodes">Liquid</a>, and <a href="https://www.11ty.dev/docs/languages/javascript/#asynchronous-javascript-template-functions"><code>11ty.js</code> JavaScript</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"> <span class="token comment">// Async-friendly</span><br> <span class="token comment">// Liquid is already async-friendly</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Nunjucks Async</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedNunjucksAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// JavaScript Template Function (make sure you `await` these!)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Faux-paired shortcode</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Testimonials
2023-03-29T09:04:25Z
https://www.11ty.dev/docs/testimonials/
<h1>用户评价</h1>
<p>你可以不相信我说的话。 🌈 但是请听听这些快乐的开发者对 Eleventy 的评价吧:</p>
<div id="phil-hawksworth"><blockquote><p>“Seriously can't remember enjoying using a Static Site Generator this much. Yes Hugo is rapid, but this is all so logical. It feels like it was designed by someone who has been through lots of pain and success using other SSGs.” <span class="bio-source">—<a href="https://www.hawksworx.com/note/tw/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/oQpvULJJnu-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/oQpvULJJnu-90.webp 90w"><img alt="Phil Hawksworth’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/oQpvULJJnu-90.jpeg" width="90" height="90"></picture>Phil Hawksworth</a></span></p></blockquote></div>
<div id="paul-lewis"><blockquote><p>“I actually used Eleventy for the first time this week. Loved it.” <span class="bio-source">—<a href="https://twitter.com/aerotwist/status/1106904383390924801"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/hhaUtTl9G0-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/hhaUtTl9G0-90.webp 90w"><img alt="Paul Lewis’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/hhaUtTl9G0-90.jpeg" width="90" height="90"></picture>Paul Lewis</a></span></p></blockquote></div>
<div id="phil-hawksworth"><blockquote><p>“Every time I make something with Eleventy it makes me smile. I think that might be to do with its focus on simplicity.” <span class="bio-source">—<a href="https://www.hawksworx.com/note/tw/998891176550977537"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/oQpvULJJnu-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/oQpvULJJnu-90.webp 90w"><img alt="Phil Hawksworth’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/oQpvULJJnu-90.jpeg" width="90" height="90"></picture>Phil Hawksworth</a></span></p></blockquote></div>
<div id="timothy-miller"><blockquote><p>“It's clean, elegant, easy to use, and does just enough to be useful without getting in the way. Excellent work 😊” <span class="bio-source">—<a href="https://twitter.com/WebInspectInc/status/1017594017402572811"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/m8OMwjkRer-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/m8OMwjkRer-90.webp 90w"><img alt="Timothy Miller’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/m8OMwjkRer-90.jpeg" width="90" height="90"></picture>Timothy Miller</a></span></p></blockquote></div>
<div id="will-riley"><blockquote><p>“Holy cow! Eleventy is so crazy simple to work with.” <span class="bio-source">—<a href="https://twitter.com/splitinfinities/status/1018874121755746310"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/z-23lTpRuF-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/z-23lTpRuF-90.webp 90w"><img alt="Will Riley’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/z-23lTpRuF-90.jpeg" width="90" height="90"></picture>Will Riley</a></span></p></blockquote></div>
<div id="andy-bell"><blockquote><p>“Jekyll is dead to me” <span class="bio-source">—<a href="https://andy-bell.co.uk/"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fandy-bell.co.uk%2F/" width="150" height="150" alt="IndieWeb Avatar for https://andy-bell.co.uk/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Andy Bell</a></span></p></blockquote></div>
<div id="snook"><blockquote><p>“I challenged myself to build the site in a day. I started at noon on Saturday and had something launched by 1am Saturday night. Built on [Eleventy] served by GitHub Pages, using [TravisCi] to deploy.” <span class="bio-source">—<a href="https://twitter.com/snookca/status/1082278684214657024"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/rQU_S4kUop-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/rQU_S4kUop-90.webp 90w"><img alt="Snook’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/rQU_S4kUop-90.jpeg" width="90" height="90"></picture>Snook</a></span></p></blockquote></div>
<div id="justin-fagnani"><blockquote><p>“Eleventy and web components go really, really well together.” <span class="bio-source">—<a href="https://twitter.com/justinfagnani/status/1212847104718061569"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/otcjd5jzAJ-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/otcjd5jzAJ-90.webp 90w"><img alt="Justin Fagnani’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/otcjd5jzAJ-90.jpeg" width="90" height="90"></picture>Justin Fagnani</a></span></p></blockquote></div>
<div id="heydon-pickering"><blockquote><p>“Just the kind of simple / common sense tool I love. The data/folder hierarchy mechanism is super obvious and elegant.” <span class="bio-source">—<a href="https://twitter.com/heydonworks/status/1075691449776267265"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/4k33Ddv4E5-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/4k33Ddv4E5-90.webp 90w"><img alt="Heydon Pickering’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/4k33Ddv4E5-90.jpeg" width="90" height="90"></picture>Heydon Pickering</a></span></p></blockquote></div>
<div id="product-hunt"><blockquote><p>“#1 Product of the Day (May 2022)” <span class="bio-source">—<a href="https://www.producthunt.com/products/eleventy"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fproducthunt.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://producthunt.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Product Hunt</a></span></p></blockquote></div>
<div id="lea-verou"><blockquote><p>“I use Eleventy on almost every project at this point and I love it.” <span class="bio-source">—<a href="https://twitter.com/LeaVerou/status/1629652201168576512"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flea.verou.me%2F/" width="150" height="150" alt="IndieWeb Avatar for https://lea.verou.me/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Lea Verou</a></span></p></blockquote></div>
<div id="tyler-sticka"><blockquote><p>“Easily one of my favorite open source projects ever!” <span class="bio-source">—<a href="https://twitter.tylersticka.com/1446138920480043008"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/7OjakOTGVe-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/7OjakOTGVe-90.webp 90w"><img alt="Tyler Sticka’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/7OjakOTGVe-90.jpeg" width="90" height="90"></picture>Tyler Sticka</a></span></p></blockquote></div>
<div id="chris-coyier"><blockquote><p>“Eleventy is almost fascinatingly simple.” <span class="bio-source">—<a href="https://css-tricks.com/a-site-for-front-end-development-conferences-built-with-11ty-on-netlify/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/kYHxmUUfyS-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/kYHxmUUfyS-90.webp 90w"><img alt="Chris Coyier’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/kYHxmUUfyS-90.jpeg" width="90" height="90"></picture>Chris Coyier</a></span></p></blockquote></div>
<div id="hj-chen"><blockquote><p>“Eleventy… makes my life so much easier.” <span class="bio-source">—<a href="https://twitter.com/hj_chen/status/1117501300483207168"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/39k8cqo3fg-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/39k8cqo3fg-90.webp 90w"><img alt="HJ Chen’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/39k8cqo3fg-90.jpeg" width="90" height="90"></picture>HJ Chen</a></span></p></blockquote></div>
<div id="matthew-phillips"><blockquote><p>“I think what's great about Eleventy is how it was able to simplify SSGs to just 2 concepts: data sources and templates.” <span class="bio-source">—<a href="https://matthewphillips.info/tweets/1213129379414446080"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/nGJ_qrF0mU-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/nGJ_qrF0mU-90.webp 90w"><img alt="Matthew Phillips’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/nGJ_qrF0mU-90.jpeg" width="90" height="90"></picture>Matthew Phillips</a></span></p></blockquote></div>
<div id="mat-marquis"><blockquote><p>“Don’t tell Zach I said it but Eleventy is seeming fresh as hell so far” <span class="bio-source">—<a href="https://hire.wil.to/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/IIDiNG88X8-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/IIDiNG88X8-90.webp 90w"><img alt="Mat Marquis’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/IIDiNG88X8-90.jpeg" width="90" height="90"></picture>Mat Marquis</a></span></p></blockquote></div>
<div id="cody-peterson"><blockquote><p>“I tried Eleventy last night on a personal project and today we implemented it on a (non-public facing) client project. It's really good.” <span class="bio-source">—<a href="https://twitter.com/codypeterson/status/950568228559904768"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/YYdDDK8otA-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/YYdDDK8otA-90.webp 90w"><img alt="Cody Peterson’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/YYdDDK8otA-90.jpeg" width="90" height="90"></picture>Cody Peterson</a></span></p></blockquote></div>
<div id="steve-gardner"><blockquote><p>“I like Eleventy. (I hope that was enough to get me on the testimonials page.)” <span class="bio-source">—<a href="https://twitter.com/steeevg/status/1409965870647025664"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/H8agTAt8Zk-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/H8agTAt8Zk-90.webp 90w"><img alt="Steve Gardner’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/H8agTAt8Zk-90.jpeg" width="90" height="90"></picture>Steve Gardner</a></span></p></blockquote></div>
<div id="mathias-bynens"><blockquote><p>“I looked into and actively tried using various static site generators for this project. Eleventy was the only one I could find that gave me the fine-grained control I needed at blazingly fast build times.” <span class="bio-source">—<a href="https://twitter.com/mathias/status/1044232502309789696"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/kvumy1-6v7-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/kvumy1-6v7-90.webp 90w"><img alt="Mathias Bynens’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/kvumy1-6v7-90.jpeg" width="90" height="90"></picture>Mathias Bynens</a></span></p></blockquote></div>
<div id="google"><blockquote><p>“2022 winner of the Google Open Source Peer Bonus Award” <span class="bio-source">—<a href="https://opensource.googleblog.com/2022/03/Announcing-First-Group-of-Google-Open-Source-Peer-Bonus-Winners-in-2022.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgoogle.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://google.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Google</a></span></p></blockquote></div>
<div id="micah-mills"><blockquote><p>“Just got through moving a project to Eleventy. Never used nunjucks or a static site generator before, but it was so easy. This will make my life so much easier.” <span class="bio-source">—<a href="https://twitter.com/micahmills/status/973660230453211136"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/_8oPSPOk_c-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/_8oPSPOk_c-90.webp 90w"><img alt="Micah Mills’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/_8oPSPOk_c-90.jpeg" width="90" height="90"></picture>Micah Mills</a></span></p></blockquote></div>
<div id="reuben-l-lillie"><blockquote><p>“Eleventy is as close as we’ve gotten to how the web was always meant to be built (ya’ know, once we realized the value of templates and JavaScript).” <span class="bio-source">—<a href="https://twitter.com/reubenlillie/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/9G4XhTdI7G-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/9G4XhTdI7G-90.webp 90w"><img alt="Reuben L. Lillie’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/9G4XhTdI7G-90.jpeg" width="90" height="90"></picture>Reuben L. Lillie</a></span></p></blockquote></div>
<div id="james-williamson"><blockquote><p>“I've been digging into Eleventy, a new static site generator. Really like the way it handles pagination!” <span class="bio-source">—<a href="https://twitter.com/jameswillweb/status/951488360543121408">James Williamson</a></span></p></blockquote></div>
<div id="google"><blockquote><p>“2019 winner of the Google Open Source Peer Bonus Award” <span class="bio-source">—<a href="https://opensource.googleblog.com/2019/04/google-open-source-peer-bonus-winners.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgoogle.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://google.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Google</a></span></p></blockquote></div>
<div id="dan-mall"><blockquote><p>“The Eleventy + Netlify combo continues to be 🤌” <span class="bio-source">—<a href="https://twitter.com/danmall/status/1585364687046123521"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fdanmall.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://danmall.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Dan Mall</a></span></p></blockquote></div>
<div id="jen-simmons"><blockquote><p>Read the replies to: <em><a href="https://twitter.com/jensimmons/status/1107377359546736641">“Fans of Eleventy.... why do you like it better than other static site generators?”</a></em></p></blockquote></div>
<div id="sara-soueidan"><blockquote><p>“Eleventy is a killer static site generator. That’s all.” <span class="bio-source">—<a href="https://twitter.com/SaraSoueidan/status/1144696081403523072"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/RkAneplqdI-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/RkAneplqdI-90.webp 90w"><img alt="Sara Soueidan’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/RkAneplqdI-90.jpeg" width="90" height="90"></picture>Sara Soueidan</a></span></p></blockquote></div>
<div id="brian-leroux"><blockquote><p>“Think the reason everyone is loving [Eleventy] so much (myself included) is that it doesn't come with a prescription about data sources or template rendering.” <span class="bio-source">—<a href="https://twitter.com/brianleroux/status/1213129879245295619"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/28cSgLJCjI-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/28cSgLJCjI-90.webp 90w"><img alt="Brian Leroux’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/28cSgLJCjI-90.jpeg" width="90" height="90"></picture>Brian Leroux</a></span></p></blockquote></div>
<div id="mina-markham"><blockquote><p>“Eleventy + Netlify have become my new workflow for static sites. I think I'm in love.” <span class="bio-source">—<a href="https://tweets.mina.codes/1037088841520168960"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/QU8tELtBN2-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/QU8tELtBN2-90.webp 90w"><img alt="Mina Markham’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/QU8tELtBN2-90.jpeg" width="90" height="90"></picture>Mina Markham</a></span></p></blockquote></div>
<div id="alex-carpenter"><blockquote><p>“I really like the flexibity Eleventy offers in comparision to my previous Jekyll build.” <span class="bio-source">—<a href="https://alexcarpenter.me/posts/2018/05/back-to-static"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/Uf2bEA2cK9-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/Uf2bEA2cK9-90.webp 90w"><img alt="Alex Carpenter’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/Uf2bEA2cK9-90.jpeg" width="90" height="90"></picture>Alex Carpenter</a></span></p></blockquote></div>
<div id="tatiana-mac"><blockquote><p>“Eleventy is my fave.” <span class="bio-source">—<a href="https://twitter.com/TatianaTMac/status/1117110784830525440"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/85SwukqJQV-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/85SwukqJQV-90.webp 90w"><img alt="Tatiana Mac’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/85SwukqJQV-90.jpeg" width="90" height="90"></picture>Tatiana Mac</a></span></p></blockquote></div>
<div id="google"><blockquote><p>“2018 winner of the Google Open Source Peer Bonus Award” <span class="bio-source">—<a href="https://opensource.googleblog.com/2018/03/congratulating-open-source-peer-bonus-winners.html"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgoogle.com%2F/" width="150" height="150" alt="IndieWeb Avatar for https://google.com/" class="avatar avatar-indieweb" loading="lazy" decoding="async">Google</a></span></p></blockquote></div>
<div id="marco-hengstenberg"><blockquote><p>“Just gave Eleventy a first run/try and I must say it's pretty dang awesome. Especially for someone like me, who is most familiar with HTML and CSS and some JS. ❤️” <span class="bio-source">—<a href="https://twitter.com/nice2meatu/status/1004665956885520384"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/7ZLVdp06Gp-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/7ZLVdp06Gp-90.webp 90w"><img alt="Marco Hengstenberg’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/7ZLVdp06Gp-90.jpeg" width="90" height="90"></picture>Marco Hengstenberg</a></span></p></blockquote></div>
<div id="eduardo-boucas"><blockquote><p>“After a day or so tweaking my existing build, here is a preview of the site running on Eleventy. I'm sold! The main thing to me was the ability to run custom JavaScript logic to sort, filter, and augment data in collections.” <span class="bio-source">—<a href="https://twitter.com/eduardoboucas/status/1001158411583721473"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/b6jcQgIiwY-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/b6jcQgIiwY-90.webp 90w"><img alt="Eduardo Bouças’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/b6jcQgIiwY-90.jpeg" width="90" height="90"></picture>Eduardo Bouças</a></span></p></blockquote></div>
<div id="bryan-robinson"><blockquote><p>“[Eleventy is] a platform that legitimately built things in the way that I thought and worked more than anything else out there, and with every new feature it's like my mind gets read.” <span class="bio-source">—<a href="https://twitter.com/brob/status/1446128951647035393"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/kpuUi6ir6x-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/kpuUi6ir6x-90.webp 90w"><img alt="Bryan Robinson’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/kpuUi6ir6x-90.jpeg" width="90" height="90"></picture>Bryan Robinson</a></span></p></blockquote></div>
<div id="addy-osmani"><blockquote><p>“Eleventy is absolutely wonderful. It’s by far the nicest static site generator I’ve used in what feels like forever.” <span class="bio-source">—<a href="https://twitter.com/addyosmani/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/T1zBqOUPuD-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/T1zBqOUPuD-90.webp 90w"><img alt="Addy Osmani’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/T1zBqOUPuD-90.jpeg" width="90" height="90"></picture>Addy Osmani</a></span></p></blockquote></div>
<div id="lach-zeatherman"><blockquote><p>“I heard Eleventy was good” <span class="bio-source">—<a href="https://twitter.com/lachzeat/status/1196789524535431168"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/VQ1YvhJm7u-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/VQ1YvhJm7u-90.webp 90w"><img alt="Lach Zeatherman’s Twitter Photo" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/VQ1YvhJm7u-90.jpeg" width="90" height="90"></picture>Lach Zeatherman</a></span></p></blockquote></div>
Events
2023-03-28T21:35:24Z
https://www.11ty.dev/docs/events/
<h1>Events</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/events/#eleventy.before">eleventy.before </a></li><li><a href="https://www.11ty.dev/docs/events/#eleventy.after">eleventy.after </a></li><li><a href="https://www.11ty.dev/docs/events/#event-arguments">Event arguments </a></li><li><a href="https://www.11ty.dev/docs/events/#eleventy.beforewatch">eleventy.beforeWatch </a></li></ul></div><p></p>
</details>
<p>You may want to run some code at certain times during the compiling process. To do that, you can use <em>configuration events</em>, which will run at specific times during the compiling process.</p>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/events/#eleventy.before">eleventy.before </a></li><li><a href="https://www.11ty.dev/docs/events/#eleventy.after">eleventy.after </a></li><li><a href="https://www.11ty.dev/docs/events/#event-arguments">Event arguments </a></li><li><a href="https://www.11ty.dev/docs/events/#eleventy.beforewatch">eleventy.beforeWatch </a></li></ul></div><p></p>
<p>All events are configured in your <code>.eleventy.js</code> configuration file, with the code run every time the event triggers.</p>
<p>Asynchronous callback function support added in v1.0.</p>
<h2 id="eleventy.before" tabindex="-1"><code>eleventy.before</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/events/#eleventy.before">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Previously known as the now deprecated (but not removed) <code>beforeBuild</code> event.</li>
</ul>
<p>The <code>eleventy.before</code> event runs every time Eleventy starts building, so it will run before the start of each stand-alone build, as well as each time building starts as either part of <code>--watch</code> or <code>--serve</code>. To use it, attach the event handler to your Eleventy config:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Async-friendly in 1.0+</span><br> <span class="token comment">// Arguments added in 2.0+</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'eleventy.before'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dir<span class="token punctuation">,</span> runMode<span class="token punctuation">,</span> outputMode <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Run me before the build starts</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="eleventy.after" tabindex="-1"><code>eleventy.after</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/events/#eleventy.after">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Previously known as the now deprecated (but not removed) <code>afterBuild</code> event.</li>
</ul>
<p>The <code>eleventy.after</code> event runs every time Eleventy finishes building, so it will run after the end of each stand-alone build, as well as each time building ends as either part of <code>--watch</code> or <code>--serve</code>. To use it, attach the event handler to your Eleventy config:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Async-friendly in 1.0+</span><br> <span class="token comment">// Arguments added in 2.0+</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'eleventy.after'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dir<span class="token punctuation">,</span> results<span class="token punctuation">,</span> runMode<span class="token punctuation">,</span> outputMode <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Run me after the build ends</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="event-arguments" tabindex="-1">Event arguments <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/events/#event-arguments">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy now provides an object with metadata on the build as an argument to the <code>eleventy.before</code> and <code>eleventy.after</code> event callbacks.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'eleventy.before'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dir<span class="token punctuation">,</span> runMode<span class="token punctuation">,</span> outputMode <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Read more below</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'eleventy.after'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dir<span class="token punctuation">,</span> results<span class="token punctuation">,</span> runMode<span class="token punctuation">,</span> outputMode <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Read more below</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<ul>
<li><code>dir</code>: an object with current project directories, set in <a href="https://www.11ty.dev/docs/config/#input-directory">your configuration file</a> (or populated with Eleventy defaults).
<ul>
<li><code>dir.input</code> (default <code>"."</code>)</li>
<li><code>dir.output</code> (default <code>"_site"</code>)</li>
<li><code>dir.includes</code> (default <code>"_includes"</code>)</li>
<li><code>dir.data</code> (default <code>"_data"</code>)</li>
<li><code>dir.layouts</code> (no default value)</li>
</ul>
</li>
<li><code>outputMode</code>: a string representing the value of <a href="https://www.11ty.dev/docs/usage/#to-can-output-json"><code>--to</code> on the command line</a>
<ul>
<li><code>fs</code> (default)</li>
<li><code>json</code></li>
<li><code>ndjson</code></li>
</ul>
</li>
<li><code>runMode</code>: a string representing <a href="https://www.11ty.dev/docs/usage/#re-run-eleventy-when-you-save"><code>--serve</code> or <code>--watch</code> usage on the command line</a>. One of:
<ul>
<li><code>build</code> (default)</li>
<li><code>watch</code></li>
<li><code>serve</code></li>
</ul>
</li>
<li><code>results</code>: <em>only available on <code>eleventy.after</code></em>. An array with the processed Eleventy output (similar to <code>--to=json</code> output)
<ul>
<li>Individual entries will have: <code>{ inputPath, outputPath, url, content }</code></li>
</ul>
</li>
</ul>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="f0LsgyPV7j0" params="start=491" playlabel="Play: New Event Arguments (Weekly №5)" style="background-image:url('https://i.ytimg.com/vi/f0LsgyPV7j0/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=f0LsgyPV7j0" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: New Event Arguments (Weekly №5)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=f0LsgyPV7j0&t=491">New Event Arguments (Weekly №5) <code>▶8m11s</code></a></is-land></div></div>
<h2 id="eleventy.beforewatch" tabindex="-1"><code>eleventy.beforeWatch</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/events/#eleventy.beforewatch">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Previously known as the now deprecated (but not removed) <code>beforeWatch</code> event.</li>
</ul>
<p>The <code>eleventy.beforeWatch</code> event runs before a build is run <em>only</em> if it's a re-run during <code>--watch</code> or <code>--serve</code>. This means it will neither run during the initial build nor during stand-alone builds. To use it, attach the event handler to your Eleventy config:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Async-friendly in 1.0+</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'eleventy.beforeWatch'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">changedFiles</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Run me before --watch or --serve re-runs</span><br><br> <span class="token comment">// changedFiles is an array of files that changed</span><br> <span class="token comment">// to trigger the watch/serve build</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The <code>changedFiles</code> parameter was .</p>
Eleventy Supplied Data
2023-03-28T15:24:07Z
https://www.11ty.dev/docs/data-eleventy-supplied/
<h1>Eleventy Supplied Data</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable">page Variable </a><ul><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#feature-availability">Feature Availability </a></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#date">date </a></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#fileslug">fileSlug </a></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#filepathstem">filePathStem </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#eleventy-variable">eleventy Variable </a><ul><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#feature-availability-1">Feature Availability </a></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#use-with-meta-namegenerator">Use with meta name="generator" </a></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#learn-more">Learn more </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/#environment-variables-on-process.env">Environment Variables on process.env </a></li></ul></div><p></p>
</details>
<p>Here are a few data values we supply to your page that you can use in your templates:</p>
<ul>
<li><code>pkg</code>: The local project’s <code>package.json</code> values.</li>
<li><code>pagination</code>, when enabled using pagination in <a href="https://www.11ty.dev/docs/data-frontmatter/">front matter</a>. <a href="https://www.11ty.dev/docs/pagination/">Read more about Pagination</a>.</li>
<li><code>collections</code>: Lists of all of your content, grouped by tags. <a href="https://www.11ty.dev/docs/collections/">Read more about Collections</a></li>
<li><code>page</code>: Has information about the current page. See code block below for <code>page</code> contents. For example, <code>page.url</code> is useful for finding the current page in a collection. <a href="https://www.11ty.dev/docs/collections/">Read more about Collections</a> (look at <em>Example: Navigation Links with an <code>active</code> class added for on the current page</em>).</li>
<li><code>eleventy</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> contains Eleventy-specific data from environment variables and the Serverless plugin (if used).</li>
</ul>
<div id="page-variable-contents"></div>
<h2 id="page-variable" tabindex="-1"><code>page</code> Variable <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre class="language-js"><code class="language-js"><span class="token keyword">let</span> page <span class="token operator">=</span> <span class="token punctuation">{</span><br><br> <span class="token comment">// URL can be used in <a href> to link to other templates</span><br> <span class="token comment">// Note: This value will be `false` if `permalink` is set to `false`.</span><br> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">"/current/page/myFile/"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// For permalinks: inputPath filename minus template file extension</span><br> <span class="token literal-property property">fileSlug</span><span class="token operator">:</span> <span class="token string">"myFile"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// For permalinks: inputPath minus template file extension</span><br> <span class="token literal-property property">filePathStem</span><span class="token operator">:</span> <span class="token string">"/current/page/myFile"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// JS Date Object for current page (used to sort collections)</span><br> <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br><br> <span class="token comment">// The path to the original source file for the template</span><br> <span class="token comment">// Note: this will include your input directory path!</span><br> <span class="token literal-property property">inputPath</span><span class="token operator">:</span> <span class="token string">"./current/page/myFile.md"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Depends on your output directory (the default is _site)</span><br> <span class="token comment">// You probably won’t use this: `url` is better.</span><br> <span class="token comment">// Note: This value will be `false` if `permalink` is set to `false`.</span><br> <span class="token literal-property property">outputPath</span><span class="token operator">:</span> <span class="token string">"./_site/current/page/myFile/index.html"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Added in 1.0</span><br> <span class="token comment">// Useful with `page.filePathStem` when using custom file extensions.</span><br> <span class="token literal-property property">outputFileExtension</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Available in 2.0 with the i18n plugin</span><br> <span class="token comment">// The default is the value of `defaultLanguage` passed to the i18n plugin</span><br> <span class="token literal-property property">lang</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<ul>
<li>Note that <code>page.lang</code> is <em>only</em> available when the <a href="https://www.11ty.dev/docs/plugins/i18n/#add-to-your-configuration-file">i18n plugin has been added to your configuration file</a>.</li>
</ul>
<h3 id="feature-availability" tabindex="-1">Feature Availability <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#feature-availability">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The data in <code>page</code> is also available as:</p>
<ul>
<li><code>this.page</code> on <a href="https://www.11ty.dev/docs/shortcodes/#scoped-data-in-shortcodes">Shortcodes</a></li>
<li><code>this.page</code> on <a href="https://www.11ty.dev/docs/filters/#scoped-data-in-filters">Filters</a>, <a href="https://www.11ty.dev/docs/config/#transforms">Transforms</a>, and <a href="https://www.11ty.dev/docs/config/#linters">Linters</a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
<li><code>page</code> on <a href="https://www.11ty.dev/docs/collections/#collection-item-data-structure">Collection entries</a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
</ul>
<h3 id="date" tabindex="-1"><code>date</code> <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#date">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The date associated with the page. Defaults to the content’s file created date but can be overridden. <a href="https://www.11ty.dev/docs/dates/">Read more at Content Dates</a>.</p>
<h3 id="fileslug" tabindex="-1"><code>fileSlug</code> <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#fileslug">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The <code>fileSlug</code> variable is mapped from <code>inputPath</code>, and is useful for creating your own clean <a href="https://www.11ty.dev/docs/permalinks/">permalinks</a>.</p>
<table>
<thead>
<tr>
<th><code>inputPath</code></th>
<th><code>page.fileSlug</code> Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"2018-01-01.md"</code></td>
<td><code>"2018-01-01"</code></td>
</tr>
<tr>
<td><code>"2018-01-01-myFile.md"</code></td>
<td><code>"myFile"</code></td>
</tr>
<tr>
<td><code>"myDir/myFile.md"</code></td>
<td><code>"myFile"</code></td>
</tr>
</tbody>
</table>
<p><code>fileSlug</code> returns information on the parent directory if the file is an <code>index</code> template:</p>
<table>
<thead>
<tr>
<th><code>inputPath</code></th>
<th><code>page.fileSlug</code> Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"index.md"</code></td>
<td><code>""</code> <em>(empty)</em></td>
</tr>
<tr>
<td><code>"myDir/index.md"</code></td>
<td><code>"myDir"</code></td>
</tr>
<tr>
<td><code>"myDir/2018-01-01-index.md"</code></td>
<td><code>"myDir"</code></td>
</tr>
<tr>
<td><code>"2018-01-01-myDir/index.md"</code></td>
<td><code>"myDir"</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.10">Added in v2.0.0</span></td>
</tr>
</tbody>
</table>
<h3 id="filepathstem" tabindex="-1"><code>filePathStem</code> <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#filepathstem">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The <code>filePathStem</code> variable is mapped from <code>inputPath</code>, and is useful if you’ve inherited a project that doesn’t use clean <a href="https://www.11ty.dev/docs/permalinks/">permalinks</a>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>Careful with this one!</strong> Remember that <a href="https://www.11ty.dev/docs/permalinks/#cool-uris-dont-change">Cool URI’s don’t change</a>.</div></div>
<p>If you absolutely need a file extension on your output, you might use it like this:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"{{ page.filePathStem }}.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>This example output uses the above permalink value.</p>
<table>
<thead>
<tr>
<th><code>inputPath</code></th>
<th><code>page.filePathStem</code> Result</th>
<th>Example Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"2018-01-01-myFile.md"</code></td>
<td><code>"myFile"</code></td>
<td><code>myFile.html</code></td>
</tr>
<tr>
<td><code>"myDir/myFile.md"</code></td>
<td><code>"myDir/myFile"</code></td>
<td><code>myDir/myFile.html</code></td>
</tr>
</tbody>
</table>
<h4 id="changing-your-project-default-permalinks" tabindex="-1">Changing your project default permalinks <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#changing-your-project-default-permalinks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.9">Added in v2.0.0</span> <a href="https://github.com/11ty/eleventy/commit/3c49f22b31b10e5dae0daf661a54750875ae5d0f">Deep-link to <code>3c49f22</code></a>.</p>
<p>Want to change <code>resource.md</code> to write to <code>/resource.html</code> instead of <code>/resource/index.html</code>? Use this configuration API code sample.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"permalink"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>filePathStem<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>outputFileExtension<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">When using this approach for URLs <em>without</em> trailing slashes (file <code>/resource.html</code> -> url <code>/resource</code>), please do note that using trailing slashes with <code>index.html</code> files (file <code>/resource/index.html</code> -> url <code>/resource/</code>) is a bit friendlier on various Jamstack hosting providers. You may encounter unexpected 404 errors—make <a href="https://www.zachleat.com/web/trailing-slash/#results-table">sure you study up on how this works and test appropriately!</a>!</div></div>
<h2 id="eleventy-variable" tabindex="-1"><code>eleventy</code> Variable <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#eleventy-variable">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre class="language-js"><code class="language-js"><span class="token keyword">let</span> eleventy <span class="token operator">=</span> <span class="token punctuation">{</span><br><br> <span class="token comment">// Eleventy version</span><br> <span class="token literal-property property">version</span><span class="token operator">:</span> <span class="token string">"1.0.1"</span><span class="token punctuation">,</span> <span class="token comment">// New in v1.0.1</span><br><br> <span class="token comment">// For use with `<meta name="generator">`</span><br> <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token string">"Eleventy v1.0.1"</span><span class="token punctuation">,</span> <span class="token comment">// New in v1.0.1</span><br><br> <span class="token comment">// Read more about their `process.env` counterparts below</span><br> <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// Absolute path to the directory in which</span><br> <span class="token comment">// you’ve run the Eleventy command.</span><br> <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">"/Users/zachleat/myProject/"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Absolute path to the current config file</span><br> <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token string">"/Users/zachleat/myProject/.eleventy.js"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// The method, either `cli` or `script`</span><br> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"cli"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// One of `serve`, `watch`, or `build`</span><br> <span class="token literal-property property">runMode</span><span class="token operator">:</span> <span class="token string">"build"</span><span class="token punctuation">,</span> <span class="token comment">// New in v2.0.0</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token literal-property property">serverless</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// An object containing the values from any Dynamic URL</span><br> <span class="token comment">// slugs from Serverless paths</span><br> <span class="token comment">// e.g. A slug for /path/:id/ and a URL for /path/1/</span><br> <span class="token comment">// would give { id: 1 }</span><br> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br><br> <span class="token comment">// The `event.queryStringParameters` received from the</span><br> <span class="token comment">// serverless function. Note these are not available in</span><br> <span class="token comment">// Netlify On-demand Builders</span><br> <span class="token comment">// e.g. ?id=1 would be { id: 1 }</span><br> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><br><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="feature-availability-1" tabindex="-1">Feature Availability <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#feature-availability-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The data in <code>eleventy</code> is also available as:</p>
<ul>
<li><code>this.eleventy</code> on <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.5">Added in v2.0.0</span></li>
<li><code>this.eleventy</code> on <a href="https://www.11ty.dev/docs/filters/">Filters</a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
</ul>
<h3 id="use-with-meta-namegenerator" tabindex="-1">Use with <code>meta name="generator"</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.1">Added in v1.0.1</span> <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#use-with-meta-namegenerator">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>It’s helpful if you add <code><meta name="generator"></code> to your existing Eleventy project as shown below. Learn more <a href="https://darn.es/you-should-add-a-generator-tag-to-your-eleventy-site/">from David Darnes’ blog post: <em>You should add a generator tag to your Eleventy site</em></a>.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks, Liquid</div>
<pre class="language-njk"><code class="language-njk"><span class="token operator"><</span><span class="token variable">meta</span> <span class="token variable">name</span><span class="token operator">=</span><span class="token string">"generator"</span> <span class="token variable">content</span><span class="token operator">=</span><span class="token string">"{{ eleventy.generator }}"</span><span class="token operator">></span></code></pre>
<p>These videos also provide some additional context as to why this is important:</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="b4frtsT4Cgo" playlabel="Play: Full control over HTML, a look at requiring opt-in for the meta name=generator in Eleventy" style="background-image:url('https://i.ytimg.com/vi/b4frtsT4Cgo/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=b4frtsT4Cgo" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Full control over HTML, a look at requiring opt-in for the meta name=generator in Eleventy</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=b4frtsT4Cgo">Full control over HTML, a look at requiring opt-in for the meta name=generator in Eleventy</a></is-land></div><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="_YvwTHeqBZY" params="start=235" playlabel="Play: eleventy.version and eleventy.generator Data (Weekly №7)" style="background-image:url('https://i.ytimg.com/vi/_YvwTHeqBZY/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=_YvwTHeqBZY" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: eleventy.version and eleventy.generator Data (Weekly №7)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=_YvwTHeqBZY&t=235">eleventy.version and eleventy.generator Data (Weekly №7) <code>▶3m55s</code></a></is-land></div></div>
<h3 id="learn-more" tabindex="-1">Learn more <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#learn-more">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><a href="https://www.11ty.dev/docs/environment-vars/#eleventy-supplied">Eleventy-supplied Environment Variables on <code>process.env</code></a></li>
<li><a href="https://www.11ty.dev/docs/plugins/serverless/">Serverless</a>
<ul>
<li><a href="https://www.11ty.dev/docs/plugins/serverless/#dynamic-slugs-and-serverless-global-data">Dynamic Slugs and Serverless Global Data</a>.</li>
<li><code>event.queryStringParameters</code>, which are very similar to <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams">URL.searchParams</a>. It’s an object representing the name/value pairs for things after the <code>?</code> in a URL.</li>
</ul>
</li>
</ul>
<h2 id="environment-variables-on-process.env" tabindex="-1">Environment Variables on <code>process.env</code> <a class="direct-link" href="https://www.11ty.dev/docs/data-eleventy-supplied/#environment-variables-on-process.env">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Read more about <a href="https://www.11ty.dev/docs/environment-vars/#eleventy-supplied">Eleventy-supplied environment variables</a>.</li>
</ul>
Fetch
2023-03-28T15:24:07Z
https://www.11ty.dev/docs/plugins/fetch/
<h1>Fetch</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/fetch/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/fetch/#cache-a-json-file-from-an-api">Cache a JSON file from an API </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#options">Options </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#what-happens-when-a-request-fails">What happens when a request fails </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#running-this-on-your-build-server">Running this on your Build Server </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#more-examples">More Examples </a><ul><li><a href="https://www.11ty.dev/docs/plugins/fetch/#cache-a-remote-image">Cache a Remote Image </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#fetch-google-fonts-css">Fetch Google Fonts CSS </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#fetching-github-stars-for-a-repo">Fetching GitHub Stars for a repo </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#advanced-usage">Advanced Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/fetch/#manually-store-your-own-data-in-the-cache">Manually store your own data in the cache </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#change-global-concurrency">Change Global Concurrency </a></li><li><a href="https://www.11ty.dev/docs/plugins/fetch/#debug-mode">DEBUG mode </a></li></ul></li></ul></div><p></p>
</details>
<p>Fetch network resources and cache them so you don’t bombard your API (or other resources). Do this at configurable intervals—not with every build! Once per minute, or once per hour, once per day, or however often you like!</p>
<ul>
<li><a href="https://github.com/11ty/eleventy-fetch"><code>eleventy-fetch</code> on GitHub</a></li>
</ul>
<p>With the added benefit that if one successful request completes, you can now work offline!</p>
<p>This plugin can save <em>any</em> kind of asset—JSON, HTML, images, videos, etc.</p>
<ul>
<li>Fetch a remote URL and saves it to a local cache.</li>
<li>If the remote server goes down or linkrots away—we keep and continue to use the local asset (save remote images!)</li>
<li>If cache expires and the network connection fails, will continue to use the cached request and make a new request when the network connectivity is restored.</li>
<li>Control concurrency so we don’t make too many network requests at the same time.</li>
<li>Requires <strong>Node 12+</strong></li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">This plugin was renamed from <a href="https://www.npmjs.com/package/@11ty/eleventy-cache-assets"><code>@11ty/eleventy-cache-assets</code></a>. <div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="JCQQgtOcjH4" params="start=246" playlabel="Play: Cache Assets renamed to Fetch (Weekly №2)" style="background-image:url('https://i.ytimg.com/vi/JCQQgtOcjH4/maxresdefault.jpg')"><br>
<a href="https://youtube.com/watch?v=JCQQgtOcjH4" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Cache Assets renamed to Fetch (Weekly №2)</span></a><br>
</lite-youtube><a href="https://youtube.com/watch?v=JCQQgtOcjH4&t=246">Cache Assets renamed to Fetch (Weekly №2) <code>▶4m6s</code></a></is-land></div></div></div></div>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.npmjs.com/package/@11ty/eleventy-fetch"><code>@11ty/eleventy-fetch</code> on npm</a></li>
</ul>
<pre><code>npm install @11ty/eleventy-fetch
</code></pre>
<p>Formerly known as <a href="https://www.npmjs.com/package/@11ty/eleventy-cache-assets"><code>@11ty/eleventy-cache-assets</code></a>.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><strong>Important Security and Privacy Notice</strong>
<p>
This plugin caches complete network responses. Unless you’re willing to perform a full review of everything this plugin caches to disk for privacy and security exposure, it is <em>strongly</em> recommended that you add the <code>.cache</code> folder to your <code>.gitignore</code> file so that network responses aren’t checked in to your git repository.
</p>
<p>
Are you 100% sure that private e-mail addresses aren’t being returned from a cached API? I’m guessing no—add <code>.cache</code> to your <code>.gitignore</code> file. Right now. Do it.
</p>
</div></div>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="cache-a-json-file-from-an-api" tabindex="-1">Cache a JSON file from an API <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#cache-a-json-file-from-an-api">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Consider the following example, perhaps in an Eleventy <a href="https://www.11ty.dev/docs/data-global/">Global Data File</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">;</span><br><br> <span class="token comment">/* This returns a promise */</span><br> <span class="token keyword">return</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span> <span class="token comment">// save for 1 day</span><br> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"json"</span> <span class="token comment">// we’ll parse JSON for you</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="options" tabindex="-1">Options <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="verbose-output" tabindex="-1">Verbose Output <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#verbose-output">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Fetch 3.0">Added in Fetch 3.0</span> Option to log requested remote URLs to the console.</p>
<ul>
<li><code>verbose: true</code> (The default is <code>false</code> starting in Fetch 3.0)</li>
</ul>
<h4 id="change-the-cache-duration" tabindex="-1">Change the Cache Duration <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#change-the-cache-duration">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>After this amount of time has passed, we’ll make a new network request to the URL to fetch fresh data.</p>
<p>The <code>duration</code> option supports the following shorthand values:</p>
<ul>
<li><code>s</code> is seconds (e.g. <code>duration: "43s"</code>)</li>
<li><code>m</code> is minutes (e.g. <code>duration: "2m"</code>)</li>
<li><code>h</code> is hours (e.g. <code>duration: "99h"</code>)</li>
<li><code>d</code> is days (The default is <code>duration: "1d"</code>)</li>
<li><code>w</code> is weeks, or shorthand for 7 days (e.g. <code>duration: 2w</code> is 14 days)</li>
<li><code>y</code> is years, or shorthand for 365 days (not <em>exactly</em> one year) (e.g. <code>duration: 2y</code> is 730 days)</li>
</ul>
<p>Here are a few more values you can use:</p>
<ul>
<li><code>duration: "*"</code> will <em>never</em> fetch new data (after the first success).</li>
<li><code>duration: "0s"</code> will <em>always</em> fetch new data.</li>
</ul>
<h4 id="type" tabindex="-1">Type <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#type">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><code>type: "json"</code></li>
<li><code>type: "text"</code></li>
<li><code>type: "buffer"</code> (default: use this for non-text things)</li>
</ul>
<h4 id="cache-directory" tabindex="-1">Cache Directory <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#cache-directory">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>The <code>directory</code> option let’s you change where the cache is stored. It is strongly recommended that you add this folder to your <code>.gitignore</code> file.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">Read the <a href="https://www.11ty.dev/docs/plugins/fetch/#installation">Important Security and Privacy Notice</a>.</div></div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token function">EleventyFetch</span><span class="token punctuation">(</span><span class="token string">"https://…"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">directory</span><span class="token operator">:</span> <span class="token string">".cache"</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>If you want to use this utility inside of a Netlify Function (or AWS Lambda), use a writeable location (<code>/tmp/</code>) like <code>directory: "/tmp/.cache/"</code>. You can also use <code>dryRun: true</code> to skip writing to the file system.</p>
<h4 id="remove-url-query-params-from-cache-identifier" tabindex="-1">Remove URL query params from Cache Identifier <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#remove-url-query-params-from-cache-identifier">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>(Version 2.0.3 and newer) If your fetched URL contains some query parameters that aren’t relevant to the identifier used in the cache, remove them using the <code>removeUrlQueryParams</code> option. This is useful if an API adds extra junk to your request URLs.</p>
<ul>
<li><code>removeUrlQueryParams: true</code> (<code>false</code> is default)</li>
</ul>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token function">EleventyFetch</span><span class="token punctuation">(</span><span class="token string">"https://www.zachleat.com/img/avatar-2017-big.png?Get=rid&of=these"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">removeUrlQueryParams</span><span class="token operator">:</span> <span class="token boolean">true</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Note that query params are removed before—and are relevant to how—the hash key is calculated.</p>
<h2 id="what-happens-when-a-request-fails" tabindex="-1">What happens when a request fails? <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#what-happens-when-a-request-fails">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ol>
<li>If this is the first ever request to this URL (no entry exists in your cache folder), it will fail. Use a <code>try</code>/<code>catch</code> if you’d like to handle this gracefully.</li>
<li>If a failure happens and a cache entry already exists (<em>even if it’s expired</em>), it will use the cached entry.</li>
<li>If you prefer the build to <em>fail</em> when your API requests fail, leave out the <code>try</code> <code>catch</code> and let the error throw without handling it!</li>
</ol>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">try</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">;</span><br><br> <span class="token comment">/* This returns a promise */</span><br> <span class="token keyword">return</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"json"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token comment">// my failure fallback data</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="running-this-on-your-build-server" tabindex="-1">Running this on your Build Server <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#running-this-on-your-build-server">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>If you’re attempting to use this plugin on a service like Netlify and you are <em>definitely not checking in your <code>.cache</code> folder to <code>git</code></em>, the <code>.cache</code> folder will be empty with every build and you’ll always get fresh data from new requests.</p>
<p>However, if you’d like to persist your <code>.cache</code> folder between Netlify builds you can use the <a href="https://www.npmjs.com/package/netlify-plugin-cache"><code>netlify-plugin-cache</code> package</a>.</p>
<ol>
<li><code>npm install netlify-plugin-cache</code></li>
<li>Add the following to your <code>netlify.toml</code> configuration file:</li>
</ol>
<pre class="language-toml"><code class="language-toml"><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">plugins</span><span class="token punctuation">]</span><span class="token punctuation">]</span><br><span class="token key property">package</span> <span class="token punctuation">=</span> <span class="token string">"netlify-plugin-cache"</span><br><br> <span class="token punctuation">[</span><span class="token table class-name">plugins.inputs</span><span class="token punctuation">]</span><br> <span class="token key property">paths</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token string">".cache"</span> <span class="token punctuation">]</span></code></pre>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="JCQQgtOcjH4" params="start=322" playlabel="Play: Reusing Fetch cache between builds (Weekly №2)" style="background-image:url('https://i.ytimg.com/vi/JCQQgtOcjH4/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=JCQQgtOcjH4" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Reusing Fetch cache between builds (Weekly №2)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=JCQQgtOcjH4&t=322">Reusing Fetch cache between builds (Weekly №2) <code>▶5m22s</code></a></is-land></div></div>
<h2 id="more-examples" tabindex="-1">More Examples <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#more-examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="cache-a-remote-image" tabindex="-1">Cache a Remote Image <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#cache-a-remote-image">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This is what <a href="https://www.11ty.dev/docs/plugins/image/"><code>eleventy-img</code></a> uses internally.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">"https://www.zachleat.com/img/avatar-2017-big.png"</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> imageBuffer <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"buffer"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// Use imageBuffer as an input to the `sharp` plugin, for example</span><br><br> <span class="token comment">// (Example truncated)</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="fetch-google-fonts-css" tabindex="-1">Fetch Google Fonts CSS <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#fetch-google-fonts-css">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Also a good example of using <code>fetchOptions</code> to pass in a custom user agent. Full option list is available on the <a href="https://www.npmjs.com/package/node-fetch#options"><code>node-fetch</code> documentation</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">"https://fonts.googleapis.com/css?family=Roboto+Mono:400&display=swap"</span><span class="token punctuation">;</span><br><span class="token keyword">let</span> fontCss <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">fetchOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// lol</span><br> <span class="token string-property property">"user-agent"</span><span class="token operator">:</span> <span class="token string">"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="fetching-github-stars-for-a-repo" tabindex="-1">Fetching GitHub Stars for a repo <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#fetching-github-stars-for-a-repo">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li>This specific example has been previously described in our quick tips section: head over to read <a href="https://www.11ty.dev/docs/quicktips/cache-api-requests/">Quick Tip #009—Cache Data Requests</a>.</li>
</ul>
<h2 id="advanced-usage" tabindex="-1">Advanced Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#advanced-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="manually-store-your-own-data-in-the-cache" tabindex="-1">Manually store your own data in the cache <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#manually-store-your-own-data-in-the-cache">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><strong>You probably won’t need to do this.</strong> If you’d like to store data of your own choosing in the cache (some expensive thing, but perhaps not related to a network request), you may do so! Consider the following <a href="https://www.11ty.dev/docs/data-global/">Global Data File</a>:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> AssetCache <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Pass in your unique custom cache key</span><br> <span class="token comment">// (normally this would be tied to your API URL)</span><br> <span class="token keyword">let</span> asset <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AssetCache</span><span class="token punctuation">(</span><span class="token string">"zachleat_twitter_followers"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// check if the cache is fresh within the last day</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>asset<span class="token punctuation">.</span><span class="token function">isCacheValid</span><span class="token punctuation">(</span><span class="token string">"1d"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// return cached data.</span><br> <span class="token keyword">return</span> asset<span class="token punctuation">.</span><span class="token function">getCachedValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// a promise</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// do some expensive operation here, this is simplified for brevity</span><br> <span class="token keyword">let</span> fakeTwitterApiContents <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">followerCount</span><span class="token operator">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token keyword">await</span> asset<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span>fakeTwitterApiContents<span class="token punctuation">,</span> <span class="token string">"json"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> fakeTwitterApiContents<span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="change-global-concurrency" tabindex="-1">Change Global Concurrency <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#change-global-concurrency">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>EleventyFetch<span class="token punctuation">.</span>concurrency <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token comment">// default is 10</span></code></pre>
<h3 id="debug-mode" tabindex="-1">DEBUG mode <a class="direct-link" href="https://www.11ty.dev/docs/plugins/fetch/#debug-mode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js"><span class="token constant">DEBUG</span><span class="token operator">=</span>EleventyCacheAssets<span class="token operator">*</span> node your<span class="token operator">-</span>node<span class="token operator">-</span>script<span class="token punctuation">.</span>js<br><span class="token constant">DEBUG</span><span class="token operator">=</span>EleventyCacheAssets<span class="token operator">*</span> npx @11ty<span class="token operator">/</span>eleventy</code></pre>
Contributor Account
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/account/
<h1>Contributor Account</h1>
<p>To receive an Eleventy Contributor Account, you must <a href="https://opencollective.com/11ty">donate to the Eleventy project on Open Collective</a>. You will then receive an email with instructions on how to activate your Eleventy Contributor account.</p>
<div class="fl fl-nowrap" style="--fl-stackpoint: 30em">
<div>
<div data-netlify-identity-button="" class="investors-btn btn-primary btn-primary-sm benchnine rainbow-active rainbow-active-noanim"></div>
</div>
<div class="lo-maxgrow">
<a href="https://opencollective.com/11ty" class="btn-primary btn-primary-sm benchnine rainbow-active rainbow-active-noanim elv-externalexempt investors-noauth">Contribute</a>
</div>
</div>
<h2 id="benefits-for-contributors" tabindex="-1">Benefits for Contributors <a class="direct-link" href="https://www.11ty.dev/docs/account/#benefits-for-contributors">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ol>
<li>Display your <a href="https://www.11ty.dev/docs/supporters/">name and avatar on the Eleventy documentation</a>. Monthly supporter avatars are listed in the footer of <em>almost</em> all documentation pages.</li>
<li>No advertisements, tag managers, or third party trackers on Eleventy documentation pages. (Okay, everyone gets this)</li>
<li>Backer tier and above can join the <a href="https://www.11ty.dev/super-professional-business-network/">Eleventy Super Professional Business Network</a>.</li>
<li><em>More to come!</em></li>
</ol>
<!-- 1. **Future Roadmap** Access to documentation offline (Progressive Web App). -->
Order of Operations
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/advanced-order/
<h1>Order of Operations</h1>
<p>From a very high level, Eleventy’s internal order of operations is such:</p>
<ol>
<li>Find any file matching a valid Eleventy file extension in the Input directory. (e.g. <code>./src/**.njk</code> or <code>./docs/**.md</code>)</li>
<li>Iterate over the files.
<ol>
<li>If it doesn’t match a template file extension, treat it as a <a href="https://www.11ty.dev/docs/copy/">passthrough copy</a>.</li>
<li>If it does match a template file extension, continue processing as an Eleventy template.</li>
</ol>
</li>
<li>Start the asynchronous copy of <a href="https://www.11ty.dev/docs/copy/">passthrough copy</a>. Both configuration specified passthrough copy and non-template-matching file extension files. This will continue while templates are being processed.</li>
<li>Initial <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a> is generated for each template file. This includes all values from front matter, layouts, directory and file data files, global data.
<ul>
<li>The data cascade does <strong>not</strong> yet include populated <code>collections</code>, <code>templateContent</code>, or computed <code>page</code> values like <code>page.url</code> and <code>page.outputPath</code>. <!-- Template.js -> getTemplateMapEntries --></li>
</ul>
</li>
<li>Dependency graph is created of the templates to process them in the correct order. <!-- TemplateMap.js -->
<ul>
<li>This is a bit oversimplified (and some may mix and match if they aren’t dependent on each other) but from a high level the templates are processed like this (listed here in <em>reverse order</em>—<code>1</code> is processed first): <ol reversed="">
<li>Templates that use Pagination and target <code>collections.all</code></li>
<li>Templates that use Pagination and target <code>collections</code></li>
<li>Templates that use Pagination and target a Configuration API added collection</li>
<li>Templates that use Pagination and target any other Collection (those supplied via <code>tags</code>)</li>
<li>Templates that have <code>tags</code> specified</li>
<li>Templates that have no dependencies or are <code>eleventyExcludeFromCollections</code></li>
</ol>
</li>
<li><em>Note</em>: Eleventy does not automatically know what data is used inside of the template content at this stage. We use the specified front matter to know which templates supply collections and which templates consume collections. For a safety net we may <a href="https://github.com/11ty/eleventy/issues/975">add a front matter option to declare dependencies manually</a>.</li>
</ul>
</li>
<li><a href="https://www.11ty.dev/docs/collections/">Collections</a> are generated in the correct order, per the dependency graph.</li>
<li>Additional <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a> operations are applied: <!-- Template.js -> getTemplates -->
<ul>
<li>A separate dependency graph is generated to populate <a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a>, <a href="https://www.11ty.dev/docs/permalinks/"><code>permalink</code></a>, <a href="https://www.11ty.dev/docs/data-eleventy-supplied/"><code>page.url</code></a>, and <a href="https://www.11ty.dev/docs/data-eleventy-supplied/"><code>page.outputPath</code></a> in the correct order.</li>
<li><s><code>renderData</code> (An undocumented and deprecated feature—use <a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a> instead!) is generated.</s> <em>Removed in 2.0.</em></li>
</ul>
</li>
<li>Templates are rendered in the order generated by the dependency graph (<code>templateContent</code> is generated) <strong>without layouts</strong> applied.
<ol>
<li>Per the above <em>Note</em> if a template uses another template’s <code>templateContent</code> before it has been generated, we defer this template to render in a second pass.</li>
<li>After all <code>templateContent</code>’s have been rendered, they are copied into the appropriate collections’ objects. Remember that <code>templateContent</code> in collections does not have layouts included.</li>
</ol>
</li>
<li>Eleventy checks for duplicate <a href="https://www.11ty.dev/docs/permalinks/">permalinks</a> and throws an error if multiple templates are attempting to write to the same output file.</li>
<li>Templates are then rendered <strong>with layouts</strong> applied. The previously generated <code>templateContent</code> values (without layouts) are re-used here. This content is then written to files on disk.</li>
</ol>
Advanced
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/advanced/
<h1>Advanced</h1>
<ul><li><a href="https://www.11ty.dev/docs/advanced-order/">Order of Operations</a>: How Eleventy works internally.</li></ul>
API Services
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/api-services/
<p>API Services are run-time things that are provided by Eleventy. We officially host instances of these and provide the source code for them so that you can self-host. The hosted instances are provided as-is without uptime guarantees.</p>
<p>It is encouraged to self-host these so you aren’t relying on run-time services that are out of your control but you can assess the risk-reward of this scenario yourself. (Definitely self-host for business use cases)</p>
<h2 id="eleventy-api-explorer" tabindex="-1"><a href="https://api-explorer.11ty.dev/">Eleventy API Explorer</a> <a class="direct-link" href="https://www.11ty.dev/docs/api-services/#eleventy-api-explorer">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This is a website to show sample results from the official Eleventy API services.</p>
<h2 id="list-of-api-services" tabindex="-1">List of API Services <a class="direct-link" href="https://www.11ty.dev/docs/api-services/#list-of-api-services">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/services/indieweb-avatar/">IndieWeb Avatar</a>: Returns an avatar representing a URL.</li>
<li><a href="https://www.11ty.dev/docs/services/opengraph/">OpenGraph Image</a>: Returns the OpenGraph image from a URL.</li>
<li><a href="https://www.11ty.dev/docs/services/screenshots/">Screenshots</a>: Returns a screenshot image from a URL.</li>
<li><a href="https://www.11ty.dev/docs/services/sparklines/">Sparklines</a>: Returns a Sparkline image given a set of numbers.</li>
</ul>
Code of Conduct
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/code-of-conduct/
<h1>Eleventy 社区行为准则</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/code-of-conduct/#our-pledge">Our Pledge </a></li><li><a href="https://www.11ty.dev/docs/code-of-conduct/#our-standards">Our Standards </a></li><li><a href="https://www.11ty.dev/docs/code-of-conduct/#our-responsibilities">Our Responsibilities </a></li><li><a href="https://www.11ty.dev/docs/code-of-conduct/#scope">Scope </a></li><li><a href="https://www.11ty.dev/docs/code-of-conduct/#enforcement">Enforcement </a></li><li><a href="https://www.11ty.dev/docs/code-of-conduct/#attribution">Attribution </a></li></ul></div><p></p>
</details>
<h2 id="our-pledge" tabindex="-1">Our Pledge <a class="direct-link" href="https://www.11ty.dev/docs/code-of-conduct/#our-pledge">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.</p>
<h2 id="our-standards" tabindex="-1">Our Standards <a class="direct-link" href="https://www.11ty.dev/docs/code-of-conduct/#our-standards">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Examples of behavior that contributes to creating a positive environment include:</p>
<ul>
<li>Using welcoming and inclusive language</li>
<li>Being respectful of differing viewpoints and experiences</li>
<li>Gracefully accepting constructive criticism</li>
<li>Focusing on what is best for the community</li>
<li>Showing empathy towards other community members</li>
</ul>
<p>Examples of unacceptable behavior by participants include:</p>
<ul>
<li>The use of sexualized language or imagery and unwelcome sexual attention or advances</li>
<li>Trolling, insulting/derogatory comments, and personal or political attacks</li>
<li>Public or private harassment</li>
<li>Publishing others' private information, such as a physical or electronic address, without explicit permission</li>
<li>Other conduct which could reasonably be considered inappropriate in a professional setting</li>
</ul>
<h2 id="our-responsibilities" tabindex="-1">Our Responsibilities <a class="direct-link" href="https://www.11ty.dev/docs/code-of-conduct/#our-responsibilities">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.</p>
<p>Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, chat messages, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.</p>
<h2 id="scope" tabindex="-1">Scope <a class="direct-link" href="https://www.11ty.dev/docs/code-of-conduct/#scope">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.</p>
<h2 id="enforcement" tabindex="-1">Enforcement <a class="direct-link" href="https://www.11ty.dev/docs/code-of-conduct/#enforcement">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at eleventy@zachleat.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.</p>
<p>Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.</p>
<h2 id="attribution" tabindex="-1">Attribution <a class="direct-link" href="https://www.11ty.dev/docs/code-of-conduct/#attribution">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This Code of Conduct is adapted from the <a href="http://contributor-covenant.org/">Contributor Covenant</a>, version 1.4, available at <a href="http://contributor-covenant.org/version/1/4/">http://contributor-covenant.org/version/1/4</a></p>
Collections
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/collections/
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/collections/#a-blog-example">A Blog Example </a><ul><li><a href="https://www.11ty.dev/docs/collections/#declare-your-collections-for-incremental-builds">Declare your collections for incremental builds </a></li><li><a href="https://www.11ty.dev/docs/collections/#using-an-[aria-current]-attribute-for-on-the-current-page">Using an [aria-current] attribute for on the current page </a></li></ul></li><li><a href="https://www.11ty.dev/docs/collections/#the-special-all-collection">The Special all Collection </a><ul><li><a href="https://www.11ty.dev/docs/collections/#link-to-all-eleventy-generated-content">Link to all Eleventy generated content </a></li></ul></li><li><a href="https://www.11ty.dev/docs/collections/#how-to-exclude-content-from-collections">How to Exclude content from Collections </a></li><li><a href="https://www.11ty.dev/docs/collections/#add-to-a-collection-using-tags">Add to a Collection using Tags </a><ul><li><a href="https://www.11ty.dev/docs/collections/#a-single-tag-cat">A single tag: cat </a></li><li><a href="https://www.11ty.dev/docs/collections/#using-multiple-words-in-a-single-tag">Using multiple words in a single tag </a></li><li><a href="https://www.11ty.dev/docs/collections/#multiple-tags-single-line">Multiple tags, single line </a></li><li><a href="https://www.11ty.dev/docs/collections/#multiple-tags-multiple-lines">Multiple tags, multiple lines </a></li><li><a href="https://www.11ty.dev/docs/collections/#override-tags">Override tags </a></li></ul></li><li><a href="https://www.11ty.dev/docs/collections/#collection-item-data-structure">Collection Item Data Structure </a></li><li><a href="https://www.11ty.dev/docs/collections/#sorting">Sorting </a><ul><li><a href="https://www.11ty.dev/docs/collections/#sort-descending">Sort descending </a></li><li><a href="https://www.11ty.dev/docs/collections/#overriding-content-dates">Overriding Content Dates </a></li></ul></li><li><a href="https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting">Advanced: Custom Filtering and Sorting </a><ul><li><a href="https://www.11ty.dev/docs/collections/#return-values">Return values </a></li><li><a href="https://www.11ty.dev/docs/collections/#collection-api-methods">Collection API Methods </a></li></ul></li></ul></div><p></p>
</details>
<p>While <a href="https://www.11ty.dev/docs/pagination/">pagination</a> allows you to iterate over a data set to create multiple templates, a collection allows you to group content in interesting ways. A piece of content can be a part of multiple collections, if you assign the same string value to the <code>tags</code> key in the front matter.</p>
<p>Take care to note that <code>tags</code> have a singular purpose in Eleventy: to construct collections of content. Some blogging platforms use Tags to refer to a hierarchy of labels for the content (e.g. a <a href="https://en.wikipedia.org/wiki/Tag_cloud">tag cloud</a>).</p>
<h2 id="a-blog-example" tabindex="-1">A Blog Example <a class="direct-link" href="https://www.11ty.dev/docs/collections/#a-blog-example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>For a blog site, your individual post files may use a tag called <code>post</code>, but it can be whatever you want. In this example, <code>mypost.md</code> has a single tag <code>post</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Markdown</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span> post<br><span class="token key atrule">title</span><span class="token punctuation">:</span> Hot Take—Social Media is Considered Harmful<br><span class="token punctuation">---</span></code></pre>
<p>This will place this <code>mypost.md</code> into the <code>post</code> collection with all other pieces of content sharing the <code>post</code> tag. To reference this collection and make a list of all posts, use the <code>collections</code> object in any template:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/collections/#collections-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/collections/#collections-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/collections/#collections-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/collections/#collections-hbs" role="tab">Handlebars</a>
</div>
<div id="collections-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> collections<span class="token punctuation">.</span>post <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collections-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">post</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collections-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ul><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>collections<span class="token punctuation">.</span>post<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ul></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="declare-your-collections-for-incremental-builds" tabindex="-1">Declare your collections for incremental builds <a class="direct-link" href="https://www.11ty.dev/docs/collections/#declare-your-collections-for-incremental-builds">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.21">Added in v2.0.0</span>Use the <code>eleventyImport</code> object to declare any collections you use (data cascade friendly) to inform the relationships for smarter incremental builds. This is an Array of collection names. Read more about <a href="https://github.com/11ty/eleventy/issues/975">importing collections</a>.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/collections/#collections-import-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/collections/#collections-import-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/collections/#collections-import-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/collections/#collections-import-hbs" role="tab">Handlebars</a>
</div>
<div id="collections-import-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>eleventyImport:<br> collections: ["post"]<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> collections<span class="token punctuation">.</span>post <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collections-import-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>eleventyImport:<br> collections: ["post"]<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">post</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collections-import-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">data</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">eleventyImport</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">collections</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"post"</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ul><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>collections<span class="token punctuation">.</span>post<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ul></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="using-an-[aria-current]-attribute-for-on-the-current-page" tabindex="-1">Using an <code>[aria-current]</code> attribute for on the current page <a class="direct-link" href="https://www.11ty.dev/docs/collections/#using-an-[aria-current]-attribute-for-on-the-current-page">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Compare the <code>post.url</code> and special Eleventy-provided <code>page.url</code> variable to find the current page. Building on the previous example:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/collections/#collectionsnav-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsnav-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsnav-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsnav-hbs" role="tab">Handlebars</a>
</div>
<div id="collectionsnav-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> collections<span class="token punctuation">.</span>post <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">if</span> <span class="token object">page</span><span class="token punctuation">.</span>url <span class="token operator">==</span> post<span class="token punctuation">.</span>url <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionsnav-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">post</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">==</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionsnav-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript .11ty.js</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ul><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>collections<span class="token punctuation">.</span>post<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span><br> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token operator">===</span> post<span class="token punctuation">.</span>url <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> aria-current="page"</span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token string">""</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li></span><span class="token template-punctuation string">`</span></span><br> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ul></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>Background: <code>aria-current="page"</code> tells assistive technology, such as screen readers, which page of a set of pages is the current active one. It also provides a hook for your CSS styling, using its attribute selector: <code>[aria-current="page"] {}</code>.</p>
<h2 id="the-special-all-collection" tabindex="-1">The Special <code>all</code> Collection <a class="direct-link" href="https://www.11ty.dev/docs/collections/#the-special-all-collection">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>By default Eleventy puts all of your content (independent of whether or not it has any assigned tags) into the <code>collections.all</code> Collection. This allows you to iterate over all of your content inside of a template.</p>
<h3 id="link-to-all-eleventy-generated-content" tabindex="-1">Link to all Eleventy generated content <a class="direct-link" href="https://www.11ty.dev/docs/collections/#link-to-all-eleventy-generated-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/collections/#collectionsall-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsall-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsall-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsall-hbs" role="tab">Handlebars</a>
</div>
<div id="collectionsall-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> collections<span class="token punctuation">.</span>all <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>url <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>url <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionsall-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionsall-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ul><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>collections<span class="token punctuation">.</span>all<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span><br> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></li></span><span class="token template-punctuation string">`</span></span><br> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ul></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="how-to-exclude-content-from-collections" tabindex="-1">How to Exclude content from Collections <a class="direct-link" href="https://www.11ty.dev/docs/collections/#how-to-exclude-content-from-collections">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>In front matter (or further upstream in the data cascade), set the <code>eleventyExcludeFromCollections</code> option to true to opt out of specific pieces of content added to all collections (including <code>collections.all</code>, collections set using tags, or collections added from the Configuration API in your config file). Useful for your RSS feed, <code>sitemap.xml</code>, custom templated <code>.htaccess</code> files, et cetera.</p>
<div class="codetitle codetitle-left"><b>Filename </b>excluded.md</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">eleventyExcludeFromCollections</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span> post</span><br><span class="token punctuation">---</span></span><br>This will not be available in <span class="token code-snippet code keyword">`collections.all`</span> or <span class="token code-snippet code keyword">`collections.post`</span>.</code></pre>
<h2 id="add-to-a-collection-using-tags" tabindex="-1">Add to a Collection using Tags <a class="direct-link" href="https://www.11ty.dev/docs/collections/#add-to-a-collection-using-tags">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can use a single tag, as in the above example OR you can use any number of tags for the content, using YAML syntax for a list.</p>
<h3 id="a-single-tag-cat" tabindex="-1">A single tag: cat <a class="direct-link" href="https://www.11ty.dev/docs/collections/#a-single-tag-cat">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">tags</span><span class="token punctuation">:</span> cat</span><br><span class="token punctuation">---</span></span></code></pre>
<p>This content would show up in the template data inside of <code>collections.cat</code>.</p>
<h3 id="using-multiple-words-in-a-single-tag" tabindex="-1">Using multiple words in a single tag <a class="direct-link" href="https://www.11ty.dev/docs/collections/#using-multiple-words-in-a-single-tag">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">tags</span><span class="token punctuation">:</span> cat and dog</span><br><span class="token punctuation">---</span></span></code></pre>
<p>If you use multiple words for one tag you can access the content by the following syntax <code>collections['cat and dog']</code>.</p>
<h3 id="multiple-tags-single-line" tabindex="-1">Multiple tags, single line <a class="direct-link" href="https://www.11ty.dev/docs/collections/#multiple-tags-single-line">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">tags</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'cat'</span><span class="token punctuation">,</span> <span class="token string">'dog'</span><span class="token punctuation">]</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>This content would show up in the template data inside of <code>collections.cat</code> and <code>collections.dog</code>.</p>
<h3 id="multiple-tags-multiple-lines" tabindex="-1">Multiple tags, multiple lines <a class="direct-link" href="https://www.11ty.dev/docs/collections/#multiple-tags-multiple-lines">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> cat<br> <span class="token punctuation">-</span> dog</span><br><span class="token punctuation">---</span></span></code></pre>
<p>This content would show up in the template data inside of <code>collections.cat</code> and <code>collections.dog</code>.</p>
<h3 id="override-tags" tabindex="-1">Override tags <a class="direct-link" href="https://www.11ty.dev/docs/collections/#override-tags">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As of Eleventy 1.0, the <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a> is combined using <a href="https://www.11ty.dev/docs/data-deep-merge/">deep data merge</a> by default, which means tags are merged together with tags assigned higher in the data cascade (the Arrays are combined). To redefine <code>tags</code> in the front matter use <a href="https://www.11ty.dev/docs/data-deep-merge/#using-the-override-prefix">the <code>override:</code> prefix</a>:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">override:tags</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>This content would not show up in any of the collections it was added to with <code>tags</code> higher up in the data cascade.</p>
<h2 id="collection-item-data-structure" tabindex="-1">Collection Item Data Structure <a class="direct-link" href="https://www.11ty.dev/docs/collections/#collection-item-data-structure">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/collections/#collectionsitem-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsitem-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsitem-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/collections/#collectionsitem-hbs" role="tab">Handlebars</a>
</div>
<div id="collectionsitem-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> collections<span class="token punctuation">.</span>post <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionsitem-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">post</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionsitem-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ul><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>collections<span class="token punctuation">.</span>post<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ul></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>Note in the above example that we output the <code>post.data.title</code> value? Similarly, each collection item will have the following data:</p>
<ul>
<li><code>page</code>: everything in <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable">Eleventy’s supplied page variable</a> for this template (including <code>inputPath</code>, <code>url</code>, <code>date</code>, and others). <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
<li><code>data</code>: all data for this piece of content (includes any data inherited from layouts)</li>
<li><code>content</code>: the rendered content of this template. This does <em>not</em> include layout wrappers. <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span></li>
</ul>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">inputPath</span><span class="token operator">:</span> <span class="token string">'./test1.md'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/test1/'</span><span class="token punctuation">,</span><br> <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br> <span class="token comment">// … and everything else in Eleventy’s `page`</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Test Title'</span><span class="token punctuation">,</span> <span class="token literal-property property">tags</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'tag1'</span><span class="token punctuation">,</span> <span class="token string">'tag2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'Last Modified'</span><span class="token punctuation">,</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'<h1>This is my title</h1>\n\n<p>This is content…'</span><br><span class="token punctuation">}</span></code></pre>
<p><em>Backwards compatibility notes:</em></p>
<ul>
<li>Top level properties for <code>inputPath</code>, <code>fileSlug</code>, <code>outputPath</code>, <code>url</code>, <code>date</code> are still available, though use of <code>page.*</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> for these is encouraged moving forward.</li>
<li><code>content</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> is aliased to the previous property <code>templateContent</code>.</li>
</ul>
<p>You can <a href="https://v1-0-2.11ty.dev/docs/collections/#collection-item-data-structure">view the previous Collection Item Data Structure docs for 1.0</a>.</p>
<h2 id="sorting" tabindex="-1">Sorting <a class="direct-link" href="https://www.11ty.dev/docs/collections/#sorting">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>The default collection sorting algorithm sorts in ascending order using:</p>
<ol>
<li>The input file’s Created Date (you can override using <code>date</code> in front matter, as shown below)</li>
<li>Files created at the exact same time are tie-broken using the input file’s full path including filename</li>
</ol>
<p>For example, assume I only write blog posts on New Years Day:</p>
<pre><code>posts/postA.md (created on 2008-01-01)
posts/postB.md (created on 2008-01-01)
posts/post3.md (created on 2007-01-01)
another-posts/post1.md (created on 2011-01-01)
</code></pre>
<p>This collection would be sorted like this:</p>
<ol>
<li><code>posts/post3.md</code></li>
<li><code>posts/postA.md</code></li>
<li><code>posts/postB.md</code></li>
<li><code>another-posts/post1.md</code></li>
</ol>
<h3 id="sort-descending" tabindex="-1">Sort descending <a class="direct-link" href="https://www.11ty.dev/docs/collections/#sort-descending">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>To sort descending in your template, you can use a filter to reverse the sort order. For example, it might look like this:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/collections/#collectionssort-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/collections/#collectionssort-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/collections/#collectionssort-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/collections/#collectionssort-hbs" role="tab">Handlebars</a>
</div>
<div id="collectionssort-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> post <span class="token keyword">in</span> collections<span class="token punctuation">.</span>post <span class="token keyword">reversed</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionssort-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">post</span> <span class="token keyword">in</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">post</span> <span class="token operator">|</span> <span class="token variable">reverse</span> <span class="token delimiter punctuation">-%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">post</span><span class="token punctuation">.</span><span class="token variable">data</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">-%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="collectionssort-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> posts <span class="token operator">=</span> data<span class="token punctuation">.</span>collections<span class="token punctuation">.</span>post<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><ul><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>posts<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ul></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
<p id="array-reverse">You should <em><strong>not</strong></em> use Array <code>reverse()</code> on collection arrays in your templates, like so:</p>
<p><code>{%- for post in collections.post.reverse() -%}</code></p>
<p>This applies any time you use `reverse`, for example in a custom shortcode:</p>
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"myShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">aCollection</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br> <span class="token comment">// WARNING</span><br> aCollection<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
<p>This will <a href="https://doesitmutate.xyz/reverse/">mutate the array</a> and re-order it <em>in-place</em> and will have side effects for any use of that collection in other templates.</p>
<p>Instead, use one of the many template engine utilities provided for you to do this, such as <a href="https://liquidjs.com/filters/reverse.html">Liquid’s <code>reverse</code></a> or <a href="https://mozilla.github.io/nunjucks/templating.html#reverse">Nunjucks’ <code>reverse</code></a></p>
<p>This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>Common Pitfall</strong></a>.</p>
</div></div>
<h3 id="overriding-content-dates" tabindex="-1">Overriding Content Dates <a class="direct-link" href="https://www.11ty.dev/docs/collections/#overriding-content-dates">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can modify how a piece of content is sorted in a collection by changing its default <code>date</code>. <a href="https://www.11ty.dev/docs/dates/">Read more at Content Dates</a>.</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2016-01-01</span></span><br><span class="token punctuation">---</span></span></code></pre>
<h2 id="advanced-custom-filtering-and-sorting" tabindex="-1">Advanced: Custom Filtering and Sorting <a class="direct-link" href="https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>To get fancier with your collections (and even do a bit of your own custom filtering, if you’d like), you can use our Configuration API.</p>
<p>Inside of your <code>.eleventy.js</code> config file, use the first argument to the config function (<code>eleventyConfig</code> below) to call the API:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"myCollectionName"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// get unsorted items</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><code>addCollection</code> can accept <code>async</code> functions too. Use <code>await</code> in your callback to do some asynchronous things!</p>
<h3 id="return-values" tabindex="-1">Return values <a class="direct-link" href="https://www.11ty.dev/docs/collections/#return-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><code>addCollection</code> callbacks can return any arbitrary object type and it’ll be available as data in the template. Arrays, strings, objects—have fun with it.</li>
</ul>
<h3 id="collection-api-methods" tabindex="-1">Collection API Methods <a class="direct-link" href="https://www.11ty.dev/docs/collections/#collection-api-methods">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The data collection gets passed to the callback. You can use it in all sorts of ways:</p>
<h4 id="getall()" tabindex="-1">getAll() <a class="direct-link" href="https://www.11ty.dev/docs/collections/#getall()">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Returns an array.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Unsorted items (in whatever order they were added)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"allMyContent"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Filter using `Array.filter`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"keyMustExistInData"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Side-step tags and do your own filtering</span><br> <span class="token keyword">return</span> <span class="token string">"myCustomDataKey"</span> <span class="token keyword">in</span> item<span class="token punctuation">.</span>data<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Sort with `Array.sort`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"myCustomSort"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">//return a.date - b.date; // sort by date - ascending</span><br> <span class="token keyword">return</span> b<span class="token punctuation">.</span>date <span class="token operator">-</span> a<span class="token punctuation">.</span>date<span class="token punctuation">;</span> <span class="token comment">// sort by date - descending</span><br> <span class="token comment">//return a.inputPath.localeCompare(b.inputPath); // sort by path - ascending</span><br> <span class="token comment">//return b.inputPath.localeCompare(a.inputPath); // sort by path - descending</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Curious where the date is coming from? <a href="https://www.11ty.dev/docs/dates/">Read more about Content Dates</a>.</p>
<p>Note that the last example adding the <code>myCustomSort</code> collection will be available in your templates as <code>collections.myCustomSort</code>.</p>
<h4 id="getallsorted()" tabindex="-1">getAllSorted() <a class="direct-link" href="https://www.11ty.dev/docs/collections/#getallsorted()">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Returns an array.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Use the default sorting algorithm (ascending by date, filename tiebreaker)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"allMySortedContent"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAllSorted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Use the default sorting algorithm in reverse (descending dir, date, filename)</span><br> <span class="token comment">// Note that using a template engine’s `reverse` filter might be easier here</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"myPostsReverse"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAllSorted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Note that while Array <code>.reverse()</code> mutates the array <em>in-place</em>, all Eleventy Collection API methods return new copies of collection arrays and can be modified without side effects to other collections. <a href="https://www.11ty.dev/docs/collections/#array-reverse">However, you do need to be careful ⚠️ when using Array <code>.reverse()</code> in templates!</a></p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Filter using `Array.filter`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"onlyMarkdown"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getAllSorted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Only return content that was originally a markdown file</span><br> <span class="token keyword">let</span> extension <span class="token operator">=</span> item<span class="token punctuation">.</span>inputPath<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> extension <span class="token operator">===</span> <span class="token string">"md"</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="getfilteredbytag(-tagname-)" tabindex="-1">getFilteredByTag( tagName ) <a class="direct-link" href="https://www.11ty.dev/docs/collections/#getfilteredbytag(-tagname-)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Returns an array.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Get only content that matches a tag</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"myPosts"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getFilteredByTag</span><span class="token punctuation">(</span><span class="token string">"post"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="getfilteredbytags(-tagname-secondtagname-[...]-)" tabindex="-1">getFilteredByTags( tagName, secondTagName, […] ) <a class="direct-link" href="https://www.11ty.dev/docs/collections/#getfilteredbytags(-tagname-secondtagname-[...]-)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Retrieve content that includes <em>all</em> of the tags passed in. Returns an array.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Get only content that matches a tag</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"myTravelPostsWithPhotos"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getFilteredByTags</span><span class="token punctuation">(</span><span class="token string">"post"</span><span class="token punctuation">,</span> <span class="token string">"travel"</span><span class="token punctuation">,</span> <span class="token string">"photo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="getfilteredbyglob(-glob-)" tabindex="-1">getFilteredByGlob( glob ) <a class="direct-link" href="https://www.11ty.dev/docs/collections/#getfilteredbyglob(-glob-)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Returns an array. Will match an arbitrary glob (or an array of globs) against the input file’s full <code>inputPath</code> (including the input directory).</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
<strong>Note</strong>: <code>getFilteredByGlob</code> filters results returned from <a href="https://www.11ty.dev/docs/collections/#getallsorted()"><code>getAllSorted</code></a>. It will not search the file system for new templates. It will not match files in your <code>_includes</code> directory or anything excluded by <code>eleventyExcludeFromCollections</code>.
</div></div>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
<strong>Note</strong>: <code>getFilteredByGlob</code> will not "find" files that are not supported by Eleventy. For example, a file with the extension <code>.ray</code> will be ignored even if it would match the glob.
</div></div>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Filter source file names using a glob</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"onlyMarkdown"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getFilteredByGlob</span><span class="token punctuation">(</span><span class="token string">"**/*.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Filter source file names using a glob</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"posts"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getFilteredByGlob</span><span class="token punctuation">(</span><span class="token string">"_posts/*.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Filter source file names using a glob</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"posts"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collectionApi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Also accepts an array of globs!</span><br> <span class="token keyword">return</span> collectionApi<span class="token punctuation">.</span><span class="token function">getFilteredByGlob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"posts/*.md"</span><span class="token punctuation">,</span> <span class="token string">"notes/*.md"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Configuration
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/config/
<h1>配置</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/config/#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E5%90%8D%E7%A7%B0">配置文件的默认名称 </a></li><li><a href="https://www.11ty.dev/docs/config/#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0">配置参数 </a><ul><li><a href="https://www.11ty.dev/docs/config/#input-%E7%9B%AE%E5%BD%95">Input 目录 </a></li><li><a href="https://www.11ty.dev/docs/config/#includes-%E7%9B%AE%E5%BD%95">Includes 目录 </a></li><li><a href="https://www.11ty.dev/docs/config/#%E7%94%A8%E4%BA%8E%E5%AD%98%E6%94%BE%E5%B8%83%E5%B1%80%E6%96%87%E4%BB%B6%EF%BC%88layout%EF%BC%89%E7%9A%84%E7%9B%AE%E5%BD%95%EF%BC%88%E5%8F%AF%E9%80%89%EF%BC%89">用于存放布局文件(layout)的目录(可选) </a></li><li><a href="https://www.11ty.dev/docs/config/#%E5%85%A8%E5%B1%80%E6%95%B0%E6%8D%AE%E6%96%87%E4%BB%B6%E6%89%80%E5%9C%A8%E7%9B%AE%E5%BD%95">全局数据文件所在目录 </a></li><li><a href="https://www.11ty.dev/docs/config/#output-directory">Output Directory </a></li><li><a href="https://www.11ty.dev/docs/config/#%E5%85%A8%E5%B1%80%E6%95%B0%E6%8D%AE%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%84%E5%A4%84%E7%90%86%E5%BC%95%E6%93%8E">全局数据文件的默认预处理引擎 </a></li><li><a href="https://www.11ty.dev/docs/config/#markdown-%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%84%E5%A4%84%E7%90%86%E5%BC%95%E6%93%8E">Markdown 文件的默认预处理引擎 </a></li><li><a href="https://www.11ty.dev/docs/config/#html-%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%84%E5%A4%84%E7%90%86%E5%BC%95%E6%93%8E">HTML 文件的默认预处理引擎 </a></li><li><a href="https://www.11ty.dev/docs/config/#template-formats">Template Formats </a></li><li><a href="https://www.11ty.dev/docs/config/#enable-quiet-mode-to-reduce-console-noise">Enable Quiet Mode to Reduce Console Noise </a></li><li><a href="https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix">Deploy to a subdirectory with a Path Prefix </a></li><li><a href="https://www.11ty.dev/docs/config/#change-exception-case-suffix-for-html-files">Change exception case suffix for HTML files </a></li><li><a href="https://www.11ty.dev/docs/config/#change-base-file-name-for-data-files">Change Base File Name for Data Files </a></li><li><a href="https://www.11ty.dev/docs/config/#change-file-suffix-for-data-files">Change File Suffix for Data Files </a></li><li><a href="https://www.11ty.dev/docs/config/#transforms">Transforms </a></li><li><a href="https://www.11ty.dev/docs/config/#linters">Linters </a></li><li><a href="https://www.11ty.dev/docs/config/#data-filter-selectors">Data Filter Selectors </a></li><li><a href="https://www.11ty.dev/docs/config/#type-definitions">Type Definitions </a></li><li><a href="https://www.11ty.dev/docs/config/#documentation-moved-to-dedicated-pages">Documentation Moved to Dedicated Pages </a></li></ul></li></ul></div><p></p>
</details>
<p>配置文件不是必须的。如果你的项目需要的话,可以添加名为 <code>.eleventy.js</code> 的配置文件到项目的根目录下。大概类似下面这样:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Return your Object options:</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">"views"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token string">"dist"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Eleventy 支持We support returning both a callback function (shown above) or an object literal (<code>module.exports = {}</code>). Callback functions are preferred and allow you further customization options using Eleventy’s provided helper methods.</p>
<ul>
<li>Add <a href="https://www.11ty.dev/docs/filters/">Filters</a>.</li>
<li>Add <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a>.</li>
<li>Add <a href="https://www.11ty.dev/docs/custom-tags/">Custom Tags</a>.</li>
<li>Add <a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript Functions</a></li>
<li>Add custom <a href="https://www.11ty.dev/docs/collections/">Collections</a> and use <a href="https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting">Advanced Collection Filtering and Sorting</a>.</li>
<li>Add some <a href="https://www.11ty.dev/docs/plugins/">Plugins</a>.</li>
</ul>
<h2 id="配置文件的默认名称" tabindex="-1">配置文件的默认名称 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E5%90%8D%E7%A7%B0">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy 会依次查找具有如下名称的文件作为配置文件:</p>
<ol>
<li><code>.eleventy.js</code></li>
<li><code>eleventy.config.js</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.15">Added in v2.0.0</span></li>
<li><code>eleventy.config.cjs</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.15">Added in v2.0.0</span></li>
</ol>
<p>第一个被找到的配置文件将被使用,其它均被忽略。</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="hJAtWQ9nmKU" params="start=431" playlabel="Play: Additions to the default config filename list (Changelog №17)" style="background-image:url('https://i.ytimg.com/vi/hJAtWQ9nmKU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=hJAtWQ9nmKU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Additions to the default config filename list (Changelog №17)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=hJAtWQ9nmKU&t=431">Additions to the default config filename list (Changelog №17) <code>▶7m11s</code></a></is-land></div></div>
<h2 id="配置参数" tabindex="-1">配置参数 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="input-目录" tabindex="-1">Input 目录 <a class="direct-link" href="https://www.11ty.dev/docs/config/#input-%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>用于存放模板文件的根目录。</p>
<table>
<thead>
<tr>
<th>Input Directory</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>dir.input</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><code>.</code> <em>(当前目录)</em></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td>任何有效的目录。</td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><code>--input</code></td>
</tr>
</tbody>
</table>
<h4 id="示例" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<h5>命令行用法</h5>
<pre class="language-bash"><code class="language-bash"><span class="token comment"># 当前目录</span><br>npx @11ty/eleventy <span class="token parameter variable">--input</span><span class="token operator">=</span>.<br><br><span class="token comment"># 单个文件</span><br>npx @11ty/eleventy <span class="token parameter variable">--input</span><span class="token operator">=</span>README.md<br><br><span class="token comment"># 用 glob 模式匹配的所有文件</span><br>npx @11ty/eleventy <span class="token parameter variable">--input</span><span class="token operator">=</span>*.md<br><br><span class="token comment"># 当前目录下的某个子目录</span><br>npx @11ty/eleventy <span class="token parameter variable">--input</span><span class="token operator">=</span>views</code></pre>
<h5>配置</h5>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">"views"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="includes-目录" tabindex="-1">Includes 目录 <a class="direct-link" href="https://www.11ty.dev/docs/config/#includes-%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Includes 目录用于存放 <a href="https://www.11ty.dev/docs/layouts/">Eleventy 的布局文件(layout)</a>, include files, extends files, partials, or macros. These files will not be processed as full template files, but can be consumed by other templates.</p>
<table>
<thead>
<tr>
<th>Includes 目录</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>dir.includes</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><code>_includes</code></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td>Any valid directory inside of <code>dir.input</code> (an empty string <code>""</code> is supported)</td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><em>无</em></td>
</tr>
</tbody>
</table>
<h4 id="示例-1" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// ⚠️ 此目录是 input 目录的子目录</span><br> <span class="token literal-property property">includes</span><span class="token operator">:</span> <span class="token string">"my_includes"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="用于存放布局文件(layout)的目录(可选)" tabindex="-1">用于存放布局文件(layout)的目录(可选) <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%94%A8%E4%BA%8E%E5%AD%98%E6%94%BE%E5%B8%83%E5%B1%80%E6%96%87%E4%BB%B6%EF%BC%88layout%EF%BC%89%E7%9A%84%E7%9B%AE%E5%BD%95%EF%BC%88%E5%8F%AF%E9%80%89%EF%BC%89">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>此配置项是可选的,但是,如果你希望将 <a href="https://www.11ty.dev/docs/layouts/">Eleventy 的布局文件(layouts)</a> 存放在 <a href="https://www.11ty.dev/docs/config/#directory-for-includes">Includes 目录</a> 之外,则此配置项非常有用。就像 <a href="https://www.11ty.dev/docs/config/#directory-for-includes">Includes 目录</a> 一样,这些文件不会被当作完整的模板文件处理,但可以由其它模板文件使用。</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
<p>此设置 <strong>仅适用于</strong> Eleventy 所支持的与模板语言无关的 <a href="https://www.11ty.dev/docs/layouts/">布局文件(layouts)</a> (when defined in front matter or data files).</p>
<p>当使用 <code>{% extends %}</code> 指令时,Eleventy 仍将 <strong>搜索 <code>_includes</code> 目录</strong>。参见 <a href="https://www.11ty.dev/docs/layout-chaining/#addendum-about-existing-templating-features">这份关于模板现有功能的说明</a>。</p>
</div></div>
<table>
<thead>
<tr>
<th>Includes Directory</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>dir.layouts</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><em><code>dir.includes</code> 的值</em></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td>任何 <code>dir.input</code> 目录下的有效目录 (空字符串 <code>""</code> 也可以)</td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><em>无</em></td>
</tr>
</tbody>
</table>
<h4 id="示例-2" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B-2">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// ⚠️ 以下设置的目录都是 Input 目录下的子目录。</span><br> <span class="token literal-property property">includes</span><span class="token operator">:</span> <span class="token string">"_includes"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">layouts</span><span class="token operator">:</span> <span class="token string">"_layouts"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="全局数据文件所在目录" tabindex="-1">全局数据文件所在目录 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E5%85%A8%E5%B1%80%E6%95%B0%E6%8D%AE%E6%96%87%E4%BB%B6%E6%89%80%E5%9C%A8%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>此目录存放的是可以被所有模板所使用的全局数据文件的存放目录。更多信息请参考 <a href="https://www.11ty.dev/docs/data-global/">全局数据文件(Global Data Files)</a>。</p>
<table>
<thead>
<tr>
<th>全局数据文件</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>dir.data</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><code>_data</code></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td><code>dir.input</code> 目录下的任何有效的子目录</td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><em>无</em></td>
</tr>
</tbody>
</table>
<h4 id="示例-3" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B-3">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// ⚠️ 以下目录是 Input 目录下的子目录。</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token string">"lore"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="output-directory" tabindex="-1">Output Directory <a class="direct-link" href="https://www.11ty.dev/docs/config/#output-directory">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Controls the directory inside which the finished templates will be written to.</p>
<table>
<thead>
<tr>
<th>Output Directory</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>dir.output</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><code>_site</code></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td>Any string that will work as a directory name. Eleventy creates this if it doesn’t exist.</td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><code>--output</code></td>
</tr>
</tbody>
</table>
<h4 id="示例-4" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B-4">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token string">"dist"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="全局数据文件的默认预处理引擎" tabindex="-1">全局数据文件的默认预处理引擎 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E5%85%A8%E5%B1%80%E6%95%B0%E6%8D%AE%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%84%E5%A4%84%E7%90%86%E5%BC%95%E6%93%8E">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><strong>Feature Removal</strong>: <a href="https://www.11ty.dev/docs/data-preprocessing/">This feature was removed in Eleventy 2.0.</a></div></div>
<h3 id="markdown-文件的默认预处理引擎" tabindex="-1">Markdown 文件的默认预处理引擎 <a class="direct-link" href="https://www.11ty.dev/docs/config/#markdown-%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%84%E5%A4%84%E7%90%86%E5%BC%95%E6%93%8E">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Markdown 文件在被转换为 HTML 之前会经过此处设置的模板引擎进行预处理。</p>
<table>
<thead>
<tr>
<th>Markdown 文件的默认预处理引擎</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>markdownTemplateEngine</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><code>liquid</code></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td>有效的 <a href="https://www.11ty.dev/docs/languages/">模板引擎简称</a> 或 <code>false</code></td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><em>无</em></td>
</tr>
</tbody>
</table>
<h4 id="示例-5" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B-5">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">markdownTemplateEngine</span><span class="token operator">:</span> <span class="token string">"njk"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="html-文件的默认预处理引擎" tabindex="-1">HTML 文件的默认预处理引擎 <a class="direct-link" href="https://www.11ty.dev/docs/config/#html-%E6%96%87%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%84%E5%A4%84%E7%90%86%E5%BC%95%E6%93%8E">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>HTML 文件在被转换为(更好的) HTML 之前会经过此处设置的模板引擎进行预处理。</p>
<table>
<thead>
<tr>
<th>HTML 文件的默认预处理引擎</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>htmlTemplateEngine</code></td>
</tr>
<tr>
<td><em>默认值</em></td>
<td><code>liquid</code></td>
</tr>
<tr>
<td><em>有效值</em></td>
<td>有效的 <a href="https://www.11ty.dev/docs/languages/">模板引擎简称</a> 或 <code>false</code></td>
</tr>
<tr>
<td><em>命令行参数</em></td>
<td><em>无</em></td>
</tr>
</tbody>
</table>
<h4 id="示例-6" tabindex="-1">示例 <a class="direct-link" href="https://www.11ty.dev/docs/config/#%E7%A4%BA%E4%BE%8B-6">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">htmlTemplateEngine</span><span class="token operator">:</span> <span class="token string">"njk"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="template-formats" tabindex="-1">Template Formats <a class="direct-link" href="https://www.11ty.dev/docs/config/#template-formats">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Specify which types of templates should be transformed.</p>
<table>
<thead>
<tr>
<th>Template Formats</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>templateFormats</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>html,liquid,ejs,md,hbs,mustache,haml,pug,njk,11ty.js</code></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>Array of <a href="https://www.11ty.dev/docs/languages/">template engine short names</a></td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><code>--formats</code> <em>(accepts a comma separated string)</em></td>
</tr>
<tr>
<td><em>Configuration API</em></td>
<td><code>setTemplateFormats</code></td>
</tr>
</tbody>
</table>
<h4 id="examples" tabindex="-1">Examples <a class="direct-link" href="https://www.11ty.dev/docs/config/#examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">templateFormats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"html"</span><span class="token punctuation">,</span> <span class="token string">"liquid"</span><span class="token punctuation">,</span> <span class="token string">"njk"</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setTemplateFormats</span><span class="token punctuation">(</span><span class="token string">"html,liquid,njk"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Or:</span><br> <span class="token comment">// eleventyConfig.setTemplateFormats([ "html", "liquid", "njk" ]);</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre><code>npx @11ty/eleventy --formats=html,liquid,njk
</code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"> <strong>Case sensitivity</strong>: File extensions should be considered case insensitive, cross-platform. While Mac OS—by default—already behaves this way, other operating systems do not and needed additional Eleventy code to enable this behavior.</div></div>
<h3 id="enable-quiet-mode-to-reduce-console-noise" tabindex="-1">Enable Quiet Mode to Reduce Console Noise <a class="direct-link" href="https://www.11ty.dev/docs/config/#enable-quiet-mode-to-reduce-console-noise">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>In order to maximize user-friendliness to beginners, Eleventy will show each file it processes and the output file. To disable this noisy console output, use quiet mode!</p>
<table>
<thead>
<tr>
<th>Quiet Mode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Default</em></td>
<td><code>false</code></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td><code>true</code> or <code>false</code></td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><code>--quiet</code></td>
</tr>
</tbody>
</table>
<h4 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/config/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setQuietMode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The command line will override any setting in configuration:</p>
<pre><code>npx @11ty/eleventy --quiet
</code></pre>
<h3 id="deploy-to-a-subdirectory-with-a-path-prefix" tabindex="-1">Deploy to a subdirectory with a Path Prefix <a class="direct-link" href="https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If your site lives in a different subdirectory (particularly useful with GitHub pages), use pathPrefix to specify this. It’s used by the <code>url</code> filter and inserted at the beginning of all absolute url href links. It does not affect your file structure. Leading or trailing slashes are all normalized away, so don’t worry about it.</p>
<table>
<thead>
<tr>
<th>Path Prefix</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>pathPrefix</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>/</code></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>A prefix directory added to links</td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><code>--pathprefix</code></td>
</tr>
</tbody>
</table>
<h4 id="example-1" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/config/#example-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">pathPrefix</span><span class="token operator">:</span> <span class="token string">"/eleventy-base-blog/"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Deploy to <a href="https://11ty.github.io/eleventy-base-blog/">https://11ty.github.io/eleventy-base-blog/</a> on GitHub pages without modifying your config. This allows you to use the same code-base to deploy to either GitHub pages or Netlify, like the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code></a> project does.</p>
<pre><code>npx @11ty/eleventy --pathprefix=eleventy-base-blog
</code></pre>
<h3 id="change-exception-case-suffix-for-html-files" tabindex="-1">Change exception case suffix for HTML files <a class="direct-link" href="https://www.11ty.dev/docs/config/#change-exception-case-suffix-for-html-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If an HTML template has matching input and output directories, index.html files will have this suffix added to their output filename to prevent overwriting the template. Read more at the <a href="https://www.11ty.dev/docs/languages/html/#using-the-same-input-and-output-directories">HTML template docs</a>.</p>
<table>
<thead>
<tr>
<th>Exception Suffix</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>htmlOutputSuffix</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>-o</code></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>Any valid string</td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><em>None</em></td>
</tr>
</tbody>
</table>
<h4 id="example-2" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/config/#example-2">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">htmlOutputSuffix</span><span class="token operator">:</span> <span class="token string">"-o"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="change-base-file-name-for-data-files" tabindex="-1">Change Base File Name for Data Files <a class="direct-link" href="https://www.11ty.dev/docs/config/#change-base-file-name-for-data-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> When using <a href="https://www.11ty.dev/docs/data-template-dir/">Directory Specific Data Files</a>, looks for data files that match the current folder name. You can override this behavior to a static string with the <code>setDataFileBaseName</code> method.</p>
<table>
<thead>
<tr>
<th>File Suffix</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Configuration API</em></td>
<td><code>setDataFileBaseName</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><em>Current folder name</em></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>String</td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><em>None</em></td>
</tr>
</tbody>
</table>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Looks for index.json and index.11tydata.json instead of using folder names</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDataFileBaseName</span><span class="token punctuation">(</span><span class="token string">"index"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="change-file-suffix-for-data-files" tabindex="-1">Change File Suffix for Data Files <a class="direct-link" href="https://www.11ty.dev/docs/config/#change-file-suffix-for-data-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> When using <a href="https://www.11ty.dev/docs/data-template-dir/">Template and Directory Specific Data Files</a>, to prevent file name conflicts with non-Eleventy files in the project directory, we scope these files with a unique-to-Eleventy suffix. This suffix is customizable using the <code>setDataFileSuffixes</code> configuration API method.</p>
<table>
<thead>
<tr>
<th>File Suffix</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Configuration API</em></td>
<td><code>setDataFileSuffixes</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>[".11tydata", ""]</code></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>Array</td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><em>None</em></td>
</tr>
</tbody>
</table>
<p>For example, using <code>".11tydata"</code> will search for <code>*.11tydata.js</code> and <code>*.11tydata.json</code> data files. The empty string (<code>""</code>) here represents a file without a suffix—and this entry only applies to <code>*.json</code> data files.</p>
<p>This feature can also be used to disable Template and Directory Data Files altogether with an empty array (<code>[]</code>).</p>
<p>Read more about <a href="https://www.11ty.dev/docs/data-template-dir/">Template and Directory Specific Data Files</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDataFileSuffixes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">".11tydata"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// e.g. file.json and file.11tydata.json</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDataFileSuffixes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">".11tydata"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// e.g. file.11tydata.json</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDataFileSuffixes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// No data files are used.</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary><em><strong>Backwards Compatibility Note</strong></em> (<code>v2.0.0</code>)</summary>
<p>Prior to v2.0.0 this feature was exposed using a <code>jsDataFileSuffix</code> property in the configuration return object. When the <code>setDataFileSuffixes</code> method has not been used, Eleventy maintains backwards compatibility for old projects by using this property as a fallback.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">jsDataFileSuffix</span><span class="token operator">:</span> <span class="token string">".11tydata"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h3 id="transforms" tabindex="-1">Transforms <a class="direct-link" href="https://www.11ty.dev/docs/config/#transforms">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Transforms can modify a template’s output. For example, use a transform to format/prettify an HTML file with proper whitespace.</p>
<p>The provided transform function must return the original or transformed content.</p>
<table>
<thead>
<tr>
<th>Transforms</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Configuration API</em></td>
<td><code>addTransform</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>{}</code></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>Object literal</td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><em>None</em></td>
</tr>
</tbody>
</table>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Can be sync or async</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addTransform</span><span class="token punctuation">(</span><span class="token string">"transform-name"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>outputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Eleventy 2.0+ has full access to Eleventy’s `page` variable</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>outputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> content<span class="token punctuation">;</span> <span class="token comment">// no change done.</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary><strong>Transforms Example: Minify HTML Output</strong></summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> htmlmin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-minifier"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addTransform</span><span class="token punctuation">(</span><span class="token string">"htmlmin"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Prior to Eleventy 2.0: use this.outputPath instead</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>outputPath <span class="token operator">&&</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>outputPath<span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token string">".html"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> minified <span class="token operator">=</span> htmlmin<span class="token punctuation">.</span><span class="token function">minify</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">useShortDoctype</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">removeComments</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">collapseWhitespace</span><span class="token operator">:</span> <span class="token boolean">true</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> minified<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">return</span> content<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h3 id="linters" tabindex="-1">Linters <a class="direct-link" href="https://www.11ty.dev/docs/config/#linters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Similar to Transforms, Linters are provided to analyze a template’s output without modifying it.</p>
<table>
<thead>
<tr>
<th>Linters</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Configuration API</em></td>
<td><code>addLinter</code></td>
</tr>
<tr>
<td><em>Object Key</em></td>
<td><em>N/A</em></td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>Callback function</td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><em>None</em></td>
</tr>
</tbody>
</table>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Can be sync or async</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLinter</span><span class="token punctuation">(</span><span class="token string">"linter-name"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>outputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Eleventy 2.0+ has full access to Eleventy’s `page` variable</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>outputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary><strong>Linters Example: Use Inclusive Language</strong></summary>
<p>Inspired by the <a href="https://css-tricks.com/words-avoid-educational-writing/">CSS Tricks post <em>Words to Avoid in Educational Writing</em></a>, this linter will log a warning to the console when it finds a trigger word in a markdown file.</p>
<p>This example has been packaged as a plugin in <a href="https://github.com/11ty/eleventy-plugin-inclusive-language"><code>eleventy-plugin-inclusive-language</code></a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLinter</span><span class="token punctuation">(</span><span class="token string">"inclusive-language"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> inputPath<span class="token punctuation">,</span> outputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> words <span class="token operator">=</span> <span class="token string">"simply,obviously,basically,of course,clearly,just,everyone knows,however,easy"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">","</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Eleventy 1.0+: use this.inputPath and this.outputPath instead</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span> inputPath<span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token string">".md"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> word <span class="token keyword">of</span> words<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> regexp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">"\\b("</span> <span class="token operator">+</span> word <span class="token operator">+</span> <span class="token string">")\\b"</span><span class="token punctuation">,</span> <span class="token string">"gi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>content<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>regexp<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Inclusive Language Linter (</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>inputPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">) Found: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>word<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h3 id="data-filter-selectors" tabindex="-1">Data Filter Selectors <a class="direct-link" href="https://www.11ty.dev/docs/config/#data-filter-selectors">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span><!-- Beta 4 --></p>
<p>A <code>Set</code> of <a href="https://lodash.com/docs/4.17.15#get"><code>lodash</code> selectors</a> that allow you to include data from the data cascade in the output from <code>--to=json</code>, <code>--to=ndjson</code>, or the <code>EleventyServerless.prototype.getOutput</code> method.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span>dataFilterSelectors<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span>dataFilterSelectors<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This will now include a <code>data</code> property in your JSON output that includes the <code>page</code> variable for each matching template.</p>
<h3 id="type-definitions" tabindex="-1">Type Definitions <a class="direct-link" href="https://www.11ty.dev/docs/config/#type-definitions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This may enable some extra autocomplete features in your IDE (where supported).</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// …</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<ul>
<li>More background information at <a href="https://github.com/11ty/eleventy/pull/2091">Issue 2091</a>.</li>
</ul>
<h3 id="documentation-moved-to-dedicated-pages" tabindex="-1">Documentation Moved to Dedicated Pages <a class="direct-link" href="https://www.11ty.dev/docs/config/#documentation-moved-to-dedicated-pages">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><a id="copy-files-to-output-using-pass-through-file-copy"></a></p>
<h4 id="copy-files-to-output-using-passthrough-file-copy" tabindex="-1">Copy Files to Output using Passthrough File Copy <a class="direct-link" href="https://www.11ty.dev/docs/config/#copy-files-to-output-using-passthrough-file-copy">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Files found (that don’t have a valid template engine) from opt-in file extensions in <code>templateFormats</code> will passthrough to the output directory. Read more about <a href="https://www.11ty.dev/docs/copy/">Passthrough Copy</a>.</p>
<h4 id="data-deep-merge" tabindex="-1">Data Deep Merge <a class="direct-link" href="https://www.11ty.dev/docs/config/#data-deep-merge">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Documentation for <a href="https://www.11ty.dev/docs/data-deep-merge/">Data Deep Merging has been moved to its own page</a> under the Data Cascade.</li>
</ul>
<h4 id="customize-front-matter-parsing-options" tabindex="-1">Customize Front Matter Parsing Options <a class="direct-link" href="https://www.11ty.dev/docs/config/#customize-front-matter-parsing-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Documented at <a href="https://www.11ty.dev/docs/data-frontmatter-customize/">Customize Front Matter Parsing</a>.</li>
</ul>
<h4 id="watch-javascript-dependencies" tabindex="-1">Watch JavaScript Dependencies <a class="direct-link" href="https://www.11ty.dev/docs/config/#watch-javascript-dependencies">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Documented at <a href="https://www.11ty.dev/docs/watch-serve/">Watch and Serve Configuration</a>.</li>
</ul>
<h4 id="add-your-own-watch-targets" tabindex="-1">Add Your Own Watch Targets <a class="direct-link" href="https://www.11ty.dev/docs/config/#add-your-own-watch-targets">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Documented at <a href="https://www.11ty.dev/docs/watch-serve/">Watch and Serve Configuration</a>.</li>
</ul>
<h4 id="override-browsersync-server-options" tabindex="-1">Override Browsersync Server Options <a class="direct-link" href="https://www.11ty.dev/docs/config/#override-browsersync-server-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li>Documented at <a href="https://www.11ty.dev/docs/watch-serve/">Watch and Serve Configuration</a>.</li>
</ul>
<!--
### Experiments
Experiments are experimental Eleventy features that need a public trial. Power users may opt-in to these features in order to try out new things before they are released to the general public. Do not use these in production code! Experiments are not guaranteed and may be removed at any time.
| Experiments | |
| --- | --- |
| _Object Key_ | _N/A_ |
| _Valid Options_ | String |
| _Command Line Override_ | _None_ |
| _Configuration API_ | `addExperiment` |
-->
Passthrough File Copy
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/copy/
<h1>Passthrough File Copy</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/copy/#configuration-api-method">Configuration API Method </a><ul><li><a href="https://www.11ty.dev/docs/copy/#input-%E7%9B%AE%E5%BD%95%E6%98%AF%E8%A2%AB%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E7%9A%84">input 目录是被如何处理的 </a></li><li><a href="https://www.11ty.dev/docs/copy/#%E4%BD%BF%E7%94%A8-glob-%E6%A8%A1%E5%BC%8F%E5%8C%B9%E9%85%8D">使用 Glob 模式匹配 </a></li><li><a href="https://www.11ty.dev/docs/copy/#%E6%9B%B4%E6%94%B9%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95">更改输出目录 </a></li></ul></li><li><a href="https://www.11ty.dev/docs/copy/#%E6%A0%B9%E6%8D%AE%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D%E5%8E%9F%E6%A0%B7%E5%A4%8D%E5%88%B6%E6%96%87%E4%BB%B6">根据文件扩展名原样复制文件 </a></li><li><a href="https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve">Emulate Passthrough Copy During --serve </a></li><li><a href="https://www.11ty.dev/docs/copy/#advanced-options">Advanced Options </a></li></ul></div><p></p>
</details>
<p>如果我们需要把非 Eleventy 模板之类的文件复制到输出目录中的话,可以使用被称为直接复制文件(Passthrough File Copy)的功能。</p>
<h2 id="configuration-api-method" tabindex="-1">Configuration API Method <a class="direct-link" href="https://www.11ty.dev/docs/copy/#configuration-api-method">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><a id="manual-pass-through-copy-(faster)"></a><a id="manual-passthrough-copy-(faster)"></a></p>
<p>使用 Eleventy 提供的 API 方法来指定需要复制的 <em>文件</em> 或 <em>目录</em> 。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div><div class="codetitle codetitle-left"><b>Output Directory </b>_site</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// 输出目录为: _site</span><br><br> <span class="token comment">// 复制 `img/` 到 `_site/img`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// 复制 `css/fonts/` 到 `_site/css/fonts`</span><br> <span class="token comment">// 并保持原始的目录结构。</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"css/fonts"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// 复制所有 .jpg 文件(支持 Glob 模式匹配)到 `_site` 目录,</span><br> <span class="token comment">// 并保持原始的目录结构。</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"**/*.jpg"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">直接复制文件(Passthrough File Copy)功能所复制的内容是相对于项目更目录的,而 <em>不是</em> 你为 Eleventy 所设置的输入目录(即配置文件中的 input 配置项)。 </div></div>
<p>如果不需要保持原始的目录结构的话,可以 <a href="https://www.11ty.dev/docs/copy/#change-the-output-directory">改变输出目录</a>。</p>
<h3 id="input-目录是被如何处理的" tabindex="-1">input 目录是被如何处理的 <a class="direct-link" href="https://www.11ty.dev/docs/copy/#input-%E7%9B%AE%E5%BD%95%E6%98%AF%E8%A2%AB%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E7%9A%84">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>如上所示,直接复制文件(passthrough file copy)所复制的文件路径是相对于项目的根目录(而不是所设置的输入目录)而言的。因此,如果直接复制文件(passthrough file copy)所复制的路径位于输入目录内的话,则输入目录将被剥离。</p>
<p>例如:</p>
<ul>
<li><code>input</code> 目录设置为 <code>src</code></li>
<li><code>output</code> 目录设置为 <code>_site</code></li>
</ul>
<p>如果我们使用直接复制文件(passthrough file copy)功能复制 <code>src/img</code> 的话,它将被复制到 <code>_site/img</code> 。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div><div class="codetitle codetitle-left"><b>Input Directory </b>src</div>
<div class="codetitle codetitle-left"><b>Output Directory </b>_site</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// `input` 目录设置为: src</span><br> <span class="token comment">// `output` 目录设置为: _site</span><br><br> <span class="token comment">// 将被复制到 `_site/img`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"src/img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="使用-glob-模式匹配" tabindex="-1">使用 Glob 模式匹配 <a class="direct-link" href="https://www.11ty.dev/docs/copy/#%E4%BD%BF%E7%94%A8-glob-%E6%A8%A1%E5%BC%8F%E5%8C%B9%E9%85%8D">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>在本例中,我们将所有 <code>jpg</code> 图片文件复制到输出目录中,并保持各自原始的目录结构。如果不想保持原始目录结构的话,可以 <a href="https://www.11ty.dev/docs/copy/#using-globs-and-output-directories">修改输出目录。</a></p>
<p>注意,此方法比不使用 glob 模式匹配的方法慢,因为它需要搜索整个目录结构并由 Eleventy 逐个复制文件。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// 搜索并复制所有 `jpg` 文件,并保持原始目录结构。</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"**/*.jpg"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>补上输出目录 <code>_site</code> 之后的完整路径如下:</p>
<ul>
<li><code>img/avatar.jpg</code> 将被复制到 <code>_site/img/avatar.jpg</code></li>
<li><code>subdir/img/avatar.jpg</code> 将被复制到 <code>_site/subdir/img/avatar.jpg</code></li>
</ul>
<h3 id="更改输出目录" tabindex="-1">更改输出目录 <a class="direct-link" href="https://www.11ty.dev/docs/copy/#%E6%9B%B4%E6%94%B9%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>除了传入字符串类型的参数,还支持对象作为参数,结构如下:<code>{ "input": "target" }</code>。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div><div class="codetitle codetitle-left"><b>Input Directory </b>src</div>
<div class="codetitle codetitle-left"><b>Output Directory </b>_site</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Input directory: src</span><br> <span class="token comment">// Output directory: _site</span><br><br> <span class="token comment">// Copy `img/` to `_site/subfolder/img`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string-property property">"img"</span><span class="token operator">:</span> <span class="token string">"subfolder/img"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Copy `src/img/` to `_site/subfolder/img`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string-property property">"src/img"</span><span class="token operator">:</span> <span class="token string">"subfolder/img"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Copy `random-folder/img/` to `_site/subfolder/img`</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string-property property">"random-folder/img"</span><span class="token operator">:</span> <span class="token string">"subfolder/img"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="使用-glob-模式匹配并指定输出目录" tabindex="-1">使用 Glob 模式匹配并指定输出目录 <a class="direct-link" href="https://www.11ty.dev/docs/copy/#%E4%BD%BF%E7%94%A8-glob-%E6%A8%A1%E5%BC%8F%E5%8C%B9%E9%85%8D%E5%B9%B6%E6%8C%87%E5%AE%9A%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>注意,此方式比采用非 Glob 模式匹配的方式慢,因为 Eleventy 需要搜索整个目录结构并复制文件。</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div><div class="codetitle codetitle-left"><b>Output Dir </b>_site</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Output directory: _site</span><br><br> <span class="token comment">// Find and copy any `jpg` files in any folder to _site/img</span><br> <span class="token comment">// Does not keep the same directory structure.</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string-property property">"**/*.jpg"</span><span class="token operator">:</span> <span class="token string">"img"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>补上输出目录 <code>_site</code> 之后的完整路径如下:</p>
<ul>
<li><code>img/avatar.jpg</code> 将被复制到 <code>_site/img/avatar.jpg</code></li>
<li><code>subdir/img/avatar.jpg</code> 将被复制到 <code>_site/img/avatar.jpg</code></li>
</ul>
<h2 id="根据文件扩展名原样复制文件" tabindex="-1">根据文件扩展名原样复制文件 <a class="direct-link" href="https://www.11ty.dev/docs/copy/#%E6%A0%B9%E6%8D%AE%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D%E5%8E%9F%E6%A0%B7%E5%A4%8D%E5%88%B6%E6%96%87%E4%BB%B6">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>默认情况下,Eleventy 会按照 <a href="https://www.11ty.dev/docs/config/#template-formats"><code>templateFormats</code> 配置项</a> 所列出的文件扩展名搜索 Input 目录下的所有文件。也就是说,如果你把 <code>njk</code> 扩展名添加到 <code>templateFormats</code> 配置项中的话,我们就可以得到所有 Nunjucks 模板文件了(即文件扩展名为 <code>.njk</code> 的文件)。</p>
<p>如果某个文件格式并未被 Eleventy 当作模板文件,则 Eleventy 将忽略该文件。不过,你可以通添加该文件格式作为模板文件格式,从而改变此行为:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setTemplateFormats</span><span class="token punctuation">(</span><span class="token punctuation">[</span><br> <span class="token string">"md"</span><span class="token punctuation">,</span><br> <span class="token string">"css"</span> <span class="token comment">// Eleventy 并未把 css 文件当作模板文件格式</span><br> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>在上述代码示例中,Eleventy 并未把 <code>css</code> 看作模板文件格式,但是 Eleventy 将再 Input 目录中查找所有 <code>*.css</code> 文件并复制到 Output 目录下(同时保持目录结构)。</p>
<p>你或许希望将这种行为模式应用到 <code>"jpg"</code>、<code>"png"</code> 甚至 <code>"webp"</code> 格式的图片文件上。</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">请注意,此方式通常比前面提到的调用 <code>addPassthroughCopy</code> API 的方式慢,尤其是当你的项目很大、有大量文件时。</div></div>
<p><span id="passthrough-during-serve"></span></p>
<h2 id="emulate-passthrough-copy-during-serve" tabindex="-1">Emulate Passthrough Copy During <code>--serve</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.12">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>The <a href="https://www.11ty.dev/docs/watch-serve/#eleventy-dev-server">Eleventy Dev Server</a> includes a great build-performance feature that will <em>emulate</em> passthrough file copy.</p>
<p>Practically speaking, this means that (during <code>--serve</code> only!) files are referenced directly and <em><strong>will not</strong></em> be copied to your output folder. Changes to passthrough file copies will not trigger an Eleventy build but <em>will</em> live reload appropriately in the dev server.</p>
<p>You can enable this behavior in your project using this configuration API method:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// the default is "copy"</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setServerPassthroughCopyBehavior</span><span class="token punctuation">(</span><span class="token string">"passthrough"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This behavior will revert to <code>"copy"</code> in your project automatically if:</p>
<ol>
<li>If you are running Eleventy without <code>--serve</code> (a standard build or via <code>--watch</code>)</li>
<li>You change from the default development server: <a href="https://www.11ty.dev/docs/dev-server/">Eleventy Dev Server</a> (e.g. <a href="https://www.11ty.dev/docs/dev-server/#swap-back-to-browsersync">swap back to Browsersync</a>)</li>
</ol>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><em>For 2.0 canary users, note that this behavior spent a fair bit of time as the default and required opt-out from <code>2.0.0-canary.12</code> through <code>2.0.0-canary.30</code>. It was changed to opt-in in <code>2.0.0-canary.31</code>.</em></div></div>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="EcId2RVdUFE" params="start=443" playlabel="Play: Emulated Passthrough File Copy (Weekly №15)" style="background-image:url('https://i.ytimg.com/vi/EcId2RVdUFE/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=EcId2RVdUFE" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Emulated Passthrough File Copy (Weekly №15)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=EcId2RVdUFE&t=443">Emulated Passthrough File Copy (Weekly №15) <code>▶7m23s</code></a></is-land></div></div>
<h2 id="advanced-options" tabindex="-1">Advanced Options <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.12">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/copy/#advanced-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Additionally, you can pass additional configuration options to the <code>recursive-copy</code> package. This unlocks the use passthrough file copy with symlinks, transforming or renaming copied files. Here are just a few examples:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">expand</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// expand symbolic links</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> copyOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">debug</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// log debug information</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string-property property">"img"</span><span class="token operator">:</span> <span class="token string">"subfolder/img"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> copyOptions<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Review the <a href="https://github.com/timkendrick/recursive-copy#usage">full list of options on the <code>recursive-copy</code> GitHub repository</a>.</p>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="EcId2RVdUFE" params="start=337" playlabel="Play: Passthrough File Copy Advanced Options (Weekly №15)" style="background-image:url('https://i.ytimg.com/vi/EcId2RVdUFE/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=EcId2RVdUFE" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Passthrough File Copy Advanced Options (Weekly №15)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=EcId2RVdUFE&t=337">Passthrough File Copy Advanced Options (Weekly №15) <code>▶5m37s</code></a></is-land></div></div>
Credits
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/credits/
<h1>Credits</h1>
<ul>
<li>A list of <a href="https://github.com/11ty/eleventy/graphs/contributors">code contributors to Eleventy core</a> can be found on GitHub. We have a <a href="https://github.com/11ty">bunch more repos too</a> that are just as valuable to the project as core is.</li>
<li><a href="https://www.11ty.dev/blog/eleventy-v1-beta/#a-big-list-of-thanks">A big ol’ list of thanks on the Eleventy 1.0 Beta release blog post</a></li>
<li>A special thank you to our <a href="https://www.11ty.dev/docs/supporters/">Monetary contributors via Open Collective</a></li>
<li>A huge thank you to anyone that <a href="https://github.com/11ty/eleventy/issues">has helped answer questions on GitHub</a> or <a href="https://www.11ty.dev/blog/discord/">Discord</a>.</li>
<li><a href="https://www.11ty.dev/docs/how-to-support/">How can you contribute?</a></li>
<li><a href="https://www.11ty.dev/mascot/">Eleventy Mascots</a></li>
<li>Gift box icon in our navigation is via <a href="http://www.freepik.com/">Freepik</a> from <a href="https://www.flaticon.com/">Flaticon</a></li>
</ul>
Template Custom Tags
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/custom-tags/
<h1>Custom Tags</h1>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">It’s unlikely that you want this feature. You probably want <a href="https://www.11ty.dev/docs/shortcodes/">shortcodes</a> instead, Eleventy’s custom tags sugar (it’s easier to use).</div></div>
<p>Various template engines can be extended with custom tags.</p>
<p>Custom Tags are unrelated to Eleventy’s <a href="https://www.11ty.dev/docs/collections/">Collections using Tags</a> feature. Unfortunately we’ve inherited this name from various upstream template languages.</p>
<p>But, after all that, you can still add a Custom Tag using the <a href="https://www.11ty.dev/docs/config/#using-the-configuration-api">Configuration API</a>.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/custom-tags/#customtag-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/custom-tags/#customtag-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/custom-tags/#customtag-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/custom-tags/#customtag-hbs" role="tab">Handlebars</a>
</div>
<div id="customtag-liquid" role="tabpanel">
<ul>
<li><a href="https://liquidjs.com/tutorials/register-filters-tags.html">LiquidJS: Tags</a></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Usage: {% uppercase myVar %} where myVar has a value of "alice"</span><br> <span class="token comment">// Usage: {% uppercase "alice" %}</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidTag</span><span class="token punctuation">(</span><span class="token string">"uppercase"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">liquidEngine</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">parse</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">tagToken<span class="token punctuation">,</span> remainingTokens</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">this</span><span class="token punctuation">.</span>str <span class="token operator">=</span> tagToken<span class="token punctuation">.</span>args<span class="token punctuation">;</span> <span class="token comment">// myVar or "alice"</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">scope<span class="token punctuation">,</span> hash</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Resolve variables</span><br> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>liquid<span class="token punctuation">.</span><span class="token function">evalValue</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>str<span class="token punctuation">,</span> scope<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "alice"</span><br><br> <span class="token comment">// Do the uppercasing</span><br> <span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "ALICE"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>See all of the <a href="https://liquidjs.com/tags/overview.html">built-in tag implementations for LiquidJS</a>.</p>
</div>
<div id="customtag-njk" role="tabpanel">
<ul>
<li><a href="https://mozilla.github.io/nunjucks/api.html#custom-tags">Nunjucks: Custom Tags</a></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Usage: {% uppercase myVar %} where myVar has a value of "alice"</span><br> <span class="token comment">// Usage: {% uppercase "alice" %}</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksTag</span><span class="token punctuation">(</span><span class="token string">"uppercase"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">nunjucksEngine</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">this</span><span class="token punctuation">.</span>tags <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"uppercase"</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">parse</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">parser<span class="token punctuation">,</span> nodes<span class="token punctuation">,</span> lexer</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">var</span> tok <span class="token operator">=</span> parser<span class="token punctuation">.</span><span class="token function">nextToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">var</span> args <span class="token operator">=</span> parser<span class="token punctuation">.</span><span class="token function">parseSignature</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> parser<span class="token punctuation">.</span><span class="token function">advanceAfterBlockEnd</span><span class="token punctuation">(</span>tok<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">nodes<span class="token punctuation">.</span>CallExtensionAsync</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"run"</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">run</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> myStringArg<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> ret <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">nunjucksEngine<span class="token punctuation">.</span>runtime<span class="token punctuation">.</span>SafeString</span><span class="token punctuation">(</span><br> myStringArg<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> ret<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="customtag-hbs" role="tabpanel">
<p>Surprise—these are helpers!</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Usage: {{ uppercase myVar }} where myVar has a value of "alice"</span><br> <span class="token comment">// Usage: {{ uppercase "alice" }}</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addHandlebarsHelper</span><span class="token punctuation">(</span><span class="token string">"uppercase"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myStringArg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> myStringArg<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
Computed Data
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-computed/
<h1>Computed Data</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-computed/#real-world-example">Real World Example </a></li><li><a href="https://www.11ty.dev/docs/data-computed/#using-javascript">Using JavaScript </a></li><li><a href="https://www.11ty.dev/docs/data-computed/#using-a-template-string">Using a Template String </a></li><li><a href="https://www.11ty.dev/docs/data-computed/#advanced-details">Advanced Details </a><ul><li><a href="https://www.11ty.dev/docs/data-computed/#declaring-your-dependencies">Declaring Your Dependencies </a></li></ul></li></ul></div><p></p>
</details>
<p>At the end of the Data Cascade you may want to inject Data properties into your data object that are based on other data values. To do that you can use the new <code>eleventyComputed</code> feature.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">It is important to note that Computed Data is computed right before templates are rendered. Therefore Computed Data cannot be used to modify the <a href="https://www.11ty.dev/docs/data-configuration/">special data properties used to configure templates</a> (e.g. <code>layout</code>, <code>pagination</code>, <code>tags</code> etc.).<!-- One notable exception here is <code>permalink</code>, which can be set in computed data. --> These restrictions may be relaxed over time.</div></div>
<h2 id="real-world-example" tabindex="-1">Real World Example <a class="direct-link" href="https://www.11ty.dev/docs/data-computed/#real-world-example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Say you want to use Eleventy’s <a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation Plugin</a> to create a navigation menu for your site. This plugin relies on the <code>eleventyNavigation</code> object to be set. You don’t necessarily want to set this object manually in front matter in each individual source file. This is where Computed Data comes in!</p>
<p>Consider a blog post with the following front matter format:</p>
<div class="codetitle codetitle-left"><b>Filename </b>posts/my-page-title.md</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My Page Title<br><span class="token key atrule">parent</span><span class="token punctuation">:</span> My Parent Key</span><br><span class="token punctuation">---</span></span></code></pre>
<p>If this file is generated by a Content Management System (like <a href="https://www.netlifycms.org/">Netlify CMS</a>, in my particular case), I may not be able to (or want to) create the <code>eleventyNavigation</code> object for each of them. I would also not be able to just dump a standard <a href="https://www.11ty.dev/docs/data-template-dir/">Data Directory File</a> in there either (that <em>would</em> be useful for setting defaults but we don’t want the same values for every markdown file). <code>eleventyNavigation</code> properties must be set based on other data properties.</p>
<p>Instead, I created this Data Directory File using <code>eleventyComputed</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>posts/posts.11tydata.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">eleventyComputed</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">eleventyNavigation</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">key</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> data<span class="token punctuation">.</span>title<span class="token punctuation">,</span><br> <span class="token function-variable function">parent</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> data<span class="token punctuation">.</span>parent<br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">If you want to use a JavaScript function for your <code>eleventyComputed</code> properties, you must use either <a href="https://www.11ty.dev/docs/data-frontmatter/#javascript-front-matter">JavaScript front matter</a> or a <a href="https://www.11ty.dev/docs/data-js/">JavaScript data file</a> (template, directory, or global). YAML and JSON do not support JavaScript functions.</div></div>
<p>The resulting data for each <code>posts/*.md</code> file when processed by Eleventy has the following structure:</p>
<div class="codetitle codetitle-left"><b>Data Cascade for </b>posts/my-page-title.md</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My Page Title"</span><span class="token punctuation">,</span><br> <span class="token property">"parent"</span><span class="token operator">:</span> <span class="token string">"My Parent Key"</span><span class="token punctuation">,</span><br> <span class="token property">"eleventyNavigation"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"My Page Title"</span><span class="token punctuation">,</span><br> <span class="token property">"parent"</span><span class="token operator">:</span> <span class="token string">"My Parent Key"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<p>If I wanted this data to be computed for all files, I could instead create the following <code>eleventyComputed.js</code> <a href="https://www.11ty.dev/docs/data-global/">global data file</a>.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">eleventyNavigation</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">key</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> data<span class="token punctuation">.</span>title<span class="token punctuation">,</span><br> <span class="token function-variable function">parent</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> data<span class="token punctuation">.</span>parent<br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="using-javascript" tabindex="-1">Using JavaScript <a class="direct-link" href="https://www.11ty.dev/docs/data-computed/#using-javascript">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Use any arbitrary JavaScript for an <code>eleventyComputed</code> property. Note that JavaScript functions require either JavaScript front matter or a JavaScript data file (template, directory, or global). YAML and JSON do not support JavaScript functions.</p>
<p>Here’s a bunch of examples:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">eleventyComputed</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myTemplateString</span><span class="token operator">:</span> <span class="token string">"This is assumed to be a template string!"</span><span class="token punctuation">,</span><br> <span class="token function-variable function">myString</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token string">"This is a string!"</span><span class="token punctuation">,</span><br> <span class="token function-variable function">myFunction</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">This is a string using </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>someValue<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br> <span class="token function-variable function">myAsyncFunction</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token keyword">await</span> <span class="token function">someAsyncThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br> <span class="token function-variable function">myPromise</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"100ms DELAYED HELLO"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="using-a-template-string" tabindex="-1">Using a Template String <a class="direct-link" href="https://www.11ty.dev/docs/data-computed/#using-a-template-string">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>If you want to use eleventyComputed in YAML front matter, you can use the template syntax string that matches the syntax of the template.</p>
<p>This is how <a href="https://www.11ty.dev/docs/permalinks/#use-data-variables-in-permalink"><code>permalink</code> works</a>, if you’re already familiar with that.</p>
<p>Consider our first example, but using Nunjucks (this example is also valid Liquid syntax).</p>
<div class="codetitle codetitle-left"><b>Filename </b>posts/my-page-title.njk</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My Page Title<br><span class="token key atrule">parent</span><span class="token punctuation">:</span> My Parent Key<br><span class="token key atrule">eleventyComputed</span><span class="token punctuation">:</span><br> <span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> <span class="token string">"{{ title }}"</span><br> <span class="token key atrule">parent</span><span class="token punctuation">:</span> <span class="token string">"{{ parent }}"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>The above would also resolve to the same Data Cascade:</p>
<div class="codetitle codetitle-left"><b>Data Cascade for </b>posts/my-page-title.njk</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My Page Title"</span><span class="token punctuation">,</span><br> <span class="token property">"parent"</span><span class="token operator">:</span> <span class="token string">"My Parent Key"</span><span class="token punctuation">,</span><br> <span class="token property">"eleventyNavigation"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"My Page Title"</span><span class="token punctuation">,</span><br> <span class="token property">"parent"</span><span class="token operator">:</span> <span class="token string">"My Parent Key"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">Template syntax is definitely slower than the “Using JavaScript” methods above.</div></div>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">This would also work in JSON data files or any other data file type in the cascade, just keep in mind that the template syntax <strong>must</strong> match the template syntax that it eventually winds up with in the Data Cascade.</div></div>
<h2 id="advanced-details" tabindex="-1">Advanced Details <a class="direct-link" href="https://www.11ty.dev/docs/data-computed/#advanced-details">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>We put a lot of work into making this feature as easy to use as possible. Most of these details shouldn’t matter to you as it should Just Work™. But here’s a few things we thought of already and handle in a good way:</p>
<ul>
<li>You can put your <code>eleventyComputed</code> values anywhere in the Data Cascade: Front Matter, any Data Files (you could even make an <code>eleventyComputed.js</code> global data file if you wanted to set this for your entire site).</li>
<li>You can read and use any of the existing data properties (including <a href="https://www.11ty.dev/docs/data-eleventy-supplied/">ones created by Eleventy like <code>page</code></a>).
<ul>
<li>You can use <em>or</em> set <code>permalink</code> in <code>eleventyComputed</code> and it will work (<code>permalink</code> is a top-level special case computed property anyway). Setting other <a href="https://www.11ty.dev/docs/data-configuration/">special Eleventy data keys</a> are not yet supported.</li>
</ul>
</li>
<li>You can use a computed property that depends on other computed properties (just reference them like they were any other property <code>data.propName</code> and ⚠️ <strong>not</strong> <code>data.eleventyComputed.propName</code>)
<ul>
<li>The order of the keys in the object doesn’t matter—we smartly figure out what order these should be computed in.</li>
<li>We will let you know if you have circular references (<code>key1</code> uses on <code>key2</code> which uses <code>key1</code> again)</li>
<li>When we calculate the dependency graph for your variable references, we may get it wrong if your references to other computed properties are nested inside of conditional logic. Read more at <a href="https://www.11ty.dev/docs/data-computed/#declaring-your-dependencies">Declaring your Dependencies</a>.</li>
</ul>
</li>
<li>You can use a nested object of any depth. It can mix, match, and merge with the standard (non-computed) data. This will always do deep merging (independent of your <a href="https://www.11ty.dev/docs/data-deep-merge/">Data Deep Merge configuration</a>).</li>
<li>You can reuse <em>and</em> override properties at the same time. In the following example <code>key</code> will have <code>This Is My Key</code> as its value.</li>
</ul>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">key</span><span class="token punctuation">:</span> My Key<br><span class="token key atrule">eleventyComputed</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> <span class="token string">"This Is {{key}}"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<h3 id="declaring-your-dependencies" tabindex="-1">Declaring Your Dependencies <a class="direct-link" href="https://www.11ty.dev/docs/data-computed/#declaring-your-dependencies">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>We do try our best to automatically detect dependencies between <code>eleventyComputed</code> keys, but it isn’t always 100% accurate—especially if you include conditional logic that only uses another Computed Data key inside of a conditional block. To workaround this issue, you can always declare your dependencies inside of your callback so that it resolves correctly. To do so, just access the variables that your callback uses in the callback function.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">eleventyComputed</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">myValue</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">"Hi"</span><span class="token punctuation">,</span><br> <span class="token function-variable function">myOtherValue</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">"Bye"</span><span class="token punctuation">,</span><br> <span class="token function-variable function">usesAllTheThings</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// We detect this as a declared dependency</span><br> data<span class="token punctuation">.</span>myValue<span class="token punctuation">;</span><br> <span class="token comment">// You can use as many as you want.</span><br> data<span class="token punctuation">.</span>myOtherValue<span class="token punctuation">;</span><br> <span class="token comment">// You could use any valid JS syntax to access them.</span><br> <span class="token punctuation">[</span>data<span class="token punctuation">.</span>myValue<span class="token punctuation">,</span> data<span class="token punctuation">.</span>myOtherValue<span class="token punctuation">]</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">How are you?</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>If you suspect Eleventy has the Computed Data order wrong—you can double check what variables Eleventy detects inside of a Computed Data function in the <a href="https://www.11ty.dev/docs/debugging/">debug output</a>.</p>
Configure your Templates
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-configuration/
<h1>Configure your Templates</h1>
<p>There are a few special data keys you can assign in your data to control how templates behave. These can live anywhere in the <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a>.</p>
<ul>
<li><code>permalink</code>: Change the output target of the current template. Normally, you cannot use template syntax to reference other variables in your data, but <code>permalink</code> is an exception. <a href="https://www.11ty.dev/docs/permalinks/">Read more about Permalinks</a>.</li>
<li><code>layout</code>: Wrap current template with a layout template found in the <code>_includes</code> folder. <a href="https://www.11ty.dev/docs/layouts/">Read more about Layouts</a>.</li>
<li><code>pagination</code>: Enable to iterate over data. Output multiple HTML files from a single template. <a href="https://www.11ty.dev/docs/pagination/">Read more about Pagination</a>.</li>
<li><code>tags</code>: A single string or array that identifies that a piece of content is part of a collection. Collections can be reused in any other template. <a href="https://www.11ty.dev/docs/collections/">Read more about Collections</a>.</li>
<li><code>date</code>: Override the default date (file creation) to customize how the file is sorted in a collection. <a href="https://www.11ty.dev/docs/dates/">Read more at Content Dates</a>.</li>
<li><code>templateEngineOverride</code>: Override the template engine on a per-file basis. <a href="https://www.11ty.dev/docs/languages/#overriding-the-template-language">Read more about Changing a Template’s Rendering Engine</a>. <a href="https://github.com/11ty/eleventy/issues/445"><em>This option only works in Front Matter ⚠️ (for now), read Issue #445</em></a>.</li>
<li><code>eleventyExcludeFromCollections</code>: Set to <code>true</code> to exclude this content from any and all <a href="https://www.11ty.dev/docs/collections/">Collections</a> (those tagged in data or setup using the Configuration API).</li>
<li><code>eleventyComputed</code>: Programmatically set data values based on other values in your data cascade. Read more about <a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a>.</li>
<li><code>eleventyNavigation</code>: Used by the <a href="https://www.11ty.dev/docs/plugins/navigation/#adding-templates-to-the-navigation">Navigation plugin</a>.</li>
</ul>
<h2 id="advanced" tabindex="-1">Advanced <a class="direct-link" href="https://www.11ty.dev/docs/data-configuration/#advanced">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><code>eleventyImport</code>
<ul>
<li><code>eleventyImport.collections</code>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.21">Added in v2.0.0</span> An Array of collection names used to inform template dependencies for incremental builds and to render templates in the correct order. Read more on the <a href="https://www.11ty.dev/docs/collections/#declare-your-collections-for-incremental-builds">collections documentation</a>.</li>
</ul>
</li>
<li><code>dynamicPermalink</code>: Option to disable template syntax for the <code>permalink</code> key. Read more about <a href="https://www.11ty.dev/docs/permalinks/#disable-templating-in-permalinks">disabling dynamic permalinks</a>.</li>
<li><code>permalinkBypassOutputDir</code>: Write a file to somewhere other than the output directory. Read more about <a href="https://www.11ty.dev/docs/permalinks/#ignore-the-output-directory">bypassing the output directory</a></li>
</ul>
Custom Data File Formats
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-custom/
<h1>Custom Data File Formats</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-custom/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/data-custom/#usage-with-options">Usage with Options </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-custom/#examples">Examples </a><ul><li><a href="https://www.11ty.dev/docs/data-custom/#yaml">YAML </a></li><li><a href="https://www.11ty.dev/docs/data-custom/#toml">TOML </a></li><li><a href="https://www.11ty.dev/docs/data-custom/#adding-a-custom-json-file-extension">Adding a custom JSON file extension </a></li><li><a href="https://www.11ty.dev/docs/data-custom/#feed-exif-image-data-into-the-data-cascade">Feed EXIF image data into the Data Cascade </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-custom/#ordering-in-the-data-cascade">Ordering in the Data Cascade </a><ul><li><a href="https://www.11ty.dev/docs/data-custom/#example">Example </a></li></ul></li></ul></div><p></p>
</details>
<p>Out of the box, Eleventy supports arbitrary JavaScript and JSON for both <a href="https://www.11ty.dev/docs/data-template-dir/">template and directory data files</a> as well as <a href="https://www.11ty.dev/docs/data-global/">global data</a>.</p>
<p>Maybe you want to add support for TOML or YAML too! Any text format will do.</p>
<p>Note that you can also add <a href="https://www.11ty.dev/docs/data-frontmatter-customize/">Custom Front Matter Formats</a> as well.</p>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// Receives file contents, return parsed data</span><br>eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"fileExtension"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">contents<span class="token punctuation">,</span> filePath</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.10">Added in v2.0.0</span> Pass a comma-separated list of extensions.</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> <code>filePath</code> was added as a second argument.</li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"yml, yaml"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">contents<span class="token punctuation">,</span> filePath</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// …</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="usage-with-options" tabindex="-1">Usage with Options <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#usage-with-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.10">Added in v2.0.0</span></p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// or with options (new in 2.0)</span><br>eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"fileExtension"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">parser</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">contents<span class="token punctuation">,</span> filePath</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br><br> <span class="token comment">// defaults are shown:</span><br> <span class="token literal-property property">read</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">encoding</span><span class="token operator">:</span> <span class="token string">"utf8"</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<ul>
<li><code>parser</code>: the callback function used to parse the data. The first argument is the data file’s contents (unless <code>read: false</code>). The second argument is the file path <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span>.</li>
<li><code>read</code> (default: <code>true</code>): use <code>read: false</code> to change the parser function’s first argument to be a file path string instead of file contents.</li>
<li><code>encoding</code> (default: <code>"utf8"</code>): use this to change the encoding of <a href="https://nodejs.org/api/fs.html#fspromisesreadfilepath-options">Node’s <code>readFile</code></a>. Use <code>null</code> if you want a <code>Buffer</code>.</li>
</ul>
<h2 id="examples" tabindex="-1">Examples <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="yaml" tabindex="-1">YAML <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#yaml">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Here we’re using the <a href="https://www.npmjs.com/package/js-yaml"><code>js-yaml</code> package</a>. Don’t forget to <code>npm install js-yaml</code>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> yaml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"js-yaml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token parameter">eleventyConfig</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"yaml"</span><span class="token punctuation">,</span> <span class="token parameter">contents</span> <span class="token operator">=></span> yaml<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>contents<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="toml" tabindex="-1">TOML <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#toml">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Here we’re using the <a href="https://www.npmjs.com/package/toml"><code>toml</code> package</a>. Don’t forget to <code>npm install toml</code>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> toml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@iarna/toml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token parameter">eleventyConfig</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"toml"</span><span class="token punctuation">,</span> <span class="token parameter">contents</span> <span class="token operator">=></span> toml<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>contents<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="adding-a-custom-json-file-extension" tabindex="-1">Adding a custom JSON file extension <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#adding-a-custom-json-file-extension">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token parameter">eleventyConfig</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"geojson"</span><span class="token punctuation">,</span> <span class="token parameter">contents</span> <span class="token operator">=></span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>contents<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="feed-exif-image-data-into-the-data-cascade" tabindex="-1">Feed EXIF image data into the Data Cascade <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#feed-exif-image-data-into-the-data-cascade">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.10">Added in v2.0.0</span> This uses the <a href="https://www.npmjs.com/package/exifr"><code>exifr</code> package</a> to read image EXIF data. Don’t forget to <code>npm install exifr</code>.</p>
<p>Note that the second argument is an object with a <code>parser</code> function.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> exifr <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"exifr"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"png,jpeg"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">parser</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token parameter">file</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> exif <span class="token operator">=</span> <span class="token keyword">await</span> exifr<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> exif<br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Using `read: false` changes the parser argument to</span><br> <span class="token comment">// a file path instead of file contents.</span><br> <span class="token literal-property property">read</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<ul>
<li>Example using a <em>template data file</em>:
<ul>
<li>Given <code>my-blog-post.md</code> and <code>my-blog-post.jpeg</code> then <code>exif</code> will be available for use in <code>my-blog-post.md</code> (e.g. <code>{{ exif | log }}</code>)</li>
</ul>
</li>
<li>Example using a <em>global data file</em>:
<ul>
<li>Given <code>_data/images/custom.jpeg</code> then <code>images.custom.exif</code> will be available for use on any template (e.g. <code>{{ images.custom.exif | log }}</code>)</li>
</ul>
</li>
</ul>
<h2 id="ordering-in-the-data-cascade" tabindex="-1">Ordering in the Data Cascade <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#ordering-in-the-data-cascade">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Note that in the <a href="https://www.11ty.dev/docs/data-cascade/">data cascade</a> there is a specific conflict resolution order when the same keys are used in data files. For example, <a href="https://www.11ty.dev/docs/data-template-dir/">JavaScript files take priority over JSON</a>. These new custom data file formats are treated as lower priority than both JavaScript and JSON.</p>
<p>If you add multiple file extensions, the latter ones take priority over the earlier ones. In the following example, if there is ever conflicting data between <code>*.toml</code> and <code>*.yaml</code> files, the <code>yaml</code> file will take precedence.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> toml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@iarna/toml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> yaml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"js-yaml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token parameter">eleventyConfig</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Lower priority</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"toml"</span><span class="token punctuation">,</span> <span class="token parameter">contents</span> <span class="token operator">=></span> toml<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>contents<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Higher priority</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addDataExtension</span><span class="token punctuation">(</span><span class="token string">"yaml"</span><span class="token punctuation">,</span> <span class="token parameter">contents</span> <span class="token operator">=></span> yaml<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>contents<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/data-custom/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Consider the <a href="https://www.11ty.dev/docs/data-template-dir/">template data file search</a> for a <code>my-first-blog-post.md</code> file. The order with custom <code>toml</code> and <code>yaml</code> formats (as seen above) will go as follows:</p>
<ul>
<li><code>my-first-blog-post.11tydata.js</code></li>
<li><code>my-first-blog-post.11tydata.json</code></li>
<li><code>my-first-blog-post.11tydata.yaml</code> (custom)</li>
<li><code>my-first-blog-post.11tydata.toml</code> (custom)</li>
<li><code>my-first-blog-post.json</code></li>
<li><code>my-first-blog-post.yaml</code> (custom)</li>
<li><code>my-first-blog-post.toml</code> (custom)</li>
</ul>
<p>This same ordering would be used for <a href="https://www.11ty.dev/docs/data-template-dir/">template directory data files</a> as well.</p>
<ul>
<li>You can also use the <a href="https://www.11ty.dev/docs/config/#change-file-suffix-for-data-files"><code>setDataFileSuffixes</code> Configuration API method to <strong>customize the <code>.11tydata</code> file suffix</strong></a>.</li>
</ul>
Data Deep Merge
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-deep-merge/
<h1>Data Deep Merge</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-deep-merge/#example">Example </a><ul><li><a href="https://www.11ty.dev/docs/data-deep-merge/#without-deep-data-merge">Without Deep Data Merge </a></li><li><a href="https://www.11ty.dev/docs/data-deep-merge/#with-data-deep-merge">With Data Deep Merge </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-deep-merge/#using-the-override-prefix">Using the override: prefix </a></li></ul></div><p></p>
</details>
<p>Use a full deep merge when combining the Data Cascade. This will use something similar to <a href="https://docs-lodash.com/v4/merge-with/"><code>lodash.mergewith</code></a> to combine Arrays and deep merge Objects, rather than a simple top-level merge using <code>Object.assign</code>.</p>
<p>Read more at <a href="https://github.com/11ty/eleventy/issues/147">Issue #147</a>. As of Eleventy 1.0 this defaults to enabled (but API still exists for opt-out).</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// defaults to true in 1.0, use false to opt-out</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDataDeepMerge</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// requires opt-in for 0.x</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDataDeepMerge</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Note that all data stored in the <code>pagination</code> variable is exempted from this behavior (we don’t want <code>pagination.items</code> to be merged together).</p>
<h2 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/data-deep-merge/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="codetitle codetitle-left"><b>Filename </b>my-template.md</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> This is a Good Blog Post<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> CSS<br> <span class="token punctuation">-</span> HTML<br><span class="token key atrule">layout</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>layout.njk<br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>key<br><span class="token punctuation">---</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/my-layout.njk</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> This is a Very Good Blog Post<br><span class="token key atrule">author</span><span class="token punctuation">:</span> Zach<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> JavaScript<br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">parent</span><span class="token punctuation">:</span> test<br><span class="token punctuation">---</span></code></pre>
<h3 id="without-deep-data-merge" tabindex="-1">Without Deep Data Merge <a class="direct-link" href="https://www.11ty.dev/docs/data-deep-merge/#without-deep-data-merge">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Results in the following data available in <code>my-template.md</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"This is a Good Blog Post"</span><span class="token punctuation">,</span><br> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"Zach"</span><span class="token punctuation">,</span><br> <span class="token property">"tags"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"CSS"</span><span class="token punctuation">,</span><br> <span class="token string">"HTML"</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token property">"eleventyNavigation"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"my-key"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="with-data-deep-merge" tabindex="-1">With Data Deep Merge <a class="direct-link" href="https://www.11ty.dev/docs/data-deep-merge/#with-data-deep-merge">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>With this enabled, your data structure will look like this when <code>my-template.md</code> is rendered:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"This is a Good Blog Post"</span><span class="token punctuation">,</span><br> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"Zach"</span><span class="token punctuation">,</span><br> <span class="token property">"tags"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token string">"CSS"</span><span class="token punctuation">,</span><br> <span class="token string">"HTML"</span><span class="token punctuation">,</span><br> <span class="token string">"JavaScript"</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token property">"eleventyNavigation"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"my-key"</span><span class="token punctuation">,</span><br> <span class="token property">"parent"</span><span class="token operator">:</span> <span class="token string">"test"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h2 id="using-the-override-prefix" tabindex="-1">Using the <code>override:</code> prefix <a class="direct-link" href="https://www.11ty.dev/docs/data-deep-merge/#using-the-override-prefix">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Use the <code>override:</code> prefix on any data key to opt-out of this merge behavior for specific values or nested values.</p>
<div class="codetitle codetitle-left"><b>Filename </b>posts/posts.json</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"tags"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"posts"</span><span class="token punctuation">]</span><br><span class="token punctuation">}</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>posts/firstpost.md</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">override:tags</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Even though normally the <code>posts/firstpost.md</code> file would inherit the <code>posts</code> tag from the directory data file (per normal <a href="https://www.11ty.dev/docs/data/">data cascade rules</a>), we can override the <code>tags</code> value to be an empty array to opt-out of this behavior.</p>
Config Global Data
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-global-custom/
<h1>Global Data from the Configuration API <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-global-custom/#example">Example </a></li><li><a href="https://www.11ty.dev/docs/data-global-custom/#sources-of-data">Sources of Data </a></li></ul></div><p></p>
</details>
<p>In addition to <a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a> global data can be added to the Eleventy config object using the <code>addGlobalData</code> method. This is especially useful for plugins.</p>
<p>The first value of <code>addGlobalData</code> is the key that will be available to your templates and the second value is the value of the value returned to the template.</p>
<h2 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/data-global-custom/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Values can be static:</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"myStatic"</span><span class="token punctuation">,</span> <span class="token string">"static"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// functions:</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"myFunction"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// or a promise:</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><br> <span class="token string">"myFunctionPromise"</span><span class="token punctuation">,</span><br> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string">"foo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// or async:</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><br> <span class="token string">"myAsyncFunction"</span><span class="token punctuation">,</span><br> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"hi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="sources-of-data" tabindex="-1">Sources of Data <a class="direct-link" href="https://www.11ty.dev/docs/data-global-custom/#sources-of-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When the data is merged in the <a href="https://www.11ty.dev/docs/data-cascade/">Eleventy Data Cascade</a>, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a></li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em></li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a> ⬅</li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a></li>
</ol>
JavaScript Data Files
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-js/
<h1>JavaScript Data Files</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-js/#using-js-data-files">Using JS Data Files </a><ul><li><a href="https://www.11ty.dev/docs/data-js/#fetching-data-from-a-remote-api">Fetching data from a remote API </a></li><li><a href="https://www.11ty.dev/docs/data-js/#arguments-to-global-data-files">Arguments to Global Data Files </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-js/#examples">Examples </a><ul><li><a href="https://www.11ty.dev/docs/data-js/#example-using-graphql">Example: Using GraphQL </a></li><li><a href="https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables">Example: Exposing Environment Variables </a></li></ul></li></ul></div><p></p>
</details>
<p>The following applies to both:</p>
<ul>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a> (<code>*.js</code> inside of your <code>_data</code> directory)</li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template and Directory Data Files</a> (<code>*.11tydata.js</code> files that are paired with a template file or directory)</li>
</ul>
<h2 id="using-js-data-files" tabindex="-1">Using JS Data Files <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#using-js-data-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can export data from a JavaScript file to add data, too. This allows you to execute arbitrary code to fetch data at build time.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">[</span><br> <span class="token string">"user1"</span><span class="token punctuation">,</span><br> <span class="token string">"user2"</span><br><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>If you return a <code>function</code>, we’ll use the return value from that function.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">[</span><br> <span class="token string">"user1"</span><span class="token punctuation">,</span><br> <span class="token string">"user2"</span><br> <span class="token punctuation">]</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>We use <code>await</code> on the return value, so you can return a promise and/or use an <code>async function</code>, too. Fetch your data asynchronously at build time!</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">[</span><br> <span class="token string">"user1"</span><span class="token punctuation">,</span><br> <span class="token string">"user2"</span><br> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchUserData</span><span class="token punctuation">(</span><span class="token parameter">username</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// do some async things</span><br> <span class="token keyword">return</span> username<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> user1 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserData</span><span class="token punctuation">(</span><span class="token string">"user1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> user2 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserData</span><span class="token punctuation">(</span><span class="token string">"user2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">[</span>user1<span class="token punctuation">,</span> user2<span class="token punctuation">]</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="fetching-data-from-a-remote-api" tabindex="-1">Fetching data from a remote API <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#fetching-data-from-a-remote-api">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You’ll want to use <a href="https://www.11ty.dev/docs/plugins/fetch/">Eleventy’s Fetch plugin</a> to request and cache data from remote APIs. There is another example on <a href="https://www.11ty.dev/docs/quicktips/cache-api-requests/">Quick Tip #009—Cache Data Requests</a>.</p>
<h3 id="arguments-to-global-data-files" tabindex="-1">Arguments to Global Data Files <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#arguments-to-global-data-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> When using a callback function in your JavaScript Data Files, Eleventy will now supply any global data already processed <a href="https://www.11ty.dev/docs/data-global-custom/">via the Configuration API (<code>eleventyConfig.addGlobalData</code>)</a> as well as the <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#eleventy-variable"><code>eleventy</code> global variable</a>.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">configData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span>configData<span class="token punctuation">.</span>eleventy<span class="token punctuation">.</span>env<span class="token punctuation">.</span>source <span class="token operator">===</span> <span class="token string">"cli"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token string">"I am on the command line"</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">return</span> <span class="token string">"I am running programmatically via a script"</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="examples" tabindex="-1">Examples <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/data-js/#example-using-graphql">Example: Using GraphQL</a></li>
<li><a href="https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables">Example: Exposing Environment Variables</a></li>
<li><a href="https://www.11ty.dev/docs/quicktips/cache-api-requests/">Fetch GitHub star counts</a></li>
<li><a href="https://www.11ty.dev/docs/plugins/fetch/#more-examples">Caching remote images, Google Fonts CSS, and more on the Eleventy Fetch plugin docs</a></li>
</ul>
<h3 id="example-using-graphql" tabindex="-1">Example: Using GraphQL <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#example-using-graphql">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This “Hello World” GraphQL example works out of the box with Eleventy:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> graphql<span class="token punctuation">,</span> buildSchema <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"graphql"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// this could also be `async function`</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// if you want to `await` for other things here, use `async function`</span><br> <span class="token keyword">var</span> schema <span class="token operator">=</span> <span class="token function">buildSchema</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">type Query {<br> hello: String<br> }</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">var</span> root <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">hello</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">"Hello world async!"</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token function">graphql</span><span class="token punctuation">(</span>schema<span class="token punctuation">,</span> <span class="token string">"{ hello }"</span><span class="token punctuation">,</span> root<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="example-exposing-environment-variables" tabindex="-1">Example: Exposing Environment Variables <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can expose environment variables to your templates by utilizing <a href="https://nodejs.org/api/process.html#process_process_env">Node.js’ <code>process.env</code> property</a>. <em>(Related: starting in version 1.0, Eleventy supplies a few of its <a href="https://www.11ty.dev/docs/environment-vars/#eleventy-supplied">own Environment Variables</a>)</em></p>
<ul>
<li><a href="https://www.11ty.dev/docs/environment-vars/#setting-your-own"><strong>Learn how to set your own environment variables</strong></a></li>
</ul>
<p>Start by creating a <a href="https://www.11ty.dev/docs/data-global/">Global Data file</a> (<code>*.js</code> inside of your <code>_data</code> directory) and export the environment variables for use in a template:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_data/myProject.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">environment</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">MY_ENVIRONMENT</span> <span class="token operator">||</span> <span class="token string">"development"</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Saving this as <code>myProject.js</code> in your global data directory (by default, this is <code>_data/</code>) gives you access to the <code>myProject.environment</code> variable in your templates.</p>
<ul>
<li><a href="https://www.11ty.dev/docs/environment-vars/#setting-your-own">Learn how to set a value for the <code>MY_ENVIRONMENT</code> environment variable</a></li>
</ul>
<p>When <code>MY_ENVIRONMENT</code> is set, the value from <code>myProject.environment</code> will be globally available to be used in your templates. If the variable hasn’t been set, the fallback <code>"development"</code> will be used.</p>
<h4 id="template-usage" tabindex="-1">Template Usage <a class="direct-link" href="https://www.11ty.dev/docs/data-js/#template-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Working from our <a href="https://www.11ty.dev/docs/quicktips/inline-css/">Inline CSS Quick Tip</a>, we can modify the output to only minify our CSS if we’re building for production:</p>
<pre class="language-html"><code class="language-html">{% if myProject.environment == "production" %}<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span> css | cssmin | safe <span class="token punctuation">}</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br>{% else %}<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span> css | safe <span class="token punctuation">}</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br>{% endif %}</code></pre>
Data Preprocessing
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-preprocessing/
<h1>全局数据文件(Data File)预处理</h1>
<div class="elv-callout elv-callout-error"><div class="elv-callout-label">ERROR:</div><div class="elv-callout-c"><strong>该功能已废弃</strong>:该功能在 Eleventy 2.0 版本中已被删除。你可以改用 <a href="https://www.11ty.dev/docs/data-js/">JavaScript 数据文件(Data Files)</a> 或 <a href="https://www.11ty.dev/docs/data-computed/">经计算的数据(Computed Data)</a> 来替代此功能。</div></div>
<p>The <code>dir.data</code> global data files run through this template engine before transforming to JSON. Read more about <a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a>.</p>
<table>
<thead>
<tr>
<th>Data Template Engine</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Object Key</em></td>
<td><code>dataTemplateEngine</code></td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>"liquid"</code> (before 1.0)</td>
</tr>
<tr>
<td><em>Default</em></td>
<td><code>false</code> (1.0 and above)</td>
</tr>
<tr>
<td><em>Valid Options</em></td>
<td>A valid <a href="https://www.11ty.dev/docs/languages/">template engine short name</a> or <code>false</code></td>
</tr>
<tr>
<td><em>Command Line Override</em></td>
<td><em>None</em></td>
</tr>
</tbody>
</table>
<p><a href="https://www.11ty.dev/docs/data-global/">Global JSON data files</a> (<em>not template/directory data files</em>) can be optionally preprocessed with a template engine specified under the <code>dataTemplateEngine</code> configuration option.</p>
<h2 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/data-preprocessing/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token string-property property">"dataTemplateEngine"</span><span class="token operator">:</span> <span class="token string">"njk"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>For example, if your <code>dataTemplateEngine</code> is using <code>njk</code> or <code>liquid</code> you can do this in any <code>*.json</code> files in your <code>_data</code> folder:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_data/myfile.json</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"{{ pkg.version }}"</span><br><span class="token punctuation">}</span></code></pre>
<p><code>package.json</code> data is available here supplied by Eleventy in the <code>pkg</code> variable.</p>
Template and Directory Data Files
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data-template-dir/
<h1>Template and Directory Specific Data Files</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/data-template-dir/#examples">Examples </a><ul><li><a href="https://www.11ty.dev/docs/data-template-dir/#apply-a-default-layout-to-multiple-templates">Apply a default layout to multiple templates </a></li></ul></li><li><a href="https://www.11ty.dev/docs/data-template-dir/#additional-customizations">Additional Customizations </a></li><li><a href="https://www.11ty.dev/docs/data-template-dir/#sources-of-data">Sources of Data </a></li></ul></div><p></p>
</details>
<p>While you can provide <a href="https://www.11ty.dev/docs/data-global/">global data files</a> to supply data to all of your templates, you may want some of your data to be available locally only to one specific template or to a directory of templates. For that use, we also search for JSON and <a href="https://www.11ty.dev/docs/data-js/">JavaScript Data Files</a> in specific places in your directory structure.</p>
<p>For example, consider a template located at <code>posts/subdir/my-first-blog-post.md</code>. Eleventy will look for data in the following places (starting with highest priority, local data keys override global data):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Content Template Front Matter Data</a>
<ul>
<li>merged with any <a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Layout Front Matter Data</a></li>
</ul>
</li>
<li>Template Data File (data is only applied to <code>posts/subdir/my-first-blog-post.md</code>)
<ul>
<li><code>posts/subdir/my-first-blog-post.11tydata.js</code> <a href="https://www.11ty.dev/docs/data-js/" class="minilink minilink-lower">JavaScript Data Files</a></li>
<li><code>posts/subdir/my-first-blog-post.11tydata.json</code></li>
<li><code>posts/subdir/my-first-blog-post.json</code></li>
</ul>
</li>
<li>Directory Data File (data applies to all templates in <code>posts/subdir/*</code>)
<ul>
<li><code>posts/subdir/subdir.11tydata.js</code> <a href="https://www.11ty.dev/docs/data-js/" class="minilink minilink-lower">JavaScript Data Files</a></li>
<li><code>posts/subdir/subdir.11tydata.json</code></li>
<li><code>posts/subdir/subdir.json</code></li>
</ul>
</li>
<li>Parent Directory Data File (data applies to all templates in <code>posts/**/*</code>, including subdirectories)
<ul>
<li><code>posts/posts.11tydata.js</code> <a href="https://www.11ty.dev/docs/data-js/" class="minilink minilink-lower">JavaScript Data Files</a></li>
<li><code>posts/posts.11tydata.json</code></li>
<li><code>posts/posts.json</code></li>
</ul>
</li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a> in <code>_data/*</code> (<code>.js</code> or <code>.json</code> files) available to all templates.</li>
</ol>
<h2 id="examples" tabindex="-1">Examples <a class="direct-link" href="https://www.11ty.dev/docs/data-template-dir/#examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="apply-a-default-layout-to-multiple-templates" tabindex="-1">Apply a default layout to multiple templates <a class="direct-link" href="https://www.11ty.dev/docs/data-template-dir/#apply-a-default-layout-to-multiple-templates">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>posts/posts.json</div>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"layout"</span><span class="token operator">:</span> <span class="token string">"layouts/post.njk"</span> <span class="token punctuation">}</span></code></pre>
<p>Using the above in <code>posts/posts.json</code> will configure a layout for all of the templates inside of <code>posts/*</code>.</p>
<h2 id="additional-customizations" tabindex="-1">Additional Customizations <a class="direct-link" href="https://www.11ty.dev/docs/data-template-dir/#additional-customizations">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>The name of the data file must match either the post or the directory it resides within. You can <a href="https://www.11ty.dev/docs/config/#change-base-file-name-for-data-files">change this behavior using the <code>setDataFileBaseName</code> method in the Configuration API</a>.</li>
<li>You can use the <a href="https://www.11ty.dev/docs/config/#change-file-suffix-for-data-files"><code>setDataFileSuffixes</code> Configuration API method to <strong>customize the default file suffixes or disable this feature altogether</strong></a>.</li>
<li>Note that any <a href="https://www.11ty.dev/docs/data-custom/#ordering-in-the-data-cascade">Custom Formats</a> specified in your configuration will also be taken into account at a lower priority than their JavaScript or JSON counterparts.</li>
</ul>
<h2 id="sources-of-data" tabindex="-1">Sources of Data <a class="direct-link" href="https://www.11ty.dev/docs/data-template-dir/#sources-of-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When the data is merged in the <a href="https://www.11ty.dev/docs/data-cascade/">Eleventy Data Cascade</a>, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a> ⬅</li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a> ⬅</li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em></li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a></li>
</ol>
Using Data
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/data/
<h1>Using Data</h1>
<p>Data can be used on a template from multiple different sources.</p>
<ul>
<li><a href="https://www.11ty.dev/docs/data-configuration/">Configure your Templates</a>: Set data to configure how your template behaves in Eleventy.</li>
<li><a href="https://www.11ty.dev/docs/data-eleventy-supplied/">Eleventy Supplied Data</a>: Use data that Eleventy provides to you.</li>
<li>Set your own data anywhere in the <a href="https://www.11ty.dev/docs/data-cascade/">Data Cascade</a> to render in your templates.</li>
</ul>
<h2 id="sources-of-data" tabindex="-1">Sources of Data <a class="direct-link" href="https://www.11ty.dev/docs/data/#sources-of-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When the data is merged in the <a href="https://www.11ty.dev/docs/data-cascade/">Eleventy Data Cascade</a>, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a></li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em></li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a></li>
</ol>
Performance
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/debug-performance/
<h1>Performance</h1>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’ll probably want to read the <a href="https://www.11ty.dev/docs/debugging/">Debug mode documentation</a> before continuing here.</div></div>
<p>Eleventy by default will warn you if certain pieces of your build take longer than 8% of your total build time. This list includes:</p>
<ul>
<li><a href="https://www.11ty.dev/docs/filters/">Filters/Helpers/11ty.js JavaScript Functions</a></li>
<li><a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a></li>
<li><a href="https://www.11ty.dev/docs/data/">Data Files</a></li>
<li>Resolving <code>--watch</code> Dependencies (not subject to the 8% rule—these only show if longer than <code>500ms</code> as watch tasks are not counted as part of the traditional build time)</li>
</ul>
<p>This list is not considered to be exhaustive. It’s just what has been implemented thus far!</p>
<h2 id="show-all-performance-measurements" tabindex="-1">Show All Performance Measurements <a class="direct-link" href="https://www.11ty.dev/docs/debug-performance/#show-all-performance-measurements">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can use the following <code>debug</code> command to show performance measurements for all of these entries (not just those that take longer than 8%).</p>
<h4 id="mac-os-(or-linux-etc)" tabindex="-1">Mac OS (or Linux, etc) <a class="direct-link" href="https://www.11ty.dev/docs/debug-performance/#mac-os-(or-linux-etc)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token assign-left variable">DEBUG</span><span class="token operator">=</span>Eleventy:Benchmark* npx @11ty/eleventy</code></pre>
<h4 id="windows" tabindex="-1">Windows <a class="direct-link" href="https://www.11ty.dev/docs/debug-performance/#windows">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">set</span> <span class="token assign-left variable">DEBUG</span><span class="token operator">=</span>Eleventy:Benchmark* <span class="token operator">&</span> npx @11ty/eleventy</code></pre>
<h3 id="aggregate-benchmarks" tabindex="-1">Aggregate Benchmarks <a class="direct-link" href="https://www.11ty.dev/docs/debug-performance/#aggregate-benchmarks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>We also have a special category of aggregate benchmarks to do higher level analysis. Look for entries like:</p>
<pre><code>Benchmark (Aggregate): Searching the file system took 40ms (0.5%, called 2×, 19.9ms each) +0ms
Benchmark (Aggregate): Data File took 134ms (1.8%, called 405×, 0.3ms each) +0ms
Benchmark (Aggregate): Template Read took 682ms (9.0%, called 600×, 1.1ms each) +0ms
Benchmark (Aggregate): Passthrough Copy File took 924ms (12.2%, called 669×, 1.4ms each) +0ms
Benchmark (Aggregate): Template Compile took 366ms (4.8%, called 1526×, 0.2ms each) +0ms
Benchmark (Aggregate): Template Render took 1215ms (16.1%, called 949×, 1.3ms each) +0ms
Benchmark (Aggregate): Template Write took 2088ms (27.6%, called 312×, 6.7ms each) +0ms
</code></pre>
<p>Note that while we do make every attempt to make these as accurate as possible, the percentages for these entries may be greater than 100% due to the asynchronous nature of these tasks (passthrough copy especially).</p>
log Filter
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/filters/log/
<h1><code>log</code> Universal Filter</h1>
<p>An easy way to <code>console.log</code> anything from inside of a template file.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/log/#log-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/log/#log-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/filters/log/#log-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/filters/log/#log-hbs" role="tab">Handlebars</a>
</div>
<div id="log-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"My Title"</span> <span class="token operator">|</span> <span class="token function filter">log</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="log-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token string">"My Title"</span> <span class="token operator">|</span> <span class="token variable">log</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="log-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Caveat: you have access to `console.log` here, so probably use that.</span><br> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"My Title"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>is functionally the same as running <code>console.log("My Title")</code> inside of your template.</p>
<h3 id="using-log-in-filter-chains" tabindex="-1">Using <code>log</code> in filter chains <a class="direct-link" href="https://www.11ty.dev/docs/filters/log/#using-log-in-filter-chains">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.13">Added in v2.0.0</span></p>
<p>You can drop log in between any filter chain you already have and it will log the incoming data and pass it through to the next filter.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/filters/log/#log-chain-demo-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/filters/log/#log-chain-demo-njk" role="tab">Nunjucks</a>
</div>
<div id="log-chain-demo-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"My Title"</span> <span class="token operator">|</span> <span class="token function filter">log</span> <span class="token operator">|</span> <span class="token function filter">upcase</span> <span class="token delimiter punctuation">}}</span></span><br><br>This is the same as:<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> temp <span class="token operator">=</span> <span class="token string">"My Title"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> temp <span class="token operator">|</span> <span class="token function filter">log</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> temp <span class="token operator">|</span> <span class="token function filter">upcase</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="log-chain-demo-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token string">"My Title"</span> <span class="token operator">|</span> <span class="token variable">log</span> <span class="token operator">|</span> <span class="token variable">upper</span> <span class="token delimiter punctuation">}}</span></span><br><br>This is the same as:<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">temp</span> <span class="token operator">=</span> <span class="token string">"My Title"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">temp</span> <span class="token operator">|</span> <span class="token variable">log</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">temp</span> <span class="token operator">|</span> <span class="token variable">upper</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<ul>
<li><a href="https://www.11ty.dev/docs/filters/">← Back to Filters documentation.</a></li>
</ul>
Eleventy 中文文档
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/filters/slug/
<h1><code>slug</code> Universal Filter</h1>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">Starting in Eleventy v1.0.0 it is recommended to use <a href="https://www.11ty.dev/docs/filters/slugify/">the <code>slugify</code> Universal Filter</a> instead of <code>slug</code>. For backwards compatibility, <code>slug</code> is still included and supported but <code>slugify</code> has better default behavior for URLs with special characters. <strong>If you want to swap <code>slug</code> to <code>slugify</code> wholesale in old projects, please <a href="https://www.11ty.dev/docs/filters/slugify/#upgrade-from-slug-to-slugify">read this warning about breaking URLs</a>. Be careful!</strong></div></div>
<p>Uses the <a href="https://www.npmjs.com/package/slugify"><code>slugify</code> npm package</a> to convert a string into a URL slug. Can be used in pagination or permalinks.</p>
<div class="codetitle codetitle-left"><b>Filename </b>slug.md</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token string">"My Title"</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"/{{ title | slugify }}/"</span><br><span class="token punctuation">---</span><br>Outputs to `/my<span class="token punctuation">-</span>title/`.</code></pre>
<ul>
<li><a href="https://www.11ty.dev/docs/filters/slugify/"><code>slugify</code> Universal Filter</a></li>
<li><a href="https://www.11ty.dev/docs/filters/">← Back to Filters documentation.</a></li>
</ul>
slugify Filter
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/filters/slugify/
<h1><code>slugify</code> Universal Filter <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span></h1>
<p>Uses the <a href="https://www.npmjs.com/package/@sindresorhus/slugify"><code>@sindresorhus/slugify</code> npm package</a> to convert a string into a URL slug. Typically used with permalinks.</p>
<div class="codetitle codetitle-left"><b>Filename </b>slugify.md</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token string">"My Title"</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"/{{ title | slugify }}/"</span><br><span class="token punctuation">---</span><br>Outputs to `/my<span class="token punctuation">-</span>title/`.</code></pre>
<ul>
<li><a href="https://www.11ty.dev/docs/filters/slug/"><code>slug</code> Universal Filter</a></li>
<li><a href="https://www.11ty.dev/docs/filters/">← Back to Filters documentation.</a></li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">In versions prior to 1.0.0, <a href="https://www.11ty.dev/docs/filters/slug/">the <code>slug</code> Universal Filter was used</a>. To maintain backwards compatibility moving forward, <code>slug</code> is still included and supported but <code>slugify</code> is now recommended as best practice—it has better default behavior for URLs with special characters.</div></div>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><code>slugify</code> currently <a href="https://github.com/sindresorhus/transliterate/issues/1">ignores characters for Japanese, Chinese, and others</a>. If you need to slugify these characters, <a href="https://www.11ty.dev/docs/filters/">add your own universal filter</a> with an alternative library like <a href="https://github.com/lovell/limax"><code>limax</code></a> or <a href="https://github.com/dzcpy/transliteration"><code>transliteration</code></a>. (More context at <a href="https://github.com/11ty/eleventy/issues/2537">Issue #2537</a>)</div></div>
<h3 id="upgrade-from-slug-to-slugify" tabindex="-1">Upgrade from <code>slug</code> to <code>slugify</code> <a class="direct-link" href="https://www.11ty.dev/docs/filters/slugify/#upgrade-from-slug-to-slugify">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you’re trying to migrate the content in a pre-1.0 project from using the <code>slug</code> filter to the new <code>slugify</code> filter (note: this is optional—you can leave them as-is!), you must take extra care to make sure that any existing URLs don’t change. The <a href="https://github.com/11ty/eleventy-upgrade-help"><code>@11ty/eleventy-upgrade-help</code> plugin will compare the <code>slug</code> and <code>slugify</code> versions of your URLs to see if there are any that require extra attention</a> (thank you to Peter deHaan for the assist here!).</p>
url Filter
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/filters/url/
<h1><code>url</code> Universal Filter</h1>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">If you need to deploy your site to a subfolder, it’s recommended to use the simpler <a href="https://www.11ty.dev/docs/plugins/html-base/">HTML <code><base></code> plugin</a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.15">Added in v2.0.0</span> with <code>pathPrefix</code> instead of having to litter the <code>url</code> filter throughout your content moving forward!</div></div>
<p>Works with the <code>pathPrefix</code> configuration option to properly normalize absolute paths in your content with the <code>pathPrefix</code> added. Useful if you host your site on GitHub Pages, which normally live in a subdirectory, e.g. <code>https://11ty.github.io/eleventy-base-blog/</code>. We set <code>pathPrefix: "/eleventy-base-blog/"</code> and our absolute links all have this prepended to the beginning.</p>
<p><em><strong>Note that if you don’t need <code>pathPrefix</code> (or don’t ever plan on moving your site’s top-level directory structure), you probably don’t need to use the <code>url</code> filter.</strong></em></p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ '/myDir/' | url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Liquid or Nunjucks Link (from string)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.url | url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Liquid or Nunjucks Link (from variable)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<h5>Sample URL Transformations</h5>
<table>
<thead>
<tr>
<th>Sample URL</th>
<th><code>pathPrefix</code></th>
<th>Return value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>''</code></td>
<td><code>'/'</code></td>
<td><code>'.'</code> ⚠️ This style is probably not what you want—careful!</td>
</tr>
<tr>
<td><code>'/'</code></td>
<td><code>'/'</code></td>
<td><code>'/'</code></td>
</tr>
<tr>
<td><code>'./'</code></td>
<td><code>'/'</code></td>
<td><code>'./'</code></td>
</tr>
<tr>
<td><code>'..'</code></td>
<td><code>'/'</code></td>
<td><code>'..'</code></td>
</tr>
<tr>
<td><code>'myDir'</code></td>
<td><code>'/'</code></td>
<td><code>'myDir'</code> ⚠️ This style is not safe for globally linking to other content. Be careful!</td>
</tr>
<tr>
<td><code>'/myDir/'</code></td>
<td><code>'/'</code></td>
<td><code>'/myDir/'</code></td>
</tr>
<tr>
<td><code>'./myDir/'</code></td>
<td><code>'/'</code></td>
<td><code>'myDir/'</code> ⚠️ This style is not safe for globally linking to other content. Be careful!</td>
</tr>
<tr>
<td><code>'../myDir/'</code></td>
<td><code>'/'</code></td>
<td><code>'../myDir/'</code></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Sample URL</th>
<th><code>pathPrefix</code></th>
<th>Return value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>''</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'.'</code> ⚠️ This style is probably not what you want—careful!</td>
</tr>
<tr>
<td><code>'/'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'/rootDir/'</code></td>
</tr>
<tr>
<td><code>'./'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'./'</code></td>
</tr>
<tr>
<td><code>'..'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'..'</code></td>
</tr>
<tr>
<td><code>'myDir'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'myDir'</code> ⚠️ This style is probably not what you want—careful!</td>
</tr>
<tr>
<td><code>'/myDir/'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'/rootDir/myDir/'</code></td>
</tr>
<tr>
<td><code>'./myDir/'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'myDir/'</code> ⚠️ This style is probably not what you want—careful!</td>
</tr>
<tr>
<td><code>'../myDir/'</code></td>
<td><code>'/rootDir/'</code></td>
<td><code>'../myDir/'</code></td>
</tr>
</tbody>
</table>
Ignore Files
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/ignores/
<h1>Ignore Template Files</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/ignores/#configuration-api">Configuration API </a></li><li><a href="https://www.11ty.dev/docs/ignores/#defaults">Defaults </a><ul><li><a href="https://www.11ty.dev/docs/ignores/#.gitignore-entries">.gitignore entries </a></li><li><a href="https://www.11ty.dev/docs/ignores/#node_modules">node_modules </a></li></ul></li><li><a href="https://www.11ty.dev/docs/ignores/#ignore-file-locations">Ignore File Locations </a></li><li><a href="https://www.11ty.dev/docs/ignores/#opt-out-of-using-.gitignore">Opt-out of using .gitignore </a></li></ul></div><p></p>
</details>
<p>Add an <code>.eleventyignore</code> file to your <em>input</em> directory or <em>project root</em> directory for a new line-separated list of files (or globs) that will not be processed by Eleventy. Note that any paths listed in your project’s <code>.gitignore</code> file are automatically ignored—you don’t need to duplicate them to your <code>.eleventyignore</code> file. <a href="https://www.11ty.dev/docs/config/#directory-for-includes">Layouts, include files, extends, partials, macros, and other lower level template features</a> aren’t relevant to this feature.</p>
<h4 id="sample-.eleventyignore" tabindex="-1">Sample <code>.eleventyignore</code> <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#sample-.eleventyignore">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventyignore</div>
<pre><code>README.md
_drafts/
secretNunjucksTemplates/anotherFolder/**/*.njk
</code></pre>
<h2 id="configuration-api" tabindex="-1">Configuration API <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#configuration-api">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can programmatically add and delete ignores in your configuration file. <code>eleventyConfig.ignores</code> is a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#instance_methods"><code>Set</code></a>.</p>
<p>The <code>ignores</code> Set starts with a default <code>**/node_modules/**</code> entry in Eleventy v2.0 (it was <code>node_modules/**</code> in v1.0).</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span>ignores<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"README.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span>ignores<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"README.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.18">Added in v2.0.0</span>These were decoupled from the <a href="https://www.11ty.dev/docs/watch-serve/#ignore-watching-files">ignores used for the file watcher</a>.</p>
<h2 id="defaults" tabindex="-1">Defaults <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#defaults">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id=".gitignore-entries" tabindex="-1"><code>.gitignore</code> entries <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#.gitignore-entries">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Paths listed in your project’s <code>.gitignore</code> file are automatically ignored. You can <a href="https://www.11ty.dev/docs/ignores/#opt-out-of-using-.gitignore">opt-out of this behavior</a>.</p>
<h3 id="node_modules" tabindex="-1"><code>node_modules</code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#node_modules">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><code>node_modules</code> folders are always ignored by Eleventy. This makes new Eleventy projects easier and helps developers new to Eleventy get ramped up easier too.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The <code>node_modules</code> behavior in Eleventy <code>1.0</code> only ignores the project root <code>node_modules/**</code>. Eleventy <code>2.0.0-canary.15</code> and newer ignores all <code>node_modules</code> folders using <code>**/node_modules/**</code>.</div></div>
<p>If you want to opt-out and search for templates inside of your <code>node_modules</code> folder, delete the entry using the Configuration API:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// in Eleventy 2.0</span><br> eleventyConfig<span class="token punctuation">.</span>ignores<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"**/node_modules/**"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// in Eleventy 1.0</span><br> eleventyConfig<span class="token punctuation">.</span>ignores<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"node_modules/**"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The <code>node_modules</code> behavior changed in Eleventy <code>1.0</code>. If you’re still using <a href="https://v0-12-1.11ty.dev/docs/ignores/#node_modules-exemption">Eleventy <code>0.x</code>, read the <code>0.x</code> documentation</a>.</div></div>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="hJAtWQ9nmKU" params="start=724" playlabel="Play: New <code>node_modules</code> ignores default (Changelog №17)" style="background-image:url('https://i.ytimg.com/vi/hJAtWQ9nmKU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=hJAtWQ9nmKU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: New <code>node_modules</code> ignores default (Changelog №17)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=hJAtWQ9nmKU&t=724">New <code>node_modules</code> ignores default (Changelog №17) <code>▶12m4s</code></a></is-land></div></div>
<h2 id="ignore-file-locations" tabindex="-1">Ignore File Locations <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#ignore-file-locations">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>We look for ignores in these files. Entries are relative to the ignore file’s location.</p>
<ul>
<li>Project root directory (top level, where you ran Eleventy from)
<ul>
<li><code>.eleventyignore</code></li>
<li><code>.gitignore</code></li>
</ul>
</li>
<li>Input directory (while this matches the project root by default, these can be different <a href="https://www.11ty.dev/docs/usage/">using <code>--input</code></a>)
<ul>
<li><code>.eleventyignore</code></li>
</ul>
</li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Starting in Eleventy <code>1.0</code> support for a <code>.gitignore</code> file in a separate input directory was removed. Read more at <a href="https://github.com/11ty/eleventy/issues/364">Issue #364</a>.</div></div>
<h2 id="opt-out-of-using-.gitignore" tabindex="-1">Opt-out of using <code>.gitignore</code> <a class="direct-link" href="https://www.11ty.dev/docs/ignores/#opt-out-of-using-.gitignore">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can disable automatic use of your <code>.gitignore</code> file by using the Configuration API method: <code>eleventyConfig.setUseGitIgnore(false);</code>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setUseGitIgnore</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>When using <code>.gitignore</code> is disabled, <code>.eleventyignore</code> will be the single source of truth for ignored files. This also means that your <code>node_modules</code> directory will be processed unless otherwise specified in your <code>.eleventyignore</code> file.</p>
Template Languages
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/
<h1>模板语言</h1>
<ul class="inlinelist"><li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/html/">HTML <code>*.html</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/markdown/">Markdown <code>*.md</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/webc/">WebC <code>*.webc</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/javascript/">JavaScript <code>*.11ty.js</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/liquid/">Liquid <code>*.liquid</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/nunjucks/">Nunjucks <code>*.njk</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/handlebars/">Handlebars <code>*.hbs</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/mustache/">Mustache <code>*.mustache</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/ejs/">EJS <code>*.ejs</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/haml/">Haml <code>*.haml</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/pug/">Pug <code>*.pug</code></a></li> <li class="inlinelist-item"><a href="https://www.11ty.dev/docs/languages/custom/">Custom <code>*.*</code></a></li></ul>
<h2 id="重置模板引擎" tabindex="-1">重置模板引擎 <a class="direct-link" href="https://www.11ty.dev/docs/languages/#%E9%87%8D%E7%BD%AE%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>有以下几种方式来告诉 Eleventy 如何处理文件:</p>
<ol>
<li>文件扩展名(重要,也被用于查找需要处理的文件)。</li>
<li><a href="https://www.11ty.dev/docs/config/">配置参数</a>:
<ul>
<li><code>markdownTemplateEngine</code>: 全局设置预处理 markdown 文件所使用的模板引擎。如果设置为 <code>false</code> 则仅转换 markdown 文件而不做预处理。</li>
<li><code>htmlTemplateEngine</code>: 全局设置预处理 HTML 文件所使用的模板引擎。如果设置为 <code>false</code> 则仅复制文件(HTML 文件不做任何转换,技术上来讲,文件内可以是任何纯文本内容)而不做预处理。</li>
</ul>
</li>
<li>在模板的 front matter 中设置 <code>templateEngineOverride</code>。只能设置为 <em>单一的</em> 模板引擎(例如 <code>liquid</code>)或者是 markdown 与其配对的模板引擎 (例如 <code>liquid,md</code>)。示例如下:</li>
</ol>
<h3 id="templateengineoverride-示例" tabindex="-1"><code>templateEngineOverride</code> 示例 <a class="direct-link" href="https://www.11ty.dev/docs/languages/#templateengineoverride-%E7%A4%BA%E4%BE%8B">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="改变文件对应的模板引擎" tabindex="-1">改变文件对应的模板引擎 <a class="direct-link" href="https://www.11ty.dev/docs/languages/#%E6%94%B9%E5%8F%98%E6%96%87%E4%BB%B6%E5%AF%B9%E5%BA%94%E7%9A%84%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>如果你的文件名是 <code>example.liquid</code>,经过以下设置,其不再用 <code>liquid</code> 引擎处理,而是用 Nunjucks(<code>njk</code>)模板引擎处理:</p>
<div class="codetitle codetitle-left"><b>Filename </b>example.liquid</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">templateEngineOverride</span><span class="token punctuation">:</span> njk</span><br><span class="token punctuation">---</span></span></code></pre>
<h4 id="特殊情况:为-markdown-配对一个模板引擎" tabindex="-1">特殊情况:为 Markdown 配对一个模板引擎 <a class="direct-link" href="https://www.11ty.dev/docs/languages/#%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5%EF%BC%9A%E4%B8%BA-markdown-%E9%85%8D%E5%AF%B9%E4%B8%80%E4%B8%AA%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>请记住,默认情况下,Markdown 文件会被预先用 <code>markdownTemplateEngine</code> 参数所设置的模板引擎进行预处理。因此,为 markdown 文件设置 <code>templateEngineOverride</code> 参数时,务必列出你所要使用的每个模板引擎(也就是说最后一个必须是 <code>md</code>)。</p>
<p>例如,你可能希望先用 Nunjucks(<code>njk</code> )预处理,然后作为 markdown(<code>md</code>) 再次处理。只有 Markdown 支持这种方式,其他模板都不可以以这种方式组合。Markdown 是这里的唯一例外。任何其它组合都会报错。</p>
<h5>只作为 Markdown 处理,不做任何其他预处理</h5>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">templateEngineOverride</span><span class="token punctuation">:</span> md</span><br><span class="token punctuation">---</span></span></code></pre>
<h5>先用 Nunjucks 预处理,再做为 Markdown 处理</h5>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">templateEngineOverride</span><span class="token punctuation">:</span> njk<span class="token punctuation">,</span>md</span><br><span class="token punctuation">---</span></span></code></pre>
<h5>什么也不用(即,不做转换)</h5>
<p>赋予 <code>false</code> 值时,只复制模板内容而不做任何转换。</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">templateEngineOverride</span><span class="token punctuation">:</span> <span class="token boolean important">false</span></span><br><span class="token punctuation">---</span></span></code></pre>
Template Language—Custom
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/custom/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/custom/#introductory-example-*.clowd">Introductory Example: *.clowd </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#example-add-sass-support-to-eleventy">Example: Add Sass support to Eleventy </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#using-inputpath">Using inputPath </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#registering-dependencies">Registering Dependencies </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#skipping-a-template-from-inside-of-the-compile-function">Skipping a template from inside of the compile function </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#aliasing-an-existing-template-language">Aliasing an Existing Template Language </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#overriding-a-built-in-template-language">Overriding a Built-in Template Language </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#full-options-list">Full Options List </a><ul><li><a href="https://www.11ty.dev/docs/languages/custom/#compile">compile </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#outputfileextension">outputFileExtension </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#init">init </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#read">read </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#getdata-and-getinstancefrominputpath">getData and getInstanceFromInputPath </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#compileoptions">compileOptions </a></li><li><a href="https://www.11ty.dev/docs/languages/custom/#isincrementalmatch">isIncrementalMatch </a></li></ul></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>(Any)</em></td>
<td><code>.*</code> <em>(Any)</em></td>
<td><em>(Any)</em></td>
</tr>
</tbody>
</table>
<p>Eleventy now allows the addition of custom template extensions, meaning that you can use Eleventy to process any arbitrary file extension and compile it to your site’s output folder. This feature is <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span><!-- Beta 10 or Canary 50 -->.</p>
<h2 id="introductory-example-*.clowd" tabindex="-1">Introductory Example: <code>*.clowd</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#introductory-example-*.clowd">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><code>clowd</code> is a pretend templating language that we’ve just created. It uses the <code>.clowd</code> file extension. The purpose of the language is to translate any occurrences of the word <code>cloud</code> to the word <code>butt</code> instead.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Add as a valid extension to process</span><br> <span class="token comment">// Alternatively, add this to the list of formats you pass to the `--formats` CLI argument</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addTemplateFormats</span><span class="token punctuation">(</span><span class="token string">"clowd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// "clowd" here means that the extension will apply to any .clowd file</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addExtension</span><span class="token punctuation">(</span><span class="token string">"clowd"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">inputContent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Replace any instances of cloud with butt</span><br> <span class="token keyword">let</span> output <span class="token operator">=</span> inputContent<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">cloud</span><span class="token regex-delimiter">/</span><span class="token regex-flags">gi</span></span><span class="token punctuation">,</span> <span class="token string">"butt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> output<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><p>Situations where you might want to use <code>addExtension</code> but probably shouldn’t:</p>
<ol>
<li>If you want to post-process the content of an existing template language (a file extension already processed by Eleventy), use a <a href="https://www.11ty.dev/docs/config/#transforms">Configuration API Transform</a> instead.</li>
<li>If you want to pre-process <code>md</code> or <code>html</code> files using another template language, change the <em>Default Template Engine for <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">Markdown Files</a></em> or <em><a href="https://www.11ty.dev/docs/config/#default-template-engine-for-html-files">HTML Files</a></em>, respectively. This can also be done on <a href="https://www.11ty.dev/docs/languages/#overriding-the-template-language">a per-template basis</a>. We will likely add additional hooks for preprocessing in the future.</li>
</ol>
</div></div>
<h2 id="example-add-sass-support-to-eleventy" tabindex="-1">Example: Add Sass support to Eleventy <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#example-add-sass-support-to-eleventy">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>For a more realistic sample, here’s an example of Eleventy looking for all <code>.scss</code> files in a project’s input directory to process them to your output directory.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// Don’t forget to `npm install sass`!</span><br><span class="token keyword">const</span> sass <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sass"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addTemplateFormats</span><span class="token punctuation">(</span><span class="token string">"scss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Creates the extension for use</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addExtension</span><span class="token punctuation">(</span><span class="token string">"scss"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">outputFileExtension</span><span class="token operator">:</span> <span class="token string">"css"</span><span class="token punctuation">,</span> <span class="token comment">// optional, default: "html"</span><br><br> <span class="token comment">// `compile` is called once per .scss file in the input directory</span><br> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">inputContent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> result <span class="token operator">=</span> sass<span class="token punctuation">.</span><span class="token function">compileString</span><span class="token punctuation">(</span>inputContent<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// This is the render function, `data` is the full data cascade</span><br> <span class="token keyword">return</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> result<span class="token punctuation">.</span>css<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>We’re using <code>compileString</code> from the Sass library above for speed benefits over their asynchronous counterparts (reported by <a href="https://sass-lang.com/documentation/js-api#usage">the Sass documentation</a>).</p>
<p>Note also that the <code>data</code> is not used in the above example. This is the full Eleventy data cascade and may be more useful in other templating languages.</p>
<p>The above extension would process a file located at <code>subdir/test.scss</code> to the output directory at <code>_site/subdir/test.css</code>.</p>
<h2 id="using-inputpath" tabindex="-1">Using <code>inputPath</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#using-inputpath">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can pass in both the file’s <code>inputPath</code> and the Eleventy includes folder to provide a set of directories to look for when using Sass’ <code>@use</code>, <code>@forward</code>, and <code>@import</code> features. Read more about <a href="https://sass-lang.com/documentation/js-api/interfaces/Options#loadPaths"><code>loadPaths</code> on the Sass documentation</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">const</span> sass <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sass"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"node:path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token comment">// add as a valid template language to process, e.g. this adds to --formats</span></span><br><span class="highlight-line"> eleventyConfig<span class="token punctuation">.</span><span class="token function">addTemplateFormats</span><span class="token punctuation">(</span><span class="token string">"scss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> eleventyConfig<span class="token punctuation">.</span><span class="token function">addExtension</span><span class="token punctuation">(</span><span class="token string">"scss"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token literal-property property">outputFileExtension</span><span class="token operator">:</span> <span class="token string">"css"</span><span class="token punctuation">,</span> <span class="token comment">// optional, default: "html"</span></span><br><span class="highlight-line"></span><br><mark class="highlight-line highlight-line-active"> <span class="token comment">// can be an async function</span></mark><br><mark class="highlight-line highlight-line-active"> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">inputContent<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></mark><br><span class="highlight-line"> <span class="token keyword">let</span> parsed <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>inputPath<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token keyword">let</span> result <span class="token operator">=</span> sass<span class="token punctuation">.</span><span class="token function">compileString</span><span class="token punctuation">(</span>inputContent<span class="token punctuation">,</span> <span class="token punctuation">{</span></span><br><mark class="highlight-line highlight-line-active"> <span class="token literal-property property">loadPaths</span><span class="token operator">:</span> <span class="token punctuation">[</span></mark><br><mark class="highlight-line highlight-line-active"> parsed<span class="token punctuation">.</span>dir <span class="token operator">||</span> <span class="token string">"."</span><span class="token punctuation">,</span></mark><br><mark class="highlight-line highlight-line-active"> <span class="token keyword">this</span><span class="token punctuation">.</span>config<span class="token punctuation">.</span>dir<span class="token punctuation">.</span>includes</mark><br><mark class="highlight-line highlight-line-active"> <span class="token punctuation">]</span></mark><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">return</span> result<span class="token punctuation">.</span>css<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre>
<p>Make special note of the <code>this.config.dir.includes</code> folder above. Declaring your includes folder means that you don’t need to prefix any file paths with the includes folder name (e.g. <code>_includes/_code.scss</code> can be consumed with <code>@use "code"</code>).</p>
<h2 id="registering-dependencies" tabindex="-1">Registering Dependencies <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#registering-dependencies">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy includes two features to improve the performance of custom template compilation:</p>
<ol>
<li>A compilation cache, which you can optionally disable with <a href="https://www.11ty.dev/docs/languages/custom/#compileoptions.cache-for-advanced-control-of-caching"><code>compileOptions.cache</code></a></li>
<li>Hooks for incremental builds (via the <code>--incremental</code> command line flag)</li>
</ol>
<p>To facilitate these features, if a template syntax allows use of other templates (think <code>@use</code> in Sass or <code>webc:import</code> in WebC), Eleventy needs to know about the dependencies a template file relies on. This is heavily dependent on each template compiler.</p>
<p>In our Sass example, this is exposed by Sass via the <a href="https://sass-lang.com/documentation/js-api/interfaces/CompileResult"><code>loadedUrls</code> property from the <code>compileString</code> function</a>, and you can see an example of how we register our dependencies in the <code>compile</code> method below:</p>
<pre class="language-js"><code class="language-js"><span class="highlight-line"> <span class="token comment">// some configuration truncated …</span></span><br><span class="highlight-line"> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">inputContent<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">let</span> result <span class="token operator">=</span> sass<span class="token punctuation">.</span><span class="token function">compileString</span><span class="token punctuation">(</span>inputContent<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><mark class="highlight-line highlight-line-active"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addDependencies</span><span class="token punctuation">(</span>inputPath<span class="token punctuation">,</span> result<span class="token punctuation">.</span>loadedUrls<span class="token punctuation">)</span><span class="token punctuation">;</span></mark><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token keyword">return</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">return</span> result<span class="token punctuation">.</span>css<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<p><code>addDependencies</code>’s first parameter is the parent template file path. The second parameter is an Array of child file paths used by the template. The dependencies can be either relative or absolute paths and we will normalize them as needed.</p>
<h2 id="skipping-a-template-from-inside-of-the-compile-function" tabindex="-1">Skipping a template from inside of the <code>compile</code> function <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#skipping-a-template-from-inside-of-the-compile-function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>To add support for Sass’ underscore convention (file names that start with an underscore aren’t written to the output directory), just return early in the <code>compile</code> function (don’t return a <code>render</code> function).</p>
<pre class="language-js"><code class="language-js"><span class="highlight-line"> <span class="token comment">// some configuration truncated …</span></span><br><span class="highlight-line"> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">inputContent<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">let</span> parsed <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>inputPath<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><mark class="highlight-line highlight-line-active"> <span class="token keyword">if</span><span class="token punctuation">(</span>parsed<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">"_"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></mark><br><mark class="highlight-line highlight-line-active"> <span class="token keyword">return</span><span class="token punctuation">;</span></mark><br><mark class="highlight-line highlight-line-active"> <span class="token punctuation">}</span></mark><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token keyword">let</span> result <span class="token operator">=</span> sass<span class="token punctuation">.</span><span class="token function">compileString</span><span class="token punctuation">(</span>inputContent<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token keyword">return</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">return</span> result<span class="token punctuation">.</span>css<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<p>Note that files inside of the <code>_includes</code> folder are left out of processing by default, so if you store your sass <code>@use</code>, <code>@forward</code>, and <code>@import</code> files in there you’ll get this for free (see the <a href="https://www.11ty.dev/docs/languages/custom/#using-inputpath">Using <code>inputPath</code> example</a> above)!</p>
<p>This functionality is more-or-less identical to the <a href="https://www.11ty.dev/docs/languages/custom/#compileoptions.permalink-to-override-permalink-compilation"><code>compileOptions</code> <code>permalink: false</code> overrides</a>, documented later on this page.</p>
<h2 id="aliasing-an-existing-template-language" tabindex="-1">Aliasing an Existing Template Language <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#aliasing-an-existing-template-language">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span> If <code>key</code> is the <em>only</em> property in the options object, we treat the extension as an alias and use the existing upstream template syntax.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addExtension</span><span class="token punctuation">(</span><span class="token string">"11ty.jsx"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"11ty.js"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Or, you can pass an array of extensions in v2.0.0 or newer.</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addExtension</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">"11ty.jsx"</span><span class="token punctuation">,</span> <span class="token string">"11ty.ts"</span><span class="token punctuation">,</span> <span class="token string">"11ty.tsx"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"11ty.js"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>You can use aliasing with <code>esbuild-register</code> to use first-party JSX, TypeScript, and TSX files in Eleventy (using the same conventions as <a href="https://www.11ty.dev/docs/languages/javascript/"><code>11ty.js</code> templates</a>, with these templates populating back into the Data Cascade). Check out the <a href="https://gist.github.com/zachleat/b274ee939759b032bc320be1a03704a2">full gist from <code>@pspeter3</code> on GitHub</a>.</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">node</span> <span class="token parameter variable">--require</span> esbuild-register node_modules/.bin/eleventy</code></pre>
<h2 id="overriding-a-built-in-template-language" tabindex="-1">Overriding a Built-in Template Language <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#overriding-a-built-in-template-language">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><span id="#overriding-an-existing-template-language"></span> You can override built-in template languages too! (Thank you to <a href="https://github.com/11ty/eleventy/pull/1871">Ben Holmes of Slinkity for this contribution</a>).</p>
<p>In these example, we switch from the Eleventy default <code>markdown-it</code> to <code>marked</code> for markdown processing.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> marked <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"marked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addExtension</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">inputContent<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> html <span class="token operator">=</span> marked<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>inputContent<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Example: use `marked` only if useMarked is set in the Data Cascade</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>useMarked<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> html<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// You can also access the default `markdown-it` renderer here:</span><br> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">defaultRenderer</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Note that overriding <code>md</code> opts-out of the default pre-processing by another template language <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">Markdown Files</a>. As mentioned elsewhere, improvements to add additional hooks for preprocessing will likely come later.</p>
<p>You can override an existing template language once. Attempts to override an override will throw an error (though this may be relaxed later).</p>
<h2 id="full-options-list" tabindex="-1">Full Options List <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#full-options-list">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="compile" tabindex="-1"><code>compile</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#compile">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><em>Required</em> for new file extensions. <em>Optional</em> for <a href="https://www.11ty.dev/docs/languages/custom/#overriding-an-existing-template-language">extension overrides</a>.</li>
</ul>
<p><code>compile</code> is an async-friendly function that takes two parameters:</p>
<ul>
<li><code>inputContent</code>: the full content of the file to parse (as a string).</li>
<li><code>inputPath</code>: the path to the file (as a string, useful for looking up relative imports)</li>
</ul>
<p><code>compile</code> can return:</p>
<ul>
<li>nothing (<code>undefined</code>) to indicate that the file should be ignored and not used as a page</li>
<li>a render function (also async-friendly)</li>
</ul>
<pre class="language-js"><code class="language-js"> <span class="token function-variable function">compile</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">inputContent<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> inputContent<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span></code></pre>
<p>The render function is passed the merged data object (i.e. the full Data Cascade available inside templates). The render function returned from <code>compile</code> is called once per output file generated (one for basic templates and more for <a href="https://www.11ty.dev/docs/pagination/">paginated templates</a>).</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><code>inputContent</code> will <strong>not include front matter</strong>. This will have been parsed, removed, and inserted into the Data Cascade. Also note that if <code>read: false</code> (as documented below), <code>inputContent</code> will be <code>undefined</code>.</div></div>
<h3 id="outputfileextension" tabindex="-1"><code>outputFileExtension</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#outputfileextension">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><em>Optional</em>: Defaults to <code>html</code></li>
</ul>
<p>When the output file is written to the file system, what file extension should be used?</p>
<h3 id="init" tabindex="-1"><code>init</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#init">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><em>Optional</em></li>
</ul>
<p>An async-friendly function that runs <em>once</em> (no matter how many files use the extension) for any additional setup at the beginning before any compilation or rendering.</p>
<p>Note that <code>init</code> will <strong>not</strong> re-run on watch/serve mode. If you’d like something that runs before <em>every</em> build, use the <a href="https://www.11ty.dev/docs/events/#eleventy.before"><code>eleventy.before</code> event</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token function-variable function">init</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// has access to current configuration settings in `this.config`</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="read" tabindex="-1"><code>read</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#read">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><em>Optional</em>: Defaults to <code>true</code></li>
</ul>
<p>Set to <code>false</code> to opt out of reading the contents of files from the file system. This is useful if you’re using an external bundler to read the files (e.g. the Vue plugin uses rollup to read and compile <code>.vue</code> files).</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">read</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span></code></pre>
<p>Use with <code>compileOptions.setCacheKey</code> to get more fine-grained control over how the template is cached.</p>
<!-- ## `extension`
You probably won’t need this but it’s useful if your extension doesn’t match the template language key. -->
<h3 id="getdata-and-getinstancefrominputpath" tabindex="-1"><code>getData</code> and <code>getInstanceFromInputPath</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#getdata-and-getinstancefrominputpath">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><em>Optional</em></li>
</ul>
<p>Controls if and how additional data should be retrieved from a JavaScript object to populate the Data Cascade. If your templates aren’t compiling JavaScript objects, you probably won’t need this.</p>
<p>Notably, this is separate from (in addition to) front matter parsing (which requires <code>read: true</code>). As an example, this is used by the Vue plugin to retrieve the return from the Vue <code>data()</code> function in the Vue component to feed back into the Data Cascade.</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token comment">// this is the default</span><br> <span class="token literal-property property">getData</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// no additional data is used</span><br><span class="token punctuation">}</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token function-variable function">getData</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// DIY, this object will be merged into data cascade</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token comment">// get the `data` property from the instance.</span><br> <span class="token literal-property property">getData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"data"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br> <span class="token comment">// * `getData: true` is aliased to ["data"]</span><br> <span class="token comment">// * You can use more than one property name! ["data", "otherPropName"]</span><br><br> <span class="token function-variable function">getInstanceFromInputPath</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Return the JavaScript object from which the `data` property will be retrieved.</span><br> <span class="token keyword">let</span> instance <span class="token operator">=</span> <span class="token function">doSomethingMyselfToFetchAJavaScriptObject</span><span class="token punctuation">(</span>inputPath<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> instance<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<details>
<summary><strong><em>Advanced Use Case:</em></strong> overriding <code>getData</code> keys for one instance</summary>
<p>If the JavaScript object returned from <code>getInstanceFromInputPath</code> has an <code>eleventyDataKey</code> property, this is used to override the keys returned from the <code>getData</code> Array for this specific instance only. Anything you can pass into a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set"><code>new Set()</code> constructor</a> works here (Array, Map, another Set).</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token comment">// if getData is `false`, `eleventyDataKey` will not be used.</span><br> <span class="token literal-property property">getData</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br><br> <span class="token function-variable function">getInstanceFromInputPath</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token comment">// Overrides `getData` for this instance</span><br> <span class="token literal-property property">eleventyDataKey</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"myOverrideData"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Will not be used</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">notAvailableOnGlobalData</span><span class="token operator">:</span> <span class="token number">456</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Will be used.</span><br> <span class="token literal-property property">myOverrideData</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">availableOnGlobalData</span><span class="token operator">:</span> <span class="token number">123</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<p>In the above example, the data cascade will include a top-level variable <code>availableOnGlobalData</code> with a value of <code>123</code>. Using <code>eleventyDataKey</code> overrides any keys set in <code>getData</code>, which means (for this instance) <code>data</code> will be ignored and <code>notAvailableOnGlobalData</code> will not be present.</p>
</details>
<h3 id="compileoptions" tabindex="-1"><code>compileOptions</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#compileoptions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="compileoptions.permalink-to-override-permalink-compilation" tabindex="-1"><code>compileOptions.permalink</code> to Override Permalink Compilation <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#compileoptions.permalink-to-override-permalink-compilation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><em>Optional</em></li>
</ul>
<p>This has the same signature as the <code>compile</code> function and expects a reusable <code>render</code> function to be returned.</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">compileOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">permalink</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">contents<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Return a string to override: you’ll want to use `data.page`</span><br> <span class="token comment">// Or `return;` (return undefined) to fallback to default behavior</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<ul>
<li>Don’t compile permalink strings in the parent template language
<ul>
<li><code>permalink: "raw"</code></li>
</ul>
</li>
<li>Don’t write <em>any</em> files to the file system:
<ul>
<li><code>permalink: false</code></li>
<li><code>permalink: (contents, inputPath) => false</code></li>
<li><code>permalink: (contents, inputPath) => ((data) => false)</code></li>
</ul>
</li>
<li>Override the default permalink function (return a string to override)
<ul>
<li><code>permalink: (contents, inputPath) => "…"</code></li>
<li><code>permalink: (contents, inputPath) => ((data) => "…")</code> (use the data cascade)</li>
<li>If you return nothing (or <code>undefined</code>), this will revert to the default permalink behavior.</li>
</ul>
</li>
</ul>
<p>This provides another way to implement Sass’ underscore convention to skip writing the file to the output directory:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// … some configuration truncated</span><br><br><span class="token punctuation">{</span><br> <span class="token literal-property property">compileOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">permalink</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">contents<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> parsed <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>inputPath<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>parsed<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">"_"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<h4 id="compileoptions.spiderjavascriptdependencies" tabindex="-1"><code>compileOptions.spiderJavaScriptDependencies</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#compileoptions.spiderjavascriptdependencies">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><em>Optional</em>: Defaults to <code>false</code></li>
</ul>
<p>Enable to use Eleventy to spider and watch files <code>require</code>’d in these templates. This allows you to control the <a href="https://www.11ty.dev/docs/watch-serve/#watch-javascript-dependencies">Watch JavaScript Dependencies</a> feature on a per-template language basis. Most template languages will want the default here and keep this feature disabled.</p>
<h4 id="compileoptions.cache-for-advanced-control-of-caching" tabindex="-1"><code>compileOptions.cache</code> for advanced control of caching <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#compileoptions.cache-for-advanced-control-of-caching">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<ul>
<li><em>Optional</em>: Defaults to the value of <code>read</code></li>
</ul>
<p>This controls caching for the compilation step and saves the compiled template function for reuse. For more efficient cleanup (and long term memory use), these caches are now segmented by <code>inputPath</code> (<span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span>).</p>
<p>By default, whether or not this <code>cache</code> is enabled is tied to boolean value of <code>read</code>. If <code>read: true</code>, then <code>cache</code> will also be <code>true</code>. It’s unlikely you will need this, but you can override this to mismatch <code>read</code>.</p>
<p>You can also granularly control the caching key using a <code>getCacheKey</code> callback. It might be useful to change this when using <code>read: false</code> and <code>contents</code> are unavailable.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">If you’re using v2.0.0 or newer, you shouldn’t need a <code>getCacheKey</code> callback. It is preferred to use the <a href="https://www.11ty.dev/docs/languages/custom/##registering-dependencies"><code>addDependencies</code> method in the <code>compile</code> callback</a> instead!</div></div>
<details>
<summary><strong>Expand to see the default <code>getCacheKey</code> implementation</strong> (you can override this!)</summary>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token literal-property property">read</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">compileOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token function-variable function">getCacheKey</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">contents<span class="token punctuation">,</span> inputPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// return contents; // this is the default in 1.0</span><br><br> <span class="token comment">// return inputPath + contents; // this is the new default in v2.0.0</span><br><br> <span class="token keyword">return</span> inputPath<span class="token punctuation">;</span> <span class="token comment">// override to cache by inputPath (this means the compile function will not get called when the file contents change)</span><br><br> <span class="token comment">// Conditionally opt-out of cache with `return false`</span><br> <span class="token comment">// if(someArbitraryCondition) {</span><br> <span class="token comment">// return false;</span><br> <span class="token comment">// }</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
</details>
<h3 id="isincrementalmatch" tabindex="-1"><code>isIncrementalMatch</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/custom/#isincrementalmatch">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">If you’re using v2.0.0 or newer, you shouldn’t need an <code>isIncrementalMatch</code> callback. It is preferred to use the <a href="https://www.11ty.dev/docs/languages/custom/#registering-dependencies"><code>addDependencies</code> method in the <code>compile</code> callback</a> instead!</div></div>
<ul>
<li><em>Optional</em></li>
</ul>
<p>A callback used for advanced control of template dependency matching. This determines if a modified file (from a watch/serve rebuild) is relevant to each known full template file. If the callback returns true, the template will be rendered. If the callback returns false, the template will be skipped.</p>
<details>
<summary><strong>Expand to see the default `isIncrementalMatch` implementation</strong> (you can override this!)</summary>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br> <span class="token comment">// Called once for each template (matching this custom template’s file extension) in your project.</span><br> <span class="token function-variable function">isIncrementalMatch</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">modifiedFile</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// is modifiedFile relevant to this.inputPath?</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isFileRelevantToInputPath<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// True if they are the same file</span><br> <span class="token comment">// Or if they are related by any `addDependencies` relationships</span><br> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// If `modifiedFile` is not a full template (maybe an include or layout)</span><br> <span class="token comment">// and we have no record of any dependencies for this file, we re-render everything</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>doesFileHaveDependencies <span class="token operator">&&</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>isFullTemplate<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// Skip it</span><br> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
</details>
<p>You can see more advanced override implementations in <a href="https://github.com/11ty/eleventy-plugin-webc/blob/a33dc641dfc7845d179f7bc60f9ab2d9a9177773/src/eleventyWebcTemplate.js"><code>@11ty/eleventy-plugin-webc</code></a> and <a href="https://github.com/11ty/eleventy-plugin-vue/blob/f705297dea3442b918b0659b5770d7eb069bb886/.eleventy.js"><code>@11ty/eleventy-plugin-vue</code></a>.</p>
EJS
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/ejs/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/ejs/#ejs-options">EJS Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/ejs/#optional-compile/render-options">Optional: Compile/Render Options </a></li><li><a href="https://www.11ty.dev/docs/languages/ejs/#optional-set-your-own-library-instance">Optional: Set your own Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/ejs/#supported-features">Supported Features </a></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ejs</code></td>
<td><code>.ejs</code></td>
<td><a href="https://www.npmjs.com/package/ejs"><code>ejs</code></a></td>
</tr>
</tbody>
</table>
<p>You can override a <code>.ejs</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="ejs-options" tabindex="-1">EJS Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/ejs/#ejs-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="optional-compile/render-options" tabindex="-1">Optional: Compile/Render Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/ejs/#optional-compile/render-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>See “Options” on the <a href="https://ejs.co/">EJS home page</a>.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setEjsOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token comment">// use <? ?> instead of <% %></span><br> <span class="token literal-property property">delimiter</span><span class="token operator">:</span> <span class="token string">"?"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own Library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/ejs/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As an escape mechanism for advanced usage, pass in your own instance of the EJS library using the Configuration API.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> ejs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"ejs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"ejs"</span><span class="token punctuation">,</span> ejs<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/ejs/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Include (Preprocessor Directive)</td>
<td><code><% include /user/show %></code> looks for <code>_includes/user/show.ejs</code> (the leading slash is important). Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Includes (Relative Path, Preprocessor Directive)</td>
<td>Relative paths in <code>ejs</code> can leave off the leading slash <code>/</code> or use <code>./</code> to use the template’s directory or <code>../</code> for the template’s parent directory:<br><code><% include 'user/show' %></code> or <code><% include './user/show' %></code> looks for <code>./user/show.ejs</code> from the template’s current directory. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Include (pass in Data)</td>
<td><code><%- include('/user/show', {user: 'Ava'}) %></code> looks for <code>_includes/user/show.ejs</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Include (Relative Path, pass in Data)</td>
<td>Relative paths in <code>ejs</code> can leave off the leading slash <code>/</code> or use <code>./</code> to use the template’s directory or <code>../</code> for the template’s parent directory:<br><code><%- include('user/show', {user: 'Ava'}) %></code> or <code><%- include('./user/show', {user: 'Ava'}) %></code> looks for <code>./user/show.ejs</code> from the template’s current directory. Does not process front matter in the include file.</td>
</tr>
</tbody>
</table>
HAML
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/haml/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/haml/#haml-options">HAML Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/haml/#optional-set-your-own-library-instance">Optional: Set your own Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/haml/#supported-features">Supported Features </a></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>haml</code></td>
<td><code>.haml</code></td>
<td><a href="https://github.com/tj/haml.js"><code>haml.js</code></a></td>
</tr>
</tbody>
</table>
<p>You can override a <code>.haml</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="haml-options" tabindex="-1">HAML Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/haml/#haml-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own Library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/haml/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As an escape mechanism for advanced usage, pass in your own instance of the HAML library using the Configuration API.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> haml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"hamljs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"haml"</span><span class="token punctuation">,</span> haml<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/haml/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>🚫 Filters</td>
<td><strong>Not yet supported</strong> <code>:filterName some text</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a>.</td>
</tr>
<tr>
<td>🚫 <a href="https://www.11ty.dev/docs/filters/#universal-filters">Eleventy Universal Filters</a></td>
<td><strong>Not yet supported</strong> <code>:filterName some text</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a>.</td>
</tr>
</tbody>
</table>
Template Language—Handlebars
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/handlebars/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/handlebars/#handlebars-options">Handlebars Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/handlebars/#optional-set-your-own-library-instance">Optional: Set your own Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#supported-features">Supported Features </a></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#helpers">Helpers </a><ul><li><a href="https://www.11ty.dev/docs/languages/handlebars/#asynchronous-helpers">Asynchronous Helpers </a></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#a-note-about-universal-filters">A note about Universal Filters </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#shortcodes">Shortcodes </a><ul><li><a href="https://www.11ty.dev/docs/languages/handlebars/#single-shortcode">Single Shortcode </a></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#paired-shortcode">Paired Shortcode </a></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#asynchronous-shortcodes">Asynchronous Shortcodes </a></li><li><a href="https://www.11ty.dev/docs/languages/handlebars/#access-to-page-data-values">Access to page data values </a></li></ul></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>hbs</code></td>
<td><code>.hbs</code></td>
<td><a href="https://github.com/wycats/handlebars.js"><code>handlebars.js</code></a></td>
</tr>
</tbody>
</table>
<p>You can override a <code>.hbs</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/#overriding-the-template-language">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="handlebars-options" tabindex="-1">Handlebars Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#handlebars-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own Library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As an escape mechanism for advanced usage, pass in your own instance of the Handlebars library using the Configuration API.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> handlebars <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"handlebars"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"hbs"</span><span class="token punctuation">,</span> handlebars<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Partials</td>
<td><code>{{> user}}</code> looks for <code>_includes/user.hbs</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>🚫 Partials (Relative Path)</td>
<td><strong>Not yet supported</strong>: <code>{{> ./user}}</code> looks for <code>user.hbs</code> in the template’s current directory.</td>
</tr>
<tr>
<td>✅ Helpers (Custom Tags)</td>
<td><code>{{ helperName myObject }}</code> Handlebars calls them Helpers, but Eleventy calls them Shortcodes. Read more about <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a> or <a href="https://www.11ty.dev/docs/custom-tags/">Custom Tags</a>.</td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/filters/#universal-filters">Eleventy Universal Filters</a></td>
<td><code>{{ filterName myObject }}</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a>.</td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a></td>
<td><code>{{{ uppercase name }}}</code> Read more about <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a>.</td>
</tr>
</tbody>
</table>
<p><span id="filters"></span><span id="shortcodes"></span></p>
<h2 id="helpers" tabindex="-1">Helpers <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#helpers">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Helpers are used to transform or modify content. You can add Handlebars specific helpers, but you probably want to add a <a href="https://www.11ty.dev/docs/filters/">Universal shortcode</a> instead.</p>
<p>Read more about <a href="https://handlebarsjs.com/#helpers">Handlebars Helpers syntax</a></p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Handlebars Helper</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addHandlebarsHelper</span><span class="token punctuation">(</span><span class="token string">"myHandlebarsHelper"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)</span><br> <span class="token comment">// Read the note about Universal Filters below: Use a shortcode instead!</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{{ myHandlebarsHelper myVariable }}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that if you return HTML in your Handlebars helper, you need to use the Handlebars triple-stash syntax (three opening and three closing curly brackets) to avoid double-escaped HTML.</div></div>
<h3 id="asynchronous-helpers" tabindex="-1">Asynchronous Helpers <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#asynchronous-helpers">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>These are not supported by Handlebars. Read more at <a href="https://github.com/wycats/handlebars.js/issues/717">this Handlebars issue</a>.</p>
<h3 id="a-note-about-universal-filters" tabindex="-1">A note about Universal Filters <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#a-note-about-universal-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Universal filters have always been funneled into Handlebars helpers. However, shortcodes (Paired/Single) match better with the semantic footprint of Handlebars Helpers.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Moving forward for Handlebars content, using Universal Shortcodes are preferred to Universal Filters. We will continue to support funneling Universal filters to Handlebars helpers. This will not affect your template content as the syntax for Handlebars filters/helpers/shortcodes will continue to be the same. They’re all just helpers.</p>
<h2 id="shortcodes" tabindex="-1">Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Shortcodes are basically reusable bits of content. You can add Handlebars specific shortcodes, but you probably want to add a <a href="https://www.11ty.dev/docs/shortcodes/">Universal shortcode</a> instead.</p>
<h3 id="single-shortcode" tabindex="-1">Single Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#single-shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Handlebars Shortcode</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addHandlebarsShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>twitterUsername<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="usage-1" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#usage-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-html"><code class="language-html">{{{ user "Zach Leatherman" "zachleat" }}}</code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that if you return HTML in your Handlebars shortcode, you need to use the Handlebars triple-stash syntax (three opening and three closing curly brackets) to avoid double-escaped HTML.</div></div>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="paired-shortcode" tabindex="-1">Paired Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#paired-shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Handlebars Shortcode</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedHandlebarsShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bioContent<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bioContent<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>twitterUsername<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_bio"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bioContent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="usage-2" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#usage-2">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Note that you can put any Handlebars tags or content inside the <code>{{ user }}</code> shortcode! Yes, even other shortcodes!</p>
<pre class="language-html"><code class="language-html">{{# user "Zach Leatherman" "zachleat" }}<br> Zach likes to take long walks on Nebraska beaches.<br>{{/ user }}</code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">While unpaired shortcodes and helpers required that you use the Handlebars triple-stash syntax (three opening and three closing curly brackets) to avoid double-escaped HTML, paired Handlebars shortcodes do not have this requirement.</div></div>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_bio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach likes to take long walks on Nebraska beaches.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="asynchronous-shortcodes" tabindex="-1">Asynchronous Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#asynchronous-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>These are not supported by Handlebars. Read more at <a href="https://github.com/wycats/handlebars.js/issues/717">this Handlebars issue</a>.</p>
<h3 id="access-to-page-data-values" tabindex="-1">Access to <code>page</code> data values <a class="direct-link" href="https://www.11ty.dev/docs/languages/handlebars/#access-to-page-data-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you aren’t using an arrow function, Handlebars Shortcodes (and Nunjucks, Liquid, and 11ty.js JavaScript Functions) will have access to Eleventy <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contents"><code>page</code> data values</a> without needing to pass them in as arguments.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addHandlebarsShortcode</span><span class="token punctuation">(</span><span class="token string">"myShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Available in 0.11.0 and above</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// For example:</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>fileSlug <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Template Language—JavaScript
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/javascript/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/javascript/#raw-values">Raw Values </a><ul><li><a href="https://www.11ty.dev/docs/languages/javascript/#string">String </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#buffer">Buffer </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#promise">Promise </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#function">Function </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#classes">Classes </a><ul><li><a href="https://www.11ty.dev/docs/languages/javascript/#optional-data-method">Optional data Method </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#permalinks">Permalinks </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#markdown-and-javascript">Markdown and JavaScript </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript Template Functions </a><ul><li><a href="https://www.11ty.dev/docs/languages/javascript/#asynchronous-javascript-template-functions">Asynchronous JavaScript Template Functions </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#warning-about-arrow-functions">Warning about Arrow Functions </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#relationship-to-filters-and-shortcodes">Relationship to Filters and Shortcodes </a></li><li><a href="https://www.11ty.dev/docs/languages/javascript/#access-to-page-data-values">Access to page data values </a></li></ul></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>11ty.js</code></td>
<td><code>.11ty.js</code></td>
<td>N/A</td>
</tr>
</tbody>
</table>
<p>Eleventy supports many different types of JavaScript content that will be parsed as Eleventy templates:</p>
<h2 id="raw-values" tabindex="-1">Raw Values <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#raw-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Raw values will not have access to Data or <a href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">JavaScript Template Functions</a>. <a href="https://www.11ty.dev/docs/languages/javascript/#function">Use a function</a> that returns a value instead.</p>
<h3 id="string" tabindex="-1">String <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#string">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token string">"<p>Zach</p>"</span><span class="token punctuation">;</span></code></pre>
<p>Or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p>These can<br>span<br>multiple<br>lines!</p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></code></pre>
<h3 id="buffer" tabindex="-1">Buffer <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#buffer">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Some templating libraries return <a href="https://nodejs.org/api/buffer.html#buffer_class_method_buffer_from_string_encoding">Buffers</a> (e.g. <a href="https://github.com/WebReflection/viperHTML">viperHTML</a>).</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Buffer<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token string">"<p>Zách</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3 id="promise" tabindex="-1">Promise <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#promise">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"<p>Zach</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2 id="function" tabindex="-1">Function <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Can return any <a href="https://www.11ty.dev/docs/languages/javascript/#raw-values">raw value</a> (e.g. String, Buffer, Promise). Use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> to embed data values without having to concatenate strings!</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>De-structuring syntax is a little bit easier to read:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Maybe you like arrow functions:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></code></pre>
<p><code>async</code> functions work too:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> getAnAsyncThing <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./lib/asyncThing"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token function">getAnAsyncThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="classes" tabindex="-1">Classes <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#classes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy looks for classes that have a <code>render</code> method and uses <code>render</code> to return the content of the template. <code>render</code> methods can be <code>async</code>.</p>
<p><code>render</code> can return any <a href="https://www.11ty.dev/docs/languages/javascript/#raw-values">raw value</a> (e.g. String, Buffer, Promise).</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token punctuation">{</span><br> <span class="token comment">// or `async render({name}) {`</span><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Test<span class="token punctuation">;</span></code></pre>
<h3 id="optional-data-method" tabindex="-1">Optional <code>data</code> Method <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#optional-data-method">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><a href="https://www.11ty.dev/docs/data-frontmatter/">YAML Front Matter</a> is not supported in JavaScript template types. Use <code>data</code> methods instead!</div></div>
<p>This data acts as Front Matter for the template and similarly to Front Matter will take precedence over all other data in the data cascade. The <code>data</code> method can be asynchronous <code>async data()</code> or it can be a getter <code>get data()</code>.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token punctuation">{</span><br> <span class="token comment">// or `async data() {`</span><br> <span class="token comment">// or `get data() {`</span><br> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Ted"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token string">"teds-rad-layout"</span><span class="token punctuation">,</span><br> <span class="token comment">// … other front matter keys</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// will always be "Ted"</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Test<span class="token punctuation">;</span></code></pre>
<h3 id="permalinks" tabindex="-1">Permalinks <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#permalinks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The <code>permalink</code> data key will work here. Permalinks can be a <a href="https://www.11ty.dev/docs/languages/javascript/#raw-values">raw value</a> (e.g. String, Buffer, Promise) or a Function that returns any raw value.</p>
<h4 id="permalink-string" tabindex="-1">Permalink String <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#permalink-string">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token punctuation">{</span><br> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token comment">// Writes to "/my-permalink/index.html"</span><br> <span class="token literal-property property">permalink</span><span class="token operator">:</span> <span class="token string">"/my-permalink/"</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Test<span class="token punctuation">;</span></code></pre>
<h4 id="permalink-function" tabindex="-1">Permalink Function <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#permalink-function">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Permalink Functions can return any <a href="https://www.11ty.dev/docs/languages/javascript/#raw-values">raw value</a> (e.g. String, Buffer, Promise).</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token punctuation">{</span><br> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"hello"</span><span class="token punctuation">,</span><br> <span class="token comment">// Writes to "/my-permalink/hello/index.html"</span><br> <span class="token function-variable function">permalink</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/my-permalink/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token template-punctuation string">`</span></span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Test<span class="token punctuation">;</span></code></pre>
<h4 id="permalink-function-using-a-filter" tabindex="-1">Permalink Function using a Filter <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#permalink-function-using-a-filter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Universal filters, shortcodes, and other JavaScript Template Functions work here and are exposed on <code>this</code>. Read more about <a href="https://www.11ty.dev/docs/filters/#eleventy-provided-universal-filters">Eleventy provided Universal Filters</a>.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token punctuation">{</span><br> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"This is my blog post title"</span><span class="token punctuation">,</span><br> <span class="token comment">// Writes to "/this-is-my-blog-post-title/index.html"</span><br> <span class="token function-variable function">permalink</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">slug</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* … */</span> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Test<span class="token punctuation">;</span></code></pre>
<h3 id="markdown-and-javascript" tabindex="-1">Markdown and JavaScript <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#markdown-and-javascript">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Yes, you can use JavaScript as your preprocessor language for Markdown. Read more about <a href="https://www.11ty.dev/docs/languages/#overriding-the-template-language"><code>templateEngineOverride</code></a>.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript and Markdown</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token punctuation">{</span><br> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myName</span><span class="token operator">:</span> <span class="token string">"Zach"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">templateEngineOverride</span><span class="token operator">:</span> <span class="token string">"11ty.js,md"</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"># This is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>myName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Test<span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">While <code>templateEngineOverride: 11ty.js,md</code> works to add markdown support, the special behavior of JavaScript templates does not allow other template engines to be supported here (e.g. <code>templateEngineOverride: njk,md</code>). This will be mitigated with <a href="https://github.com/11ty/eleventy/issues/148">Enhancement Request Issue #148</a>.</div></div>
<p><span id="filters"></span><span id="shortcodes"></span></p>
<h2 id="javascript-template-functions" tabindex="-1">JavaScript Template Functions <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>A JavaScript Template Function allows you to extend your JavaScript templates with extra functionality. If you add any Universal Filters or Shortcodes, they will be exposed as JavaScript Template Functions.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"myFunction"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>js-fn-example.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">myFunction</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>a<span class="token punctuation">,</span> data<span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="asynchronous-javascript-template-functions" tabindex="-1">Asynchronous JavaScript Template Functions <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#asynchronous-javascript-template-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This works the same as any <code>async</code> JavaScript function or function that returns a <code>Promise</code>.</p>
<p>This is the same as the example above but adds <code>async</code> before the <code>function</code>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"myAsyncFunction"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This is the same as the example above but adds <code>await</code> before the function is called.</p>
<div class="codetitle codetitle-left"><b>Filename </b>js-async-fn-example.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">myAsyncFunction</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>a<span class="token punctuation">,</span> data<span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="warning-about-arrow-functions" tabindex="-1">Warning about Arrow Functions <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#warning-about-arrow-functions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
Note that by definition (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">read on MDN</a>) arrow functions do not have access to <code>this</code>, so any use of JavaScript Functions inside of an arrow function template will throw an error.
</div></div>
<div class="codetitle codetitle-left"><b>Filename </b>js-arrow-fn-example.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Using `this` in an arrow function will throw an error!</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">myFunction</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>a<span class="token punctuation">,</span> data<span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="relationship-to-filters-and-shortcodes" tabindex="-1">Relationship to Filters and Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#relationship-to-filters-and-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Any universal filters or shortcodes will also be available as JavaScript Template Functions.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Universal filters (Adds to Liquid, Nunjucks, 11ty.js, and Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myVariable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, 11ty.js, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Paired Shortcodes (Adds to Liquid, Nunjucks, 11ty.js, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"pairedUser"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>universal-examples.11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">myFilter</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>myVar<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1><br><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">user</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>firstName<span class="token punctuation">,</span> data<span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p><br><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">pairedUser</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Here is some more content</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>firstName<span class="token punctuation">,</span> data<span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="access-to-page-data-values" tabindex="-1">Access to <code>page</code> data values <a class="direct-link" href="https://www.11ty.dev/docs/languages/javascript/#access-to-page-data-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you aren’t using an arrow function, JavaScript Functions (and Nunjucks, Liquid, and Handlebars Shortcodes) will have access to Eleventy <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contents"><code>page</code> data values</a> without needing to pass them in as arguments.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addJavaScriptFunction</span><span class="token punctuation">(</span><span class="token string">"myFunction"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Available in 0.11.0 and above</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// For example:</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>fileSlug <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
JavaScript Template Literals
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/jstl/
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>jstl</code></td>
<td><code>.jstl</code></td>
<td>N/A</td>
</tr>
</tbody>
</table>
<div class="elv-callout elv-callout-error"><div class="elv-callout-label">ERROR:</div><div class="elv-callout-c">In Eleventy 1.0, the <code>.jstl</code> template extension was removed from Eleventy Core. It is recommended to use the <a href="https://www.11ty.dev/docs/languages/javascript/">JavaScript template type</a> instead.</div></div>
Template Language—Liquid
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/liquid/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/liquid/#liquid-options">Liquid Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/liquid/#default-options">Default Options </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#javascript-truthiness-in-liquid">JavaScript Truthiness in Liquid </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#use-your-own-options">Use your own options </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#optional-set-your-own-library-instance">Optional: Set your own Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#supported-features">Supported Features </a><ul><li><a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths">Quoted Include Paths </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#filters">Filters </a><ul><li><a href="https://www.11ty.dev/docs/languages/liquid/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#multiple-filter-arguments">Multiple Filter Arguments </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#shortcodes">Shortcodes </a><ul><li><a href="https://www.11ty.dev/docs/languages/liquid/#shortcode">Shortcode </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#paired-shortcode">Paired Shortcode </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#asynchronous-shortcodes">Asynchronous Shortcodes </a></li><li><a href="https://www.11ty.dev/docs/languages/liquid/#access-to-page-data-values">Access to page data values </a></li></ul></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>liquid</code></td>
<td><code>.liquid</code></td>
<td><a href="https://www.npmjs.com/package/liquidjs"><code>liquidjs</code></a></td>
</tr>
</tbody>
</table>
<p>You can override a <code>.liquid</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="liquid-options" tabindex="-1">Liquid Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#liquid-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="default-options" tabindex="-1">Default Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#default-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Rather than constantly fixing outdated documentation, <a href="https://github.com/11ty/eleventy/blob/master/src/Engines/Liquid.js">find <code>getLiquidOptions</code> in <code>Liquid.js</code></a>. These options are different than the <a href="https://liquidjs.com/tutorials/options.html">default <code>liquidjs</code> options</a>.</p>
<h3 id="javascript-truthiness-in-liquid" tabindex="-1">JavaScript Truthiness in Liquid <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#javascript-truthiness-in-liquid">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Surprising to JavaScript developers—in <a href="https://liquidjs.com/tutorials/truthy-and-falsy.html">LiquidJS both <code>""</code> and <code>0</code> are truthy values</a>! If you’d like to switch to use more JS-familiar conventions, use the Liquid option <code>jsTruthy: true</code> in your Eleventy config:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLiquidOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">jsTruthy</span><span class="token operator">:</span> <span class="token boolean">true</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="use-your-own-options" tabindex="-1">Use your own options <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#use-your-own-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>It’s recommended to use the Configuration API to override the default options above.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLiquidOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">dynamicPartials</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">strictFilters</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// renamed from `strict_filters` in Eleventy 1.0</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own Library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As an escape mechanism for advanced usage, pass in your own instance of the Liquid library using the Configuration API. See <a href="https://liquidjs.com/tutorials/options.html">all <code>liquidjs</code> options</a>.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">Not compatible with <code>setLiquidOptions</code> above—this method will <em>override</em> any configuration set there.</div></div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> Liquid <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"liquidjs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">extname</span><span class="token operator">:</span> <span class="token string">".liquid"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">dynamicPartials</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">strictFilters</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// renamed from `strict_filters` in Eleventy 1.0</span><br> <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"_includes"</span><span class="token punctuation">]</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"liquid"</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Liquid</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Include</td>
<td><code>{% include user %}</code> looks for <code>_includes/user.liquid</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Includes (Relative Path)</td>
<td>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory): <code>{% include ./included %}</code> looks for <code>included.liquid</code> in the template’s current directory. Does not process front matter.<br><br><div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">If <code>_includes/included.liquid</code> also exists, Liquid will use this file instead.</div></div></td>
</tr>
<tr>
<td>✅ Include (Quoted)</td>
<td><div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Starting in Eleventy 1.0, Liquid includes without quotation marks require <code>dynamicPartials: false</code>—Read more at <a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths">Quoted Include Paths</a>.</div></div><code>{% include 'user' %}</code> looks for <code>_includes/user.liquid</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Include (Relative Path, Quoted)</td>
<td><div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Starting in Eleventy 1.0, Liquid includes without quotation marks require <code>dynamicPartials: false</code>—Read more at <a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths">Quoted Include Paths</a>.</div></div>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory): <code>{% include './dir/user' %}</code> looks for <code>./dir/user.liquid</code> from the template’s current directory. Does not process front matter in the include file.<br><br><div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">If <code>_includes/dir/user.liquid</code> also exists, Liquid will use this file instead.</div></div></td>
</tr>
<tr>
<td>✅ Include (pass in Data)</td>
<td><code>{% include 'user' with 'Ava' %}</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Include (pass in Data)</td>
<td><code>{% include 'user', user1: 'Ava', user2: 'Bill' %}</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Custom Filters</td>
<td><code>{{ name | upper }}</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a></td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/filters/#universal-filters">Eleventy Universal Filters</a></td>
<td><code>{% name | filterName %}</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a></td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/custom-tags/">Custom Tags</a></td>
<td><code>{% uppercase name %}</code> Read more about <a href="https://www.11ty.dev/docs/custom-tags/">Custom Tags</a>.</td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a></td>
<td><code>{% uppercase name %}</code> Read more about <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a>.</td>
</tr>
</tbody>
</table>
<h3 id="quoted-include-paths" tabindex="-1">Quoted Include Paths <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">This is a common pitfall if you’re using Liquid templates.</div></div>
<p>If you’d like to use include paths without quotation marks, you must enable <code>dynamicPartials: false</code> in your Liquid options. The <a href="https://github.com/11ty/eleventy/issues/240">default in Eleventy 1.0 (and <code>liquidjs</code>) swapped from <code>false</code> to <code>true</code></a>. Read more about this limitation at <a href="https://github.com/11ty/eleventy/issues/72">Issue #72</a>.</p>
<h4 id="default-behavior-dynamicpartials-true" tabindex="-1">Default behavior, <code>dynamicPartials: true</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#default-behavior-dynamicpartials-true">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><code>{% include 'user' %}</code> looks for <code>_includes/user.liquid</code></p>
<h4 id="non-quoted-includes-with-dynamicpartials-false" tabindex="-1">Non-quoted includes with <code>dynamicPartials: false</code> <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#non-quoted-includes-with-dynamicpartials-false">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><code>{% include user %}</code> looks for <code>_includes/user.liquid</code></p>
<h2 id="filters" tabindex="-1">Filters <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Filters are used to transform or modify content. You can add Liquid specific filters, but you probably want to add a <a href="https://www.11ty.dev/docs/filters/">Universal filter</a> instead.</p>
<p>Read more about <a href="https://liquidjs.com/tutorials/register-filters-tags.html">LiquidJS Filter syntax</a></p>
<p>Note that Liquid supports asynchronous filters out of the box (without any additional code or API method changes).</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Liquid Filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidFilter</span><span class="token punctuation">(</span><span class="token string">"myLiquidFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myVariable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Async-friendly too</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidFilter</span><span class="token punctuation">(</span><span class="token string">"myAsyncLiquidFilter"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myVariable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">myVariable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ myVariable | myFilter }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<h3 id="multiple-filter-arguments" tabindex="-1">Multiple Filter Arguments <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#multiple-filter-arguments">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Liquid Filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidFilter</span><span class="token punctuation">(</span><span class="token string">"concatThreeStrings"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">,</span> arg3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> arg1 <span class="token operator">+</span> arg2 <span class="token operator">+</span> arg3<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ "first" | concatThreeThings: "second", "third" }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<h2 id="shortcodes" tabindex="-1">Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Shortcodes are basically reusable bits of content. You can add Liquid specific shortcodes, but you probably want to add a <a href="https://www.11ty.dev/docs/shortcodes/">Universal shortcode</a> instead.</p>
<h3 id="shortcode" tabindex="-1">Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Liquid Shortcode</span><br> <span class="token comment">// These can be async functions too</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>twitterUsername<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><code>liquidjs</code> is already <code>Promise</code>-based internally, so an <code>async function</code> for a shortcode function works out of the box here.</p>
<h4 id="usage-1" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#usage-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-html"><code class="language-html">{% user "Zach Leatherman", "zachleat" %}<br><br><span class="token comment"><!-- The comma between arguments is optional in Liquid templates --></span><br>{% user "Zach Leatherman" "zachleat" %}</code></pre>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="paired-shortcode" tabindex="-1">Paired Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#paired-shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Liquid Shortcode</span><br> <span class="token comment">// These can be async functions too</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user2"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bioContent<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"user2"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bioContent<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>twitterUsername<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_bio"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bioContent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><code>liquidjs</code> is already <code>Promise</code>-based internally, so an <code>async function</code> for a shortcode function works out of the box here.</p>
<h4 id="usage-2" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#usage-2">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Note that you can put any Liquid tags or content inside the <code>{% user %}</code> shortcode! Yes, even other shortcodes!</p>
<pre class="language-html"><code class="language-html">{% user2 "Zach Leatherman" "zachleat" %}<br> Zach likes to take long walks on Nebraska beaches.<br>{% enduser2 %}</code></pre>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_bio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach likes to take long walks on Nebraska beaches.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="asynchronous-shortcodes" tabindex="-1">Asynchronous Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#asynchronous-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Liquid is already promise-based internally so <code>async</code> functions with <code>await</code> work fine out of the box.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">fetchAThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"user2"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">fetchAThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="usage-3" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#usage-3">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>(It’s the same.)</p>
<pre class="language-html"><code class="language-html">{% user "Zach Leatherman" "zachleat" %}<br><br>{% user2 "Zach Leatherman" "zachleat" %}<br> Zach likes to take long walks on Nebraska beaches.<br>{% enduser2 %}</code></pre>
<h3 id="access-to-page-data-values" tabindex="-1">Access to <code>page</code> data values <a class="direct-link" href="https://www.11ty.dev/docs/languages/liquid/#access-to-page-data-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you aren’t using an arrow function, Liquid Shortcodes (and Nunjucks, Handlebars, and 11ty.js JavaScript Functions) will have access to Eleventy <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contents"><code>page</code> data values</a> without needing to pass them in as arguments.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidShortcode</span><span class="token punctuation">(</span><span class="token string">"myShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Available in 0.11.0 and above</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// For example:</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>fileSlug <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Markdown
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/markdown/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/markdown/#markdown-options">Markdown Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/markdown/#default-options">Default Options </a></li><li><a href="https://www.11ty.dev/docs/languages/markdown/#optional-set-your-own-library-instance">Optional: Set your own library instance </a></li><li><a href="https://www.11ty.dev/docs/languages/markdown/#optional-amend-the-library-instance">Optional: Amend the Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/markdown/#add-your-own-plugins">Add your own plugins </a></li><li><a href="https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks">Indented Code Blocks </a></li><li><a href="https://www.11ty.dev/docs/languages/markdown/#why-cant-i-return-markdown-from-paired-shortcodes-to-use-in-a-markdown-file">Why can’t I return markdown from paired shortcodes to use in a markdown file </a></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>md</code></td>
<td><code>.md</code></td>
<td><a href="https://www.npmjs.com/package/markdown-it"><code>markdown-it</code></a></td>
</tr>
</tbody>
</table>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Markdown files are by default pre-processed as Liquid templates. <a href="https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files">You can change this default in your configuration file</a> (or disable it altogether). To change this for a single template and not globally, read <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.
</div></div>
<h2 id="markdown-options" tabindex="-1">Markdown Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#markdown-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="default-options" tabindex="-1">Default Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#default-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><code>html: true</code> (<code>markdown-it</code> default is <code>false</code>)</li>
</ul>
<p>The only listed options here are the ones that differ from the default <code>markdown-it</code> options. See <a href="https://github.com/markdown-it/markdown-it#init-with-presets-and-options">all <code>markdown-it</code> options and defaults</a>.</p>
<p>Starting in Eleventy 2.0, we’ve disabled the <a href="https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks">Indented Code Blocks</a> feature by default.</p>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Pass in your own instance of the Markdown library using the Configuration API. See <a href="https://github.com/markdown-it/markdown-it#init-with-presets-and-options">all <code>markdown-it</code> options</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> markdownIt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">html</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">breaks</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">linkify</span><span class="token operator">:</span> <span class="token boolean">true</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token function">markdownIt</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="optional-amend-the-library-instance" tabindex="-1">Optional: Amend the Library instance <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#optional-amend-the-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Run your own callback on the provided Library instance (the default <em>or</em> any provided by <code>setLibrary</code> above).</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">amendLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token parameter">mdLib</span> <span class="token operator">=></span> mdLib<span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token string">"code"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="add-your-own-plugins" tabindex="-1">Add your own plugins <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#add-your-own-plugins">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Pass in your own <code>markdown-it</code> plugins using the <code>amendLibrary</code> (Eleventy >= 2.0) or <code>setLibrary</code> (Eleventy <= 1.0) Configuration API methods (building on the method described in “Options” above).</p>
<ol>
<li>Find your <a href="https://www.npmjs.com/search?q=keywords:markdown-it-plugin">own <code>markdown-it</code> plugin on NPM</a></li>
<li><code>npm install</code> the plugin.</li>
</ol>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
Eleventy version:
<a href="https://www.11ty.dev/docs/languages/markdown/#plugins-two" role="tab">>= 2.0</a>
<a href="https://www.11ty.dev/docs/languages/markdown/#plugins-one" role="tab"><= 1.0</a>
</div>
<div id="plugins-two" role="tabpanel">
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> markdownItEmoji <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it-emoji"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// New in 2.0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">amendLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token parameter">mdLib</span> <span class="token operator">=></span> mdLib<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>markdownItEmoji<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="plugins-one" role="tabpanel">
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> markdownIt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> markdownItEmoji <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it-emoji"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">html</span><span class="token operator">:</span> <span class="token boolean">true</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> markdownLibrary <span class="token operator">=</span> <span class="token function">markdownIt</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>markdownItEmoji<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> markdownLibrary<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="indented-code-blocks" tabindex="-1">Indented Code Blocks <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Markdown has a lesser known feature called <a href="https://spec.commonmark.org/0.28/#indented-code-blocks">Indented Code Blocks</a>, which means any content that is indented by four or more spaces (and has a preceding line break) will be transformed into a code block.</p>
<pre class="language-markdown"><code class="language-markdown"> a simple<br> indented code block</code></pre>
<p>is transformed into:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>a simple<br> indented code block<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span></code></pre>
<p><em>(Example borrowed from the <a href="https://spec.commonmark.org/0.28/#indented-code-blocks">CommonMark Specification</a>)</em></p>
<p>After <a href="https://github.com/11ty/eleventy/issues/2438">listening to community feedback</a>, starting with Eleventy 2.0.0 <strong>Indented Code Blocks</strong> are disabled for both the default Markdown library instance <em>and</em> any set via <code>setLibrary</code>.</p>
<details>
<summary>Want to <strong>re-enable</strong> Indented Code Blocks?</summary>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><strong>Careful!</strong> This feature is <a href="https://github.com/11ty/eleventy/issues/2438">(almost) universally disliked</a>.</div></div>
<p>To re-enable Indented Code Blocks in Eleventy 2.0 (or newer), use the <a href="https://www.11ty.dev/docs/languages/markdown/#optional-amend-the-library-instance"><code>amendLibrary</code> approach</a>. Make sure you read through the warning documented below to understand the ramifications.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">amendLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token parameter">mdLib</span> <span class="token operator">=></span> mdLib<span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token string">"code"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div id="there-are-extra-and-in-my-output"><!-- Backwards compat --></div>
<div id="there-are-extra-pre-and-code-tags-in-my-output"><!-- Backwards compat --></div>
<p>When using <a href="https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks">Indented Code Blocks</a>, any content that follows this four (or more) space indent may be subject to transformation. If you pre-process your markdown using Nunjucks or Liquid or another templating engine, that means the content retrieved from an <code>include</code> or a shortcode may also fit this formatting. Careful when you include extra whitespace in your includes or shortcodes!</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// 🛑 Bad, don’t do this</span><br>eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"badShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br> This is a code block in a markdown file!<br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token comment">// ✅ This will return expected output</span><br>eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"goodShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>This will not be a code block in a markdown file.<br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>If you still wish to indent your template literals, you can use <a href="https://www.npmjs.com/package/outdent">outdent</a> to strip each line of indentation before handing it off to the renderer.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// ✅ This is also acceptable</span><br>eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"alsoGoodShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> outdent<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br> This will not be a code block in a markdown file.<br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</details>
<details>
<summary>Want to <strong>disable</strong> Indented Code Blocks on Eleventy v1 or older?</summary>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> markdownIt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"markdown-it"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token comment">// … truncated for brevity</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token function">markdownIt</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token string">"code"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="ZE5Np95-PeU" params="start=42" playlabel="Play: The Dreaded Markdown Indented Code Blocks (Weekly №14)" style="background-image:url('https://i.ytimg.com/vi/ZE5Np95-PeU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=ZE5Np95-PeU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: The Dreaded Markdown Indented Code Blocks (Weekly №14)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=ZE5Np95-PeU&t=42">The Dreaded Markdown Indented Code Blocks (Weekly №14) <code>▶0m42s</code></a></is-land></div></div>
<h2 id="why-cant-i-return-markdown-from-paired-shortcodes-to-use-in-a-markdown-file" tabindex="-1">Why can’t I return markdown from paired shortcodes to use in a markdown file? <a class="direct-link" href="https://www.11ty.dev/docs/languages/markdown/#why-cant-i-return-markdown-from-paired-shortcodes-to-use-in-a-markdown-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>Common Pitfall</strong></a>.</div></div>
<p>The truth is, <strong>you can</strong> return markdown inside shortcodes (as long as the file is transforming markdown, either as a <code>.md</code> file extension or <a href="https://www.11ty.dev/docs/languages/#overriding-the-template-language">with <code>templateEngineOverride</code></a>). However, there is one small wrinkle that might catch you off guard.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"myShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Method A: ✅ This works fine</span><br> <span class="token keyword">return</span> content<span class="token punctuation">;</span><br><br> <span class="token comment">// Method B: ⚠️ Careful when wrapping with HTML</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>content<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid, Nunjucks</div>
<pre><code>{% myShortcode %}My really *important* content.{% endmyShortcode %}
</code></pre>
<ol>
<li>Method A returns: <code>My really *important* content.</code> which is successfully <a href="https://spec.commonmark.org/dingus/?text=My%20really%20*important*%20content.">transformed as markdown into <code>My really <em>important</em> content</code></a>.</li>
<li>Method B returns: <code><div>My really *important* content.</div></code> which markdown treats as an HTML block which cannot have nested markdown inside of it. It’s <a href="https://spec.commonmark.org/dingus/?text=%3Cdiv%3EMy%20really%20*important*%20content.%3C%2Fdiv%3E">transformed into <code><div>My really *important* content.</div></code></a>. Read more at the <a href="https://spec.commonmark.org/0.28/#html-blocks">CommonMark specification on HTML blocks</a>.</li>
</ol>
Mustache
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/mustache/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/mustache/#mustache-options">Mustache Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/mustache/#optional-set-your-own-library-instance">Optional: Set your own Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/mustache/#supported-features">Supported Features </a></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mustache</code></td>
<td><code>.mustache</code></td>
<td><a href="https://github.com/janl/mustache.js/"><code>mustache.js</code></a></td>
</tr>
</tbody>
</table>
<p>You can override a <code>.mustache</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="mustache-options" tabindex="-1">Mustache Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/mustache/#mustache-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own Library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/mustache/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As an escape mechanism for advanced usage, pass in your own instance of the Mustache library using the Configuration API.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> mustache <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"mustache"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"mustache"</span><span class="token punctuation">,</span> mustache<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/mustache/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Partials</td>
<td><code>{{> user}}</code> looks for <code>_includes/user.mustache</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>🚫 Partials (Relative Path)</td>
<td><strong>Not yet supported</strong>: <code>{{> ./user}}</code> looks for <code>user.mustache</code> in the template’s current directory.</td>
</tr>
</tbody>
</table>
Template Language—Nunjucks
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/nunjucks/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-environment-options">Nunjucks Environment Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#optional-use-your-nunjucks-environment-options">Optional: Use your Nunjucks Environment Options </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#advanced-use-your-nunjucks-environment">Advanced: Use your Nunjucks Environment </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#supported-features">Supported Features </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#filters">Filters </a><ul><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#multiple-filter-arguments">Multiple Filter Arguments </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-nunjucks-filters">Asynchronous Nunjucks Filters </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#shortcodes">Shortcodes </a><ul><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#single-shortcode">Single Shortcode </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#paired-shortcode">Paired Shortcode </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#shortcode-named-argument-syntax-(nunjucks-only)">Shortcode Named Argument Syntax (Nunjucks-only) </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-shortcodes">Asynchronous Shortcodes </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#warning-the-set-tag-does-not-work-with-async-content">Warning: The set Tag Does Not Work With Async Content </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#access-to-page-data-values">Access to page data values </a></li><li><a href="https://www.11ty.dev/docs/languages/nunjucks/#generic-global">Generic Global </a></li></ul></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>njk</code></td>
<td><code>.njk</code></td>
<td><a href="https://mozilla.github.io/nunjucks/"><code>nunjucks</code></a></td>
</tr>
</tbody>
</table>
<p>You can override a <code>.njk</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="nunjucks-environment-options" tabindex="-1">Nunjucks Environment Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-environment-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>We use <a href="https://mozilla.github.io/nunjucks/api.html#configure">Nunjucks defaults for all environment options</a> (shown in the <code>configure</code> section of the Nunjucks docs).</p>
<h3 id="optional-use-your-nunjucks-environment-options" tabindex="-1">Optional: Use your Nunjucks Environment Options <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#optional-use-your-nunjucks-environment-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>It’s recommended to use the Configuration API to override the default Nunjucks options.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setNunjucksEnvironmentOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">throwOnUndefined</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">autoescape</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// warning: don’t do this!</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="advanced-use-your-nunjucks-environment" tabindex="-1">Advanced: Use your Nunjucks Environment <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#advanced-use-your-nunjucks-environment">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>While it is preferred and simpler to use the Options-specific API method above (new in Eleventy 1.0!)—as an escape mechanism for advanced usage you may pass in your own instance of a <a href="https://mozilla.github.io/nunjucks/api.html#environment">Nunjucks Environment</a> using the Configuration API.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">Not compatible with <code>setNunjucksEnvironmentOptions</code> above—this method will <em>override</em> any configuration set there.</div></div>
<pre class="language-js"><code class="language-js"><span class="token keyword">let</span> Nunjucks <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"nunjucks"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> nunjucksEnvironment <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Nunjucks<span class="token punctuation">.</span>Environment</span><span class="token punctuation">(</span><br> <span class="token keyword">new</span> <span class="token class-name">Nunjucks<span class="token punctuation">.</span>FileSystemLoader</span><span class="token punctuation">(</span><span class="token string">"_includes"</span><span class="token punctuation">)</span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"njk"</span><span class="token punctuation">,</span> nunjucksEnvironment<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Includes</td>
<td><code>{% include 'included.njk' %}</code> looks in <code>_includes/included.njk</code>. Filenames must be in quotes. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Includes (Relative Path)</td>
<td>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory).<br><br>Example: <code>{% include './included.njk' %}</code> looks for <code>included.njk</code> in the template’s current directory. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Extends</td>
<td><code>{% extends 'base.njk' %}</code> looks in <code>_includes/base.njk</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Extends (Relative Path)</td>
<td>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory)<br><br>Example: <code>{% extends './base.njk' %}</code> looks for <code>base.njk</code> in the template’s current directory. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Imports</td>
<td><code>{% import 'macros.njk' %}</code> looks in <code>_includes/macros.njk</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Imports (Relative Path)</td>
<td>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory):<br><code>{% import './macros.njk' %}</code> looks for <code>macros.njk</code> in the template’s current directory. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Filters</td>
<td><code>{% name | filterName %}</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a>.</td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/filters/#universal-filters">Eleventy Universal Filters</a></td>
<td><code>{% name | filterName %}</code> Read more about <a href="https://www.11ty.dev/docs/filters/">Filters</a>.</td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/custom-tags/">Custom Tags</a></td>
<td><code>{% uppercase name %}</code> Read more about <a href="https://www.11ty.dev/docs/custom-tags/">Custom Tags</a>.</td>
</tr>
<tr>
<td>✅ <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a></td>
<td><code>{% uppercase name %}</code> Read more about <a href="https://www.11ty.dev/docs/shortcodes/">Shortcodes</a>.</td>
</tr>
</tbody>
</table>
<h2 id="filters" tabindex="-1">Filters <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Filters are used to transform or modify content. You can add Nunjucks specific filters, but you probably want to add a <a href="https://www.11ty.dev/docs/filters/">Universal filter</a> instead.</p>
<p>Read more about <a href="https://mozilla.github.io/nunjucks/templating.html#filters">Nunjucks Filter syntax</a>.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Nunjucks Filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksFilter</span><span class="token punctuation">(</span><span class="token string">"myNjkFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Nunjucks Asynchronous Filter (read on below)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"myAsyncNjkFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"myFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ myVariable | myFilter }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<h3 id="multiple-filter-arguments" tabindex="-1">Multiple Filter Arguments <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#multiple-filter-arguments">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Nunjucks Filter</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksFilter</span><span class="token punctuation">(</span><span class="token string">"concatThreeStrings"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">arg1<span class="token punctuation">,</span> arg2<span class="token punctuation">,</span> arg3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> arg1 <span class="token operator">+</span> arg2 <span class="token operator">+</span> arg3<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ "first" | concatThreeThings("second", "third") }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<h3 id="asynchronous-nunjucks-filters" tabindex="-1">Asynchronous Nunjucks Filters <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-nunjucks-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>By default, almost all templating engines are synchronous. Nunjucks supports some asynchronous behavior, like filters. Here’s how that works:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"myAsyncFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">"My Result"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The last argument here is the callback function, the first argument of which is the error object and the second is the result data. Use this filter like you would any other: <code>{{ myValue | myAsyncFilter }}</code>.</p>
<p>Here’s a Nunjucks example with 2 arguments:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"myAsyncFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value1<span class="token punctuation">,</span> value2<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">"My Result"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Multi-argument filters in Nunjucks are called like this: <code>{{ myValue1 | myAsyncFilter(myValue2) }}</code>.</p>
<h2 id="shortcodes" tabindex="-1">Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Shortcodes are reusable bits of content. You can add Nunjucks specific shortcodes, but it’s probably easier to add a <a href="https://www.11ty.dev/docs/shortcodes/">Universal shortcode</a> instead.</p>
<h3 id="single-shortcode" tabindex="-1">Single Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#single-shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Nunjucks Shortcode</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, JavaScript, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>twitterUsername<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="nunjucks-template-usage" tabindex="-1">Nunjucks Template Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-template-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">user</span> <span class="token string">"Zach Leatherman"</span><span class="token punctuation">,</span> <span class="token string">"zachleat"</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
<h4 id="outputs" tabindex="-1">Outputs <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#outputs">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="paired-shortcode" tabindex="-1">Paired Shortcode <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#paired-shortcode">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Nunjucks Shortcode</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bioContent<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bioContent<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>twitterUsername<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br><div class="user_bio"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bioContent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="nunjucks-usage" tabindex="-1">Nunjucks Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Note that you can put any Nunjucks tags or content inside the <code>{% user %}</code> shortcode! Yes, even other shortcodes!</p>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">user</span> <span class="token string">"Zach Leatherman"</span><span class="token punctuation">,</span> <span class="token string">"zachleat"</span> <span class="token operator">%</span><span class="token punctuation">}</span><br> <span class="token variable">Zach</span> <span class="token variable">likes</span> <span class="token variable">to</span> <span class="token variable">take</span> <span class="token variable">long</span> <span class="token variable">walks</span> <span class="token variable">on</span> <span class="token variable">Nebraska</span> <span class="token variable">beaches</span><span class="token punctuation">.</span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">enduser</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_bio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach likes to take long walks on Nebraska beaches.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="shortcode-named-argument-syntax-(nunjucks-only)" tabindex="-1">Shortcode Named Argument Syntax (Nunjucks-only) <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#shortcode-named-argument-syntax-(nunjucks-only)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Creates a single argument object to pass to the shortcode.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Nunjucks Shortcode</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user"><br><div class="user_name"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>twitter <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div class="user_twitter">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>twitter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="nunjucks-usage-1" tabindex="-1">Nunjucks Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-usage-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>The order of the arguments doesn’t matter.</p>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">user</span> <span class="token variable">name</span><span class="token operator">=</span><span class="token string">"Zach Leatherman"</span><span class="token punctuation">,</span> <span class="token variable">twitter</span><span class="token operator">=</span><span class="token string">"zachleat"</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">user</span> <span class="token variable">twitter</span><span class="token operator">=</span><span class="token string">"zachleat"</span><span class="token punctuation">,</span> <span class="token variable">name</span><span class="token operator">=</span><span class="token string">"Zach Leatherman"</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_twitter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@zachleat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h4 id="nunjucks-usage-2" tabindex="-1">Nunjucks Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-usage-2">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Importantly, this syntax means that any of the arguments can be optional (without having to pass in a bunch of <code>null, null, null</code> to maintain order).</p>
<pre class="language-html"><code class="language-html">{% user name="Zach Leatherman" %}</code></pre>
<h5>Outputs</h5>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zach Leatherman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h3 id="asynchronous-shortcodes" tabindex="-1">Asynchronous Shortcodes <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#asynchronous-shortcodes">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Note that the configuration methods here to add asynchronous shortcodes are different than their synchronous counterparts. This is just another gentle reminder here that these API methods are pretty verbose and it’s probably easier to add a <a href="https://www.11ty.dev/docs/shortcodes/">Universal shortcode</a> instead.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">fetchAThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPairedNunjucksAsyncShortcode</span><span class="token punctuation">(</span><span class="token string">"user2"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> name<span class="token punctuation">,</span> twitterUsername</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">fetchAThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h4 id="nunjucks-usage-3" tabindex="-1">Nunjucks Usage <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#nunjucks-usage-3">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>This is identical to the synchronous Nunjucks usage.</p>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">user</span> <span class="token string">"Zach Leatherman"</span><span class="token punctuation">,</span> <span class="token string">"zachleat"</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">user2</span> <span class="token string">"Zach Leatherman"</span><span class="token punctuation">,</span> <span class="token string">"zachleat"</span> <span class="token operator">%</span><span class="token punctuation">}</span><br> <span class="token variable">Zach</span> <span class="token variable">likes</span> <span class="token variable">to</span> <span class="token variable">take</span> <span class="token variable">long</span> <span class="token variable">walks</span> <span class="token variable">on</span> <span class="token variable">Nebraska</span> <span class="token variable">beaches</span><span class="token punctuation">.</span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">enduser2</span> <span class="token operator">%</span><span class="token punctuation">}</span></code></pre>
<h3 id="warning-the-set-tag-does-not-work-with-async-content" tabindex="-1">Warning: The <code>set</code> Tag Does Not Work With Async Content <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#warning-the-set-tag-does-not-work-with-async-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>Common Pitfall</strong></a>.</div></div>
<p><a href="https://mozilla.github.io/nunjucks/templating.html#set">Nunjucks’ <code>{% set %}</code> tag</a> does not work to capture asynchronous content (e.g. asynchronous shortcodes).</p>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span>Starting in Eleventy v1.0.0, Eleventy provides a <code>{% setAsync %}</code> tag to work around this limitation. Notably and contrary to <code>set</code>, <code>setAsync</code>’s first argument is a string.</p>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">setAsync</span> <span class="token string">"myVariableName"</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">myAsyncShortcode</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><span class="token punctuation">{</span><span class="token operator">%</span> <span class="token variable">endsetAsync</span> <span class="token operator">%</span><span class="token punctuation">}</span><br><br><span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span> <span class="token variable">Now</span> <span class="token variable">use</span> <span class="token variable">the</span> <span class="token variable">variable</span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">myVariableName</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></code></pre>
<h3 id="access-to-page-data-values" tabindex="-1">Access to <code>page</code> data values <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#access-to-page-data-values">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you aren’t using an arrow function, Nunjucks Shortcodes (and Handlebars, Liquid, and 11ty.js JavaScript Functions) will have access to Eleventy <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contents"><code>page</code> data values</a> without needing to pass them in as arguments.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksShortcode</span><span class="token punctuation">(</span><span class="token string">"myShortcode"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Available in 0.11.0 and above</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// For example:</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>inputPath <span class="token punctuation">)</span><span class="token punctuation">;</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>fileSlug <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="generic-global" tabindex="-1">Generic Global <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/languages/nunjucks/#generic-global">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Nunjucks provides a custom way to <a href="https://mozilla.github.io/nunjucks/api.html#addglobal">add globals</a> to templates. These can be any arbitrary JavaScript: functions, variables, etc. Note that this is not async-friendly (Nunjucks does not support <code>await</code> inside of templates).</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksGlobal</span><span class="token punctuation">(</span><span class="token string">"fortythree"</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre><code>{{ fortythree }}
</code></pre>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksGlobal</span><span class="token punctuation">(</span><span class="token string">"fortytwo"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token number">42</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre><code>{{ fortytwo() }}
</code></pre>
<p>Read more on the <a href="https://mozilla.github.io/nunjucks/api.html#addglobal">Nunjucks documentation</a> or <a href="https://github.com/11ty/eleventy/pull/1060">relevant discussion on Eleventy Issue #1060</a>.</p>
Pug
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/languages/pug/
<details class="toc" open="">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/languages/pug/#pug-options">Pug Options </a><ul><li><a href="https://www.11ty.dev/docs/languages/pug/#optional-compile/render-options">Optional: Compile/Render Options </a></li><li><a href="https://www.11ty.dev/docs/languages/pug/#optional-set-your-own-library-instance">Optional: Set your own Library instance </a></li></ul></li><li><a href="https://www.11ty.dev/docs/languages/pug/#supported-features">Supported Features </a></li></ul></div><p></p>
</details>
<table>
<thead>
<tr>
<th>Eleventy Short Name</th>
<th>File Extension</th>
<th>npm Package</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>pug</code></td>
<td><code>.pug</code></td>
<td><a href="https://github.com/pugjs/pug"><code>pug</code></a></td>
</tr>
</tbody>
</table>
<p>Pug templates used to be called Jade templates and the project was renamed.</p>
<p>You can override a <code>.pug</code> file’s template engine. Read more at <a href="https://www.11ty.dev/docs/languages/">Changing a Template’s Rendering Engine</a>.</p>
<h2 id="pug-options" tabindex="-1">Pug Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/pug/#pug-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="optional-compile/render-options" tabindex="-1">Optional: Compile/Render Options <a class="direct-link" href="https://www.11ty.dev/docs/languages/pug/#optional-compile/render-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Set compile/render options using the Configuration API. See all <a href="https://pugjs.org/api/reference.html#options">Pug options</a>.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setPugOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">debug</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="optional-set-your-own-library-instance" tabindex="-1">Optional: Set your own Library instance <a class="direct-link" href="https://www.11ty.dev/docs/languages/pug/#optional-set-your-own-library-instance">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>As an escape mechanism for advanced usage, pass in your own instance of the Pug library using the Configuration API.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">let</span> pug <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"pug"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLibrary</span><span class="token punctuation">(</span><span class="token string">"pug"</span><span class="token punctuation">,</span> pug<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supported-features" tabindex="-1">Supported Features <a class="direct-link" href="https://www.11ty.dev/docs/languages/pug/#supported-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Syntax</th>
</tr>
</thead>
<tbody>
<tr>
<td>✅ Includes (Absolute Path)</td>
<td><code>include /includedvar.pug</code> looks in <code>_includes/includedvar.pug</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Includes (Relative Path)</td>
<td>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory).<br><br>Example: <code>{% include ./included.pug %}</code> looks for <code>included.pug</code> in the template’s current directory. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Extends (Absolute Path)</td>
<td><code>extends /layout.pug</code> looks in <code>_includes/layout.pug</code>. Does not process front matter in the include file.</td>
</tr>
<tr>
<td>✅ Extends (Relative Path)</td>
<td>Relative paths use <code>./</code> (template’s directory) or <code>../</code> (template’s parent directory).<br><br>Example: <code>{% extends ./layout.pug %}</code> looks for <code>layout.pug</code> in the template’s current directory. Does not process front matter in the extends file.</td>
</tr>
</tbody>
</table>
Layout Chaining
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/layout-chaining/
<h1>Layout Chaining</h1>
<p>Your layouts can also use a layout! Add the same <code>layout</code> front matter data to your layout template file and it’ll chain. You do not have to use the same template engine across layouts and content, you can mix and match.</p>
<p>To chain a layout, let’s look at an example:</p>
<div class="codetitle codetitle-left"><b>Filename </b>layout-chain-example.md</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">layout</span><span class="token punctuation">:</span> mainlayout.njk<br><span class="token key atrule">title</span><span class="token punctuation">:</span> My Rad Blog</span><br><span class="token punctuation">---</span></span><br><span class="token title important"><span class="token punctuation">#</span> My Rad Markdown Blog Post</span></code></pre>
<p>We want to add a main element around our post’s content because we like accessibility.</p>
<p>Here’s what <code>mainlayout.njk</code> would look like:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/mainlayout.njk</div>
<pre class="language-html"><code class="language-html">---<br>layout: mylayout.njk<br>myOtherData: hello<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span><br> {{ content | safe }}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span></code></pre>
<p>This layout would then be itself wrapped in the same <code>mylayout.njk</code> we used in our previous example:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/mylayout.njk</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{title}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> {{ content | safe }}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Used together, this would output:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<div class="codetitle codetitle-left"><b>Output Filename </b>_site/layout-chain-example/index.html</div>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Rad Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My Rad Markdown Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</div></div>
<h2 id="addendum-about-existing-templating-features" tabindex="-1">Addendum about existing Templating features <a class="direct-link" href="https://www.11ty.dev/docs/layout-chaining/#addendum-about-existing-templating-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>It is worth noting that existing template reuse mechanisms built into different templating languages are still available to you. For instance, Nunjucks calls it <a href="https://mozilla.github.io/nunjucks/templating.html#template-inheritance">Template Inheritance</a> and exposes with <code>{% extends %}</code>. Eleventy’s layout system exists a layer above this and exposes a nice multi-template-language mechanism to configure layouts in your content’s front matter and share data between them.</p>
Layouts
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/layouts/
<h1>Layouts</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts </a><ul><li><a href="https://www.11ty.dev/docs/layouts/#sources-of-data">Sources of Data </a></li></ul></li><li><a href="https://www.11ty.dev/docs/layouts/#layout-aliasing">Layout Aliasing </a></li><li><a href="https://www.11ty.dev/docs/layouts/#prevent-double-escaping-in-layouts">Prevent double-escaping in layouts </a></li><li><a href="https://www.11ty.dev/docs/layouts/#layout-chaining">Layout Chaining </a></li><li><a href="https://www.11ty.dev/docs/layouts/#omitting-the-layouts-file-extension">Omitting the Layout’s File Extension </a></li></ul></div><p></p>
</details>
<p>Eleventy Layouts are special templates that can be used to wrap other content.</p>
<p>To denote that a piece of content should be wrapped in a template, use the <code>layout</code> key in your front matter, like so:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/layouts/#layouts-md" role="tab">Markdown</a>
<a href="https://www.11ty.dev/docs/layouts/#layouts-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/layouts/#layouts-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/layouts/#layouts-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/layouts/#layouts-hbs" role="tab">Handlebars</a>
</div>
<div id="layouts-md" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.md</div>
<div class="codetitle codetitle-left"><b>Syntax </b>Markdown</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">layout</span><span class="token punctuation">:</span> mylayout.njk<br><span class="token key atrule">title</span><span class="token punctuation">:</span> My Rad Markdown Blog Post</span><br><span class="token punctuation">---</span></span><br><span class="token title important"><span class="token punctuation">#</span> {{ title }}</span></code></pre>
</div>
<div id="layouts-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.liquid</div>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>layout: mylayout.njk<br>title: My Rad Liquid Blog Post<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="layouts-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.njk</div>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>layout: mylayout.njk<br>title: My Rad Nunjucks Blog Post<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="layouts-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.11ty.js</div>
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token string">"mylayout.njk"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"My Rad JavaScript Blog Post"</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h1></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="layouts-hbs" role="tabpanel">
<div class="codetitle codetitle-left"><b>Filename </b>index.hbs</div>
<div class="codetitle codetitle-left"><b>Syntax </b>Handlebars</div>
<pre class="language-handlebars"><code class="language-handlebars">---<br>layout: mylayout.njk<br>title: My Rad Handlebars Blog Post<br>---<br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token handlebars language-handlebars"><span class="token delimiter punctuation">{{</span><span class="token variable">title</span><span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>This will look for a <code>mylayout.njk</code> Nunjucks file in your <em>includes</em> folder at <code>_includes/mylayout.njk</code>.</p>
<ul>
<li>You can use any template language in your layout file—it doesn’t need to match the template language of the content: an <code>ejs</code> template can use a <code>njk</code> layout.</li>
<li>Layouts can include subdirectories: <code>layout: "layouts/base.njk"</code> maps to <code>_includes/layouts/base.njk</code>.</li>
<li>You can have a <a href="https://www.11ty.dev/docs/config/#directory-for-layouts-(optional)">separate folder for Eleventy layouts</a> if you’d prefer to have them separate from your <em>includes</em> folder.</li>
</ul>
<p>Next, we need to create a <code>mylayout.njk</code> file. It can contain any type of text, but here we’re using HTML:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_includes/mylayout.njk</div><pre class="language-html"><code class="language-html">---<br>title: My Rad Blog<br>---<br><br><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> {{ content | safe }}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Note that the layout template will populate the <code>content</code> data with the child template’s content. Also note that we don’t want to double-escape the output, so we’re using the provided Nunjucks <code>safe</code> filter here (see more language double-escaping syntax below).</p>
<p>Layouts can contain their own front matter data! It’ll be merged with the content’s data on render. Content data takes precedence, if conflicting keys arise. Read more about <a href="https://www.11ty.dev/docs/data-cascade/">how Eleventy merges data in what we call the Data Cascade</a>.</p>
<p>All of this will output the following HTML content to <code>_site/content-using-layout/index.html</code>:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View the output from:
<a href="https://www.11ty.dev/docs/layouts/#layoutoutput-md" role="tab">Markdown</a>
<a href="https://www.11ty.dev/docs/layouts/#layoutoutput-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/layouts/#layoutoutput-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/layouts/#layoutoutput-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/layouts/#layoutoutput-hbs" role="tab">Handlebars</a>
</div>
<div id="layoutoutput-md" role="tabpanel">
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Rad Markdown Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My Rad Markdown Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</div></div>
</div>
<div id="layoutoutput-liquid" role="tabpanel">
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Rad Liquid Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My Rad Liquid Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</div></div>
</div>
<div id="layoutoutput-njk" role="tabpanel">
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Rad Nunjucks Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My Rad Nunjucks Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</div></div>
</div>
<div id="layoutoutput-js" role="tabpanel">
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Rad JavaScript Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My Rad JavaScript Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</div></div>
</div>
<div id="layoutoutput-hbs" role="tabpanel">
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Rad Handlebars Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My Rad Handlebars Blog Post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</div></div>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="front-matter-data-in-layouts" tabindex="-1">Front Matter Data in Layouts <a class="direct-link" href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>In <a href="https://www.11ty.dev/docs/data/">Eleventy’s Data Cascade</a>, front matter data in your template is merged with Layout front matter data! All data is merged ahead of time so that you can mix and match variables in your content and layout templates interchangeably.</p>
<p>Front matter data set in a content template takes priority over layout front matter! <a href="https://www.11ty.dev/docs/layout-chaining/">Chained layouts</a> have similar merge behavior. The closer to the content, the higher priority the data.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The placement in the data cascade for frontmatter data in layouts changed in 1.0! Take note of the new order below.</div></div>
<h3 id="sources-of-data" tabindex="-1">Sources of Data <a class="direct-link" href="https://www.11ty.dev/docs/layouts/#sources-of-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>When the data is merged in the <a href="https://www.11ty.dev/docs/data-cascade/">Eleventy Data Cascade</a>, the order of priority for sources of data is (from highest priority to lowest):</p>
<ol>
<li><a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-frontmatter/">Front Matter Data in a Template</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Template Data Files</a></li>
<li><a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files (and ascending Parent Directories)</a></li>
<li><a href="https://www.11ty.dev/docs/layouts/#front-matter-data-in-layouts">Front Matter Data in Layouts</a> <em>(this <a href="https://github.com/11ty/eleventy/issues/915">moved in 1.0</a>)</em> ⬅</li>
<li><a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a></li>
<li><a href="https://www.11ty.dev/docs/data-global/">Global Data Files</a></li>
</ol>
<h2 id="layout-aliasing" tabindex="-1">Layout Aliasing <a class="direct-link" href="https://www.11ty.dev/docs/layouts/#layout-aliasing">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Configuration API: use <code>eleventyConfig.addLayoutAlias(from, to)</code> to add layout aliases. Say you have a bunch of existing content using <code>layout: post</code>. If you don’t want to rewrite all of those values, map <code>post</code> to a new file like this:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLayoutAlias</span><span class="token punctuation">(</span><span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token string">'layouts/post.njk'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="prevent-double-escaping-in-layouts" tabindex="-1">Prevent double-escaping in layouts <a class="direct-link" href="https://www.11ty.dev/docs/layouts/#prevent-double-escaping-in-layouts">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<table>
<thead>
<tr>
<th>Template Language</th>
<th>Unescaped Content (for layout content)</th>
<th>Comparison with an Escaped Output</th>
<th>Docs</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nunjucks</td>
<td><code>{{ content | safe }}</code></td>
<td><code>{{ value }}</code></td>
<td><a href="https://mozilla.github.io/nunjucks/templating.html#safe">Docs</a></td>
</tr>
<tr>
<td>EJS</td>
<td><code><%- content %></code></td>
<td><code><%= value %></code></td>
<td><a href="https://www.npmjs.com/package/ejs#tags">Docs</a></td>
</tr>
<tr>
<td>Handlebars</td>
<td><code>{{{ content }}}</code> (triple stash)</td>
<td><code>{{ value }}</code> (double stash)</td>
<td><a href="https://handlebarsjs.com/#html-escaping">Docs</a></td>
</tr>
<tr>
<td>Mustache</td>
<td><code>{{{ content }}}</code> (triple stash)</td>
<td><code>{{ value }}</code> (double stash)</td>
<td><a href="https://github.com/janl/mustache.js#variables">Docs</a></td>
</tr>
<tr>
<td>Liquid</td>
<td>is by default unescaped so you can use <code>{{ content }}</code></td>
<td><code>{{ value | escape }}</code></td>
<td><a href="https://liquidjs.com/filters/escape.html">Docs</a></td>
</tr>
<tr>
<td>HAML</td>
<td><code>! #{ content }</code></td>
<td><code>= #{ content }</code></td>
<td><a href="http://haml.info/docs/yardoc/file.REFERENCE.html#unescaping_html">Docs</a></td>
</tr>
<tr>
<td>Pug</td>
<td><code>!{content}</code></td>
<td><code>#{value}</code></td>
<td><a href="https://pugjs.org/language/interpolation.html#string-interpolation-unescaped">Docs</a></td>
</tr>
</tbody>
</table>
<h2 id="layout-chaining" tabindex="-1">Layout Chaining <a class="direct-link" href="https://www.11ty.dev/docs/layouts/#layout-chaining">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Chaining multiple layouts together. <a href="https://www.11ty.dev/docs/layout-chaining/">Read more about Layout Chaining</a>.</p>
<h2 id="omitting-the-layouts-file-extension" tabindex="-1">Omitting the Layout’s File Extension <a class="direct-link" href="https://www.11ty.dev/docs/layouts/#omitting-the-layouts-file-extension">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Omitting the layout file extension (for example <code>layout: mylayout</code>) causes Eleventy to cycle through all of the supported template formats (<code>mylayout.*</code>) to look for a matching layout file. There are a few drawbacks to this approach:</p>
<ol>
<li>It is slower! Including the file extension bypasses the file search.</li>
<li>It is ambiguous if you have multiple layout files with the same name and different extensions (e.g. <code>mylayout.njk</code> and <code>mylayout.liquid</code>).</li>
</ol>
<p>You can disable extensionless layouts in your project with the <code>setLayoutResolution</code> Configuration API method <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.21">Added in v2.0.0</span> (we may swap this to be the default in a future major version of Eleventy):</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setLayoutResolution</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Add your site
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/leaderboards-add/
<h1>向 <a href="https://www.11ty.dev/speedlify/">Eleventy Leaderboards</a> 提交你的网站</h1>
<h2 id="step-1-在-github-上创建一个-issue" tabindex="-1"><span class="numberflag"><span class="sr-only">Step</span> 1</span> 在 GitHub 上创建一个 Issue <a class="direct-link" href="https://www.11ty.dev/docs/leaderboards-add/#step-1-%E5%9C%A8-github-%E4%B8%8A%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA-issue">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>向 <a href="https://github.com/11ty/11ty-community/issues/new/choose">我们在 GitHub 上的 <code>11ty-community</code> 仓库</a> 提交一个 issue 就行啦!</p>
<h2 id="step-2-已经搞定了" tabindex="-1"><span class="numberflag"><span class="sr-only">Step</span> 2</span> 已经搞定了 <a class="direct-link" href="https://www.11ty.dev/docs/leaderboards-add/#step-2-%E5%B7%B2%E7%BB%8F%E6%90%9E%E5%AE%9A%E4%BA%86">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>没有第二步。我们将审核然后批准,你的网站就能被收录了!</p>
<h3 id="了解更多" tabindex="-1">了解更多 <a class="direct-link" href="https://www.11ty.dev/docs/leaderboards-add/#%E4%BA%86%E8%A7%A3%E6%9B%B4%E5%A4%9A">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="dIa2Y4zesnw" playlabel="Play: Get your #BuiltWithEleventy site on 11ty.dev and the Leaderboards (Weekly №6)" style="background-image:url('https://i.ytimg.com/vi/dIa2Y4zesnw/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=dIa2Y4zesnw" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Get your #BuiltWithEleventy site on 11ty.dev and the Leaderboards (Weekly №6)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=dIa2Y4zesnw">Get your #BuiltWithEleventy site on 11ty.dev and the Leaderboards (Weekly №6)</a></is-land></div></div>
Open Collective
2023-03-18T09:02:31Z
https://www.11ty.dev/false
Create Pages From Data
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/pages-from-data/
<h1>Create Pages From Data</h1>
<p>The <a href="https://www.11ty.dev/docs/pagination/">Pagination feature</a> is used for iterating over any data to create multiple output files.</p>
<p>Pagination can be used for traditional style pagination outputs like <code>/result/page-0/</code>, <code>/result/page-1/</code>. Pagination can also iterate over an object too and output any <code>permalink</code> value!</p>
<h2 id="an-example" tabindex="-1">An Example <a class="direct-link" href="https://www.11ty.dev/docs/pages-from-data/#an-example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Let's look at an example where we dynamically build pages based on data from a json file. First let's consider this simple data file stored in <code>_data/possums.json</code>:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Fluffy"</span><span class="token punctuation">,</span><br> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">2</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span><br> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Snugglepants"</span><span class="token punctuation">,</span><br> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">5</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span><br> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Lord Featherbottom"</span><span class="token punctuation">,</span><br> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">4</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span><br> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Pennywise"</span><span class="token punctuation">,</span><br> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">9</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">]</span></code></pre>
<p>In order to create one page per possum, we can use the following template. The file name isn’t important, but the file extension is (e.g. <code>possum-pages.liquid</code> or <code>possum-pages.njk</code>).</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> possums<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">alias</span><span class="token punctuation">:</span> possum<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"possums/{{ possum.name | slugify }}/"</span></span><br><span class="token punctuation">---</span></span><br><br>{{ possum.name }} is {{ possum.age }} years old</code></pre>
<p>This template will generate four files, one for each possum, where the filename is based on the possum's name passed through the <a href="https://www.11ty.dev/docs/filters/slugify/"><code>slugify</code></a> function. As possums are added and edited the resultant possum details page will be updated automatically.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that <code>page</code> is a reserved word so you cannot use <code>alias: page</code>. Read about Eleventy’s reserved data names in <a href="https://www.11ty.dev/docs/data-eleventy-supplied">Eleventy Supplied Data</a>.</div></div>
<h2 id="related-pagination-topics" tabindex="-1">Related Pagination Topics: <a class="direct-link" href="https://www.11ty.dev/docs/pages-from-data/#related-pagination-topics">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/pagination/#paging-an-object">Pagination: Paging an Object</a></li>
<li><a href="https://www.11ty.dev/docs/pagination/#remapping-with-permalinks">Pagination: Remapping with Permalinks</a></li>
</ul>
Create a list of Navigation Links for your Pagination.
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/pagination/nav/
<h1>Pagination Navigation</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/pagination/nav/#paginating-over-an-array">Paginating over an Array </a></li><li><a href="https://www.11ty.dev/docs/pagination/nav/#starter-example">Starter Example </a><ul><li><a href="https://www.11ty.dev/docs/pagination/nav/#accessing-the-original-paginated-content">Accessing the Original Paginated Content </a></li><li><a href="https://www.11ty.dev/docs/pagination/nav/#visually-style-the-current-page-link">Visually Style the Current Page Link </a></li></ul></li><li><a href="https://www.11ty.dev/docs/pagination/nav/#add-previous-and-next-links">Add Previous and Next Links </a></li><li><a href="https://www.11ty.dev/docs/pagination/nav/#add-first-and-last-links">Add First and Last Links </a></li><li><a href="https://www.11ty.dev/docs/pagination/nav/#put-it-all-together">Put It All Together </a></li></ul></div><p></p>
</details>
<p>How to create a list of links to every paginated page on a pagination template.</p>
<h2 id="paginating-over-an-array" tabindex="-1">Paginating over an Array <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#paginating-over-an-array">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Consider the following example paginating our <code>testdata</code> array:</p>
<is-land import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#paginationnavarray-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paginationnavarray-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paginationnavarray-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paginationnavarray-hbs" role="tab">Handlebars</a>
</div>
<div id="paginationnavarray-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>pagination:<br> data: testdata<br> size: 2<br>testdata:<br> - item1<br> - item2<br> - item3<br> - item4<br> - item5<br> - item6<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">comment</span> <span class="token delimiter punctuation">%}</span><span class="token comment">pagination.items has the data for the current page</span><span class="token delimiter punctuation">{%</span> <span class="token keyword">endcomment</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="paginationnavarray-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>pagination:<br> data: testdata<br> size: 2<br>testdata:<br> - item1<br> - item2<br> - item3<br> - item4<br> - item5<br> - item6<br>---<br><span class="token jinja2 language-jinja2"><span class="token comment">{# pagination.items has the data for the current page #}</span></span></code></pre>
</div>
<div id="paginationnavarray-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="paginationnavarray-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>The above example would make three different output files from the template.</p>
<ul>
<li>Page 1 would have <code>pagination.items</code> set to <code>['item1', 'item2']</code>.</li>
<li>Page 2 would have <code>pagination.items</code> set to <code>['item3', 'item4']</code>.</li>
<li>Page 3 would have <code>pagination.items</code> set to <code>['item5', 'item6']</code>.</li>
</ul>
<p>But to create a series of links to each of these paginated output templates, we’ll want to use our <code>pagination.pages</code> entries , an array of the <code>pagination.items</code> for each page.</p>
<p>A good way to think about it:</p>
<ul>
<li><code>pagination.items</code> is the chunk of data for the <em>current</em> page.</li>
<li><code>pagination.pages</code> is the chunked page data for <em>all</em> of the pages.</li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">While the above example pages over an array of data, the code provided here will operate the same for any paginated data (including objects)!</div></div>
<h2 id="starter-example" tabindex="-1">Starter Example <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#starter-example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>To create an accessible navigation structure, we want to do our research first!</p>
<ul>
<li><a href="https://www.w3.org/WAI/tutorials/menus/structure/">Web Accessibility Tutorials from the w3c Web Accessibility Initiative: Menu Structure</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav">MDN web docs: <code><nav></code>: The Navigation Section element</a></li>
<li><a href="https://scottaohara.github.io/a11y_breadcrumbs/">Scott O’Hara with an Accessible Breadcrumb Navigation Pattern</a></li>
<li><a href="https://tink.uk/using-the-aria-current-attribute/">Léonie Watson on <em>Using the aria-current attribute</em>.</a></li>
</ul>
<p>Alright, you definitely read all of those right? 😇 Here’s some accessible code you definitely would have written yourself after reading those wonderful resources:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-starter-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-starter-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-starter-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-starter-hbs" role="tab">Handlebars</a>
</div>
<div id="paged-nav-starter-liquid" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>starter.liquid</div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br>{%- for pageEntry in pagination.pages %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><a href="{{ pagination.hrefs[ forloop.index0 ] }}"{% if page.url == pagination.hrefs[ forloop.index0 ] %} aria-current="page"{% endif %}>Page {{ forloop.index }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br>{%- endfor %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="paged-nav-starter-njk" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>starter.njk</div><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br>{%- for pageEntry in pagination.pages %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}>Page {{ loop.index }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br>{%- endfor %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="paged-nav-starter-js" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>starter.11ty.js</div><pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><nav aria-labelledby="my-pagination"><br> <h2 id="my-pagination">This is my Pagination</h2><br> <ol><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>pages<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token string">'aria-current="page"'</span> <span class="token operator">:</span> <span class="token string">""</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>Page </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> </ol><br> </nav></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="paged-nav-starter-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>For our example, this code will output the following markup for our example (on the first page):</p>
<div class="codetitle codetitle-left"><b>Syntax </b>HTML</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test/<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test/1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test/2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>HTML tip</strong>: make sure the <code>id</code> attribute used on your heading (<code>id="my-pagination"</code>) is unique to your page!</div></div>
<h3 id="accessing-the-original-paginated-content" tabindex="-1">Accessing the Original Paginated Content <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#accessing-the-original-paginated-content">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Say you want to output something from the paginated data instead of bland <code>Page 1, Page 2, etc.</code> links. For that we need to access the original data!</p>
<h4 id="when-paginating-arrays" tabindex="-1">When Paginating Arrays <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#when-paginating-arrays">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> item1<br> <span class="token punctuation">-</span> item2<br> <span class="token punctuation">-</span> item3<br> <span class="token punctuation">-</span> item4<br> <span class="token punctuation">-</span> item5<br> <span class="token punctuation">-</span> item6</code></pre>
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavorig-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavorig-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavorig-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavorig-hbs" role="tab">Handlebars</a>
</div>
<div id="pagenavorig-liquid" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagenavorig-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token comment"><!-- Don’t copy this code, it’s been simplified for clarity --></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">for</span> <span class="token variable">pageEntry</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">pages</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="pagenavorig-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagenavorig-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
<ul>
<li>When <code>size</code> is set to 2, <code>pagination.pages</code> will look like: <code>[['item1', 'item2'], ['item3', 'item4'], ['item5', 'item6']]</code>
<ul>
<li>Use <code>pageEntry[0]</code> and <code>pageEntry[1]</code> to access the original content.</li>
</ul>
</li>
<li>When <code>size</code> is set to 1, <code>pagination.pages</code> will be the same as the original data: <code>['item1', 'item2', 'item3', 'item4', 'item5', 'item6']</code>
<ul>
<li>Use <code>pageEntry</code> to access the original content.</li>
</ul>
</li>
</ul>
<h4 id="when-paginating-object-literals" tabindex="-1">When Paginating Object Literals <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#when-paginating-object-literals">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">testdata</span><span class="token punctuation">:</span><br> <span class="token key atrule">key1</span><span class="token punctuation">:</span> item1<br> <span class="token key atrule">key2</span><span class="token punctuation">:</span> item2<br> <span class="token key atrule">key3</span><span class="token punctuation">:</span> item3<br> <span class="token key atrule">key4</span><span class="token punctuation">:</span> item4<br> <span class="token key atrule">key5</span><span class="token punctuation">:</span> item5<br> <span class="token key atrule">key6</span><span class="token punctuation">:</span> item6</code></pre>
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavobjectlit-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavobjectlit-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavobjectlit-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#pagenavobjectlit-hbs" role="tab">Handlebars</a>
</div>
<div id="pagenavobjectlit-liquid" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagenavobjectlit-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token comment"><!-- Don’t copy this code, it’s been simplified for clarity --></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">for</span> <span class="token variable">pageKey</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">pages</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="pagenavobjectlit-js" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="pagenavobjectlit-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
<ul>
<li>When <code>size</code> is set to 2, <code>pagination.pages</code> will look like: <code>[['key1', 'key2'], ['key3', 'key4'], ['key5', 'key6']]</code>
<ul>
<li>Use <code>testdata[ pageKey[0] ]</code> and <code>testdata[ pageKey[1] ]</code> to access the original content.</li>
</ul>
</li>
<li>When <code>size</code> is set to 1, <code>pagination.pages</code> will be the keys of the object: <code>['key1', 'key2', 'key3', 'key4', 'key5', 'key6']</code>
<ul>
<li>Use <code>testdata[ pageKey ]</code> to access the original content.</li>
</ul>
</li>
</ul>
<h3 id="visually-style-the-current-page-link" tabindex="-1">Visually Style the Current Page Link <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#visually-style-the-current-page-link">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You’ll probably also want to add some kind of visual styling to indicate that the user is on the current page. For this let’s use a light <code>background-color</code>.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>CSS</div>
<pre class="language-css"><code class="language-css"><span class="token selector">[aria-current]</span> <span class="token punctuation">{</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong id="annoy-zach">A Tip to avoid something that annoys Zach™</strong>: If you use something like <code>font-weight</code> here make sure the change in text size for the current page doesn’t make your navigation shift around between pages! This is especially important if your navigation links are displayed side-by-side on the same line.</div></div>
<h2 id="add-previous-and-next-links" tabindex="-1">Add Previous and Next Links <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#add-previous-and-next-links">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Note that if the current page (<code>page.url</code>) is the first or last in the set, we won’t output links.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-nextprev-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-nextprev-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-nextprev-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-nextprev-hbs" role="tab">Handlebars</a>
</div>
<div id="paged-nav-nextprev-liquid" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="paged-nav-nextprev-njk" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>nextprev.njk</div><pre class="language-jinja2"><code class="language-jinja2"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span></span><br><mark class="highlight-line highlight-line-active"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">previous</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">previous</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>Previous<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></mark><br><span class="highlight-line"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">pageEntry</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">pages</span> <span class="token delimiter punctuation">%}</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">==</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span>Page <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span></span><br><mark class="highlight-line highlight-line-active"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">next</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">next</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>Next<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></mark><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></span></code></pre>
</div>
<div id="paged-nav-nextprev-js" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>nextprev.11ty.js</div><pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><nav aria-labelledby="my-pagination"><br> <h2 id="my-pagination">This is my Pagination</h2><br> <ol><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>previous <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>previous<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Previous</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Previous</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>pages<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token string">'aria-current="page"'</span> <span class="token operator">:</span> <span class="token string">""</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>Page </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>next <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>next<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Next</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Next</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> </ol><br> </nav></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="paged-nav-nextprev-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<ul>
<li><code>pagination.href.previous</code> and <code>pagination.href.next</code> are added in <code>0.10.0</code>. Use <code>pagination.previousPageHref</code> or <code>pagination.nextPageHref</code> in previous versions.</li>
</ul>
<h2 id="add-first-and-last-links" tabindex="-1">Add First and Last Links <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#add-first-and-last-links">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>For clarity here, we’re omitting the previous and next links from the previous section. Note the code below to show the links only if <code>pagination.href.first</code> and <code>pagination.href.last</code> don’t match the current <code>page.url</code>.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-firstlast-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-firstlast-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-firstlast-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-firstlast-hbs" role="tab">Handlebars</a>
</div>
<div id="paged-nav-firstlast-liquid" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="paged-nav-firstlast-njk" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>firstlast.njk</div><pre class="language-jinja2"><code class="language-jinja2"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span></span><br><mark class="highlight-line highlight-line-active"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">!=</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">first</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">first</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>First<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></mark><br><span class="highlight-line"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">pageEntry</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">pages</span> <span class="token delimiter punctuation">%}</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">==</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span>Page <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span></span><br><mark class="highlight-line highlight-line-active"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">!=</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">last</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">last</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>Last<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></mark><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></span></code></pre>
</div>
<div id="paged-nav-firstlast-js" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>firstlast.11ty.js</div><pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><nav aria-labelledby="my-pagination"><br> <h2 id="my-pagination">This is my Pagination</h2><br> <ol><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token operator">===</span> data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>first <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">First</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">First</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>pages<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token string">'aria-current="page"'</span> <span class="token operator">:</span> <span class="token string">""</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>Page </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token operator">===</span> data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>last <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>last<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Last</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Last</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> </ol><br> </nav></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="paged-nav-firstlast-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="put-it-all-together" tabindex="-1">Put It All Together <a class="direct-link" href="https://www.11ty.dev/docs/pagination/nav/#put-it-all-together">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Here’s the final pagination navigation template code, pieced together:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-combined-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-combined-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-combined-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/pagination/nav/#paged-nav-combined-hbs" role="tab">Handlebars</a>
</div>
<div id="paged-nav-combined-liquid" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
<div id="paged-nav-combined-njk" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>combined.njk</div><pre class="language-jinja2"><code class="language-jinja2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">!=</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">first</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">first</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>First<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">previous</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">previous</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>Previous<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">pageEntry</span> <span class="token keyword">in</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">pages</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">==</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">hrefs</span><span class="token punctuation">[</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index0</span> <span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span>Page <span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token keyword">loop</span><span class="token punctuation">.</span><span class="token variable">index</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">next</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">next</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>Next<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">!=</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">last</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">pagination</span><span class="token punctuation">.</span><span class="token variable">href</span><span class="token punctuation">.</span><span class="token variable">last</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">else</span> <span class="token delimiter punctuation">%}</span></span>Last<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="paged-nav-combined-js" role="tabpanel"><div class="codetitle codetitle-left"><b>Filename </b>combined.11ty.js</div><pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><nav aria-labelledby="my-pagination"><br> <h2 id="my-pagination">This is my Pagination</h2><br> <ol><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token operator">===</span> data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>first <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">First</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">First</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>previous <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>previous<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Previous</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Previous</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>pages<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><li><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>hrefs<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token string">'aria-current="page"'</span> <span class="token operator">:</span> <span class="token string">""</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>Page </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></li></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>next <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>next<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Next</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Next</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> <li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url <span class="token operator">===</span> data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>last <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>pagination<span class="token punctuation">.</span>href<span class="token punctuation">.</span>last<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">Last</a></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Last</span><span class="token template-punctuation string">`</span></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li><br> </ol><br> </nav></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="paged-nav-combined-hbs" role="tabpanel">
<p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? <a href="https://github.com/11ty/11ty-website/blob/master/src/docs/pagination/nav.md" class="elv-externalexempt">Edit this page</a></em></p>
</div>
</seven-minute-tabs>
</is-land>
<p>Alright, you’ve copied the above—but don’t leave yet—<em>your work is not done (sorry)!</em> You still need to:</p>
<ul>
<li>Change <code>my-pagination</code> to a better <code>id</code> attribute for your use case and update it in <code>aria-labelledby</code> too.</li>
<li>Update the <code>This is my Pagination</code> text to make more sense for your use case.</li>
<li>Think about maybe changing the <code><h2></code> to better suit your document structure.</li>
<li>Add some <a href="https://www.11ty.dev/docs/pagination/nav/#visually-style-the-current-page-link">CSS to highlight the current page in the navigation, visually</a>.</li>
</ul>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>HTML tip</strong>: You might be tempted to use <code>role="navigation"</code> here, but it’s superfluous when using <code><nav></code>.</div></div>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c"><strong>Accessibility tip</strong>: if you style this list with <code>list-style-type: none</code>, read <a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">this article about VoiceOver</a></div></div>
<p>All of the above will output the following HTML for our example (on the first page of the set):</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<div class="codetitle codetitle-left"><b>Syntax </b>HTML</div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my Pagination<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-array/<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-array/1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-array/2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-array/1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/test-array/2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Last<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
</div></div>
Permalinks
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/permalinks/
<h1>Permalinks</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/permalinks/#cool-uris-dont-change">Cool URIs don’t change </a></li><li><a href="https://www.11ty.dev/docs/permalinks/#changing-the-output-location">Changing the output location </a><ul><li><a href="https://www.11ty.dev/docs/permalinks/#skip-writing-to-the-file-system">Skip writing to the file system </a></li><li><a href="https://www.11ty.dev/docs/permalinks/#use-template-syntax-in-permalink">Use template syntax in Permalink </a></li><li><a href="https://www.11ty.dev/docs/permalinks/#custom-file-formats">Custom File Formats </a></li></ul></li><li><a href="https://www.11ty.dev/docs/permalinks/#advanced-usage">Advanced Usage </a><ul><li><a href="https://www.11ty.dev/docs/permalinks/#mapping-one-url-to-multiple-files-for-internationalization">Mapping one URL to Multiple Files for Internationalization </a></li><li><a href="https://www.11ty.dev/docs/permalinks/#disable-templating-in-permalinks">Disable templating in permalinks </a></li><li><a href="https://www.11ty.dev/docs/permalinks/#ignore-the-output-directory">Ignore the output directory </a></li></ul></li></ul></div><p></p>
</details>
<p>You can customize the default location of templates to the output directory using Eleventy’s permalinks feature.</p>
<div id="default-input/output-examples"></div>
<p>Here’s a few examples of how it works by default (assuming your output directory is the default, <code>_site</code>):</p>
<table>
<tbody>
<tr>
<th>Input</th>
<td><code>index.njk</code></td>
</tr>
<tr>
<th>Output</th>
<td><code>_site/index.html</code></td>
</tr>
<tr>
<th>Href</th>
<td><code>/</code></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Input</th>
<td><code>template.njk</code></td>
</tr>
<tr>
<th>Output</th>
<td><code>_site/template/index.html</code></td>
</tr>
<tr>
<th>Href</th>
<td><code>/template/</code></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Input</th>
<td><code>subdir/template.njk</code></td>
</tr>
<tr>
<th>Output</th>
<td><code>_site/subdir/template/index.html</code></td>
</tr>
<tr>
<th>Href</th>
<td><code>/subdir/template/</code></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Input</th>
<td><code>subdir/template/template.njk</code> or <code>subdir/template/index.njk</code></td>
</tr>
<tr>
<th>Output</th>
<td><code>_site/subdir/template/index.html</code></td>
</tr>
<tr>
<th>Href</th>
<td><code>/subdir/template/</code></td>
</tr>
</tbody>
</table>
<h2 id="cool-uris-dont-change" tabindex="-1">Cool URIs don’t change <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#cool-uris-dont-change">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Eleventy automatically helps you make sure that <a href="https://www.w3.org/Provider/Style/URI">Cool URIs don’t change</a>.</p>
<blockquote>
<p>What to leave out…<br>
File name extension. This is a very common one. "cgi", even ".html" is something which will change. You may not be using HTML for that page in 20 years time, but you might want today's links to it to still be valid. The canonical way of making links to the W3C site doesn't use the extension.</p>
</blockquote>
<h2 id="changing-the-output-location" tabindex="-1">Changing the output location <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#changing-the-output-location">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div id="remapping-output-(permalink)"></div>
<p>To remap your template’s output to a different path than the default, use the <code>permalink</code> key in the template’s front matter. If a subdirectory does not exist, it will be created.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"this-is-a-new-path/subdirectory/testing/index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>The above is functionally equivalent to:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"this-is-a-new-path/subdirectory/testing/"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Both of the above examples will write to <code>_site/this-is-a-new-path/subdirectory/testing/index.html</code>.</p>
<p>Fear not: if multiple input files <em>attempt to write to the same output location</em>, Eleventy will throw an error for you!</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">While <code>index.html</code> is optional, it is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>Common Pitfall</strong></a> to leave off the trailing slash! If you forget it, the browser may attempt to download the file instead of displaying it (unless you’ve done some extra work to set up your <code>Content-Type</code> headers correctly).</div></div>
<h3 id="skip-writing-to-the-file-system" tabindex="-1">Skip writing to the file system <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#skip-writing-to-the-file-system">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div id="permalink-false"></div>
<p>If you set the <code>permalink</code> value to be <code>false</code>, this will disable writing the file to disk in your output folder. The file will still be processed normally (and present in collections, with its <a href="https://www.11ty.dev/docs/data-eleventy-supplied/"><code>url</code> and <code>outputPath</code> properties</a> set to <code>false</code>) but will not be available in your output directory as a standalone template.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token boolean important">false</span></span><br><span class="token punctuation">---</span></span></code></pre>
<h3 id="use-template-syntax-in-permalink" tabindex="-1">Use template syntax in Permalink <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#use-template-syntax-in-permalink">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You may use data variables here (and template syntax, too). These will be parsed with the current template’s rendering engine. It’s recommended to use the provided <a href="https://www.11ty.dev/docs/filters/slugify/"><code>slugify</code> filter</a> to create URL-safe strings from data.</p>
<div id="use-filters"></div>
<p>For example:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter using Liquid, Nunjucks</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> This is a New Path<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"subdir/{{ title | slugify }}/index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<ul>
<li>Pagination variables also work here! <a href="https://www.11ty.dev/docs/pagination/">Read more about Pagination</a></li>
</ul>
<p>Writes to <code>_site/subdir/this-is-a-new-path/index.html</code>.</p>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Using the data cascade you have the power to change the default behavior for permalinks for all content in your project. Learn more about the special <code>page</code> variables useful for permalinks to see examples of this behavior: <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#fileslug"><code>page.fileSlug</code></a> and <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#filepathstem"><code>page.filePathStem</code></a>.</div></div>
<details>
<summary>Expand to see another example using Liquid’s <code>date</code> filter.</summary>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter using Liquid</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token string">"2016-01-01T06:00-06:00"</span><br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"/{{ page.date | date: '%Y/%m/%d' }}/index.html"</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Writes to <code>_site/2016/01/01/index.html</code>. There are a variety of ways that the page.date variable can be set (using <code>date</code> in your front matter is just one of them). Read more about <a href="https://www.11ty.dev/docs/dates/">Content dates</a>.</p>
</details>
<h4 id="put-quotes-around-template-syntax-in-yaml" tabindex="-1">Put quotes around template syntax in YAML <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#put-quotes-around-template-syntax-in-yaml">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<div id="warning-about-yaml-objects"></div>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c"><strong>YAML Pitall:</strong> If your permalink uses template syntax, make sure that you use quotes! Without quotes YAML may try to parse this as an object if the first character is a <code>{</code>, for example <code>permalink: {{ page.filePathStem }}.html</code>. This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>common pitfall</strong></a>.</div></div>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML</div>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"{{ page.filePathStem }}.html"</span></code></pre>
<p>The error message might look like <code>can not read a block mapping entry; a multiline key may not be an implicit key</code>.</p>
<h3 id="custom-file-formats" tabindex="-1">Custom File Formats <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#custom-file-formats">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can change the file extension in the permalink to output to any file type. For example, to generate a JSON search index to be used by popular search libraries:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>EJS</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"index.json"</span></span><br><span class="token punctuation">---</span></span><br><%- JSON.stringify(collections.all) -%></code></pre>
<h2 id="advanced-usage" tabindex="-1">Advanced Usage <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#advanced-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="mapping-one-url-to-multiple-files-for-internationalization" tabindex="-1">Mapping one URL to Multiple Files for Internationalization <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.13">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#mapping-one-url-to-multiple-files-for-internationalization">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><em>Decouple a page’s primary URL from its permalink.</em></p>
<p>As an example, say you have two content files: <code>about.en.html</code> and <code>about.es.html</code>. You’ve already set up the <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#changing-your-project-default-permalinks"><code>addGlobalData</code> feature to remap their respective output</a> to <code>_site/about.en.html</code> and <code>_site/about.es.html</code>.</p>
<p>Use <a href="https://docs.netlify.com/routing/redirects/redirect-options/#redirect-by-country-or-language">server-side redirects</a> to control which of these files is shown.</p>
<ul>
<li><a href="https://docs.netlify.com/routing/redirects/redirect-options/#redirect-by-country-or-language">Netlify Redirects</a></li>
<li><a href="https://fantasai.inkedblade.net/web-design/l10n">Apache Content Negotiation</a> related to <a href="https://github.com/11ty/eleventy/issues/761">Issue #761</a></li>
</ul>
<p>These will work as expected out of the box, except for the <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable"><code>page.url</code></a> variable and the URL reported in <a href="https://www.11ty.dev/docs/collections/#collection-item-data-structure">collection objects</a> (et al).</p>
<p>Say we want two or more files on the file system (e.g. <code>about.en.html</code> and <code>about.es.html</code>) to map to a single page URL (<code>/about/</code>—not <s><code>/about.en.html</code></s> or <s><code>/about.es.html</code></s>). This is now possible using a new URL Transforms feature. URL transforms let you modify the <code>page.url</code> for a content document based.</p>
<p>This example matches any <code>.xx.html</code> URL:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addUrlTransform</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>url<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// `url` is guaranteed to be a string here even if you’re using `permalink: false`</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span>url<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.[a-z]{2}\.html$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> url<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">*</span> <span class="token string">".en.html"</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"/"</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token comment">// Returning undefined skips the url transform.</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This approach unlocks functionality for the default build mode of Eleventy but you could also achieve some of the same functionality using the <a href="https://www.11ty.dev/docs/plugins/edge/">Edge</a> or <a href="https://www.11ty.dev/docs/plugins/serverless/">Serverless plugins</a>.</p>
<h3 id="disable-templating-in-permalinks" tabindex="-1">Disable templating in permalinks <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#disable-templating-in-permalinks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Some template syntaxes are nicer than others and you may want to opt-out of the templating engine here. Use the <code>dynamicPermalink</code> option in your front matter to disable this on a per-template basis.</p>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">This is a <a href="https://www.11ty.dev/docs/pitfalls/"><strong>common pitfall</strong></a> for users of the Pug templating engine.</div></div>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"/this-will-be-a-string-without-templating/"</span><br><span class="token key atrule">dynamicPermalink</span><span class="token punctuation">:</span> <span class="token boolean important">false</span></span><br><span class="token punctuation">---</span></span></code></pre>
<h4 id="globally-disable-templating-in-permalinks" tabindex="-1">Globally disable templating in permalinks <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#globally-disable-templating-in-permalinks">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Eleventy includes a global configuration option to disable dynamic templating altogether. This will save a few template renders and is probably marginally faster, too.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Enabled by default</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setDynamicPermalinks</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="ignore-the-output-directory" tabindex="-1">Ignore the output directory <a class="direct-link" href="https://www.11ty.dev/docs/permalinks/#ignore-the-output-directory">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>To remap your template’s output to a directory independent of the output directory (<code>--output</code>), use <code>permalinkBypassOutputDir: true</code> in your front matter.</p>
<div class="codetitle codetitle-left"><b>Syntax </b>YAML Front Matter</div>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token string">"_includes/index.html"</span><br><span class="token key atrule">permalinkBypassOutputDir</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></span><br><span class="token punctuation">---</span></span></code></pre>
<p>Writes to <code>_includes/index.html</code> even though the output directory is <code>_site</code>. This is useful for writing child templates to the <code>_includes</code> directory for re-use in your other templates.</p>
Common Pitfalls
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/pitfalls/
<h1>Common Pitfalls</h1>
<ul>
<li><a href="https://www.11ty.dev/docs/languages/html/#same-input-output">I want to use the same Input and Output directory.</a></li>
<li><a href="https://www.11ty.dev/docs/dates/#dates-off-by-one-day">When I display a date, it’s off by one day.</a></li>
<li><a href="https://www.11ty.dev/docs/permalinks/#remapping-output-(permalink)">The browser is trying to download my files instead of displaying them.</a> (If your <code>permalinks</code> don’t have a file name, make sure they at least have a trailing slash!)</li>
<li><a href="https://www.11ty.dev/docs/permalinks/#warning-about-yaml-objects">Having trouble with my <code>permalink</code>, getting the error: <code>can not read a block mapping entry; a multiline key may not be an implicit key</code></a></li>
</ul>
<h2 id="template-syntax" tabindex="-1">Template Syntax <a class="direct-link" href="https://www.11ty.dev/docs/pitfalls/#template-syntax">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/languages/markdown/#why-cant-i-return-markdown-from-paired-shortcodes-to-use-in-a-markdown-file">Why can’t I return markdown from paired shortcodes to use in a markdown file?</a></li>
<li><a href="https://www.11ty.dev/docs/languages/liquid/#quoted-include-paths">I’m porting from Jekyll and I want to use Quoted Include Paths in my Liquid Templates.</a></li>
<li><a href="https://www.11ty.dev/docs/languages/nunjucks/#warning-the-set-tag-does-not-work-with-async-content"><code>{% set %}</code> in Nunjucks does not work with Async Content</a></li>
<li><a href="https://www.11ty.dev/docs/permalinks/#disable-templating-in-permalinks">I’m having trouble with modifying a <code>permalink</code> in a Pug template</a></li>
</ul>
<h2 id="collections" tabindex="-1">Collections <a class="direct-link" href="https://www.11ty.dev/docs/pitfalls/#collections">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/collections/#array-reverse">My collections are out of order because I’m using Array reverse() on the collections global</a></li>
<li><a href="https://www.11ty.dev/docs/dates/#collections-out-of-order-when-you-run-eleventy-on-your-server">My collections are out of order when I deploy on a server.</a></li>
</ul>
Directory Output
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/plugins/directory-output/
<h1>Directory Output</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/directory-output/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/directory-output/#options">Options </a></li><li><a href="https://www.11ty.dev/docs/plugins/directory-output/#sample-output">Sample Output </a></li></ul></div><p></p>
</details>
<p>Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks). View the <a href="https://github.com/11ty/eleventy-plugin-directory-output">source code on GitHub</a>.</p>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/directory-output/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Compatible with Eleventy 1.0.0 and newer.</li>
<li><a href="https://www.npmjs.com/package/@11ty/eleventy-plugin-directory-output"><code>eleventy-plugin-directory-output</code> on npm</a></li>
</ul>
<pre><code>npm install @11ty/eleventy-plugin-directory-output
</code></pre>
<p>Open up your Eleventy config file (probably <code>.eleventy.js</code>) and use <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> directoryOutputPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-directory-output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setQuietMode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>directoryOutputPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</div></div>
<p>Read more about <a href="https://www.11ty.dev/docs/plugins/">Eleventy plugins.</a></p>
<h2 id="options" tabindex="-1">Options <a class="direct-link" href="https://www.11ty.dev/docs/plugins/directory-output/#options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> directoryOutputPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-directory-output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setQuietMode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>directoryOutputPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// Customize columns</span><br> <span class="token literal-property property">columns</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">filesize</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Use `false` to disable</span><br> <span class="token literal-property property">benchmark</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Use `false` to disable</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Will show in yellow if greater than this number of bytes</span><br> <span class="token literal-property property">warningFileSize</span><span class="token operator">:</span> <span class="token number">400</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The <code>benchmark</code> column is only compatible with Eleventy 1.0.1 or newer.</div></div>
<h2 id="sample-output" tabindex="-1">Sample Output <a class="direct-link" href="https://www.11ty.dev/docs/plugins/directory-output/#sample-output">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre class="language-bash"><code class="language-bash"><span class="token operator">></span> eleventy-base-blog@6.0.0 build<br><span class="token operator">></span> eleventy<br><br>↘ _site/ -- -- --<br> → about/index.html about/index.md <span class="token number">1</span>.8kB <span class="token number">2</span>.7ms<br> ↘ feed/ -- -- --<br> • .htaccess feed/htaccess.njk <span class="token number">0</span>.1kB <span class="token number">0</span>.2ms<br> • feed.json feed/json.njk <span class="token number">106</span>.8kB <span class="token number">17</span>.3ms<br> • feed.xml feed/feed.njk <span class="token number">109</span>.8kB <span class="token number">9</span>.8ms<br> → page-list/index.html page-list.njk <span class="token number">3</span>.2kB <span class="token number">1</span>.1ms<br> ↘ posts/ -- -- --<br> → firstpost/index.html posts/firstpost.md <span class="token number">3</span>.5kB <span class="token number">1</span>.0ms<br> → fourthpost/index.html posts/fourthpost.md <span class="token number">101</span>.0kB <span class="token number">27</span>.2ms<br> → secondpost/index.html posts/secondpost.md <span class="token number">3</span>.2kB <span class="token number">5</span>.6ms<br> → thirdpost/index.html posts/thirdpost.md <span class="token number">4</span>.5kB <span class="token number">7</span>.5ms<br> • index.html archive.njk <span class="token number">3</span>.0kB <span class="token number">13</span>.7ms<br> ↘ tags/ -- -- --<br> → another-tag/index.html tags.njk <span class="token number">2</span>.1kB <span class="token number">0</span>.9ms<br> → number-2/index.html tags.njk <span class="token number">2</span>.1kB <span class="token number">0</span>.4ms<br> → posts-with-two-tags/index.html tags.njk <span class="token number">2</span>.3kB <span class="token number">0</span>.2ms<br> → second-tag/index.html tags.njk <span class="token number">2</span>.5kB <span class="token number">0</span>.5ms<br> • index.html tags-list.njk <span class="token number">2</span>.0kB <span class="token number">0</span>.4ms<br> • <span class="token number">404</span>.html <span class="token number">404</span>.md <span class="token number">1</span>.9kB <span class="token number">0</span>.4ms<br> • index.html index.njk <span class="token number">2</span>.8kB <span class="token number">1</span>.7ms<br> • sitemap.xml sitemap.xml.njk <span class="token number">1</span>.4kB <span class="token number">1</span>.3ms<br><span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Copied <span class="token number">3</span> files / Wrote <span class="token number">18</span> files <span class="token keyword">in</span> <span class="token number">0.16</span> seconds <span class="token punctuation">(</span><span class="token number">8</span>.9ms each, v1.0.1<span class="token punctuation">)</span></code></pre>
</div></div>
HTML Base
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/plugins/html-base/
<h1>HTML <code><base></code> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.15">Added in v2.0.0</span></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/html-base/#the-new-way-html-plugin">The New Way: HTML Plugin </a><ul><li><a href="https://www.11ty.dev/docs/plugins/html-base/#why-not-use-the-html-element">Why not use the HTML element </a></li><li><a href="https://www.11ty.dev/docs/plugins/html-base/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/html-base/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/plugins/html-base/#advanced-usage">Advanced Usage </a></li></ul></li></ul></div><p></p>
</details>
<p>A build-time application of <code><base></code> to HTML (without relying on <code><base></code>) by modifying <code>a[href]</code>, <code>video[src]</code>, <code>audio[src]</code>, <code>source</code>, <code>img[src]</code>, <code>[srcset]</code>, and more.</p>
<ul>
<li>Read about <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">HTML’s <code><base></code> element on MDN</a></li>
</ul>
<p>If you want to deploy your project in a different directory without changing the content, Eleventy provides a <a href="https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix">Path Prefix feature to specify the target directory</a>.</p>
<ul>
<li>via <code>--pathprefix</code> on the command line</li>
<li>or via <code>pathPrefix</code> object key in your configuration file return object</li>
</ul>
<p>Historically, we then recommended to use the provided <a href="https://www.11ty.dev/docs/filters/url/"><code>url</code> filter</a> in your templates to transform any local URL with the path prefix. The downside of this method was that it required you to remember and opt-in every URL transformation in your content!</p>
<h2 id="the-new-way-html-plugin" tabindex="-1">The New Way: HTML <code><base></code> Plugin <a class="direct-link" href="https://www.11ty.dev/docs/plugins/html-base/#the-new-way-html-plugin">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>With this new plugin, you no longer need to use the <code>url</code> filter in your HTML content. This plugin adds an <a href="https://www.11ty.dev/docs/config/#transforms">Eleventy Transform</a> that will modify your HTML output and inject your Path Prefix in your template content.</p>
<ul>
<li>Behind the scenes, this plugin uses <a href="https://github.com/posthtml/posthtml-urls">posthtml-urls</a> and transforms <code>a[href]</code>, <code>video[src]</code>, <code>audio[src]</code>, <code>source</code>, <code>img[src]</code>, <code>[srcset]</code> and <a href="https://github.com/posthtml/posthtml-urls/blob/307c91342a211b3f9fb22bc57264bbb31f235fbb/lib/defaultOptions.js">a whole bunch more</a>.</li>
</ul>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="hJAtWQ9nmKU" params="start=512" playlabel="Play: New HTML Base Plugin (Changelog №17)" style="background-image:url('https://i.ytimg.com/vi/hJAtWQ9nmKU/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=hJAtWQ9nmKU" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: New HTML Base Plugin (Changelog №17)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=hJAtWQ9nmKU&t=512">New HTML Base Plugin (Changelog №17) <code>▶8m32s</code></a></is-land></div></div>
<h3 id="why-not-use-the-html-element" tabindex="-1">Why not use the <code><base></code> HTML element? <a class="direct-link" href="https://www.11ty.dev/docs/plugins/html-base/#why-not-use-the-html-element">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can, if you’d like! Some folks have found it to be a bit <a href="https://twitter.com/Rich_Harris/status/1526937421505609728">unreliable</a> and edge-casey. This offers a build-time alternative.</p>
<h3 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/html-base/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.15">Added in v2.0.0</span> This plugin is bundled with Eleventy 2.0 (no extra installation is required). It supports all async-friendly template languages (Nunjucks, Liquid, and JavaScript).</p>
<p>Open up your Eleventy config file (probably <code>.eleventy.js</code>) and use <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyHtmlBasePlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyHtmlBasePlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><em>You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</em></p>
<details>
<summary>Expand for full options list</summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyHtmlBasePlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyHtmlBasePlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token comment">// The base URL: defaults to Path Prefix</span><br> <span class="token literal-property property">baseHref</span><span class="token operator">:</span> eleventyConfig<span class="token punctuation">.</span>pathPrefix<span class="token punctuation">,</span><br><br> <span class="token comment">// But you could use a full URL here too:</span><br> <span class="token comment">// baseHref: "http://example.com/"</span><br><br> <span class="token comment">// Comma separated list of output file extensions to apply</span><br> <span class="token comment">// our transform to. Use `false` to opt-out of the transform.</span><br> <span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Rename the filters</span><br> <span class="token literal-property property">filters</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">"htmlBaseUrl"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">html</span><span class="token operator">:</span> <span class="token string">"transformWithHtmlBase"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">pathPrefix</span><span class="token operator">:</span> <span class="token string">"addPathPrefixToUrl"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<h3 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/html-base/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>For HTML content, you won’t need to do anything else. The HTML plugin will automatically apply the Path Prefix to URLs in any <code>.html</code> file in your output directory.</p>
<h3 id="advanced-usage" tabindex="-1">Advanced Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/html-base/#advanced-usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This plugin also provides new filters for you to use these transformations manually. This is useful when you want to use the same functionality but the URL you want to transform is not in one of the HTML elements that get automatically transformed (like an HTML comment <code><!-- Current page: {{ page.url }} --></code>).</p>
<h5><code>htmlBaseUrl</code></h5>
<p>Transform a single URL string using the base.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-hbs" role="tab">Handlebars</a>
</div>
<div id="htmlbase-liquid" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"/test/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span> <span class="token delimiter punctuation">}}</span></span><br>=> "/pathprefix/test/"<br><br>Relative paths are ignored:<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"test/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span> <span class="token delimiter punctuation">}}</span></span><br>=> "test/"<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"../test/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span> <span class="token delimiter punctuation">}}</span></span><br>=> "../test/"<br><br>Absolute URLs are ignored:<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"http://example.com/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span> <span class="token delimiter punctuation">}}</span></span><br>=> "http://example.com/"</code></pre>
</div>
<div id="htmlbase-njk" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{{</span> <span class="token string">"/test/"</span> <span class="token operator">|</span> <span class="token variable">htmlBaseUrl</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/pathprefix/test/"</span><br><br><span class="token variable">Relative</span> <span class="token variable">paths</span> <span class="token variable">are</span> <span class="token variable">ignored</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">"test/"</span> <span class="token operator">|</span> <span class="token variable">htmlBaseUrl</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"test/"</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">"../test/"</span> <span class="token operator">|</span> <span class="token variable">htmlBaseUrl</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"../test/"</span><br><br><span class="token variable">Absolute</span> <span class="token variable">URLs</span> <span class="token variable">are</span> <span class="token variable">ignored</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">"http://example.com/"</span> <span class="token operator">|</span> <span class="token variable">htmlBaseUrl</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"http://example.com/"</span></code></pre>
</div>
<div id="htmlbase-js" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"/test/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "/pathprefix/test/"<br><br>Relative paths are ignored:<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"test/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "test/"<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"../test/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "../test/"<br><br>Absolute URLs are ignored:<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "http://example.com/"<br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="htmlbase-hbs" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Handlebars</div>
<pre class="language-hbs"><code class="language-hbs"><span class="token delimiter punctuation">{{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"/test/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"/pathprefix/test/"</span><br><br><span class="token variable">Relative</span> <span class="token variable">paths</span> <span class="token variable">are</span> <span class="token variable">ignored</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"test/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"test/"</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"../test/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"../test/"</span><br><br><span class="token variable">Absolute</span> <span class="token variable">URLs</span> <span class="token variable">are</span> <span class="token variable">ignored</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"http://example.com/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"http://example.com/"</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<p>You can override the <code>baseHref</code> option by passing another argument to the filter with your one-off base value. Note that when you use a full URL as your base href, relative paths are no longer ignored—they are modified using the current page’s URL:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasefull-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasefull-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasefull-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasefull-hbs" role="tab">Handlebars</a>
</div>
<div id="htmlbasefull-liquid" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"/test/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span><span class="token operator">:</span> <span class="token string">"http://example.com/"</span> <span class="token delimiter punctuation">}}</span></span><br>=> "http://example.com/pathprefix/test/"<br><br>Relative urls are resolved using the current page’s url.<br>For example, on a page with URL `/my-template/`:<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"test/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span><span class="token operator">:</span> <span class="token string">"http://example.com/"</span> <span class="token delimiter punctuation">}}</span></span><br>=> "http://example.com/pathprefix/my-template/test/"<br><br>Absolute URLs are still ignored:<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"http://11ty.dev/"</span> <span class="token operator">|</span> <span class="token function filter">htmlBaseUrl</span><span class="token operator">:</span> <span class="token string">"http://example.com/"</span> <span class="token delimiter punctuation">}}</span></span><br>=> "http://11ty.dev/"</code></pre>
</div>
<div id="htmlbasefull-njk" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{{</span> <span class="token string">"/test/"</span> <span class="token operator">|</span> <span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"http://example.com/pathprefix/test/"</span><br><br><span class="token variable">Relative</span> <span class="token variable">urls</span> <span class="token variable">are</span> <span class="token variable">resolved</span> <span class="token variable">using</span> <span class="token variable">the</span> <span class="token variable">current</span> <span class="token variable">page</span>’<span class="token variable">s</span> <span class="token variable">url</span><span class="token punctuation">.</span><br><span class="token variable">For</span> <span class="token variable">example</span><span class="token punctuation">,</span> <span class="token variable">on</span> <span class="token variable">a</span> <span class="token variable">page</span> <span class="token keyword">with</span> <span class="token variable">URL</span> `<span class="token operator">/</span><span class="token variable">my</span><span class="token operator">-</span><span class="token variable">template</span><span class="token operator">/</span>`<span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">"test/"</span> <span class="token operator">|</span> <span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"http://example.com/pathprefix/my-template/test/"</span><br><br><span class="token variable">Absolute</span> <span class="token variable">URLs</span> <span class="token variable">are</span> <span class="token variable">still</span> <span class="token variable">ignored</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">"http://11ty.dev/"</span> <span class="token operator">|</span> <span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"http://11ty.dev/"</span></code></pre>
</div>
<div id="htmlbasefull-js" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"/test/"</span><span class="token punctuation">,</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "http://example.com/pathprefix/test/"<br><br>Relative urls are resolved using the current page’s url.<br>For example, on a page with URL </span><span class="token template-punctuation string">`</span></span><span class="token operator">/</span>my<span class="token operator">-</span>template<span class="token operator">/</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">:<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"test/"</span><span class="token punctuation">,</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "http://example.com/pathprefix/my-template/test/"<br><br>Absolute URLs are still ignored:<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">htmlBaseUrl</span><span class="token punctuation">(</span><span class="token string">"http://11ty.dev/"</span><span class="token punctuation">,</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> "http://11ty.dev/"</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="htmlbasefull-hbs" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Handlebars</div>
<pre class="language-hbs"><code class="language-hbs"><span class="token delimiter punctuation">{{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"/test/"</span> <span class="token string">"http://example.com/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"http://example.com/pathprefix/test/"</span><br><br><span class="token variable">Relative</span> <span class="token variable">urls</span> <span class="token variable">are</span> <span class="token variable">resolved</span> <span class="token variable">using</span> <span class="token variable">the</span> <span class="token variable">current</span> <span class="token variable">page’s</span> <span class="token variable">url</span><span class="token punctuation">.</span><br><span class="token variable">For</span> <span class="token variable">example</span><span class="token punctuation">,</span> <span class="token variable">on</span> <span class="token variable">a</span> <span class="token variable">page</span> <span class="token variable">with</span> <span class="token variable">URL</span> <span class="token punctuation">`</span><span class="token punctuation">/</span><span class="token variable">my-template</span><span class="token punctuation">/</span><span class="token punctuation">`</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"test/"</span> <span class="token string">"http://example.com/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"http://example.com/pathprefix/my-template/test/"</span><br><br><span class="token variable">Absolute</span> <span class="token variable">URLs</span> <span class="token variable">are</span> <span class="token variable">still</span> <span class="token variable">ignored</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">htmlBaseUrl</span> <span class="token string">"http://11ty.dev/"</span> <span class="token string">"http://example.com/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"http://11ty.dev/"</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
<h5><code>transformWithHtmlBase</code></h5>
<p>Transform a block of HTML with posthtml. Applies the above <code>htmlBaseUrl</code> filter to each applicable URL in an HTML block (so the URL transformation rules are the same). Requires an async-friendly template language.</p>
<p>We use this in the RSS plugin to change your content to be absolute URLs for broadest compatibility with various RSS feed readers.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasehtmlblock-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasehtmlblock-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasehtmlblock-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbasehtmlblock-hbs" role="tab">Handlebars</a>
</div>
<div id="htmlbasehtmlblock-liquid" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">'<a href="/test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function filter">transformWithHtmlBase</span> <span class="token delimiter punctuation">}}</span></span><br>=> '<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/pathprefix/test/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>'<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">'<a href="/test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function filter">transformWithHtmlBase</span><span class="token operator">:</span> <span class="token string">"http://example.com/"</span> <span class="token delimiter punctuation">}}</span></span><br>=> '<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://example.com/pathprefix/test/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>'</code></pre>
<p>Resolving relative URLs (with path prefix still at <code>"/pathprefix/"</code>):</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">On a page with URL `/my-template/`:<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">'<a href="test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function filter">transformWithHtmlBase</span><span class="token operator">:</span> <span class="token string">"http://example.com/"</span> <span class="token delimiter punctuation">}}</span></span><br>=> '<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://example.com/pathprefix/my-template/test/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>'<br><br>Override the page URL:<br><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">'<a href="test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function filter">transformWithHtmlBase</span><span class="token operator">:</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">,</span> <span class="token string">"/my-other-template/"</span> <span class="token delimiter punctuation">}}</span></span><br>=> '<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://example.com/pathprefix/my-other-template/test/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>'</code></pre>
</div>
<div id="htmlbasehtmlblock-njk" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{{</span> <span class="token string">'<a href="/test/">Link</a>'</span> <span class="token operator">|</span> <span class="token variable">transformWithHtmlBase</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">'<a href="/pathprefix/test/">Link</a>'</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">'<a href="/test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">'<a href="http://example.com/pathprefix/test/">Link</a>'</span></code></pre>
<p>Resolving relative URLs (with path prefix still at <code>"/pathprefix/"</code>):</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token variable">On</span> <span class="token variable">a</span> <span class="token variable">page</span> <span class="token keyword">with</span> <span class="token variable">URL</span> `<span class="token operator">/</span><span class="token variable">my</span><span class="token operator">-</span><span class="token variable">template</span><span class="token operator">/</span>`<span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">'<a href="test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">'<a href="http://example.com/pathprefix/my-template/test/">Link</a>'</span><br><br><span class="token variable">Override</span> <span class="token variable">the</span> <span class="token variable">page</span> <span class="token variable">URL</span><span class="token punctuation">:</span><br><br><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string">'<a href="test/">Link</a>'</span> <span class="token operator">|</span> <span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">,</span> <span class="token string">"/my-other-template/"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">'<a href="http://example.com/pathprefix/my-other-template/test/">Link</a>'</span></code></pre>
</div>
<div id="htmlbasehtmlblock-js" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="/test/">Link</a></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> '<a href="/pathprefix/test/">Link</a>'<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="/test/">Link</a></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> '<a href="http://example.com/pathprefix/test/">Link</a>'</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>Resolving relative URLs (with path prefix still at <code>"/pathprefix/"</code>):</p>
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>On a page with URL "/my-template/":<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token string">'<a href="test/">Link</a>'</span><span class="token punctuation">,</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> '<a href="http://example.com/pathprefix/my-template/test/">Link</a>'<br><br>Override the page URL:<br><br></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">transformWithHtmlBase</span><span class="token punctuation">(</span><span class="token string">'<a href="test/">Link</a>'</span><span class="token punctuation">,</span> <span class="token string">"http://example.com/"</span><span class="token punctuation">,</span> <span class="token string">"/my-other-template/"</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br>=> '<a href="http://example.com/pathprefix/my-other-template/test/">Link</a>''</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="htmlbasehtmlblock-hbs" role="tabpanel">
<p>This filter requires an async-friendly template language and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<h5><code>addPathPrefixToFullUrl</code></h5>
<p>Note that passing a full external URL (e.g. <code>http://example.com/</code>) to <code>htmlBaseUrl</code> will return the URL unchanged. We don’t want to add <code>pathPrefix</code> to external links!</p>
<p>However, if you do want to force addition of pathPrefix to a URL, you can use the <code>addPathPrefixToFullUrl</code> filter.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-fullurl-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-fullurl-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-fullurl-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/html-base/#htmlbase-fullurl-hbs" role="tab">Handlebars</a>
</div>
<div id="htmlbase-fullurl-liquid" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> <span class="token string">"http://example.com/"</span> <span class="token operator">|</span> <span class="token function filter">addPathPrefixToFullUrl</span> <span class="token delimiter punctuation">}}</span></span><br>=> "http://example.com/pathprefix/"</code></pre>
</div>
<div id="htmlbase-fullurl-njk" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-njk"><code class="language-njk"><span class="token delimiter punctuation">{{</span> <span class="token string">"http://example.com/"</span> <span class="token operator">|</span> <span class="token variable">addPathPrefixToFullUrl</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token operator">=</span><span class="token operator">></span> <span class="token string">"http://example.com/pathprefix/"</span></code></pre>
</div>
<div id="htmlbase-fullurl-js" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>11ty.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addPathPrefixToFullUrl</span><span class="token punctuation">(</span><span class="token string">"http://example.com/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// "http://example.com/pathprefix/"</span><br><span class="token punctuation">}</span></code></pre>
</div>
<div id="htmlbase-fullurl-hbs" role="tabpanel">
<p>With path prefix set to <code>"/pathprefix/"</code>:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Handlebars</div>
<pre class="language-hbs"><code class="language-hbs"><span class="token delimiter punctuation">{{</span> <span class="token variable">addPathPrefixToFullUrl</span> <span class="token string">"http://example.com/"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br><span class="token punctuation">=</span><span class="token punctuation">></span> <span class="token string">"http://example.com/pathprefix/"</span></code></pre>
</div>
</seven-minute-tabs>
</is-land>
Inclusive Language
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/plugins/inclusive-language/
<h1>Inclusive Language Plugin</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/inclusive-language/#installation">Installation </a><ul><li><a href="https://www.11ty.dev/docs/plugins/inclusive-language/#options">Options </a></li></ul></li></ul></div><p></p>
</details>
<p>An Eleventy linter plugin to check for inclusive language in markdown files. Inspired by <a href="https://css-tricks.com/words-avoid-educational-writing/"><em>CSS Tricks’ Words to Avoid in Educational Writing</em></a>. No browser/client JavaScript here—everything is this plugin is done at build-time.</p>
<ul>
<li><a href="https://github.com/11ty/eleventy-plugin-inclusive-language">GitHub</a>.</li>
</ul>
<style>
.demo-linter-first {
color: yellow;
}
</style>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<pre><code><span class="demo-linter-first">Inclusive Language Linter (./docs/quicktips/concatenate.md):</span>
be modified, <u>of course</u>, to capture multiple
<u>Of course</u>, Eleventy has no desire to re
This is <u>just</u> a super simple example if you
build pipeline. That’s an <u>easy</u> way to concatenate
</code></pre>
</div></div>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/inclusive-language/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Available on <a href="https://www.npmjs.com/package/@11ty/eleventy-plugin-inclusive-language">npm</a>.</p>
<pre><code>npm install @11ty/eleventy-plugin-inclusive-language --save-dev
</code></pre>
<p>Open up your Eleventy config file (probably <code>.eleventy.js</code>) and use <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> inclusiveLangPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-inclusive-language"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>inclusiveLangPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</div></div>
<h3 id="options" tabindex="-1">Options <a class="direct-link" href="https://www.11ty.dev/docs/plugins/inclusive-language/#options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Optionally pass in an options object as the second argument to <code>addPlugin</code> to further customize this plugin.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> inclusiveLangPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-inclusive-language"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>inclusiveLangPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">templateFormats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"md"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// default, add more file extensions here</span><br><br> <span class="token comment">// accepts an array or a comma-delimited string</span><br> <span class="token literal-property property">words</span><span class="token operator">:</span> <span class="token string">"simply,obviously,basically,of course,clearly,just,everyone knows,however,easy"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Navigation
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/plugins/navigation/
<h1>Navigation Plugin</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/navigation/#template-compatibility">Template Compatibility </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#adding-templates-to-the-navigation">Adding Templates to the Navigation </a><ul><li><a href="https://www.11ty.dev/docs/plugins/navigation/#example">Example </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#use-alternate-text-for-the-navigation-link">Use alternate text for the navigation link </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#re-ordering-items">Re-Ordering Items </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#overriding-the-url">Overriding the URL </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#rendering-the-navigation-menu-(easy-mode)">Rendering the Navigation Menu (Easy Mode) </a><ul><li><a href="https://www.11ty.dev/docs/plugins/navigation/#output-html">Output HTML </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#to-markdown">To Markdown </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#advanced-rendering-the-navigation-bar-(deep-dive)">Advanced: Rendering the Navigation Bar (Deep Dive) </a><ul><li><a href="https://www.11ty.dev/docs/plugins/navigation/#fetch-the-menu-items-using-the-eleventynavigation-filter">Fetch the menu items using the eleventyNavigation Filter </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#render-the-menu-items-using-the-eleventynavigationtohtml-or-eleventynavigationtomarkdown-filters">Render the menu items using the eleventyNavigationToHtml or eleventyNavigationToMarkdown Filters </a></li><li><a href="https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually">Bring your own HTML: Render the menu items manually </a></li></ul></li></ul></div><p></p>
</details>
<p>A plugin for creating infinite-depth hierarchical navigation in Eleventy projects. Supports breadcrumbs too! Used in production on this very website!</p>
<ul>
<li>This documentation is for <code>eleventy-navigation</code> <code>v0.3.x</code>.</li>
<li><a href="https://github.com/11ty/eleventy-navigation">GitHub</a>.</li>
</ul>
<h2 id="template-compatibility" tabindex="-1">Template Compatibility <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#template-compatibility">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Any template language can add to navigation.</li>
<li>Nunjucks or Liquid are required for rendering the navigation menu.</li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Available on <a href="https://www.npmjs.com/package/@11ty/eleventy-navigation">npm</a>.</p>
<pre><code>npm install @11ty/eleventy-navigation --save-dev
</code></pre>
<p>Open up your Eleventy config file (probably <code>.eleventy.js</code>) and use <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> eleventyNavigationPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-navigation"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>eleventyNavigationPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</div></div>
<p>Read more about <a href="https://www.11ty.dev/docs/plugins/">Eleventy plugins.</a></p>
<h2 id="adding-templates-to-the-navigation" tabindex="-1">Adding Templates to the Navigation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#adding-templates-to-the-navigation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Add the <code>eleventyNavigation</code> object to your front matter data (or in a <a href="https://www.11ty.io/docs/data-template-dir/">data directory file</a>). Assign a unique string to the <code>key</code> property inside of <code>eleventyNavigation</code>.</p>
<h3 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<h4 id="mammals.md" tabindex="-1">mammals.md <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#mammals.md">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Mammals<br><span class="token punctuation">---</span></code></pre>
<p>This gives us:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c"><ul>
<li>Mammals</li>
</ul>
</div></div>
<h4 id="humans.md" tabindex="-1">humans.md <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#humans.md">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>To nest a template inside of the Mammals template, use <code>parent: Mammals</code>:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Humans<br> <span class="token key atrule">parent</span><span class="token punctuation">:</span> Mammals<br><span class="token punctuation">---</span></code></pre>
<p>Any templates that do not have <code>parent</code> will be assumed to be at the top level.</p>
<p>Now our navigation structure looks like:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c"><ul>
<li>Mammals
<ul>
<li>Humans</li>
</ul>
</li>
</ul>
</div></div>
<h4 id="bats.md" tabindex="-1">bats.md <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#bats.md">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Bats<br> <span class="token key atrule">parent</span><span class="token punctuation">:</span> Mammals<br><span class="token punctuation">---</span></code></pre>
<p>Now our navigation structure looks like:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c"><ul>
<li>Mammals
<ul>
<li>Humans</li>
<li>Bats</li>
</ul>
</li>
</ul>
</div></div>
<p>You can nest these as deep as you want! Want to put something under Humans or Bats? Use <code>parent: Humans</code> or <code>parent: Bats</code>. If you want to add another root template, leave out <code>parent</code>.</p>
<h3 id="use-alternate-text-for-the-navigation-link" tabindex="-1">Use alternate text for the navigation link <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#use-alternate-text-for-the-navigation-link">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If you want your key and your link text to be different, use the <code>title</code> property:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Mammals<br> <span class="token key atrule">title</span><span class="token punctuation">:</span> All of the Mammals<br><span class="token punctuation">---</span></code></pre>
<h3 id="re-ordering-items" tabindex="-1">Re-Ordering Items <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#re-ordering-items">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>To ensure that Humans comes first before Bats, use the <code>order</code> property. It can have an arbitrary number. If omitted, <code>order: 0</code> is the default.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Humans<br> <span class="token key atrule">parent</span><span class="token punctuation">:</span> Mammals<br> <span class="token key atrule">order</span><span class="token punctuation">:</span> <span class="token number">1</span><br><span class="token punctuation">---</span></code></pre>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Bats<br> <span class="token key atrule">parent</span><span class="token punctuation">:</span> Mammals<br> <span class="token key atrule">order</span><span class="token punctuation">:</span> <span class="token number">2</span><br><span class="token punctuation">---</span></code></pre>
<h3 id="overriding-the-url" tabindex="-1">Overriding the URL <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#overriding-the-url">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Navigation v0.1.4">Added in Navigation v0.1.4</span> If you’d like to add a link to an external URL that is not on your local page, create a new file for it and add a <code>url</code> key.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Zach’s site<br> <span class="token key atrule">url</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.zachleat.com/<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><br><span class="token punctuation">---</span></code></pre>
<p>Use <a href="https://www.11ty.dev/docs/permalinks/#permalink-false"><code>permalink: false</code></a> to ensure that this meta-template doesn’t create a file in your Eleventy site output.</p>
<h2 id="rendering-the-navigation-menu-(easy-mode)" tabindex="-1">Rendering the Navigation Menu (Easy Mode) <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#rendering-the-navigation-menu-(easy-mode)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Nunjucks and Liquid engines are supported. If you’re tired of reading, just use one of the following. These are using <a href="https://www.11ty.dev/docs/plugins/navigation/#render-with-a-filter">the filters documented below</a>. If you want more control or need additional customization, keep reading!</p>
<h3 id="output-html" tabindex="-1">Output HTML <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#output-html">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtohtml-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtohtml-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtohtml-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtohtml-hbs" role="tab">Handlebars</a>
</div>
<div id="navtohtml-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function filter">eleventyNavigationToHtml</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navtohtml-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigationToHtml</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navtohtml-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navtohtml-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="to-markdown" tabindex="-1">To Markdown <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#to-markdown">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Navigation 0.3.1">Added in Navigation 0.3.1</span></p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtomd-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtomd-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtomd-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navtomd-hbs" role="tab">Handlebars</a>
</div>
<div id="navtomd-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function filter">eleventyNavigationToMarkdown</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navtomd-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigationToMarkdown</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navtomd-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navtomd-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h2 id="advanced-rendering-the-navigation-bar-(deep-dive)" tabindex="-1">Advanced: Rendering the Navigation Bar (Deep Dive) <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#advanced-rendering-the-navigation-bar-(deep-dive)">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="fetch-the-menu-items-using-the-eleventynavigation-filter" tabindex="-1">Fetch the menu items using the <code>eleventyNavigation</code> Filter <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#fetch-the-menu-items-using-the-eleventynavigation-filter">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>The <code>eleventyNavigation</code> filter returns a <em>sorted</em> array of objects with <code>url</code> and <code>title</code> properties (sorted using <code>order</code>, as noted above). If an entry has nested children, it will also include a <code>children</code> property with an array of similar objects (and those may contain <code>children</code> too, and so on).</p>
<h4 id="example-fetch-all-pages" tabindex="-1">Example: Fetch all pages <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#example-fetch-all-pages">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>For our documented templates above with the following template:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrender-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrender-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrender-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrender-hbs" role="tab">Handlebars</a>
</div>
<div id="navrender-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> navPages <span class="token operator">=</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> navPages <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navrender-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">navPages</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">navPages</span> <span class="token operator">|</span> <span class="token variable">dump</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navrender-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navtohtml-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Note that you can also pass any collection into <code>eleventyNavigation</code>. It doesn’t have to be <code>collections.all</code>!</div></div>
<p>Shows that <code>navPages</code> has the following structure:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/mammals/"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"Humans"</span><span class="token punctuation">,</span><br> <span class="token property">"parentKey"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/humans/"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Humans"</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"Bats"</span><span class="token punctuation">,</span><br> <span class="token property">"parentKey"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/bats/"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Bats"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">]</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">]</span></code></pre>
<h4 id="example-get-just-one-branch" tabindex="-1">Example: Get just one Branch <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#example-get-just-one-branch">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Just show the children of a specific key, pass a key to <code>eleventyNavigation</code>:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderbranch-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderbranch-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderbranch-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderbranch-hbs" role="tab">Handlebars</a>
</div>
<div id="navrenderbranch-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> navPages <span class="token operator">=</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span><span class="token operator">:</span> <span class="token string">"Mammals"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> navPages <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navrenderbranch-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">navPages</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token function">eleventyNavigation</span><span class="token punctuation">(</span><span class="token string">"Mammals"</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">navPages</span> <span class="token operator">|</span> <span class="token variable">dump</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navrenderbranch-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navrenderbranch-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<pre class="language-json"><code class="language-json"><span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"Humans"</span><span class="token punctuation">,</span><br> <span class="token property">"parentKey"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/humans/"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Humans"</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"Bats"</span><span class="token punctuation">,</span><br> <span class="token property">"parentKey"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/bats/"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Bats"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">]</span></code></pre>
<h4 id="example-breadcrumbs" tabindex="-1">Example: Breadcrumbs <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#example-breadcrumbs">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can also render only the parents of a specific key too, to make breadcrumb navigation. Pass a key to <code>eleventyNavigationBreadcrumb</code> like this:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbread-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbread-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbread-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbread-hbs" role="tab">Handlebars</a>
</div>
<div id="navbread-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> navPages <span class="token operator">=</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigationBreadcrumb</span><span class="token operator">:</span> <span class="token string">"Bats"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> navPages <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navbread-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">navPages</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationBreadcrumb</span><span class="token punctuation">(</span><span class="token string">"Bats"</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">navPages</span> <span class="token operator">|</span> <span class="token variable">dump</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navbread-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navbread-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<p>And an array of all the parents of the Bats entry will be returned (top-most parent is first):</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token property">"key"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/mammals/"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">]</span></code></pre>
<h5>Include the current page in breadcrumb results</h5>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadself-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadself-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadself-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadself-hbs" role="tab">Handlebars</a>
</div>
<div id="navbreadself-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>navOptions:<br> includeSelf: true<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> navPages <span class="token operator">=</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigationBreadcrumb</span><span class="token operator">:</span> <span class="token string">"Mammals"</span><span class="token punctuation">,</span> navOptions <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> navPages <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navbreadself-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">navPages</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationBreadcrumb</span><span class="token punctuation">(</span><span class="token string">"Bats"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token variable">includeSelf</span><span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">navPages</span> <span class="token operator">|</span> <span class="token variable">dump</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navbreadself-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navbreadself-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h5>Allow missing pages (nodes) in breadcrumbs</h5>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Navigation 0.3.3">Added in Navigation 0.3.3</span></p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadmissing-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadmissing-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbreadmissing-js" role="tab">11ty.js</a>
</div>
<div id="navbreadmissing-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>navOptions:<br> allowMissing: true<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> navPages <span class="token operator">=</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigationBreadcrumb</span><span class="token operator">:</span> <span class="token string">"Does not exist"</span><span class="token punctuation">,</span> navOptions <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> navPages <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navbreadmissing-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">navPages</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationBreadcrumb</span><span class="token punctuation">(</span><span class="token string">"Does not exist"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token variable">allowMissing</span><span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">navPages</span> <span class="token operator">|</span> <span class="token variable">dump</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navbreadmissing-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h3 id="render-the-menu-items-using-the-eleventynavigationtohtml-or-eleventynavigationtomarkdown-filters" tabindex="-1">Render the menu items using the <code>eleventyNavigationToHtml</code> or <code>eleventyNavigationToMarkdown</code> Filters <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#render-the-menu-items-using-the-eleventynavigationtohtml-or-eleventynavigationtomarkdown-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>There are a couple of methods for rendering. Using the <code>eleventyNavigationToHtml</code> and <code>eleventyNavigationToMarkdown</code> filters will render the full navigation tree. Use this if you want to easily scale to an unlimited number of tiers/levels in your navigation. If you want full control of the markup, <a href="https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually">render the structure manually using the Copy and Paste templates example below</a>. Use this if your navigation will have one level/tier of items.</p>
<div id="render-with-a-filter"></div>
<p>With the Navigation structure returned from <code>eleventyNavigation</code> or <code>eleventyNavigationBreadcrumb</code>, we can render the navigation. Pass the object to the <code>eleventyNavigationToHtml</code> or <code>eleventyNavigationToMarkdown</code> filter to automatically output the full menu (as HTML or Markdown):</p>
<p>The <code>eleventyNavigationToMarkdown</code> filter is <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Navigation 0.3.1">Added in Navigation 0.3.1</span>.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderfilter-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderfilter-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderfilter-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navrenderfilter-hbs" role="tab">Handlebars</a>
</div>
<div id="navrenderfilter-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function filter">eleventyNavigationToHtml</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigationBreadcrumb</span><span class="token operator">:</span> <span class="token string">"Bats"</span> <span class="token operator">|</span> <span class="token function filter">eleventyNavigationToHtml</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navrenderfilter-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigationToHtml</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationBreadcrumb</span><span class="token punctuation">(</span><span class="token string">"Bats"</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigationToHtml</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navrenderfilter-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navrenderfilter-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="showing-excerpts" tabindex="-1">Showing excerpts <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#showing-excerpts">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can also use this to display a longer list of navigation items with description text. This is useful for category/index pages. Add <code>excerpt</code> to the <code>eleventyNavigation</code> object.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> Mammals<br> <span class="token key atrule">excerpt</span><span class="token punctuation">:</span> Vertebrate animals of the class Mammalia.<br><span class="token punctuation">---</span></code></pre>
<p>When you render a navigation list, pass <code>showExcerpt: true</code> to the <code>eleventyNavigationToHtml</code> filter, like so:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navexcerpt-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navexcerpt-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navexcerpt-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navexcerpt-hbs" role="tab">Handlebars</a>
</div>
<div id="navexcerpt-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>navToHtmlOptions:<br> showExcerpt: true<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span><span class="token operator">:</span> <span class="token string">"Humans"</span><span class="token punctuation">,</span> navToHtmlOptions <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navexcerpt-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>navToHtmlOptions:<br> showExcerpt: true<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token function">eleventyNavigation</span><span class="token punctuation">(</span><span class="token string">"Humans"</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationToHtml</span><span class="token punctuation">(</span><span class="token variable">navToHtmlOptions</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navexcerpt-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navexcerpt-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="advanced-all-rendering-options-for-eleventynavigationtomarkdown" tabindex="-1">Advanced: All Rendering Options for <code>eleventyNavigationToMarkdown</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#advanced-all-rendering-options-for-eleventynavigationtomarkdown">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Navigation 0.3.1">Added in Navigation 0.3.1</span></p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navmdoptions-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navmdoptions-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navmdoptions-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navmdoptions-hbs" role="tab">Handlebars</a>
</div>
<div id="navmdoptions-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>navToMdOptions:<br> # Show excerpts (if they exist in data, read more above)<br> showExcerpt: false<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function filter">eleventyNavigationToMarkdown</span><span class="token operator">:</span> navToMdOptions <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navmdoptions-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---js<br>{<br> navToMdOptions: {<br> // Show excerpts (if they exist in data, read more above)<br> showExcerpt: false<br> }<br>}<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationToMarkdown</span><span class="token punctuation">(</span><span class="token variable">navToMdOptions</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navmdoptions-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navmdoptions-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="advanced-all-rendering-options-for-eleventynavigationtohtml" tabindex="-1">Advanced: All Rendering Options for <code>eleventyNavigationToHtml</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#advanced-all-rendering-options-for-eleventynavigationtohtml">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>You can change the HTML elements, classes on the list and list items, and add an additional class for the current page’s navigation entry!</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navhtmloptions-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navhtmloptions-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navhtmloptions-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navhtmloptions-hbs" role="tab">Handlebars</a>
</div>
<div id="navhtmloptions-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---js<br>{<br> navigationOptions: {<br> listElement: "ul", // Change the top level tag<br> listItemElement: "li", // Change the item tag<br><br> listClass: "", // Add a class to the top level<br> listItemClass: "", // Add a class to every item<br> listItemHasChildrenClass: "", // Add a class if the item has children<br> activeListItemClass: "", // Add a class to the current page’s item<br><br> anchorClass: "", // Add a class to the anchor<br> activeAnchorClass: "", // Add a class to the current page’s anchor<br><br> // If matched, `activeListItemClass` and `activeAnchorClass` will be added<br> activeKey: "",<br> // It’s likely you want to pass in `eleventyNavigation.key` here, e.g.:<br> // activeKey: eleventyNavigation.key<br><br> // Show excerpts (if they exist in data, read more above)<br> showExcerpt: false<br> }<br>}<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function filter">eleventyNavigationToHtml</span><span class="token operator">:</span> navigationOptions <span class="token operator">|</span> <span class="token function filter">json</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navhtmloptions-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---js<br>{<br> navigationOptions: {<br> listElement: "ul", // Change the top level tag<br> listItemElement: "li", // Change the item tag<br><br> listClass: "", // Add a class to the top level<br> listItemClass: "", // Add a class to every item<br> listItemHasChildrenClass: "", // Add a class if the item has children<br> activeListItemClass: "", // Add a class to the current page’s item<br><br> anchorClass: "", // Add a class to the anchor<br> activeAnchorClass: "", // Add a class to the current page’s anchor<br><br> // If matched, `activeListItemClass` and `activeAnchorClass` will be added<br> activeKey: "",<br> // It’s likely you want to pass in `eleventyNavigation.key` here, e.g.:<br> // activeKey: eleventyNavigation.key<br><br> // Show excerpts (if they exist in data, read more above)<br> showExcerpt: false<br> }<br>}<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token operator">|</span> <span class="token function">eleventyNavigationToHtml</span><span class="token punctuation">(</span><span class="token variable">navigationOptions</span><span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token variable">safe</span> <span class="token delimiter punctuation">}}</span></span></code></pre>
</div>
<div id="navhtmloptions-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navhtmloptions-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<p>These work with <code>eleventyNavigationBreadcrumb | eleventyNavigationToHtml</code> too.</p>
<p>If you find yourself using a lot of these <code>class</code> options, maybe you should use the <em>Advanced: Unlimited Child Levels</em> example below and have full control of your HTML!</p>
<h3 id="bring-your-own-html-render-the-menu-items-manually" tabindex="-1">Bring your own HTML: Render the menu items manually <a class="direct-link" href="https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>This template will render a single tier of items (no children) <em>without</em> using the <code>eleventyNavigationToHtml</code> or <code>eleventyNavigationToMarkdown</code> filters. This method gives you full control of the markup but is more complex with deeply nested menu structures.</p>
<p>Note that <code>eleventyNavigationToMarkdown</code> is <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="Navigation 0.3.1">Added in Navigation 0.3.1</span>.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbyoh-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbyoh-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbyoh-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/navigation/#navbyoh-hbs" role="tab">Handlebars</a>
</div>
<div id="navbyoh-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> navPages <span class="token operator">=</span> collections<span class="token punctuation">.</span>all <span class="token operator">|</span> <span class="token function filter">eleventyNavigation</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">for</span> entry <span class="token keyword">in</span> navPages <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li<span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">if</span> entry<span class="token punctuation">.</span>url <span class="token operator">==</span> <span class="token object">page</span><span class="token punctuation">.</span>url <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-active-class<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> entry<span class="token punctuation">.</span>url <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> entry<span class="token punctuation">.</span>title <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%-</span> <span class="token keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="navbyoh-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">set</span> <span class="token variable">navPages</span> <span class="token operator">=</span> <span class="token variable">collections</span><span class="token punctuation">.</span><span class="token variable">all</span> <span class="token operator">|</span> <span class="token variable">eleventyNavigation</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">for</span> <span class="token variable">entry</span> <span class="token keyword">in</span> <span class="token variable">navPages</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">if</span> <span class="token variable">entry</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token operator">==</span> <span class="token variable">page</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">%}</span></span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-active-class<span class="token punctuation">"</span></span><span class="token attr-name"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">entry</span><span class="token punctuation">.</span><span class="token variable">url</span> <span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">entry</span><span class="token punctuation">.</span><span class="token variable">title</span> <span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%-</span> <span class="token tag keyword">endfor</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="navbyoh-js" role="tabpanel">
<p>This plugin does not yet include <code>11ty.js</code> compatibility!</p>
</div>
<div id="navbyoh-hbs" role="tabpanel">
<p>This plugin does not yet include <code>hbs</code> compatibility!</p>
</div>
</seven-minute-tabs>
</is-land>
<p>You <em>can</em> use a Nunjucks macro to recursively render list items of any depth but the code isn’t quite as clean:</p>
<details>
<summary><strong>Nunjucks Macro Code for Rendering Unlimited Child Levels:</strong></summary>
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-html"><code class="language-html">{% set navPages = collections.all | eleventyNavigation %}<br>{% macro renderNavListItem(entry) -%}<br><li{% if entry.url == page.url %} class="my-active-class"{% endif %}><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ entry.url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ entry.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br>{%- if entry.children.length -%}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><br>{%- endif -%}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br>{%- endmacro %}<br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br>{%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
</details>
Render
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/plugins/render/
<h1>Render <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span><!-- Beta 7 --></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">Template Compatibility </a></li><li><a href="https://www.11ty.dev/docs/plugins/render/#installation">Installation </a></li><li><a href="https://www.11ty.dev/docs/plugins/render/#usage">Usage </a><ul><li><a href="https://www.11ty.dev/docs/plugins/render/#rendertemplate">renderTemplate </a></li><li><a href="https://www.11ty.dev/docs/plugins/render/#renderfile">renderFile </a></li></ul></li></ul></div><p></p>
</details>
<p>A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.</p>
<h2 id="template-compatibility" tabindex="-1">Template Compatibility <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This plugin adds a <code>renderTemplate</code> and <code>renderFile</code> asynchronous shortcode to:</p>
<ul>
<li>Nunjucks</li>
<li>Liquid</li>
<li>JavaScript (11ty.js)</li>
</ul>
<p>Everything you’ve added to project’s configuration file will also be available in these renders too: shortcodes, filters, etc. That means you can nest 😱 them, too!</p>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This plugin is bundled with Eleventy core so it doesn’t require additional installation. But you do have to add it to your configuration file (probably <code>.eleventy.js</code>) with <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyRenderPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyRenderPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary>Expand to view all of the Plugin Options</summary>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> EleventyRenderPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyRenderPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">tagName</span><span class="token operator">:</span> <span class="token string">"renderTemplate"</span><span class="token punctuation">,</span> <span class="token comment">// Change the renderTemplate shortcode name</span><br> <span class="token literal-property property">tagNameFile</span><span class="token operator">:</span> <span class="token string">"renderFile"</span><span class="token punctuation">,</span> <span class="token comment">// Change the renderFile shortcode name</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</details>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</div></div>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="rendertemplate" tabindex="-1"><code>renderTemplate</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#rendertemplate">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use the <code>renderTemplate</code> paired shortcode to render a template string.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpl-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpl-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpl-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpl-hbs" role="tab">Handlebars</a>
</div>
<div id="rendertmpl-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderTemplate <span class="token string">"md"</span> <span class="token delimiter punctuation">%}</span></span><br># I am a title<br><br>* I am a list<br>* I am a list<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endrenderTemplate <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="rendertmpl-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderTemplate</span> <span class="token string">"md"</span> <span class="token delimiter punctuation">%}</span></span><br># I am a title<br><br>* I am a list<br>* I am a list<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endrenderTemplate</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="rendertmpl-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTemplate</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"># I am a title<br><br>* I am a list<br>* I am a list</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">"md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="rendertmpl-hbs" role="tabpanel">
<p>The <code>renderTemplate</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>The content inside of the shortcode will be rendered using Markdown (<code>"md"</code>). Front matter is not yet supported.</p>
<p>The first argument to <code>renderTemplate</code> can be any valid <a href="https://www.11ty.dev/docs/languages/#templateengineoverride-examples"><code>templateEngineOverride</code></a> value. You can even use <code>"liquid,md"</code> to preprocess markdown with liquid. You can use <a href="https://www.11ty.dev/docs/languages/custom/">custom template types</a> here too, including <a href="https://github.com/11ty/eleventy-plugin-vue">the Vue plugin</a>!</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmplvue-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmplvue-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmplvue-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmplvue-hbs" role="tab">Handlebars</a>
</div>
<div id="rendertmplvue-liquid" role="tabpanel">
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderTemplate <span class="token string">"vue"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><br> THIS IS VUE <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endrenderTemplate <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="rendertmplvue-njk" role="tabpanel">
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderTemplate</span> <span class="token string">"vue"</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><br> THIS IS VUE <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endrenderTemplate</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="rendertmplvue-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTemplate</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div><br> THIS IS VUE <p v-html="hi"></p><br></div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">"vue"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="rendertmplvue-hbs" role="tabpanel">
<p>The <code>renderTemplate</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">The one exception here is that <code>{% renderTemplate "11ty.js" %}</code> JavaScript string templates are not yet supported—use <code>renderFile</code> below instead.</div></div>
<p>To add Vue support, don’t forget to install <a href="https://github.com/11ty/eleventy-plugin-vue"><code>@11ty/eleventy-plugin-vue</code> (v0.6.0 or newer)</a> and add the Vue plugin in your config file. There is an example on the Eleventy Vue Plugin documentation showing <a href="https://github.com/11ty/eleventy-plugin-vue#advanced-run-async-things-before-component-render">how to call the render plugin inside of Vue components</a>.</p>
<h4 id="pass-in-data" tabindex="-1">Pass in data <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#pass-in-data">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Both the <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#eleventy-variable"><code>eleventy</code></a> and <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable"><code>page</code> variables</a> are available inside of these templates by default. If you want to pass in additional data, you can do so like this:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpldata-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpldata-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpldata-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#rendertmpldata-hbs" role="tab">Handlebars</a>
</div>
<div id="rendertmpldata-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>myData:<br> myKey: myValue<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderTemplate <span class="token string">"liquid"</span><span class="token punctuation">,</span> myData <span class="token delimiter punctuation">%}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> myKey <span class="token delimiter punctuation">}}</span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> endrenderTemplate <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="rendertmpldata-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>myData:<br> myKey: myValue<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderTemplate</span> <span class="token string">"liquid"</span><span class="token punctuation">,</span> <span class="token variable">myData</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{{</span> <span class="token variable">myKey</span> <span class="token delimiter punctuation">}}</span></span><br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">endrenderTemplate</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="rendertmpldata-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myData</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myKey</span><span class="token operator">:</span> <span class="token string">"myValue"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderTemplate</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">{{ myKey }}</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">"liquid"</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>myData<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="rendertmpldata-hbs" role="tabpanel">
<p>The <code>renderTemplate</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>Outputs <code>myValue</code>.</p>
<h3 id="renderfile" tabindex="-1"><code>renderFile</code> <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#renderfile">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Use the <code>renderFile</code> shortcode to render an include file.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#renderfile-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfile-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfile-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfile-hbs" role="tab">Handlebars</a>
</div>
<div id="renderfile-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderFile <span class="token string">"./_includes/blogpost.md"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfile-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderFile</span> <span class="token string">"./_includes/blogpost.md"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfile-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderFile</span><span class="token punctuation">(</span><span class="token string">"./includes/blogpost.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="renderfile-hbs" role="tabpanel">
<p>The <code>renderFile</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>The first argument to <code>renderFile</code> is a project root relative path to any template file. Front matter inside of the target files is not yet supported. The template syntax used is inferred by the file extension.</p>
<p>Note that you can use files supported by any <a href="https://www.11ty.dev/docs/languages/custom/">custom file extensions</a> you’ve added too, including a Vue Single File Component from the <a href="https://github.com/11ty/eleventy-plugin-vue">Eleventy Vue plugin</a>!</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#renderfilevue-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfilevue-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfilevue-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfilevue-hbs" role="tab">Handlebars</a>
</div>
<div id="renderfilevue-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderFile <span class="token string">"./_includes/header.vue"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfilevue-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderFile</span> <span class="token string">"./_includes/header.vue"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfilevue-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderFile</span><span class="token punctuation">(</span><span class="token string">"./includes/header.vue"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="renderfilevue-hbs" role="tabpanel">
<p>The <code>renderFile</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>To add Vue support, don’t forget to install <a href="https://github.com/11ty/eleventy-plugin-vue"><code>@11ty/eleventy-plugin-vue</code> (v0.6.0 or newer)</a> and add the Vue plugin in your config file.</p>
<h4 id="pass-in-data-1" tabindex="-1">Pass in data <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#pass-in-data-1">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>Both the <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#eleventy-variable"><code>eleventy</code></a> and <a href="https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable"><code>page</code> variables</a> are available inside of these templates by default. If you want to pass in additional data, you can do so like this:</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#renderfiledata-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfiledata-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfiledata-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfiledata-hbs" role="tab">Handlebars</a>
</div>
<div id="renderfiledata-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>myData:<br> myKey: myValue<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderFile <span class="token string">"./_includes/blogpost.md"</span><span class="token punctuation">,</span> myData <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfiledata-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>myData:<br> myKey: myValue<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderFile</span> <span class="token string">"./_includes/blogpost.md"</span><span class="token punctuation">,</span> <span class="token variable">myData</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfiledata-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myData</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myKey</span><span class="token operator">:</span> <span class="token string">"myValue"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderFile</span><span class="token punctuation">(</span><span class="token string">"./includes/blogpost.md"</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>myData<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="renderfiledata-hbs" role="tabpanel">
<p>The <code>renderFile</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<h4 id="override-the-target-file-syntax" tabindex="-1">Override the target file syntax <a class="direct-link" href="https://www.11ty.dev/docs/plugins/render/#override-the-target-file-syntax">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h4>
<p>The syntax is normally inferred using the file extension, but it can be overridden using a third argument. It can be any valid <a href="https://www.11ty.dev/docs/languages/#templateengineoverride-examples"><code>templateEngineOverride</code></a> value. You can even use <code>"liquid,md"</code> to preprocess markdown with liquid.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Template Language Chooser">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/render/#renderfileoverride-liquid" role="tab">Liquid</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfileoverride-njk" role="tab">Nunjucks</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfileoverride-js" role="tab">11ty.js</a>
<a href="https://www.11ty.dev/docs/plugins/render/#renderfileoverride-hbs" role="tab">Handlebars</a>
</div>
<div id="renderfileoverride-liquid" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid</div>
<pre class="language-liquid"><code class="language-liquid">---<br>myData:<br> key: value<br>---<br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> renderFile <span class="token string">"./_includes/blogpost.md"</span><span class="token punctuation">,</span> myData<span class="token punctuation">,</span> <span class="token string">"njk"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfileoverride-njk" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>Nunjucks</div>
<pre class="language-jinja2"><code class="language-jinja2">---<br>myData:<br> key: value<br>---<br><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">renderFile</span> <span class="token string">"./_includes/blogpost.md"</span><span class="token punctuation">,</span> <span class="token variable">myData</span><span class="token punctuation">,</span> <span class="token string">"njk"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
</div>
<div id="renderfileoverride-js" role="tabpanel">
<div class="codetitle codetitle-left"><b>Syntax </b>JavaScript</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myData</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">myKey</span><span class="token operator">:</span> <span class="token string">"myValue"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderFile</span><span class="token punctuation">(</span><span class="token string">"./includes/blogpost.md"</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>myData<span class="token punctuation">,</span> <span class="token string">"njk"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<div id="renderfileoverride-hbs" role="tabpanel">
<p>The <code>renderFile</code> shortcode <a href="https://www.11ty.dev/docs/plugins/render/#template-compatibility">requires an async-friendly template language</a> and is not available in Handlebars.</p>
</div>
</seven-minute-tabs>
</is-land>
<p>Will render <code>blogpost.md</code> using Nunjucks instead of Markdown!</p>
RSS
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/plugins/rss/
<h1>RSS Plugin</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/plugins/rss/#template-compatibility">Template Compatibility </a></li><li><a href="https://www.11ty.dev/docs/plugins/rss/#installation">Installation </a><ul><li><a href="https://www.11ty.dev/docs/plugins/rss/#options">Options </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/rss/#supplies-the-following-nunjucks-filters">Supplies the following Nunjucks Filters </a><ul><li><a href="https://www.11ty.dev/docs/plugins/rss/#use-with-other-template-languages">Use with other template languages </a></li><li><a href="https://www.11ty.dev/docs/plugins/rss/#deprecated-filters">Deprecated Filters </a></li></ul></li><li><a href="https://www.11ty.dev/docs/plugins/rss/#sample-feed-templates">Sample Feed templates </a></li><li><a href="https://www.11ty.dev/docs/plugins/rss/#related-plugins">Related Plugins: </a></li></ul></div><p></p>
</details>
<p>A pack of plugins for generating an RSS feed (actually an Atom feed, but who’s counting) using the Nunjucks templating engine.</p>
<ul>
<li><a href="https://github.com/11ty/eleventy-plugin-rss">GitHub</a>.</li>
</ul>
<h2 id="template-compatibility" tabindex="-1">Template Compatibility <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#template-compatibility">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Nunjucks</li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Available on <a href="https://www.npmjs.com/package/@11ty/eleventy-plugin-rss">npm</a>.</p>
<pre><code>npm install @11ty/eleventy-plugin-rss --save-dev
</code></pre>
<p>Open up your Eleventy config file (probably <code>.eleventy.js</code>) and use <code>addPlugin</code>:</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginRss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-rss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginRss<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">You’re only allowed one <code>module.exports</code> in your configuration file, so make sure you only copy the <code>require</code> and the <code>addPlugin</code> lines above!</div></div>
<h3 id="options" tabindex="-1">Options <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="RSS 1.1.0">Added in RSS 1.1.0</span> Advanced control of <a href="https://github.com/posthtml/posthtml-render#options">PostHTML rendering options</a> via <code>posthtmlRenderOptions</code>.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginRss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-rss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>pluginRss<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">posthtmlRenderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">closingSingleTag</span><span class="token operator">:</span> <span class="token string">"default"</span> <span class="token comment">// opt-out of <img/>-style XHTML single tags</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="supplies-the-following-nunjucks-filters" tabindex="-1">Supplies the following Nunjucks Filters <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#supplies-the-following-nunjucks-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><code>getNewestCollectionItemDate</code>: Gets the most recently updated content in the collection. Use with <code>dateToRfc3339</code> to properly format the Date for the top-level <code><updated></code> element. <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="RSS 1.1.0">Added in RSS 1.1.0</span></li>
<li><code>dateToRfc3339</code>: format a Date for use in a <code><entry><updated></code> element. (Atom feeds) <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="RSS 1.1.0">Added in RSS 1.1.0</span></li>
<li><code>dateToRfc822</code>: format a Date for use in a <code><pubDate></code> element. (RSS feeds) <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="RSS 1.2.0">Added in RSS 1.2.0</span></li>
<li><code>absoluteUrl</code>: converts a single URL (relative or absolute path) to a full absolute URL including protocol, domain, full path.</li>
<li><code>htmlToAbsoluteUrls</code>: (async) transforms all of the URLs in a block of HTML with <code>absoluteUrl</code> above. Uses <a href="https://github.com/posthtml/posthtml-urls">posthtml-urls</a> with <code>a[href]</code>, <code>video[src]</code>, <code>audio[src]</code>, <code>source</code>, <code>img[src]</code>, <code>[srcset]</code> and <a href="https://github.com/posthtml/posthtml-urls/blob/307c91342a211b3f9fb22bc57264bbb31f235fbb/lib/defaultOptions.js">a whole bunch more</a>.</li>
</ul>
<h3 id="use-with-other-template-languages" tabindex="-1">Use with other template languages <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#use-with-other-template-languages">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="RSS 1.1.0">Added in RSS 1.1.0</span> This plugin exports <code>dateToRfc3339</code>, <code>dateToRfc822</code> (<span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="RSS 1.2.0">Added in RSS 1.2.0</span>), <code>getNewestCollectionItemDate</code>, <code>absoluteUrl</code>, and <code>convertHtmlToAbsoluteUrls</code> functions so you can use with your own filters. For example:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> pluginRss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-rss"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidFilter</span><span class="token punctuation">(</span><span class="token string">"dateToRfc3339"</span><span class="token punctuation">,</span> pluginRss<span class="token punctuation">.</span>dateToRfc3339<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// New in RSS 1.2.0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addLiquidFilter</span><span class="token punctuation">(</span><span class="token string">"dateToRfc822"</span><span class="token punctuation">,</span> pluginRss<span class="token punctuation">.</span>dateToRfc822<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Do keep in mind that <em>escaping</em> HTML content is a feature provided as <a href="https://mozilla.github.io/nunjucks/templating.html#autoescaping">part of Nunjucks</a>. Moving to another template language may require a different option for escaping (for example, <a href="https://www.npmjs.com/package/html-entities"><code>html-entities</code></a>).</div></div>
<h3 id="deprecated-filters" tabindex="-1">Deprecated Filters <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#deprecated-filters">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><code>rssLastUpdatedDate</code>, poorly named (works with Atom and JSON feeds, not RSS). Use <code>getNewestCollectionItemDate | dateToRfc3339</code> instead.</li>
<li><code>rssDate</code>, poorly named (works with Atom and JSON feeds, not RSS). Use <code>dateToRfc3339</code> instead.</li>
</ul>
<h2 id="sample-feed-templates" tabindex="-1">Sample Feed templates <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#sample-feed-templates">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Copy and paste this template and modify the JSON metadata to match your feed’s needs. Make sure <code>collections.posts</code> matches the template collection you want to provide a feed for.</p>
<is-land on:visible="" import="/js/seven-minute-tabs.js">
<seven-minute-tabs>
<div role="tablist" aria-label="Choose a template language">
View this example in:
<a href="https://www.11ty.dev/docs/plugins/rss/#rss-atom" role="tab">Atom</a>
<a href="https://www.11ty.dev/docs/plugins/rss/#rss-rss" role="tab">RSS</a>
<a href="https://www.11ty.dev/docs/plugins/rss/#rss-json" role="tab">JSON</a>
</div>
<div id="rss-atom" role="tabpanel">
<pre class="language-html"><code class="language-html">---json<br>{<br> "permalink": "feed.xml",<br> "eleventyExcludeFromCollections": true,<br> "metadata": {<br> "title": "My Blog about Boats",<br> "subtitle": "I am writing about my experiences as a naval navel-gazer.",<br> "language": "en",<br> "url": "https://example.com/",<br> "author": {<br> "name": "Boaty McBoatFace",<br> "email": "me@example.com"<br> }<br> }<br>}<br>---<br><span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>feed</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2005/Atom<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>base</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ metadata.url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ metadata.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>subtitle</span><span class="token punctuation">></span></span>{{ metadata.subtitle }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>subtitle</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ permalink | absoluteUrl(metadata.url) }}<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>self<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ metadata.url }}<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>updated</span><span class="token punctuation">></span></span>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>updated</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>id</span><span class="token punctuation">></span></span>{{ metadata.url }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>id</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>author</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>name</span><span class="token punctuation">></span></span>{{ metadata.author.name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>name</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>email</span><span class="token punctuation">></span></span>{{ metadata.author.email }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>email</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>author</span><span class="token punctuation">></span></span><br> {%- for post in collections.posts | reverse %}<br> {%- set absolutePostUrl = post.url | absoluteUrl(metadata.url) %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>entry</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ post.data.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ absolutePostUrl }}<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>updated</span><span class="token punctuation">></span></span>{{ post.date | dateToRfc3339 }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>updated</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>id</span><span class="token punctuation">></span></span>{{ absolutePostUrl }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>id</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>content</span> <span class="token attr-name"><span class="token namespace">xml:</span>lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ metadata.language }}<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>content</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>entry</span><span class="token punctuation">></span></span><br> {%- endfor %}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>feed</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="rss-rss" role="tabpanel">
<pre class="language-html"><code class="language-html">---json<br>{<br> "permalink": "feed.xml",<br> "eleventyExcludeFromCollections": true,<br> "metadata": {<br> "title": "My Blog about Boats",<br> "subtitle": "I am writing about my experiences as a naval navel-gazer.",<br> "language": "en",<br> "url": "https://example.com/",<br> "author": {<br> "name": "Boaty McBoatFace",<br> "email": "me@example.com"<br> }<br> }<br>}<br>---<br><span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rss</span> <span class="token attr-name">version</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.0<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>dc</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://purl.org/dc/elements/1.1/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>base</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ metadata.url }}<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>atom</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2005/Atom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>channel</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ metadata.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span><span class="token punctuation">></span></span>{{ metadata.url }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>link</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token namespace">atom:</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ permalink | absoluteUrl(metadata.url) }}<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>self<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/rss+xml<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>description</span><span class="token punctuation">></span></span>{{ metadata.subtitle }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>description</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>language</span><span class="token punctuation">></span></span>{{ metadata.language }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>language</span><span class="token punctuation">></span></span><br> {%- for post in collections.posts | reverse %}<br> {%- set absolutePostUrl = post.url | absoluteUrl(metadata.url) %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>item</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ post.data.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span><span class="token punctuation">></span></span>{{ absolutePostUrl }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>link</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>description</span><span class="token punctuation">></span></span>{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>description</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pubDate</span><span class="token punctuation">></span></span>{{ post.date | dateToRfc822 }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pubDate</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token namespace">dc:</span>creator</span><span class="token punctuation">></span></span>{{ metadata.author.name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token namespace">dc:</span>creator</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>guid</span><span class="token punctuation">></span></span>{{ absolutePostUrl }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>guid</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>item</span><span class="token punctuation">></span></span><br> {%- endfor %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>channel</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rss</span><span class="token punctuation">></span></span></code></pre>
</div>
<div id="rss-json" role="tabpanel">
<pre class="language-json"><code class="language-json">---json<br><span class="token punctuation">{</span><br> <span class="token property">"permalink"</span><span class="token operator">:</span> <span class="token string">"feed.json"</span><span class="token punctuation">,</span><br> <span class="token property">"eleventyExcludeFromCollections"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token property">"metadata"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My Blog about Boats"</span><span class="token punctuation">,</span><br> <span class="token property">"subtitle"</span><span class="token operator">:</span> <span class="token string">"I am writing about my experiences as a naval navel-gazer."</span><span class="token punctuation">,</span><br> <span class="token property">"language"</span><span class="token operator">:</span> <span class="token string">"en"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://example.com/"</span><span class="token punctuation">,</span><br> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Boaty McBoatFace"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://example.com/about-boaty/"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br>---<br><span class="token punctuation">{</span><br> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"https://jsonfeed.org/version/1.1"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"{{ metadata.title }}"</span><span class="token punctuation">,</span><br> <span class="token property">"language"</span><span class="token operator">:</span> <span class="token string">"{{ metadata.language }}"</span><span class="token punctuation">,</span><br> <span class="token property">"home_page_url"</span><span class="token operator">:</span> <span class="token string">"{{ metadata.url }}"</span><span class="token punctuation">,</span><br> <span class="token property">"feed_url"</span><span class="token operator">:</span> <span class="token string">"{{ permalink | absoluteUrl(metadata.url) }}"</span><span class="token punctuation">,</span><br> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"{{ metadata.subtitle }}"</span><span class="token punctuation">,</span><br> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"{{ metadata.author.name }}"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"{{ metadata.author.url }}"</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token property">"items"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token punctuation">{</span>%- for post in collections.posts | reverse %<span class="token punctuation">}</span><br> <span class="token punctuation">{</span>%- set absolutePostUrl = post.url | absoluteUrl(metadata.url) %<span class="token punctuation">}</span><br> <span class="token punctuation">{</span><br> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"{{ absolutePostUrl }}"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"{{ absolutePostUrl }}"</span><span class="token punctuation">,</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"{{ post.data.title }}"</span><span class="token punctuation">,</span><br> <span class="token property">"content_html"</span><span class="token operator">:</span> <span class="token punctuation">{</span>% if post.templateContent %<span class="token punctuation">}</span><span class="token punctuation">{</span><span class="token punctuation">{</span> post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">{</span>% else %<span class="token punctuation">}</span><span class="token string">""</span><span class="token punctuation">{</span>% endif %<span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token property">"date_published"</span><span class="token operator">:</span> <span class="token string">"{{ post.date | dateToRfc3339 }}"</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">{</span>% if not loop.last %<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>% endif %<span class="token punctuation">}</span><br> <span class="token punctuation">{</span>%- endfor %<span class="token punctuation">}</span><br> <span class="token punctuation">]</span><br><span class="token punctuation">}</span></code></pre>
</div>
</seven-minute-tabs>
<p>Place the file anywhere in your project (give it a <code>.njk</code> extension) and it will be transformed into a <code>feed.xml</code> (or <code>feed.json</code> if you’re using the JSON variant) file at the root of your website when Eleventy builds it. It can then be useful to check the file against a feed validator, such as the <a href="https://validator.w3.org/feed/">W3C Feed Validation Service</a> to make sure that the output was good.</p>
<p>Ultimately your feed will be available at <code>https://yourwebsite.com/feed.xml</code> (or <code>https://yourwebsite.com/feed.json</code>)</p>
<h2 id="related-plugins" tabindex="-1">Related Plugins: <a class="direct-link" href="https://www.11ty.dev/docs/plugins/rss/#related-plugins">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.npmjs.com/package/eleventy-xml-plugin"><code>eleventy-xml-plugin</code></a> for Liquid.</li>
</ul>
</is-land>
Quick Tips
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/quicktips/
<h1>小技巧</h1>
<ul>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/inline-css/"><code>#001</code>—Inline Minified CSS</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/inline-js/"><code>#002</code>—Inline Minified JavaScript</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/edit-on-github-links/"><code>#003</code>—Add Edit on GitHub Links to All Pages</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/tag-pages/"><code>#004</code>—Zero Maintenance Tag Pages for your Blog</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/concatenate/"><code>#005</code>—Super Simple CSS Concatenation</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/not-found/"><code>#006</code>—Adding a 404 Not Found Page to your Static Site</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/eliminate-js/"><code>#007</code>—Fetch GitHub Stargazers Count (and More) at Build Time</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/netlify-ifttt/"><code>#008</code>—Trigger a Netlify Build Every Day with IFTTT</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/cache-api-requests/"><code>#009</code>—Cache Data Requests</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/create-multiple-computed-data-elements/"><code>#010</code>—Transform Global Data using an <code>eleventyComputed.js</code> Global Data File</a></li>
<li>Quick Tip <a href="https://www.11ty.dev/docs/quicktips/draft-posts/"><code>#011</code>—Draft Posts using Computed Data</a></li>
</ul>
<p>📢 <a href="https://www.11ty.dev/docs/quicktips/feed.xml">请订阅 <strong>Eleventy Quick Tips RSS Feed</strong></a></p>
Source Code Samples
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/samples/
<h2 id="源码实例" tabindex="-1">源码实例 <a class="direct-link" href="https://www.11ty.dev/docs/samples/#%E6%BA%90%E7%A0%81%E5%AE%9E%E4%BE%8B">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>此处以随即顺序列出了所有公开源码的实例网站。<a href="https://www.11ty.dev/speedlify/">完整的列表见这里</a>。 <a href="https://github.com/11ty/11ty-website/issues/new/choose"><strong>Want to add your site to this list?</strong></a></p>
<table>
<thead>
<tr>
<th>名称</th>
<th style="min-width: 9em">源码地址</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://www.shera.gay/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhigby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for higby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/higby/shera.gay" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://scottmccracken.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsmccracken%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for smccracken" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/smccracken/scottmccracken.net" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://torstenknabe.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftorstenknabe%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for torstenknabe" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/torstenknabe/tk-portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hmiller.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Farthyn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for arthyn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/arthyn/hmillerdev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://castmill.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmanast%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for manast" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/OptimalBits/castmill.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jerseycitybitcoin.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FJamesTsetsekas%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for JamesTsetsekas" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/JamesTsetsekas/JerseyCityBitcoin" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.flyweb.at/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbrachycera%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for brachycera" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/brachycera/fly-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://miayam.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmiayam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for miayam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/miayam/miayam" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://guirdo.xyz/es/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FGuirdo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Guirdo" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Guirdo/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://manu.ninja/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FLorti%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Lorti" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Lorti/manu.ninja" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://chantillywebdesign.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmikeritter%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mikeritter" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://chantillywebdesign.com/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11tytailwindjit.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkkgthb%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kkgthb" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kkgthb/11ty-tailwind-jit" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jan.work/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcoolcut%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for coolcut" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/coolcut/fruechtl.me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://angeliqueweger.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fangeliquejw%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for angeliquejw" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/angeliquejw/dev-blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://clioandcalliope.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsiakaramalegos%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for siakaramalegos" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/siakaramalegos/clioandcalliope" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mefody.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMeFoDy%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for MeFoDy" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/MeFoDy/mefody.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tempertemper.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftempertemper%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tempertemper" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tempertemper/tempertemper.net" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tgiles.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTGiles%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for TGiles" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/TGiles/static-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://precious-prana.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnhoizey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nhoizey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nhoizey/precious-prana.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ericraslich.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Frasliche%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for rasliche" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/rasliche/ericraslich" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://peaks.henry.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxdesro%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xdesro" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xdesro/peaks" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://stedman.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstedman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for stedman" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/stedman/stedman.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jamstackbarcelona.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdanurbanowicz%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for danurbanowicz" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/danurbanowicz/jamstack-barcelona-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bite-sized-a11y.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fadamlaki%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for adamlaki" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/conedevelopment/bite-sized-a11y" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.higby.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhigby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for higby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/higby/higby.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.andreacorinti.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandreacorinti%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andreacorinti" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andreacorinti/andreacorinti.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://developers.thegreenwebfoundation.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffershad%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fershad" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/thegreenwebfoundation/developer-docs" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kromatic.fr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fromain-koenig%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for romain-koenig" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/romain-koenig/kromatic2023" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://davidojeda.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdavidojedalopez%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for davidojedalopez" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/davidojedalopez/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://johan.im/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/_3mmf7n0Ka-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/_3mmf7n0Ka-90.webp 90w"><img alt="johanbrook’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/_3mmf7n0Ka-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/johanbrook/johanbrook.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fotis.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffpapado%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fpapado" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fpapado/fotis.xyz" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bujinkancantabria.ninja/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAngelGuerra%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AngelGuerra" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AngelGuerra/bujinkan-cantabria" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://emilymccracken.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsmccracken%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for smccracken" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/smccracken/emilymccracken.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.nicolas-birckel.fr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnbirckel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nbirckel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nbirckel/mainsite-v2" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kack.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgabbersepp%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gabbersepp" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gabbersepp/kack_dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://programrestoran.axcora.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmesinkasir%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mesinkasir" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mesinkasir/landingpage11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jackhowa.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FJackHowa%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for JackHowa" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/JackHowa/JackHowa.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://olivernorred.com/blog"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Folivernorred%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for olivernorred" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/olivernorred/olivernorreddotcom" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11tybundle.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbobmonsour%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bobmonsour" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bobmonsour/11tybundle.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://angular.pridontetradze.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FCondensedMilk7%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for CondensedMilk7" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/CondensedMilk7/ng-guide" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://disjfa.github.io/eleventy-encore/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdisjfa%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for disjfa" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/disjfa/eleventy-encore" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://periodictables.zacharyc.site/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FZacharyCrespin%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ZacharyCrespin" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ZacharyCrespin/periodic-tables" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hire.wil.to/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FWilto%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Wilto" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Wilto/hire.wil.to" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://qrayg.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/qrayg.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://performance-kit.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcode-mattclaffey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for code-mattclaffey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/code-mattclaffey/performance-kit/tree/v2" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://nathan-long.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnathanlong%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nathanlong" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nathanlong/nathanlong.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://contrast-11ties.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FBenDMyers%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for BenDMyers" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/BenDMyers/contrast-11ties" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fossheim.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsarahfossheim%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for sarahfossheim" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/sarahfossheim/fossheim-io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://legendofmana.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/legendofmana.info" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hydrogen.design/en/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsubstrae%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for substrae" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hydrogen-css/hydrogen" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://spyrath.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flouisefindlay23%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for louisefindlay23" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/louisefindlay23/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://almanac.chinesetaipeitouch.com/en/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffershad%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fershad" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fershad-digital/ctta_almanac" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pierre.awaragi.com/"><img src="https://www.11ty.dev/img/default-avatar.png" alt="Default Avatar" loading="lazy" decoding="async" class="avatar" width="200" height="200"></a></td>
<td><a href="https://github.com/awaragi/pierre.awaragi.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://edmill.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmllngtn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mllngtn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mllngtn/edmill-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dixonwildlifeart.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdixonge%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dixonge" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dixonge/dwa" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://huphtur.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhuphtur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for huphtur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/huphtur/huphtur.nl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://claytonerrington.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcjerrington%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cjerrington" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cjerrington/cjerrington.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://myclientwants.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbrob%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for brob" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/brob/butmyclientwants.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://nicolas-hoizey.photo/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnhoizey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nhoizey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nhoizey/nicolas-hoizey.photo" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://crinkles.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkevtiq%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kevtiq" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kevtiq/crinkles.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mtman.ventures/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FGeauxWeisbeck4%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for GeauxWeisbeck4" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/GeauxWeisbeck4/mtman.ventures" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://corina-rudel.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffricca%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fricca" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fricca/corina-rudel.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://us-coffee-roasters.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Falexcarpenter%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for alexcarpenter" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/alexcarpenter/us-coffee-roasters" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://amberwilson.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fambrwlsn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ambrwlsn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ambrwlsn/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kevhealy.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkevhealy-git%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kevhealy-git" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kevhealy-git/kevhealydotcom" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sia.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsiakaramalegos%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for siakaramalegos" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/siakaramalegos/sia.codes-eleventy" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jgarber623.github.io/nasa-apod/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/nasa-apod" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://singleservingsites.cool/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhuphtur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for huphtur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/huphtur/single-serving-sites" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://wirgen.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fwirgen%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for wirgen" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/wirgen/wirgen-dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sfc.blue/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbriankoser%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for briankoser" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/briankoser/sfc-listeners-guide" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://2018.nejsconf.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzachleat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zachleat" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/NebraskaJS/2018.nejsconf.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://binnyva.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbinnyva%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for binnyva" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/binnyva/Site_binnyva.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://levimcg.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flevimcg%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for levimcg" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/levimcg/levimcg.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.statox.fr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstatox%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for statox" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/statox/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.imkhoi.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKhoiUna%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KhoiUna" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/KhoiUna/my-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://htmlrecipes.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/htmlrecipes" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://flag.is/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmvsde%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mvsde" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mvsde/pride-flags" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sixtysix.frontendweekly.tokyo/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstudiomohawk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for studiomohawk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/frontendweekly/sixtysix" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://andrewrico.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAndrewrico%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Andrewrico" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Andrewrico/andrewrico.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hobbies.alexcarpenter.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Falexcarpenter%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for alexcarpenter" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/alexcarpenter/hobbies" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://nejsconf.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzachleat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zachleat" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/NebraskaJS/nejsconf-recap" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://codesue.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcodesue%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for codesue" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/codesue/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://lilypond-in-markdown.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpianomanfrazier%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pianomanfrazier" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/pianomanfrazier/lilypond-in-markdown" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://coastline941.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fthursby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for thursby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/thursby/coastline-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.kogakure.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkogakure%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kogakure" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kogakure/website-11ty-kogakure.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.hoeser.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FSnapstromegon%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Snapstromegon" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Snapstromegon/hoeser.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11tycolorpicker.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tannerdolby/eleventy-color-picker" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://andrewpucci.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandrewpucci%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andrewpucci" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andrewpucci/andrewpucci.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tto.koser.us/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbriankoser%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for briankoser" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/briankoser/tto" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hamburg.stefanimhoff.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkogakure%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kogakure" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tkackielodzkie.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffusilli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fusilli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fusilli/tkackielodzkie.pl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://chringel.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchringel21%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chringel21" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chringel21/chringel.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jonas.brusman.se/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhimynameisjonas%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for himynameisjonas" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/himynameisjonas/jonas.brusman.se" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://martinschneider.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fschneyra%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for schneyra" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/schneyra/martinschneiderme-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://brd.mn/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdustykeyboard%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dustykeyboard" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dustykeyboard/brd.mn" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.behindthesource.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmikestreety%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mikestreety" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/mikestreety-sites/behind-the-source" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://andy.bond/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandy-bond%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andy-bond" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andy-bond/andy.bond" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kreativan.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkreativan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kreativan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kreativan/kreativan.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://surajjadhav.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsurajjdhv%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for surajjdhv" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/surajjdhv/surajjdhv.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://przemekmiros.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FPrzemekMiros%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for PrzemekMiros" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/PrzemekMiros/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://50licenseplates.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdleatherman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dleatherman" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dleatherman/license-plates" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ffconf.org/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/4lo9_EgTuV-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/4lo9_EgTuV-90.webp 90w"><img alt="ffconf’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/4lo9_EgTuV-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/leftlogic/ffconf" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hayes.software/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FChristopher-Hayes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Christopher-Hayes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/christopher-hayes/hayes.software" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://lit.dev/"><img src="https://www.11ty.dev/img/default-avatar.png" alt="Default Avatar" loading="lazy" decoding="async" class="avatar" width="200" height="200"></a></td>
<td><a href="https://github.com/lit/lit.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tim.oerlemans.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftimoerlemans%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for timoerlemans" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/timoerlemans/timoerlemans.nl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://guardians-foundation.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FChadoNihi%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ChadoNihi" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/guardians-foundation/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.mauropfister.ch/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMauroPfister%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for MauroPfister" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/MauroPfister/personal-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://spaceholder.cc/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/spaceholder.cc" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://docs.getchip.cc/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/docs.getchip.cc" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.allaboutken.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkhawkins98%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for khawkins98" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/khawkins98/allaboutken-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://events.lunch.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FBenDMyers%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for BenDMyers" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/LunchDevCommunity/community-calendar" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fightwithtools.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAramZS%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AramZS" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AramZS/devblog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://everydayia.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fwilto%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for wilto" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Wilto/perfimages/tree/everydayIA" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://seasonal.today/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdogwonder%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dogwonder" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dogwonder/seasonal.today" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://coryd.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcdransf%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cdransf" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cdransf/coryd.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://perrodinero.blog/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdavidojedalopez%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for davidojedalopez" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/davidojedalopez/perro-dinero" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://stylestage.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/stylestage" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.adamjolicoeur.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAdamJ%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AdamJ" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AdamJ/AdamJ.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://where.hiddedevries.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhidde%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hidde" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hidde/where-is-hidde" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://homeding.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmathertel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mathertel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/HomeDing/homeding.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.chrissy.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchrissy-dev%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chrissy-dev" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chrissy-dev/chrissy.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://strange.website/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxdesro%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xdesro" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xdesro/strange-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jamesdoc.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjamesdoc%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jamesdoc" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jamesdoc/jamesdoc.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bholmes.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FHolben888%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Holben888" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bholmesdev/bholmesdev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bryanlrobinson.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbrob%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for brob" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/brob/bryanlrobinson.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://joomla-spa.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdgrammatiko%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dgrammatiko" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dgrammatiko/com_frontpage" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://chocolatesculptress.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsmccracken%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for smccracken" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/smccracken/chocolatesculptress.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://stanlemon.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstanlemon%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for stanlemon" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/stanlemon/stanlemon.github.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://maxbergstrom.se/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmaxoftime%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for maxoftime" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/maxoftime/its-a-me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://getzeropoint.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMWDelaney%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for MWDelaney" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/MWDelaney/getzeropoint.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://zlushiie.pages.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FZlushiie%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Zlushiie" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Zlushiie/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://lenny.fyi/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flennyanders%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lennyanders" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lennyanders/lenny.fyi" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dogsof.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fperuvianidol%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for peruvianidol" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/peruvianidol/dogsofdev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.lene.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmadrilene%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for madrilene" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/madrilene/lene.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eleventy-notist-example.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fphilhawksworth%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for philhawksworth" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/philhawksworth/eleventy-notist-example" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://supriyono.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpandu-supriyono%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pandu-supriyono" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/pandu-supriyono/supriyono.nl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://gvonkoss.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgvonkoss%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gvonkoss" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gvonkoss/gvonkoss.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://austinjavascript.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstedman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for stedman" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/austinjavascript/austinjavascript.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mina.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fminamarkham%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for minamarkham" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/minamarkham/cupcake" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.josephrex.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjosephrexme%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for josephrexme" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/josephrexme/josephrex.me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kirshmelev.ru/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmitorun%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mitorun" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mitorun-studio/kirshmelev.ru" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.kuksoolwonwoodbridge.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjuanfernandes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for juanfernandes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/juanfernandes/kuk-sool-won-woodbridge" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://rss-jamstack.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fphilhawksworth%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for philhawksworth" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/philhawksworth/medium-export" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://slay.sh/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fminamarkham%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for minamarkham" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/minamarkham/formation/tree/slay.sh" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11tyhub.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmortendk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mortendk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mortendk/11tyhub.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://amorgunov.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnoveogroup-amorgunov%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for noveogroup-amorgunov" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/noveogroup-amorgunov/amorgunov.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.atlas.bi/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchristopherpickering%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for christopherpickering" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/atlas-bi/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://vagabondians.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdixonge%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dixonge" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dixonge/vagabondians" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eleventy-classic-blog-starter.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTigersWay%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for TigersWay" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/TigersWay/eleventy-classic-blog-starter" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pxl.media/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/pxl.media" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://storybot.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FBullrich%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Bullrich" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/CodingBull-dev/Story-Bot/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://southpawspetservice.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmikeritter%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mikeritter" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/southpawspetservice/southpawspetservice.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://scottpdawson.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fscottpdawson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for scottpdawson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/scottpdawson/scottpdawson" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.ericcarlisle.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fecarlisle%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ecarlisle" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ecarlisle/eleventy.ericcarlisle.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://quentin.delcourt.be/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkant312%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kant312" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/kant312/quentin-delcourt-be" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://whitep4nth3r.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fwhitep4nth3r%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for whitep4nth3r" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/whitep4nth3r/mk2-p4nth3rblog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://indrajith.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcooljith91112%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cooljith91112" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cooljith91112/indrajith.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tc39.es/"><img src="https://www.11ty.dev/img/default-avatar.png" alt="Default Avatar" loading="lazy" decoding="async" class="avatar" width="200" height="200"></a></td>
<td><a href="https://github.com/tc39/tc39.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tattooed.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fvfalconi%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for vfalconi" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/vfalconi/tattooed.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.kloh.ch/403.html"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkloh-fr%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kloh-fr" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kloh-fr/kloh.ch" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bullrich.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FBullrich%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Bullrich" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Bullrich/bullrich.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fumes.junglestar.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffumes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fumes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fumes/fumes.11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://screen-read.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattbee%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattbee" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mattbee/screen-read" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hans.gerwitz.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgerwitz%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gerwitz" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gerwitz/hgc-v12" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://chriskirknielsen.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchriskirknielsen%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chriskirknielsen" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chriskirknielsen/2020" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cri.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchristian-fei%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for christian-fei" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/christian-fei/christian-fei.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://doganozturk.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdoganozturk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for doganozturk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/doganozturk/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.thudfactor.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fthudfactor%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for thudfactor" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/thudfactor/thudfactor/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pelican.ots.la.gov/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjames-alt%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for james-alt" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/la-ots/pelican" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ghassan.blog/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fghassanmas%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ghassanmas" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ghassanmas/ghassan.blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://carol.gg/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcarolgilabert%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for carolgilabert" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/carolgilabert/carols-blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://timseverien.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftimseverien%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for timseverien" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/timseverien/timseverien.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://omnisurface-stars.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsuperterrific%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for superterrific" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/superterrific/omnisurface-stars" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://rknight.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Frknightuk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for rknightuk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/rknightuk/rknight.me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fylgja.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FGrimLink%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for GrimLink" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fylgja/site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cssnano.co/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fludofischer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ludofischer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cssnano/cssnano" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://personalsit.es/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxdesro%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xdesro" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xdesro/personalsit.es" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dominickjay.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdominickjay%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dominickjay" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dominickjay/dominickjay.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://westwarwicks.club/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandystevenson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andystevenson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andystevenson/wwsc.club" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://wedding.httpster.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhttpsterio%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for httpsterio" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/httpsterio/h-s-wedding-photos" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.wikilear.it/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandrealeardini%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andrealeardini" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andrealeardini/wikilear" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jamesbateson.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjimbateson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jimbateson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jimbateson/jamesbateson.co.uk" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://oldpersiangames.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Falihardan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for alihardan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/oldpersiangames/oldpersiangames.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sinuous.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fluwes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for luwes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/luwes/sinuous-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://savjee.be/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FSavjee%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Savjee" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Savjee/savjee.be" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://derekonay.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FRiggd%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Riggd" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Riggd/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jfranciscosousa.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjfranciscosousa%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jfranciscosousa" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jfranciscosousa/jfranciscosousa.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fynn.be/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmvsde%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mvsde" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mvsde/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://veganprestwich.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstefan-burke%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for stefan-burke" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://git.sr.ht/~stfn/vegan-prestwich" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tim-kleyersburg.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftimkley%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for timkley" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/timkley/tim-kleyersburg.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dino-fakten.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmhaack%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mhaack" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mhaack/mias-dino-facts" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://datacatalogs.ru/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgleb-svechnikov%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gleb-svechnikov" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/infoculture/datacatalogs-ru" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://andrewhudson.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbigandy%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bigandy" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bigandy/andrewhudson.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.dandevri.es/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdandevri%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dandevri" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/systemdes/personal-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ryzokuken.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fryzokuken%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ryzokuken" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ryzokuken/ryzokuken.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://blog.tomayac.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftomayac%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tomayac" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tomayac/blogccasion" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://francisrubio.antaresph.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fteacherbuknoy%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for teacherbuknoy" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/teacherbuknoy/francisrubio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://njfamirm.ir/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnjfamirm%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for njfamirm" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/njfamirm/njfamirm.ir" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11ty.recipes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fperuvianidol%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for peruvianidol" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/peruvianidol/11ty-recipes" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ivoputzer.blog/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fivoputzer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ivoputzer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ivoputzer/ivoputzer.blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://snipshop.lea-tortay.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flea37%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lea37" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lea37/eleventy-snipcart-shop" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://spirits.bischoff.wtf/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmedienlampe%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for medienlampe" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/medienlampe/aethel" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://lazargosic.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FLazarQt%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for LazarQt" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/LazarQt/lazargosicnet" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://anchorthemes.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdaviddarnes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for daviddarnes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/daviddarnes/anchorthemes.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dueloperinatal.regazofotografia.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAngelGuerra%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AngelGuerra" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AngelGuerra/regazo-fotografia-duelo-perinatal" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.zachleat.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzachleat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zachleat" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zachleat/zachleat.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.chris-snowden.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FRecidvst%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Recidvst" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Recidvst/chris-snowden.me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://blog.davidmoll.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAkashic101%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Akashic101" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Akashic101/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11ty-universe.ryanccn.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fryanccn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ryanccn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ryanccn/11ty-universe" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://maprunner.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMaprunner%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Maprunner" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Maprunner/maprunner" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://github.com/lit/lit-element-starter-ts"><img src="https://www.11ty.dev/img/default-avatar.png" alt="Default Avatar" loading="lazy" decoding="async" class="avatar" width="200" height="200"></a></td>
<td><a href="https://github.com/lit/lit-element-starter-ts" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.mgrossklaus.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmgrsskls%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mgrsskls" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mgrsskls/mgrossklaus.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dassur.ma/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsurma%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for surma" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/surma/surma.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hoten.cc/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fconnorjclark%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for connorjclark" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/connorjclark/hoten.cc" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://rsixersdonates.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKingYam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KingYam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/KingYam/r-sixers-donates" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://imaginelenses.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fimaginelenses%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for imaginelenses" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/imaginelenses/blenditSite" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fifty.snook.ca/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsnookca%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for snookca" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/snookca/50by50" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://zacharyc.site/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FZacharyCrespin%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ZacharyCrespin" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ZacharyCrespin/zacharyc.site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.bobmonsour.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbobmonsour%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bobmonsour" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bobmonsour/bobmonsour.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://duncan.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fduncan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for duncan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/duncan/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://matthewstrom.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Filikescience%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ilikescience" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ilikescience/mhs11" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://going.bg/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchristopherpickering%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for christopherpickering" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/christopherpickering/going-bg" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://blog.dermah.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FDermah%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Dermah" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Dermah/blog.dermah.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pepelsbey.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpepelsbey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pepelsbey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/pepelsbey/pepelsbey.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://darius.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdkruythoff%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dkruythoff" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dkruythoff/darius-codes" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://zoepage.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzoepage%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zoepage" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zoepage/zoepage.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.seancdavis.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fseancdavis%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for seancdavis" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/seancdavis/seancdavis-com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.raymondcamden.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcfjedimaster%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cfjedimaster" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cfjedimaster/raymondcamden2020" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://evilpedia.online/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcjlm%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cjlm" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cjlm/evilpedia" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://myconscious.stream/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkevinctofel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kevinctofel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kevinctofel/excellent_stream" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11ty-bulma-starter.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FJ-Filip%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for J-Filip" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/J-Filip/11ty-bulma-starter" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ginger.wtf/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgingerchew%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gingerchew" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gingerchew/ginger.wtf-2024" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://petermekhaeil.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpetermekhaeil%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for petermekhaeil" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/petermekhaeil/petermekhaeil.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://metagala.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdistantcam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for distantcam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/distantcam/metagala.xyz" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://microblog.hankchizljaw.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhankchizljaw%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hankchizljaw" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hankchizljaw/microblog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://joesahlsa.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjsahlsa%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jsahlsa" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jsahlsa/Joe-Sahlsa-Home" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hohiemer.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhohiemer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hohiemer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hohiemer/hohiemer.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pdx.ashur.cab/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fashur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ashur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ashur/pdx" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.hawksworx.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fphilhawksworth%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for philhawksworth" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/philhawksworth/hawksworx.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://carlevans.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcarl-evans%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for carl-evans" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/carl-evans/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.solidstart.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ferikkroes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for erikkroes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/erikkroes/solidStart" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.leogenerali.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fleo-generali%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for leo-generali" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/leo-generali/personal-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://craftersagainstcovid19.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Faarongustafson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for aarongustafson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Crafters-Against-COVID-19/CraftersAgainstCOVID19.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jkc.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FJKC-Codes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for JKC-Codes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/JKC-Codes/jkc-codes.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.embl.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkhawkins98%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for khawkins98" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.ebi.ac.uk/users/sign_in" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.prakriti.care/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchinchang%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chinchang" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chinchang/prakriti" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://legonotlegos.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Frobsterlini%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for robsterlini" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/robsterlini/legonotlegos" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.mattnortham.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattnortham%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattnortham" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mattnortham/ma11northam" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jdadamsguitars.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbobmonsour%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bobmonsour" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bobmonsour/jdadamsguitars" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tapchamps.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhakim-d%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hakim-d" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hakim-d/tapchamps-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://offbeatbits.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flwojcik%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lwojcik" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/offbeatbits/offbeatbits/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://anaislemercier.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbcalou%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bcalou" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bcalou/portfolio-anais/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://henry.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxdesro%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xdesro" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xdesro/soon" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://games.sia.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsiakaramalegos%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for siakaramalegos" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/siakaramalegos/games" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tionosulis.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftionosulis%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tionosulis" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tionosulis/tionosulis.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.frede.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstefanfrede%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for stefanfrede" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/users/sign_in" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://marcoslooten.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmslooten%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mslooten" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mslooten/marcoslooten.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://joshuakeel.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjoshuakeel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for joshuakeel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/joshuakeel/joshuakeel.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://lukeb.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FCodeFoodPixels%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for CodeFoodPixels" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/CodeFoodPixels/website-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.piatkowska.org.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffusilli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fusilli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fusilli/piatkowska" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://louisville.aiga.org/awards-show-2019/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdavidysoards%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for davidysoards" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/davidysoards/aiga-louisville-awards-2019" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tdarb.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbradleytaunt%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bradleytaunt" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bradleytaunt/eleventy-taunt" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jdsteinbach.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjdsteinbach%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jdsteinbach" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jdsteinbach/jdsteinbach.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://preble1992.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/preble1992.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://joshcrain.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjoshcrain%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for joshcrain" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/joshcrain/joshcrain.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cryptography-algorithms.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAleksandrHovhannisyan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AleksandrHovhannisyan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AleksandrHovhannisyan/11ty-serverless-cryptography" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bnijenhuis.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbnijenhuis%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bnijenhuis" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bnijenhuis/bnijenhuis-nl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cathydutton.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcathydutton%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cathydutton" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cathydutton/cathydutton.co.uk" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mindos.in/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbinnyva%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for binnyva" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/inmindos/Site-mindos.in" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://grochtdreis.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjensgro%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jensgro" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jensgro/site-2023" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://coreydmccarty.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxanderyzwich%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xanderyzwich" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xanderyzwich/xanderyzwich.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11ty.rocks/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/11ty-rocks" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://shotplot.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandrewpucci%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andrewpucci" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andrewpucci/shotplot" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fullstax.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmojoaxel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mojoaxel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fllstx/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://top-livres.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbcalou%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bcalou" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bcalou/top-books" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://velvetcache.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjmhobbs%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jmhobbs" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jmhobbs/velvetcache.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://inigochoa.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Finigochoa%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for inigochoa" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/inigochoa/inigochoa.me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tilt-studio.fr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhteumeuleu%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hteumeuleu" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://bitbucket.org/account/signin/%3Fnext=/tiltstudio/tilt-studio.fr/src/master" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.teotimepacreau.fr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fteotimepacreau%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for teotimepacreau" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/teotimepacreau/Personal-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://reinier.fyi/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freinier%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reinier" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/reinier/fyi" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kirillunlimited.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkirillunlimited%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kirillunlimited" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kirillunlimited/kirillunlimited.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fatkitten.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FStetsonRamey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for StetsonRamey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/StetsonRamey/Fat-Kitten-Agency" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/PM9nJmgflG-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/PM9nJmgflG-90.webp 90w"><img alt="chromiumdev’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/PM9nJmgflG-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/GoogleChrome/developer.chrome.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jinvalidate.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdgrammatiko%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dgrammatiko" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dgrammatiko/invalidate-cache" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sketchnotes.sixtwothree.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/sketchnotes.sixtwothree.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://debitpay.directory/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Falexk111%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for alexk111" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/alexk111/DeBitpay-Directory" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.kiwisat.org.nz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjimt%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jimt" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AMSAT-ZL/KiwiSAT.org.nz" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://robinbakker.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Frobinbakker%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for robinbakker" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/robinbakker/robinbakker.nl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dieter.ca/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdlimeb%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dlimeb" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dlimeb/dlimeb.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.aleksandrhovhannisyan.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAleksandrHovhannisyan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AleksandrHovhannisyan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AleksandrHovhannisyan/aleksandrhovhannisyan.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jeremenichelli.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjeremenichelli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jeremenichelli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jeremenichelli/personal-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11tymeetup.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsiakaramalegos%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for siakaramalegos" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Eleventy-Meetup/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mattrad.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattradford%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattradford" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mattradford/mattrad-uk" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://everywhereschool.live/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgreatislander%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for greatislander" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/everywhereschool/everywhereschool" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://vincentp.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fvipickering%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for vipickering" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/vipickering/vincentp" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.opt-out.ai/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbrendanroberts%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for brendanroberts" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Known-Privacy/oom" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kabardinovd.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FdKab%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dKab" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dKab/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://httpster.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhttpsterio%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for httpsterio" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/httpsterio/httpster.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://danielhieber.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdwhieb%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dwhieb" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dwhieb/danielhieber.info" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tactile.co.za/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fndorfin%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ndorfin" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ndorfin/tactile-www" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.marabyte.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMarabyte%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Marabyte" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/marabyte/marabyte.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://someantics.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FBenDMyers%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for BenDMyers" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/SomeAnticsDev/someantics.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eleventy-gallery.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tannerdolby/eleventy-photo-gallery" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://making-ui.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffogelek%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fogelek" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fogelek/making-ui" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11tytips.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Foctoxalis%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for octoxalis" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/octoxalis/11tyTips" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://spellcheck.fun/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fashur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ashur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ashur/spellcheck" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://gabriellew.ee/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgabriellewee%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gabriellewee" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gabriellewee/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://danabyerly.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsuperterrific%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for superterrific" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/superterrific/dana-byerly" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.loganayliffe.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flogan-life%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for logan-life" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/logan-life/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mxb.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmaxboeck%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for maxboeck" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/maxboeck/mxb" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ulf.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fulfschneider%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ulfschneider" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ulfschneider/ulf.website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pustelto.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FPustelto%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Pustelto" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Pustelto/personal_web" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://alienlebarge.ch/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Falienlebarge%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for alienlebarge" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/alienlebarge/alienlebargech-v3" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://webperformancereport.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fedwinmh%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for edwinmh" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/edwinmh/webperformance-report" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://radiocanadamini.ca/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjr-b%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jr-b" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jr-b/radiocanadalite" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://vanzasetia.site/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fvanzasetia%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for vanzasetia" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/vanzasetia/vanzasetia.site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://daslaf.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdaslaf%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for daslaf" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/daslaf/daslaf.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jeromestephan.de/sites/Home/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FHerzogVonWiesel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for HerzogVonWiesel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/HerzogVonWiesel/porto" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://defiplaza.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftimanrebel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for timanrebel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/OmegaSyndicate/defiplaza-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ecsspert.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzoreet%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zoreet" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zoreet/ecsspert" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://vanillalist.top/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTixieBorg%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for TixieBorg" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/GlitchFamily/vanillalist/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ramigs.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Framigs%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ramigs" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ramigs/ramigs.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.vess.co.nz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMartyNZ%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for MartyNZ" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/MartyNZ/Vess-Restoration" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://davepowers.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdjpowers%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for djpowers" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/djpowers/personal-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://multilingual.lea-tortay.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flea37%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lea37" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lea37/eleventy-multilingual" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dgrammatiko.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdgrammatiko%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dgrammatiko" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dgrammatiko/site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cg21.in/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Farpit-agr%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for arpit-agr" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cg21-site/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.faustotasca.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbobmonsour%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bobmonsour" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bobmonsour/faustotasca_11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://refresh-dc.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/refresh-dc.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://setyourwatchby.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fphilhawksworth%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for philhawksworth" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/philhawksworth/html-time" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://zerozoo-a.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzerozoo-a%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zerozoo-a" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zerozoo-a/zerozoo-a.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://paulrobertlloyd.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpaulrobertlloyd%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for paulrobertlloyd" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/paulrobertlloyd/paulrobertlloyd-v4" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.aaron-gustafson.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Faarongustafson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for aarongustafson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/aarongustafson/aaron-gustafson.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://thinkdobecreate.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/tdbc" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eslint.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Feslint%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for eslint" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/eslint/website/tree/master" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jensa.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjensnti%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jensnti" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jensnti/jensa.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://whoistheorchid.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/whoistheorchid.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://toddl.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcolabottles%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for colabottles" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/colabottles/toddl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://will.cx/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fthisstillwill%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for thisstillwill" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/thisstillwill/Personal-Website-V3" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://timw.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftimweston%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for timweston" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/timweston/timw.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://whatt2watch.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tannerdolby/what-to-watch" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sarahmhigley.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsmhigley%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for smhigley" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/smhigley/11ty-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://devsites.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzgparsons%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zgparsons" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zgparsons/usefulwebdev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://yetty.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fygoex%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ygoex" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ygoex/yetty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cmx.media/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/cmx.media" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cezaraugusto.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcezaraugusto%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for cezaraugusto" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cezaraugusto/cezaraugusto.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://brootaylor.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbrootaylor%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for brootaylor" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/brootaylor/brootaylor-v2" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://brianjdevries.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FtechCarpenter%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for techCarpenter" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/techcarpenter/brianjdevries.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://wolstenhol.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fphilwolstenholme%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for philwolstenholme" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/philwolstenholme/wolstenhol-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eleventy-test-bed-dollplayer2501.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdollplayer2501%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dollplayer2501" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dollplayer2501/Eleventy-test-bed" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://oupspuppetry.gr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftmns%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tmns" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tmns/oups-puppetry-2" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://beeps.website/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fquerkmachine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for querkmachine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/querkmachine/beeps.website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://awsbites.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flmammino%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lmammino" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/awsbites/aws-bites-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.ellyloel.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FEllyLoel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for EllyLoel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ellyloel/ellyloel.com/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ganslandt.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAnsimorph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Ansimorph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Ansimorph/ganslandt.xyz" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://maprunner.co.uk/hertsway/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMaprunner%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Maprunner" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Maprunner/hertsway" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://elewind-template.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fekansh005%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ekansh005" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ekansh005/elewind" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://objector.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnycbeardo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nycbeardo" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nycbeardo/myeleventyblog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.solutions-online.co.nz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMartyNZ%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for MartyNZ" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/MartyNZ/SOL-SP-BS5-netlify" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hebrewtransliteration.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FcharlesLoder%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for charlesLoder" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/charlesLoder/hebrewTransliteration" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.splitinfinities.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsplitinfinities%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for splitinfinities" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/splitinfinities/splitinfinities" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://unravelurl.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsaneef%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for saneef" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/saneef/unravel" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://galacticguppy.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjoshcrain%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for joshcrain" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/joshcrain/galactic-guppy" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://nothingrandom.studio/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnothingrandom%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nothingrandom" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nothingrandom/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.ianrose.me/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/_fZYzsjpZF-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/_fZYzsjpZF-90.webp 90w"><img alt="thatianrose’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/_fZYzsjpZF-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/ianrose/ianrose.me" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.matuzo.at/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmatuzo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for matuzo" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/matuzo/matuzoat" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dockerwebdev.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigbuckler%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigbuckler" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigbuckler/dockerwebdev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://openstudios.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpaulbrzeski%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for paulbrzeski" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/OpenStudiosCo/openstudios.xyz" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://danleatherman.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdleatherman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dleatherman" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dleatherman/danleatherman-eleventy" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://chickenwing-gingerbreadman.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdarby3%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for darby3" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/darby3/chickenwing-gingerbreadman" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tipr.mobi/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Faarongustafson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for aarongustafson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/aarongustafson/tipr.mobi" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ashur.cab/rera/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fashur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ashur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ashur/ashur.cab" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://rafacalvo.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Frafacalvodev%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for rafacalvodev" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/rafacalvodev/new-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://quinndombrowski.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fquinnanya%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for quinnanya" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/quinnanya/quinnanya.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://t12t.se/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKolombiken%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Kolombiken" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/t12t/t12t.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://markus-haack.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmhaack%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mhaack" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mhaack/mh-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://hella-simple-eleventy-tailwindcss.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhuphtur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for huphtur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/huphtur/hella-simple-eleventy-tailwind-starter" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.constantvallee.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcovallee%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for covallee" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/covallee/constant-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://nicksimson.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnsmsn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nsmsn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nsmsn/nicksimsondotcom" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://openspellingbee.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FGyanreyer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Gyanreyer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Gyanreyer/open-spelling-bee" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.patrickxchong.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpatrickxchong%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for patrickxchong" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/patrickxchong/patrickxchong.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://chrisburnell.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchrisburnell%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chrisburnell" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chrisburnell/chrisburnell.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.undefinednull.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fshidhincr%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for shidhincr" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/shidhincr/shidhincr.github.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://yasingenc.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fyasingencnet%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for yasingencnet" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/yasingencnet/yasingencnet" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://distantcam.github.io/windty/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdistantcam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for distantcam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/distantcam/windty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://brooks-html-template.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fholger1411%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for holger1411" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/holger1411/brook-dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dumbpasswordrules.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fduffn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for duffn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/duffn/dumb-password-rules" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.spencerharston.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsphars%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for sphars" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/sphars/spencerharston.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jeffy.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjeffposnick%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jeffposnick" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jeffposnick/jeffy-info" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://templatedeck.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fholger1411%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for holger1411" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/holger1411/templatedeck" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.nuotsu.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnuotsu%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nuotsu" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nuotsu/nuotsu.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://codeadrian.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FcodeAdrian%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for codeAdrian" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/codeAdrian/codeAdrian.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.juanfernandes.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjuanfernandes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for juanfernandes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/juanfernandes/juanfernandes-v2" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mentor.silvestar.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FmaliMirkec%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for maliMirkec" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/maliMirkec/mentoring" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://yoncetheme.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fminamarkham%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for minamarkham" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/minamarkham/yonce/tree/yoncetheme.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mac-cursors.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdaviddarnes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for daviddarnes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/daviddarnes/mac-cursors" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cats-in-residence.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsuperterrific%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for superterrific" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/superterrific/cats-in-residence" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://gourmonds.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdlehmann%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dlehmann" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gourmonds/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://demo.xiyu.pro/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxiyuvi%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xiyuvi" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xiyuvi/eleventy-cn-blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.devlinmcclure.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdevmcclu%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for devmcclu" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://codeberg.org/devlin/portfolio-new" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.vtcodecamp.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKyleMit%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KyleMit" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/vtcodecamp/2019.vtcodecamp.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.lautakuntapodcast.fi/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmsaari%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for msaari" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/msaari/lautakunta.fi" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mochajs.org/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/WUZNBLkGGO-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/WUZNBLkGGO-90.webp 90w"><img alt="b0neskull’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/WUZNBLkGGO-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/mochajs/mocha" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.londoncss.dev/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/D7MlsExNQg-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/D7MlsExNQg-90.webp 90w"><img alt="londoncss’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/D7MlsExNQg-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/LondonCSS/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://moderncss.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/moderncss-dot-dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://torcellini.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMicah-T%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Micah-T" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/torcellini/torcellini" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.11ty.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzachleat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zachleat" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/11ty/11ty-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://3lp.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpepelsbey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pepelsbey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lp-cast/3lp.11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://alaskahikesearch.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbcwood%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bcwood" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bcwood/alaskahikesearch-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.freerk.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffzakfeld%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fzakfeld" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/fzakfeld/freerk.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://distantcam.github.io/co11ection/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdistantcam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for distantcam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/distantcam/co11ection" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mf-blogstarter.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmarcfilleul%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for marcfilleul" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/marcfilleul/mf-blogstarter" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mithril-by-examples.js.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftbreuss%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tbreuss" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tbreuss/mithril-by-examples" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://virga.frontendweekly.tokyo/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstudiomohawk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for studiomohawk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/frontendweekly/virga" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.globe.church/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjamesdoc%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jamesdoc" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/theglobechurch/globe-static" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mattdecamp.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattdecamp%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattdecamp" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mattdecamp/decamp.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.justus.ws/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjustusthane%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for justusthane" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/justusthane/11ty-justus.ws" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://camping-speakers.fr/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flucienbill%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lucienbill" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/RdvSpeakers/camping-des-speakers-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.naprogu.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffusilli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fusilli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fusilli/naprogu.pl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tannerdolby.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftannerdolby%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tannerdolby" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tannerdolby/tannerdolby.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eleventy-html5up-txt.appseed.us/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fapp-generator%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for app-generator" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/app-generator/eleventy-html5up-txt" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://blendit.imaginelenses.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fimaginelenses%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for imaginelenses" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/imaginelenses/blenditSite" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://declanbyrd.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdeclanbyrd%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for declanbyrd" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/declanbyrd/declanbyrd.co.uk" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mrmowji.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmrmowji%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mrmowji" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mrmowji/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kleinfreund.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkleinfreund%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kleinfreund" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kleinfreund/kleinfreund.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.madebymike.com.au/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMadeByMike%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for MadeByMike" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/madebymike/madebymike" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.cassey.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fclottman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for clottman" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/clottman/cassey-on-eleventy" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://reubenlillie.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freubenlillie%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reubenlillie" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/reubenlillie/reubenlillie.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bennypowers.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbennypowers%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bennypowers" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bennypowers/bennypowers.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.mathew-paul.nz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmatt-auckland%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for matt-auckland" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/matt-auckland/personal-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mattobee.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattobee%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattobee" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mattobee/mocom11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://webwewant.fyi/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Faarongustafson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for aarongustafson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/WebWeWant/webwewant.fyi" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fudge.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FJayCuthrell%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for JayCuthrell" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/JayCuthrell/fudge-org-eleventy-excellent" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://v5.chriskrycho.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchriskrycho%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chriskrycho" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chriskrycho/v5.chriskrycho.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://switowski.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fswitowski%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for switowski" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/switowski/portfolio" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sindre.is/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fboyum%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for boyum" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/boyum/sindre-is" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://zellwk.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzellwk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zellwk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zellwk/zellwk.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://minimaly.lea-tortay.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flea37%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lea37" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lea37/minimaly" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jessicakeoshian.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FGyanreyer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Gyanreyer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Gyanreyer/jess" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.foxdog.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkylepfeeley%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for kylepfeeley" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kylepfeeley/foxdog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://dinhanhthi.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdinhanhthi%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dinhanhthi" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dinhanhthi/dinhanhthi.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.felipesere.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffelipesere%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for felipesere" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/felipesere/amboseli" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fettblog.eu/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fddprrt%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ddprrt" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ddprrt/ddprrt.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://magnus.anderssen.ch/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcallmemagnus%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for callmemagnus" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://bitbucket.org/callmemagnus/magnus.anderssen.ch/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.cbascaraspeechtherapy.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbobmonsour%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bobmonsour" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bobmonsour/cbascara" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.uncenter.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Funcenter%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for uncenter" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/uncenter/uncenter.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://horseracingdatasets.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsuperterrific%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for superterrific" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/superterrific/horse-racing-datasets" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://rohanbansal.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Frbnsl%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for rbnsl" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/rbnsl/personal-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://parth.ninja/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpartheus%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for partheus" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/partheus/partheus.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jamstack-comments.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fphilhawksworth%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for philhawksworth" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/philhawksworth/jamstack-comments-engine" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://laurielim.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flaurielim%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for laurielim" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/laurielim/laurielim.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://emergency-site.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmaxboeck%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for maxboeck" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/maxboeck/emergency-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.danjordan.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdanjordan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for danjordan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/danjordan/danjordan.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.stonegate.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstonega%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for stonega" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/stonega/crane" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://oisin.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Foisinq%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for oisinq" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/oisinq/oisin.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mohitkarekar.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmohitk05%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mohitk05" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mohitk05/my-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://zacharyparsons.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzgparsons%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zgparsons" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zgparsons/zachary-blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://koddsson.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fkoddsson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for koddsson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/koddsson/koddsson" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.erikkroes.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ferikkroes%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for erikkroes" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/erikkroes/erikkroes-nl" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://crlf.link/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcroqaz%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for croqaz" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/croqaz/crlf" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://alexandersandberg.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Falexandersandberg%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for alexandersandberg" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/alexandersandberg/alexandersandberg.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eleventy-explorer.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTigersWay%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for TigersWay" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/TigersWay/eleventy-explorer" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://germanfrelo.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgermanfrelo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for germanfrelo" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/germanfrelo/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://smolcss.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/smolcss" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://silvestristefano.github.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FSilvestriStefano%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for SilvestriStefano" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/SilvestriStefano/SilvestriStefano.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://stillness.digital/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxdesro%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xdesro" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xdesro/stillness/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://buttonbuddy.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2F5t3ph%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for 5t3ph" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/5t3ph/buttonbuddy" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://desiredpersona.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdesiredpersona%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for desiredpersona" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/desiredpersona/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://benediktmeurer.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbmeurer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bmeurer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bmeurer/benediktmeurer.de" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.kareldesmet.be/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcarlos-ds%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for carlos-ds" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/carlos-ds/personal-web" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tatianamac.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftatianamac%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tatianamac" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tatianamac/tm11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ryanccn.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fryanccn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ryanccn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ryanccn/ryanccn.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="http://www.grupapir.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffusilli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fusilli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fusilli/grupapir" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://florian.ec/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fflorianeckerstorfer%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for florianeckerstorfer" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://git.sr.ht/~fec/florian.ec" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.dsev.dk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAndersAskeland%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AndersAskeland" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Danish-Society-of-EVs/webpage" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://nicolas-hoizey.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fnhoizey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for nhoizey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/nhoizey/nicolas-hoizey.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://erickdavid.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpatrulea%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for patrulea" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/patrulea/erick-david" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://photogabble.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcarbontwelve%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for carbontwelve" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/photogabble/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://deephouse.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flovell%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lovell" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lovell/deephouse.uk" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://11ty-high-performance-latex-blog.euyix.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fxiyueuyix%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for xiyueuyix" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/xiyueuyix/11ty-high-performance-latex-blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pborenstein.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpborenstein%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pborenstein" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/pborenstein/pborenstein.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://uniteduniversalnations.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAlphaBeta906%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for AlphaBeta906" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/AlphaBeta906/UUN/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jamesbasoo.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjbasoo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jbasoo" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jbasoo/jamesbasoo" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://shiro.ws/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsaneef%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for saneef" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/saneef/shiro.ws" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kevin.gimbel.dev/ops/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKevinGimbel%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KevinGimbel" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kevingimbel/kevin.gimbel.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.griffenedge.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgriffenedge%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for griffenedge" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/griffenedge/griffenedge.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://andrewweisbeck.blog/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FGeauxWeisbeck4%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for GeauxWeisbeck4" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/GeauxWeisbeck4/andrewweisbeck.blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mrmidzi.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FPsypher1%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Psypher1" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Psypher1/eleventy-personal-site" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://checkthisout.today/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fashur%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ashur" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ashur/check-this-out" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.interroban.gg/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FLkeMitchll%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for LkeMitchll" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/LkeMitchll/interroban.gg" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://wiltomakesfood.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FWilto%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Wilto" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Wilto/wilto-makes-food" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://tomascornelles.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ftomascornelles%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for tomascornelles" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tomascornelles/tomascornelles.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://wisconsinmusic.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/wisconsinmusic.net" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://docs.miayam.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmiayam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for miayam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/miayam/miayam" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.htmhell.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmatuzo%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for matuzo" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/matuzo/HTMHell" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://prateeksurana.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fprateek3255%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for prateek3255" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/prateek3255/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://cam.macfar.land/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdistantcam%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for distantcam" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/distantcam/cam.macfar.land" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ghost-v3.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbauhouse%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bauhouse" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bauhouse/eleventy-starter-ghost" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://pile-of-hrefs.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsuperterrific%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for superterrific" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/superterrific/pile-of-hrefs" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://inclusivedesign24.org/2023/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpatrickhlauke%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for patrickhlauke" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/inclusivedesign24/inclusivedesign24.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://homan.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdhoman%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dhoman" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dhoman/homan-io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://montevil.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmmontevil%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mmontevil" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mmontevil/montevil.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://duffn.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fduffn%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for duffn" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/duffn/blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://platforms.barnardos.org.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fderekjohnson%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for derekjohnson" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/barnardos/platforms-and-standards" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.arturojofre.cl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Farturo-jofre%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for arturo-jofre" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/arturo-jofre/aj22" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://akademia.instytutsprawobywatelskich.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffusilli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fusilli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/instytut-spraw-obywatelskich/akademia" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.mealsforthenhs.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjonnyburch%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jonnyburch" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/meals-for-the-nhs/meals-for-the-nhs" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://flamedfury.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fflamedfury%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for flamedfury" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/flamedfury/flamedfury.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://binyam.in/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbinyamin%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for binyamin" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/binyamin/binyam.in" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.kulturainatura.pl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffusilli%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for fusilli" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/fusilli/kulturainatura" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.webstoemp.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjeromecoupe%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jeromecoupe" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jeromecoupe/webstoemp" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://eventua11y.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmattobee%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mattobee" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mattobee/eventua11y" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://davidaaronpierce.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdapierce%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for dapierce" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/dapierce/dapierce.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="http://petrzalka.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Ffrido%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for frido" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/frido/petrzalka-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://arpit.tk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Farpitbatra123%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for arpitbatra123" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/arpitbatra123/personal-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://books.hiddedevries.nl/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhidde%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hidde" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hidde/books" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://micah.torcellini.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FMicah-T%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Micah-T" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Micah-T/micah-torcellini" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ryanmulligan.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhexagoncircle%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for hexagoncircle" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/hexagoncircle/ryan-mulligan-dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://fruits-express.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FTigersWay%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for TigersWay" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/TigersWay/fruits-express" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://games.porg.es/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FPorges%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Porges" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Porges/ways-to-play" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://biehler-josef.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgabbersepp%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for gabbersepp" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/gabbersepp/biehler-josef" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://boehs.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fboehs%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for boehs" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://sr.ht/~boehs/boehs.org/sources" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://geshan.com.np/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fgeshan%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for geshan" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/geshan/geshan.github.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://laker.tech/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Flxjv%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for lxjv" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/lxjv/zeppelin" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ttntm.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fttntm%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ttntm" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ttntm/ttntm" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://craigerskine.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcraigerskine%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for craigerskine" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/craigerskine/craigerskine.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://esif.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fzachleat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for zachleat" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/zachleat/educational-sensational-inspirational-foundational" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kurva.xyz/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fliterasibadguy%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for literasibadguy" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/literasibadguy/kurva-xyz" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://doineedbuntingtoday.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FCodeFoodPixels%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for CodeFoodPixels" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/CodeFoodPixels/doineedbuntingtoday" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://compagnonnage-repas.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fthom4parisot%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for thom4parisot" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://framagit.org/reseau-repas/compagnonnage-repas.org/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://davidrhoden.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdavidrhoden%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for davidrhoden" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/davidrhoden/davidrhoden-basic-netlify" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://colorjs.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FLeaVerou%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for LeaVerou" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/leaverou/color.js" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://developer.chrome.com/devsummit/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/PM9nJmgflG-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/PM9nJmgflG-90.webp 90w"><img alt="chromiumdev’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/PM9nJmgflG-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/GoogleChrome/devsummit" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://thepugautomatic.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fhenrik%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for henrik" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/henrik/thepugautomatic.com-eleventy" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jmsalazar.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjmsalazardev%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jmsalazardev" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jmsalazardev/jmsalazar.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://alex.zappa.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Freatlat%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for reatlat" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/reatlat/alex.zappa.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.scottmurphytennis.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fbobmonsour%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for bobmonsour" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/bobmonsour/smt_11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://imacrayon.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fimacrayon%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for imacrayon" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/imacrayon/imacrayon.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://bayton.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjasonbayton%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jasonbayton" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jasonbayton/11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.silvestar.codes/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FmaliMirkec%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for maliMirkec" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/maliMirkec/personal-website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://jgarber623.github.io/nasa-iotd/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/jgarber623/nasa-iotd" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://design.saschadiercks.de/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsaschadiercks%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for saschadiercks" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/saschadiercks/design-system-with-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://andeers.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fandeersg%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for andeersg" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/andeersg/andeers.com" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://showmy.chat/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FBenDMyers%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for BenDMyers" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/BenDMyers/showmy.chat" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://ademhatay.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fademhatay%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for ademhatay" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/ademhatay/ademhatay" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://atom-editor.cc/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjgarber623%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jgarber623" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/atom-editor-cc/atom-editor.cc" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.damianwalsh.me/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdamianwalsh%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for damianwalsh" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/damianwalsh/damianwalsh.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://team-oberberg.blog/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FSnapstromegon%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Snapstromegon" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Snapstromegon/team-oberberg.blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://djlint.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchristopherpickering%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for christopherpickering" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Riverside-Healthcare/djLint/tree/master/docs" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://css-tip.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAfif13%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Afif13" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Afif13/CSS-Tip" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://seoslides.page/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fworkeffortwaste%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for workeffortwaste" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/workeffortwaste/seoslides" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://midia.ogarcia.es/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Foscc-es%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for oscc-es" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/oscc-es/midia" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://plaksin.net/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmitorun%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mitorun" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mitorun/plaksin.net" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.mikestreety.co.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmikestreety%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mikestreety" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://gitlab.com/mikestreety/mikestreety" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://web-standards.ru/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpepelsbey%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for pepelsbey" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/web-standards-ru/web-standards.ru/" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://frontendweekly.tokyo/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fstudiomohawk%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for studiomohawk" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/frontendweekly/frontendweekly" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://karawale.in/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fretronav%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for retronav" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/retronav/karawale.in" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://covid19.ca.gov/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Faaronhans%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for aaronhans" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/cagov/covid19" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.giorgiopretto.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpsylok%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for psylok" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://bitbucket.org/psylok/giorgiopretto" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://iamdtms.hu/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fiamdtms%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for iamdtms" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/iamdtms/iamdtms.hu" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://sonnet.io/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fpaprikka%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for paprikka" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/paprikka/sonnet.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://rooster-world.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fcamphan12993%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for camphan12993" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/camphan12993/rooster-world-landing-11ty" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://blog.khoiuna.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FKhoiUna%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for KhoiUna" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/KhoiUna/my-blog" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://v8.dev/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/bcqccqnqZ0-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/bcqccqnqZ0-90.webp 90w"><img alt="v8js’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/bcqccqnqZ0-90.jpeg" width="90" height="90"></picture></a></td>
<td><a href="https://github.com/v8/v8.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kushagra.dev/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fchinchang%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for chinchang" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/chinchang/kushagra.dev" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://stakes-profiles.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fsuperterrific%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for superterrific" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/superterrific/stakes-profiles" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://mier.info/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmiermontoto%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for miermontoto" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/miermontoto/miermontoto" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://unbreak.tech/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fwhitep4nth3r%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for whitep4nth3r" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/whitep4nth3r/unbreak.tech" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://questhink.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fmrmowji%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for mrmowji" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/mrmowji/questhink" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://achteintel.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FdeponeWD%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for deponeWD" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/achteintel/website" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://yoghaswara.vercel.app/"><img src="https://www.11ty.dev/img/default-avatar.png" alt="Default Avatar" loading="lazy" decoding="async" class="avatar" width="200" height="200"></a></td>
<td><a href="https://github.com/yoghaswara/yoghaswara.github.io" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://www.tampadevs.com/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fvincentntang%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for vincentntang" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/tampadevs/tampadevs" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://speedscanner.org/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2FAccudio%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for Accudio" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/Accudio/speedscanner.org" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://kingdomcode.org.uk/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fjamesdoc%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for jamesdoc" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/kingdom-code/kingdom-code" class="minilink">源码</a></td>
</tr>
<tr>
<td><a href="https://distracted-elion-60a106.netlify.app/"><img src="https://v1.image.11ty.dev/https%3A%2F%2Favatars.githubusercontent.com%2Fdomwakeling%3Fs%3D66/webp/66/" width="66" height="66" alt="GitHub Avatar for domwakeling" class="avatar avatar-large" loading="lazy" decoding="async"></a></td>
<td><a href="https://github.com/domwakeling/web_homepage" class="minilink">源码</a></td>
</tr>
</tbody>
</table>
Browsersync
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/server-browsersync/
<h1>Browsersync</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/server-browsersync/#override-browsersync-server-options">Override Browsersync Server Options </a></li><li><a href="https://www.11ty.dev/docs/server-browsersync/#opt-out-of-the-browsersync-javascript-snippet">Opt-out of the Browsersync JavaScript snippet </a></li></ul></div><p></p>
</details>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Starting with Eleventy 2.0, the <a href="https://www.11ty.dev/docs/dev-server/">Eleventy Dev Server</a> is now the default stock development server in Eleventy core. This section of documentation only applies to Eleventy 1.x and 0.x and will be removed when Eleventy 2.0 is stable. If you want to use Browsersync with Eleventy 2.0, learn how to swap <a href="https://www.11ty.dev/docs/dev-server/#swap-back-to-browsersync">back to Browsersync</a>.</div></div>
<h3 id="override-browsersync-server-options" tabindex="-1">Override Browsersync Server Options <a class="direct-link" href="https://www.11ty.dev/docs/server-browsersync/#override-browsersync-server-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Useful if you want to change or override the default Browsersync configuration. Find the Eleventy defaults in <a href="https://github.com/11ty/eleventy/blob/master/src/EleventyServe.js"><code>EleventyServe.js</code></a>. Take special note that Eleventy does not use Browsersync’s watch options and trigger reloads manually after our own internal watch methods are complete. See full options list on the <a href="https://browsersync.io/docs/options">Browsersync documentation</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setBrowserSyncConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">notify</span><span class="token operator">:</span> <span class="token boolean">true</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3 id="opt-out-of-the-browsersync-javascript-snippet" tabindex="-1">Opt-out of the Browsersync JavaScript snippet <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/server-browsersync/#opt-out-of-the-browsersync-javascript-snippet">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>New in <a href="https://github.com/BrowserSync/browser-sync/issues/1882#issuecomment-867767056"><code>browser-sync@2.27.1</code></a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span>. Opt-out of the JavaScript snippet normally injected by Browsersync. This disables Browsersync live-reloading.</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setBrowserSyncConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">snippet</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Vite
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/server-vite/
<h1>Vite <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fvitejs.dev%2F/" width="150" height="150" alt="IndieWeb Avatar for https://vitejs.dev/" class="avatar avatar-indieweb" loading="lazy" decoding="async"></h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/server-vite/#related">Related </a></li><li><a href="https://www.11ty.dev/docs/server-vite/#installation">Installation </a></li></ul></div><p></p>
</details>
<ul>
<li><a href="https://github.com/11ty/eleventy-plugin-vite"><code>eleventy-plugin-vite</code> on GitHub</a></li>
</ul>
<p>A plugin to use <a href="https://vitejs.dev/">Vite</a> with Eleventy 2.0+.</p>
<ul>
<li>Runs Vite as Middleware in <a href="https://www.11ty.dev/docs/dev-server/">Eleventy Dev Server</a> (try with Eleventy’s <code>--incremental</code>)</li>
<li>Runs Vite build to postprocess your Eleventy build output</li>
</ul>
<div class="youtube-related"><div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="f0LsgyPV7j0" params="start=96" playlabel="Play: Eleventy Vite Plugin (Weekly №5)" style="background-image:url('https://i.ytimg.com/vi/f0LsgyPV7j0/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=f0LsgyPV7j0" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video: Eleventy Vite Plugin (Weekly №5)</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=f0LsgyPV7j0&t=96">Eleventy Vite Plugin (Weekly №5) <code>▶1m36s</code></a></is-land></div></div>
<h2 id="related" tabindex="-1">Related <a class="direct-link" href="https://www.11ty.dev/docs/server-vite/#related">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://slinkity.dev/"><code>slinkity</code></a> by @Holben888: a much deeper and more comprehensive integration with Vite! Offers partial hydration and can use shortcodes to render framework components in Eleventy!</li>
<li><a href="https://www.npmjs.com/package/vite-plugin-eleventy"><code>vite-plugin-eleventy</code></a> by @Snugug: uses Eleventy as Middleware in Vite (instead of the post-processing approach used here)</li>
</ul>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/server-vite/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<pre><code>npm install @11ty/eleventy-plugin-vite
</code></pre>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyVitePlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-vite"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyVitePlugin<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<details>
<summary>Expand for full list of options</summary>
<p>View the <a href="https://vitejs.dev/config/">full list of Vite Configuration options</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyVitePlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-plugin-vite"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>EleventyVitePlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">tempFolderName</span><span class="token operator">:</span> <span class="token string">".11ty-vite"</span><span class="token punctuation">,</span> <span class="token comment">// Default name of the temp folder</span><br><br> <span class="token comment">// Options passed to the Eleventy Dev Server</span><br> <span class="token comment">// e.g. domdiff, enabled, etc.</span><br><br> <span class="token comment">// Added in Vite plugin v2.0.0</span><br> <span class="token literal-property property">serverOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// Defaults are shown:</span><br> <span class="token literal-property property">viteOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">clearScreen</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br> <span class="token literal-property property">appType</span><span class="token operator">:</span> <span class="token string">"mpa"</span><span class="token punctuation">,</span> <span class="token comment">// New in v2.0.0</span><br><br> <span class="token literal-property property">server</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">middlewareMode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br><br> <span class="token comment">// New in v2.0.0</span><br> <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token comment">// Allow references to `node_modules` folder directly</span><br> <span class="token string-property property">'/node_modules'</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"."</span><span class="token punctuation">,</span> <span class="token string">'node_modules'</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>See the full list of <a href="https://www.11ty.dev/docs/dev-server/"><code>serverOptions</code> on the Dev Server documentation</a>.</p>
</details>
IndieWeb Avatar
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/services/indieweb-avatar/
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/services/indieweb-avatar/#open-source">Open Source </a></li><li><a href="https://www.11ty.dev/docs/services/indieweb-avatar/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/services/indieweb-avatar/#samples">Samples </a></li></ul></div><p></p>
</details>
<p>Feed this runtime service a URL and it will extract an avatar image using these sources:</p>
<ol>
<li><code><link rel="apple-touch-icon"></code></li>
<li><code><link rel="apple-touch-icon-precomposed"></code></li>
<li><code><link rel="icon"></code></li>
<li><code>favicon.ico</code></li>
</ol>
<p>All <code>rel</code> lookups match against attribute values that are space separated lists.</p>
<h2 id="open-source" tabindex="-1">Open Source <a class="direct-link" href="https://www.11ty.dev/docs/services/indieweb-avatar/#open-source">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://github.com/11ty/api-indieweb-avatar"><code>11ty/api-indieweb-avatar</code> on GitHub</a></li>
</ul>
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/api-indieweb-avatar" class="elv-externalexempt"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a></p>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/services/indieweb-avatar/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Try it out on the <a href="https://api-explorer.11ty.dev/">Eleventy API Explorer</a>.</p>
<p>Image URLs have the format:</p>
<pre><code>https://v1.indieweb-avatar.11ty.dev/:url/
</code></pre>
<ul>
<li><code>url</code> must be URI encoded.</li>
</ul>
<h2 id="samples" tabindex="-1">Samples <a class="direct-link" href="https://www.11ty.dev/docs/services/indieweb-avatar/#samples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/" alt="IndieWeb Avatar for 11ty.dev/" loading="lazy" decoding="async" width="50" height="50">
<img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.a11yproject.com%2F/" alt="IndieWeb Avatar for a11yproject.com/" loading="lazy" decoding="async" width="50" height="50">
<img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.netlify.com%2F/" alt="IndieWeb Avatar for netlify.com/" loading="lazy" decoding="async" width="50" height="50">
</div></div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IndieWeb Avatar for 11ty.dev/<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.a11yproject.com%2F/<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IndieWeb Avatar for a11yproject.com/<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.netlify.com%2F/<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IndieWeb Avatar for netlify.com/<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
OpenGraph Image
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/services/opengraph/
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/services/opengraph/#open-source">Open Source </a></li><li><a href="https://www.11ty.dev/docs/services/opengraph/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/services/opengraph/#samples">Samples </a></li></ul></div><p></p>
</details>
<p>Feed this runtime service a URL and it will extract an optimized OpenGraph image using these sources:</p>
<ol>
<li><code><meta name="og:image:secure_url"></code></li>
<li><code><meta name="og:image"></code></li>
<li><code><meta property="og:image"></code></li>
<li><code><meta name="twitter:image"></code></li>
</ol>
<h2 id="open-source" tabindex="-1">Open Source <a class="direct-link" href="https://www.11ty.dev/docs/services/opengraph/#open-source">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://github.com/11ty/api-opengraph-image"><code>11ty/api-opengraph-image</code> on GitHub</a></li>
</ul>
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/api-opengraph-image" class="elv-externalexempt"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a></p>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/services/opengraph/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Try it out on the <a href="https://api-explorer.11ty.dev/">Eleventy API Explorer</a>.</p>
<p>Image URLs have the format:</p>
<pre><code>https://v1.opengraph.11ty.dev/:url/
https://v1.opengraph.11ty.dev/:url/:size/
https://v1.opengraph.11ty.dev/:url/:size/:format/
</code></pre>
<ul>
<li><code>url</code> must be URI encoded.</li>
<li><code>size</code> (optional) can be <code>small</code> (375×_), <code>medium</code> (650×_), or <code>auto</code> (keep original width)</li>
<li><code>format</code> must by an output image format supported by <a href="https://www.11ty.dev/docs/plugins/image/">Eleventy Image</a></li>
</ul>
<h2 id="samples" tabindex="-1">Samples <a class="direct-link" href="https://www.11ty.dev/docs/services/opengraph/#samples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/small/" alt="OpenGraph image for 11ty.dev" loading="lazy" decoding="async" width="375" height="197">
</div></div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/small/<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OpenGraph image for 11ty.dev<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>375<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>197<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.a11yproject.com%2F/small/" alt="OpenGraph image for a11yproject.com" loading="lazy" decoding="async" width="375" height="197">
</div></div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.a11yproject.com%2F/small/<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OpenGraph image for a11yproject.com<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>375<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>197<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.netlify.com%2F/small/" alt="OpenGraph image for netlify.com" loading="lazy" decoding="async" width="375" height="197">
</div></div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.netlify.com%2F/small/<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>OpenGraph image for netlify.com<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>375<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>197<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
Screenshots
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/services/screenshots/
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/services/screenshots/#source-code">Source Code </a></li><li><a href="https://www.11ty.dev/docs/services/screenshots/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/services/screenshots/#sample">Sample </a></li><li><a href="https://www.11ty.dev/docs/services/screenshots/#advanced-options">Advanced Options </a><ul><li><a href="https://www.11ty.dev/docs/services/screenshots/#manual-cache-busting">Manual Cache Busting </a></li><li><a href="https://www.11ty.dev/docs/services/screenshots/#custom-wait-conditions">Custom Wait Conditions </a></li><li><a href="https://www.11ty.dev/docs/services/screenshots/#custom-timeout">Custom Timeout </a></li><li><a href="https://www.11ty.dev/docs/services/screenshots/#combine-these-options">Combine these options </a></li></ul></li></ul></div><p></p>
</details>
<p>Feed this runtime service a URL and it returns a fully rendered screenshot image from that page (using Puppeteer)</p>
<div class="youtube-related">
<div><is-land on:visible="" import="/js/lite-yt-embed.js" class="fluid"><lite-youtube videoid="BcZUSZcE8uQ" playlabel="Play" style="background-image:url('https://i.ytimg.com/vi/BcZUSZcE8uQ/maxresdefault.jpg')">
<a href="https://youtube.com/watch?v=BcZUSZcE8uQ" class="elv-externalexempt lty-playbtn" title="Play Video"><span class="lyt-visually-hidden">Play Video</span></a>
</lite-youtube><a href="https://youtube.com/watch?v=BcZUSZcE8uQ">Watch on YouTube</a></is-land></div>
</div>
<h2 id="source-code" tabindex="-1">Source Code <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#source-code">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://github.com/11ty/api-screenshot"><code>11ty/api-screenshot</code> on GitHub</a></li>
</ul>
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/api-screenshot" class="elv-externalexempt"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a></p>
<ul>
<li>You will <em>need</em> to set an environment variable in the Netlify App UI <code>AWS_LAMBDA_JS_RUNTIME</code> with the value <code>nodejs12.x</code>. Read more at <a href="https://github.com/11ty/api-screenshot/issues/17">Issue #17</a>.</li>
</ul>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Image URLs have the format:</p>
<pre><code>https://v1.screenshot.11ty.dev/:url/
https://v1.screenshot.11ty.dev/:url/:size/
https://v1.screenshot.11ty.dev/:url/:size/:aspectratio/
https://v1.screenshot.11ty.dev/:url/:size/:aspectratio/:zoom/
</code></pre>
<ul>
<li><code>url</code> must be URI encoded.</li>
<li>Valid <code>size</code> values:
<ul>
<li><code>small</code>: 375×___ (default)</li>
<li><code>medium</code>: 650×___</li>
<li><code>large</code>: 1024×___
<ul>
<li><code>aspectratio</code> of <code>9:16</code> is not supported (throws an error)</li>
</ul>
</li>
<li><code>opengraph</code>: always 1200×630, works with <code>zoom</code>
<ul>
<li><code>aspectratio</code> is ignored (no errors thrown)</li>
</ul>
</li>
</ul>
</li>
<li>Valid <code>aspectratio</code> values:
<ul>
<li><code>1:1</code> (default)</li>
<li><code>9:16</code></li>
</ul>
</li>
<li>Valid <code>zoom</code> values:
<ul>
<li><code>bigger</code> (1.4 <code>devicePixelRatio</code>)</li>
<li><code>smaller</code> (0.71 <code>devicePixelRatio</code>)</li>
</ul>
</li>
</ul>
<h2 id="sample" tabindex="-1">Sample <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#sample">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Try it out on the <a href="https://api-explorer.11ty.dev/">Eleventy API Explorer</a>.</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/small/9:16/bigger/" class="screenshot screenshot-first-example" width="375" height="667" loading="lazy" decoding="async" alt="Screenshot of 11ty.dev">
</div></div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/small/9:16/bigger/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screenshot screenshot-first-example<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>375<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>667<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Screenshot of 11ty.dev<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h2 id="advanced-options" tabindex="-1">Advanced Options <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#advanced-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id="manual-cache-busting" tabindex="-1">Manual Cache Busting <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#manual-cache-busting">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>If the screenshots aren’t updating at a high enough frequency you can pass in your own cache busting key using an underscore prefix <code>_</code> after your URL.</p>
<p>This can be any arbitrary string tied to your unique build, here’s some examples that use today’s date:</p>
<pre><code>/:url/_20210802/
/:url/:size/_20210802/
/:url/:size/:aspectratio/_20210802/
/:url/:size/:aspectratio/:zoom/_20210802/
</code></pre>
<h3 id="custom-wait-conditions" tabindex="-1">Custom Wait Conditions <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#custom-wait-conditions">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can customize the conditions with which the headless browser will wait to take the screenshot. At a low level, this controls the <a href="https://pptr.dev/#?product=Puppeteer&version=v13.3.1&show=api-pagegotourl-options"><code>waitUntil</code> property in Puppeteer’s <code>goto</code> call</a>. The options are:</p>
<ul>
<li>DOMContentLoaded <code>wait:0</code></li>
<li>Load event <code>wait:1</code> (default)</li>
<li>Load event; there have been no network connections for 500ms: <code>wait:2</code></li>
<li>Load event; there are fewer than two network connections for 500ms: <code>wait:3</code></li>
</ul>
<pre><code>/:url/_wait:0/
/:url/_wait:1/
/:url/_wait:2/
/:url/_wait:3/
</code></pre>
<h3 id="custom-timeout" tabindex="-1">Custom Timeout <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#custom-timeout">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Number of seconds to wait before the request times out. We will attempt to simulate the stop button and return the screenshot that exists up to that point. Worst case, a default Eleventy logo is returned.</p>
<ul>
<li>Minimum: <code>3</code></li>
<li>Maximum: <code>9</code></li>
</ul>
<pre><code>/:url/_timeout:3/
/:url/_timeout:9/
</code></pre>
<h3 id="combine-these-options" tabindex="-1">Combine these options <a class="direct-link" href="https://www.11ty.dev/docs/services/screenshots/#combine-these-options">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>You can use any of these advanced options together, like <code>/:url/_20210802_wait:0_timeout:2/</code>. Order only matters to the uniqueness of the URL caching on the CDN: <code>/:url/_20210802_wait:0/</code> and <code>/:url/_wait:0_20210802/</code> will be functionally equivalent but make two different screenshot requests.</p>
Sparklines
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/services/sparklines/
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/services/sparklines/#open-source">Open Source </a></li><li><a href="https://www.11ty.dev/docs/services/sparklines/#usage">Usage </a></li><li><a href="https://www.11ty.dev/docs/services/sparklines/#samples">Samples </a></li></ul></div><p></p>
</details>
<p>Feed this runtime service a comma separated list of numeric values and it will return an SVG sparkline image.</p>
<h2 id="open-source" tabindex="-1">Open Source <a class="direct-link" href="https://www.11ty.dev/docs/services/sparklines/#open-source">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://github.com/11ty/api-sparkline"><code>11ty/api-sparkline</code> on GitHub</a></li>
</ul>
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/api-sparkline" class="elv-externalexempt"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a></p>
<h2 id="usage" tabindex="-1">Usage <a class="direct-link" href="https://www.11ty.dev/docs/services/sparklines/#usage">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Try it out on the <a href="https://api-explorer.11ty.dev/">Eleventy API Explorer</a>.</p>
<p>Image URLs have the format:</p>
<pre><code>https://v1.sparkline.11ty.dev/:dimensions/:values/
https://v1.sparkline.11ty.dev/:dimensions/:values/:color/
</code></pre>
<ul>
<li><code>dimensions</code> must be two integers separated by an <code>x</code>. <code>[height]x[width]</code>, e.g. <code>120x30</code></li>
<li><code>values</code> must be a comma separated list of numbers.</li>
<li><code>color</code> is an SVG friendly color (URI encoded).</li>
</ul>
<h2 id="samples" tabindex="-1">Samples <a class="direct-link" href="https://www.11ty.dev/docs/services/sparklines/#samples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Using color <code>#123456</code>:</p>
<div class="elv-callout elv-callout-demo"><div class="elv-callout-c">
<img src="https://v1.sparkline.11ty.dev/120x30/41,25,9,12,10,6,12,14,19,17,23,30,36,21,40/%23123456/" width="120" height="30" alt="Sparkline representing frequency of posts written from 2007 to 2021" loading="lazy" decoding="async">
</div></div>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://v1.sparkline.11ty.dev/120x30/41,25,9,12,10,6,12,14,19,17,23,30,36,21,40/%23123456/<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sparkline representing frequency of posts written from 2007 to 2021<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
Eleventy 中文文档
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/sites/
<h1>Built With Eleventy</h1>
<p><a href="https://www.11ty.dev/speedlify/">The Built with Eleventy sites have moved to <code>/speedlify/</code></a></p>
Starter Projects
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/starter/
<h1>Starter Projects</h1>
<p><a href="https://github.com/11ty/11ty-website/tree/master/src/_data/starters">Add your own starter project</a>. Community contributions are shown in random order. <a href="https://eleventy-starters--speedlify.netlify.app/eleventy-starters/">Lighthouse scores are updated daily</a>.</p>
<filter-container oninit="">
<form>
<label>
<input type="radio" name="projectfilter" value="" data-filter-key="tags" checked="">
Show all projects
</label>
<label>
<input type="radio" name="projectfilter" value="perfectlh" data-filter-key="tags">
Only show projects with a Four Hundos Lighthouse score
</label>
</form>
<div class="sites-vert sites-vert--lg">
<div class="lo-grid" style="--fl-gap-v: 5em;">
<div class="sites-site-vert sites-site-official" data-filter-tags="perfectlh">
<a href="https://eleventy-base-blog.netlify.app/" class="elv-externalexempt" title="eleventy-base-blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2F11ty%2Feleventy-base-blog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/11ty/eleventy-base-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-base-blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-base-blog.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-base-blog.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-base-blog.netlify.app/","requestedUrl":"https://eleventy-base-blog.netlify.app/","timestamp":1708021114627,"ranks":{"hundos":34,"performance":5,"accessibility":23,"cumulative":19},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":848,"firstMeaningfulPaint":848,"speedIndex":848,"largestContentfulPaint":848,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":848,"maxPotentialFirstInputDelay":46,"timeToFirstByte":41,"weight":{"total":2966,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":2966,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":9,"+weight.total":117,"-weight.document":67,"+weight.document":58,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":10,"-totalBlockingTime":1,"-largestContentfulPaint":6},"axe":{"passes":118,"violations":0},"previousRanks":{"hundos":31,"performance":4,"accessibility":23,"cumulative":19},"hash":"127ff410"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/11ty/eleventy-base-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/11ty/eleventy-base-blog?terminal=start" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description"><strong>🎈 Official Starter</strong> · How to build a blog web site with Eleventy.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://glitch-hello-eleventy.glitch.me/" class="elv-externalexempt" title="glitch.new/eleventy">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fglitch.new%2Feleventy/" width="150" height="150" alt="IndieWeb Avatar for https://glitch.new/eleventy" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">glitch.new/eleventy</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://glitch-hello-eleventy.glitch.me/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fglitch-hello-eleventy.glitch.me%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://glitch-hello-eleventy.glitch.me/","requestedUrl":"https://glitch-hello-eleventy.glitch.me/","timestamp":1708021158764,"ranks":{"hundos":97,"performance":98,"accessibility":87,"cumulative":97},"lighthouse":{"version":"11.4.0","performance":0.93,"accessibility":0.97,"bestPractices":1,"seo":0.93,"total":383},"firstContentfulPaint":1064,"firstMeaningfulPaint":2097,"speedIndex":1335.7130787824622,"largestContentfulPaint":3261,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":2097,"maxPotentialFirstInputDelay":46,"timeToFirstByte":235,"weight":{"total":166112,"image":19283,"imageCount":2,"script":0,"scriptCount":0,"document":3900,"font":137039,"fontCount":2,"stylesheet":4893,"stylesheetCount":1,"thirdParty":997,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":94,"+weight.total":32,"-weight.document":83,"+weight.document":42,"-weight.script":1,"+weight.script":76,"-weight.image":31,"+weight.image":40,"-weight.font":32,"+weight.font":7,"+weight.fontCount":4,"-timeToFirstByte":49,"-totalBlockingTime":1,"-largestContentfulPaint":114},"axe":{"passes":95,"violations":1},"previousRanks":{"hundos":99,"performance":101,"accessibility":87,"cumulative":99},"hash":"218f85ad"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm"><li class="inlinelist-item"><a href="https://glitch.new/eleventy" class="elv-externalexempt">Remix on Glitch</a></li>
</ul>
<div class="sites-site-description"><strong>Featured</strong> · Build a new Eleventy generated static site with this official Glitch starter app.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-google-docs-starter.netlify.app/" class="elv-externalexempt" title="eleventy-google-docs-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjpoehnelt%2Feleventy-google-docs-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jpoehnelt/eleventy-google-docs-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-google-docs-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-google-docs-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-google-docs-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-google-docs-starter.netlify.app/","requestedUrl":"https://eleventy-google-docs-starter.netlify.app/","timestamp":1708021127577,"ranks":{"hundos":65,"performance":44,"accessibility":81,"cumulative":65},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":0.93,"total":393},"firstContentfulPaint":1193,"firstMeaningfulPaint":1193,"speedIndex":1306.3302002429964,"largestContentfulPaint":1193,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1193,"maxPotentialFirstInputDelay":44,"timeToFirstByte":415,"weight":{"total":1178,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1178,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":2,"+weight.total":124,"-weight.document":19,"+weight.document":106,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":86,"-totalBlockingTime":1,"-largestContentfulPaint":58},"axe":{"passes":107,"violations":8},"previousRanks":{"hundos":67,"performance":9,"accessibility":81,"cumulative":67},"hash":"40dc460b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jpoehnelt/eleventy-google-docs-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jpoehnelt/eleventy-google-docs-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jpoehnelt/eleventy-google-docs-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter template for Eleventy that uses Google Docs as a CMS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://craigerskine.github.io/11ty-twind/" class="elv-externalexempt" title="11ty-twind">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcraigerskine%2F11ty-twind%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/craigerskine/11ty-twind/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-twind</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://craigerskine.github.io/11ty-twind/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcraigerskine.github.io%2F11ty-twind%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://craigerskine.github.io/11ty-twind/","requestedUrl":"https://craigerskine.github.io/11ty-twind/","timestamp":1708021086952,"ranks":{"hundos":90,"performance":99,"accessibility":93,"cumulative":90},"lighthouse":{"version":"11.4.0","performance":0.93,"accessibility":0.95,"bestPractices":1,"seo":1,"total":388},"firstContentfulPaint":2641,"firstMeaningfulPaint":2641,"speedIndex":2641,"largestContentfulPaint":2641,"totalBlockingTime":0,"cumulativeLayoutShift":0.002073487779389652,"timeToInteractive":2641,"maxPotentialFirstInputDelay":16,"timeToFirstByte":53,"weight":{"total":86927,"image":0,"imageCount":0,"script":31574,"scriptCount":1,"document":4292,"font":47364,"fontCount":1,"stylesheet":1289,"stylesheetCount":1,"thirdParty":86927,"thirdPartyCount":5},"run":{"number":1,"total":1},"sidequests":{"-weight.total":82,"+weight.total":44,"-weight.document":89,"+weight.document":36,"-weight.script":62,"+weight.script":14,"-weight.image":1,"+weight.image":71,"-weight.font":16,"+weight.font":23,"+weight.fontCount":5,"-timeToFirstByte":16,"-totalBlockingTime":1,"-largestContentfulPaint":102},"axe":{"passes":234,"violations":10},"previousRanks":{"hundos":90,"performance":104,"accessibility":93,"cumulative":91},"hash":"2c1237a4"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/craigerskine/11ty-twind/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/craigerskine/11ty-twind/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/craigerskine/11ty-twind" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty, powered by Twind (JSS for Tailwind with tons of amazing features)
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://moody-person.github.io/11ty-starter/" class="elv-externalexempt" title="11ty-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmoody-person%2F11ty-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/moody-person/11ty-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://moody-person.github.io/11ty-starter/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmoody-person.github.io%2F11ty-starter%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/moody-person/11ty-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/moody-person/11ty-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/moody-person/11ty-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Eleventy starter, using sass, nunjucks, rollup
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://www.seancdavis.com/twenty-ninety" class="elv-externalexempt" title="Twenty Ninety">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fseancdavis%2Ftwenty-ninety/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/seancdavis/twenty-ninety" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Twenty Ninety</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://www.seancdavis.com/twenty-ninety" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.seancdavis.com%2Ftwenty-ninety/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://www.seancdavis.com/twenty-ninety","requestedUrl":"https://www.seancdavis.com/twenty-ninety","timestamp":1708021199880,"ranks":{"hundos":8,"performance":30,"accessibility":63,"cumulative":33},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1005,"firstMeaningfulPaint":1005,"speedIndex":1125.2028324424127,"largestContentfulPaint":1005,"totalBlockingTime":55.5,"cumulativeLayoutShift":0.011173529170913729,"timeToInteractive":3602,"maxPotentialFirstInputDelay":159,"timeToFirstByte":366,"weight":{"total":138117,"image":2485,"imageCount":1,"script":125169,"scriptCount":3,"document":7208,"font":0,"fontCount":0,"stylesheet":2740,"stylesheetCount":1,"thirdParty":112905,"thirdPartyCount":5},"run":{"number":1,"total":1},"sidequests":{"-weight.total":91,"+weight.total":35,"-weight.document":109,"+weight.document":16,"-weight.script":72,"+weight.script":4,"-weight.image":12,"+weight.image":59,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":71,"-totalBlockingTime":21,"-largestContentfulPaint":37},"axe":{"passes":575,"violations":3},"previousRanks":{"hundos":42,"performance":74,"accessibility":63,"cumulative":43},"hash":"742e7737"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/seancdavis/twenty-ninety" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/seancdavis/twenty-ninety" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/seancdavis/twenty-ninety" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A production-ready starter kit, optimized for performance.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://monochrome.axcora.com/" class="elv-externalexempt" title="Monochrome11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fmonochrome11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/monochrome11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Monochrome11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://monochrome.axcora.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmonochrome.axcora.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://monochrome.axcora.com/","requestedUrl":"https://monochrome.axcora.com/","timestamp":1708021172921,"ranks":{"hundos":114,"performance":122,"accessibility":80,"cumulative":114},"lighthouse":{"version":"11.4.0","performance":0.69,"accessibility":1,"bestPractices":1,"seo":1,"total":369},"firstContentfulPaint":1957,"firstMeaningfulPaint":1957,"speedIndex":1957,"largestContentfulPaint":4170,"totalBlockingTime":0,"cumulativeLayoutShift":0.30862869477055127,"timeToInteractive":1957,"maxPotentialFirstInputDelay":16,"timeToFirstByte":106,"weight":{"total":1235436,"image":1177658,"imageCount":9,"script":1394,"scriptCount":1,"document":36697,"font":19687,"fontCount":1,"stylesheet":0,"stylesheetCount":0,"thirdParty":19687,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":123,"+weight.total":3,"-weight.document":122,"+weight.document":3,"-weight.script":17,"+weight.script":59,"-weight.image":68,"+weight.image":3,"-weight.font":7,"+weight.font":32,"+weight.fontCount":5,"-timeToFirstByte":31,"-totalBlockingTime":1,"-largestContentfulPaint":119},"axe":{"passes":219,"violations":8},"previousRanks":{"hundos":111,"performance":120,"accessibility":80,"cumulative":111},"hash":"c09f0561"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/monochrome11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/monochrome11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/monochrome11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Starter template for photo art and photographer portfolio built with eleventy 11ty
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-excellent.netlify.app/" class="elv-externalexempt" title="eleventy-excellent">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmadrilene%2Feleventy-excellent/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/madrilene/eleventy-excellent" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-excellent</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-excellent.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-excellent.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-excellent.netlify.app/","requestedUrl":"https://eleventy-excellent.netlify.app/","timestamp":1708021123068,"ranks":{"hundos":3,"performance":16,"accessibility":9,"cumulative":1},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":935.5,"firstMeaningfulPaint":935.5,"speedIndex":935.5,"largestContentfulPaint":1235.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":935.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":39,"weight":{"total":87056,"image":1093,"imageCount":1,"script":3040,"scriptCount":2,"document":7045,"font":67834,"fontCount":3,"stylesheet":8044,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":83,"+weight.total":43,"-weight.document":106,"+weight.document":19,"-weight.script":27,"+weight.script":49,"-weight.image":3,"+weight.image":68,"-weight.font":23,"+weight.font":16,"+weight.fontCount":3,"-timeToFirstByte":9,"-totalBlockingTime":1,"-largestContentfulPaint":63},"axe":{"passes":269,"violations":0},"previousRanks":{"hundos":3,"performance":23,"accessibility":9,"cumulative":1},"hash":"581b748a"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/madrilene/eleventy-excellent" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/madrilene/eleventy-excellent" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/madrilene/eleventy-excellent" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Opiniated but easy to use. Based on the companion website of Andy Bell’s talk ‘Be the browser’s mentor, not its micromanager’.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-high-performance-blog-sample.industrialempathy.com/" class="elv-externalexempt" title="Eleventy High Performance Blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fgoogle%2Feleventy-high-performance-blog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/google/eleventy-high-performance-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy High Performance Blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-high-performance-blog-sample.industrialempathy.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-high-performance-blog-sample.industrialempathy.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-high-performance-blog-sample.industrialempathy.com/","requestedUrl":"https://eleventy-high-performance-blog-sample.industrialempathy.com/","timestamp":1708021132339,"ranks":{"hundos":69,"performance":42,"accessibility":101,"cumulative":70},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.92,"bestPractices":1,"seo":1,"total":392},"firstContentfulPaint":854,"firstMeaningfulPaint":854,"speedIndex":1287.1018790554108,"largestContentfulPaint":854,"totalBlockingTime":15,"cumulativeLayoutShift":0,"timeToInteractive":2516,"maxPotentialFirstInputDelay":81,"timeToFirstByte":51,"weight":{"total":330295,"image":0,"imageCount":0,"script":2163,"scriptCount":1,"document":2715,"font":325417,"fontCount":1,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":106,"+weight.total":20,"-weight.document":64,"+weight.document":61,"-weight.script":24,"+weight.script":52,"-weight.image":1,"+weight.image":71,"-weight.font":36,"+weight.font":3,"+weight.fontCount":5,"-timeToFirstByte":15,"-totalBlockingTime":8,"-largestContentfulPaint":7},"axe":{"passes":86,"violations":1},"previousRanks":{"hundos":69,"performance":36,"accessibility":101,"cumulative":72},"hash":"1728682b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/google/eleventy-high-performance-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/google/eleventy-high-performance-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/google/eleventy-high-performance-blog" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A high performance blog template for the 11ty static site generator.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://11ty-feedback.netlify.app/" class="elv-externalexempt" title="11ty Feedback">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Ftmns%2F11ty-feedback/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/tmns/11ty-feedback" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty Feedback</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-feedback.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-feedback.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-feedback.netlify.app/","requestedUrl":"https://11ty-feedback.netlify.app/","timestamp":1708021064283,"ranks":{"hundos":2,"performance":13,"accessibility":49,"cumulative":25},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":923,"firstMeaningfulPaint":923,"speedIndex":923,"largestContentfulPaint":923,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":923,"maxPotentialFirstInputDelay":16,"timeToFirstByte":184,"weight":{"total":127120,"image":64783,"imageCount":2,"script":0,"scriptCount":0,"document":4136,"font":58201,"fontCount":2,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":90,"+weight.total":36,"-weight.document":87,"+weight.document":38,"-weight.script":1,"+weight.script":76,"-weight.image":47,"+weight.image":24,"-weight.font":21,"+weight.font":18,"+weight.fontCount":4,"-timeToFirstByte":43,"-totalBlockingTime":1,"-largestContentfulPaint":19},"axe":{"passes":128,"violations":1},"previousRanks":{"hundos":2,"performance":14,"accessibility":49,"cumulative":27},"hash":"3a040236"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/tmns/11ty-feedback" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/tmns/11ty-feedback" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/tmns/11ty-feedback" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An 11ty starter project for carrying out better feedback exchanges with coworkers, clients, and so on.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://hella-simple-eleventy-tailwindcss.netlify.app/" class="elv-externalexempt" title="Hella Simple 11ty + Tailwind CSS Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fhuphtur%2Fhella-simple-eleventy-tailwind-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/huphtur/hella-simple-eleventy-tailwind-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Hella Simple 11ty + Tailwind CSS Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://hella-simple-eleventy-tailwindcss.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fhella-simple-eleventy-tailwindcss.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://hella-simple-eleventy-tailwindcss.netlify.app/","requestedUrl":"https://hella-simple-eleventy-tailwindcss.netlify.app/","timestamp":1708021158605,"ranks":{"hundos":36,"performance":49,"accessibility":75,"cumulative":39},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1007,"firstMeaningfulPaint":1007,"speedIndex":1348.8925999879837,"largestContentfulPaint":1007,"totalBlockingTime":2,"cumulativeLayoutShift":0,"timeToInteractive":1059,"maxPotentialFirstInputDelay":105,"timeToFirstByte":289,"weight":{"total":3337,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1048,"font":0,"fontCount":0,"stylesheet":2289,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":11,"+weight.total":115,"-weight.document":10,"+weight.document":115,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":55,"-totalBlockingTime":3,"-largestContentfulPaint":38},"axe":{"passes":27,"violations":4},"previousRanks":{"hundos":35,"performance":56,"accessibility":75,"cumulative":37},"hash":"14bc8c8b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/huphtur/hella-simple-eleventy-tailwind-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/huphtur/hella-simple-eleventy-tailwind-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/huphtur/hella-simple-eleventy-tailwind-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Just 2 dependencies, 2 npm scripts, and 1 Tailwind UI freebie to get you started.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://spacebook.app/" class="elv-externalexempt" title="Spacebook">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fbroeker%2Fspacebook/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/broeker/spacebook" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Spacebook</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://spacebook.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fspacebook.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://spacebook.app/","requestedUrl":"https://spacebook.app/","timestamp":1708021185405,"ranks":{"hundos":79,"performance":78,"accessibility":73,"cumulative":79},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":1,"bestPractices":1,"seo":0.92,"total":391},"firstContentfulPaint":1166,"firstMeaningfulPaint":1166,"speedIndex":1711.0570693073164,"largestContentfulPaint":1800.5,"totalBlockingTime":50.5,"cumulativeLayoutShift":0,"timeToInteractive":1316.5,"maxPotentialFirstInputDelay":178,"timeToFirstByte":396,"weight":{"total":64506,"image":2485,"imageCount":1,"script":5996,"scriptCount":1,"document":7375,"font":0,"fontCount":0,"stylesheet":7377,"stylesheetCount":1,"thirdParty":8481,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":71,"+weight.total":55,"-weight.document":111,"+weight.document":14,"-weight.script":37,"+weight.script":39,"-weight.image":12,"+weight.image":59,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":81,"-totalBlockingTime":19,"-largestContentfulPaint":79},"axe":{"passes":478,"violations":4},"previousRanks":{"hundos":74,"performance":30,"accessibility":73,"cumulative":76},"hash":"2b7cc699"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/broeker/spacebook" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/broeker/spacebook" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/broeker/spacebook" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Create fast and simple documentation to explain almost anything. Using Eleventy, Tailwind 2.0, Alpine.js, and Netlify CMS (optional).
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="http://11.intuition.dev/" class="elv-externalexempt" title="11tyPug">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgitlab.com%2Fcekvenich2%2F11pug/" width="150" height="150" alt="IndieWeb Avatar for https://gitlab.com/cekvenich2/11pug" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11tyPug</span>
<div class="sites-screenshot-container"><img alt="Screenshot of http://11.intuition.dev" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/http%3A%2F%2F11.intuition.dev/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://gitlab.com/cekvenich2/11pug" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://gitlab.com/cekvenich2/11pug" class="elv-externalexempt">Deploy to Netlify</a></li>
</ul>
<div class="sites-site-description">11ty v2.x starter kit w/ Pug and a 3rd party classless css framework
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/Ted2xmen/sanity-eleventy-blog" class="elv-externalexempt" title="Ted2xmen">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FTed2xmen%2Fsanity-eleventy-blog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Ted2xmen/sanity-eleventy-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Ted2xmen</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/Ted2xmen/sanity-eleventy-blog" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2FTed2xmen%2Fsanity-eleventy-blog/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Ted2xmen/sanity-eleventy-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Ted2xmen/sanity-eleventy-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Ted2xmen/sanity-eleventy-blog" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starting point with Bootstrap, 11ty, and Sanity.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://filtercoffee.netlify.app/" class="elv-externalexempt" title="Eleventy Filter Coffee Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FYeshwanthyk%2Feleventy-filter-coffee-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Yeshwanthyk/eleventy-filter-coffee-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Filter Coffee Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://filtercoffee.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ffiltercoffee.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://filtercoffee.netlify.app/","requestedUrl":"https://filtercoffee.netlify.app/","timestamp":1708021128575,"ranks":{"hundos":71,"performance":71,"accessibility":77,"cumulative":73},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":0.92,"total":392},"firstContentfulPaint":1089,"firstMeaningfulPaint":1089,"speedIndex":2088.7613570396757,"largestContentfulPaint":1241,"totalBlockingTime":71,"cumulativeLayoutShift":0,"timeToInteractive":1306,"maxPotentialFirstInputDelay":240,"timeToFirstByte":459,"weight":{"total":56941,"image":55030,"imageCount":1,"script":0,"scriptCount":0,"document":1182,"font":0,"fontCount":0,"stylesheet":729,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":68,"+weight.total":58,"-weight.document":20,"+weight.document":105,"-weight.script":1,"+weight.script":76,"-weight.image":44,"+weight.image":27,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":98,"-totalBlockingTime":23,"-largestContentfulPaint":64},"axe":{"passes":11,"violations":4},"previousRanks":{"hundos":70,"performance":18,"accessibility":77,"cumulative":75},"hash":"10facbf3"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Yeshwanthyk/eleventy-filter-coffee-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Yeshwanthyk/eleventy-filter-coffee-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Yeshwanthyk/eleventy-filter-coffee-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple Eleventy starter kit with css compiled with Gulp, image optimization with imagemin and asset hashing.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-gallery.netlify.app/" class="elv-externalexempt" title="11ty-gallery">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fhttpsterio%2F11ty-gallery/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/httpsterio/11ty-gallery" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-gallery</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-gallery.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-gallery.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/httpsterio/11ty-gallery" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/httpsterio/11ty-gallery" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/httpsterio/11ty-gallery" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple little photogallery project. Crops, resizes and generates json from your images. Requires Graphicsmagic, ffmpeg and jq.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-no-style-please.netlify.app/" class="elv-externalexempt" title="11ty-no-style-please">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fstopnoanime%2F11ty-no-style-please/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/stopnoanime/11ty-no-style-please" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-no-style-please</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-no-style-please.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-no-style-please.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/stopnoanime/11ty-no-style-please" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/stopnoanime/11ty-no-style-please" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/stopnoanime/11ty-no-style-please" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A minimalist blog template for eleventy with Netlify CMS built in
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://11tynotes.netlify.app/" class="elv-externalexempt" title="11ty-Collected-Notes">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjenaro94%2Fe11ty-collected-notes/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jenaro94/e11ty-collected-notes" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-Collected-Notes</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11tynotes.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11tynotes.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11tynotes.netlify.app/","requestedUrl":"https://11tynotes.netlify.app/","timestamp":1708021064167,"ranks":{"hundos":38,"performance":22,"accessibility":45,"cumulative":22},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":900.5,"firstMeaningfulPaint":900.5,"speedIndex":1028.8518000006675,"largestContentfulPaint":900.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":900.5,"maxPotentialFirstInputDelay":50,"timeToFirstByte":145,"weight":{"total":1950,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":954,"font":0,"fontCount":0,"stylesheet":996,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":3,"+weight.total":123,"-weight.document":4,"+weight.document":121,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":39,"-totalBlockingTime":1,"-largestContentfulPaint":14},"axe":{"passes":21,"violations":0},"previousRanks":{"hundos":39,"performance":65,"accessibility":45,"cumulative":25},"hash":"4940171"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jenaro94/e11ty-collected-notes" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jenaro94/e11ty-collected-notes" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jenaro94/e11ty-collected-notes" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty + Collected Notes API
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-skeleton.netlify.app/" class="elv-externalexempt" title="Eleventy Skeleton">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fgeotrev%2Feleventy-skeleton/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/geotrev/eleventy-skeleton" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Skeleton</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-skeleton.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-skeleton.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-skeleton.netlify.app/","requestedUrl":"https://11ty-skeleton.netlify.app/","timestamp":1708021138888,"ranks":{"hundos":102,"performance":34,"accessibility":113,"cumulative":101},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.89,"bestPractices":1,"seo":0.91,"total":380},"firstContentfulPaint":920,"firstMeaningfulPaint":920,"speedIndex":1236.4413997650147,"largestContentfulPaint":920,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":920,"maxPotentialFirstInputDelay":16,"timeToFirstByte":388,"weight":{"total":2559,"image":0,"imageCount":0,"script":475,"scriptCount":1,"document":1045,"font":0,"fontCount":0,"stylesheet":1039,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":7,"+weight.total":119,"-weight.document":9,"+weight.document":116,"-weight.script":2,"+weight.script":74,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":78,"-totalBlockingTime":1,"-largestContentfulPaint":18},"axe":{"passes":17,"violations":3},"previousRanks":{"hundos":104,"performance":61,"accessibility":113,"cumulative":103},"hash":"c93b36fe"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/geotrev/eleventy-skeleton" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/geotrev/eleventy-skeleton" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/geotrev/eleventy-skeleton" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Barebones Eleventy. No dependencies or preprocessors.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/AleksandrHovhannisyan/11ty-sass-images-seo" class="elv-externalexempt" title="11ty-sass-images-seo">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FAleksandrHovhannisyan%2F11ty-sass-images-seo/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/AleksandrHovhannisyan/11ty-sass-images-seo" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-sass-images-seo</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/AleksandrHovhannisyan/11ty-sass-images-seo" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2FAleksandrHovhannisyan%2F11ty-sass-images-seo/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/AleksandrHovhannisyan/11ty-sass-images-seo" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/AleksandrHovhannisyan/11ty-sass-images-seo" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/AleksandrHovhannisyan/11ty-sass-images-seo" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An 11ty starter with project scaffolding, Sass, image optimization, and SEO enhancements.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://the-universal-theme.netlify.app/" class="elv-externalexempt" title="The Universal Theme">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcyevgeniy%2Funiversal/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/cyevgeniy/universal" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">The Universal Theme</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://the-universal-theme.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fthe-universal-theme.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/cyevgeniy/universal" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/cyevgeniy/universal" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/cyevgeniy/universal" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Simple, fast and eye-catching theme for 11ty
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-bulma-starter.netlify.app/" class="elv-externalexempt" title="11ty-bulma-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty-bulma-starter.netlify.app%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty-bulma-starter.netlify.app/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-bulma-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-bulma-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-bulma-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/J-Filip/11ty-bulma-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/J-Filip/11ty-bulma-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/J-Filip/11ty-bulma-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty-bulma starter with sass enabled.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/mattwaler/tea-stack" class="elv-externalexempt" title="TEA Stack">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmattwaler%2Ftea-stack/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mattwaler/tea-stack" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">TEA Stack</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/mattwaler/tea-stack" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fmattwaler%2Ftea-stack/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mattwaler/tea-stack" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mattwaler/tea-stack" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mattwaler/tea-stack" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starting point with TailwindCSS, 11ty, and AlpineJS ready to roll.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://mellow-crepe-c98c31.netlify.app/" class="elv-externalexempt" title="11ty-get-going">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fkevh-c%2F11ty-get-going/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/kevh-c/11ty-get-going" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-get-going</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://mellow-crepe-c98c31.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmellow-crepe-c98c31.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://mellow-crepe-c98c31.netlify.app/","requestedUrl":"https://mellow-crepe-c98c31.netlify.app/","timestamp":1708021065050,"ranks":{"hundos":81,"performance":61,"accessibility":109,"cumulative":82},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.91,"bestPractices":1,"seo":1,"total":391},"firstContentfulPaint":1140,"firstMeaningfulPaint":1140,"speedIndex":1553.5770000100135,"largestContentfulPaint":1140,"totalBlockingTime":4,"cumulativeLayoutShift":0,"timeToInteractive":1184.5,"maxPotentialFirstInputDelay":72,"timeToFirstByte":430,"weight":{"total":4943,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1980,"font":0,"fontCount":0,"stylesheet":2963,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":21,"+weight.total":105,"-weight.document":42,"+weight.document":83,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":91,"-totalBlockingTime":5,"-largestContentfulPaint":56},"axe":{"passes":178,"violations":29},"previousRanks":{"hundos":81,"performance":40,"accessibility":109,"cumulative":82},"hash":"52edb54d"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/kevh-c/11ty-get-going" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/kevh-c/11ty-get-going" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/kevh-c/11ty-get-going" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Get Going is an 11ty starter project for simple blogs, small sites and prototypes. Includes 11ty pagination, navigation, image and RSS examples
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://teatime-starter.netlify.app/" class="elv-externalexempt" title="TEAtime Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Falanmosely%2Fteatime-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/alanmosely/teatime-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">TEAtime Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://teatime-starter.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fteatime-starter.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/alanmosely/teatime-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/alanmosely/teatime-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/alanmosely/teatime-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple stylish Eleventy starter project using Tailwind CSS and Alpine.js that deploys to Netlify
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://til-blog.glitch.me/" class="elv-externalexempt" title="til-blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fglitch.com%2F~til-blog/" width="150" height="150" alt="IndieWeb Avatar for https://glitch.com/~til-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">til-blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://til-blog.glitch.me/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ftil-blog.glitch.me%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://til-blog.glitch.me/","requestedUrl":"https://til-blog.glitch.me/","timestamp":1708021231187,"ranks":{"hundos":104,"performance":23,"accessibility":30,"cumulative":104},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":0.96,"seo":0.81,"total":377},"firstContentfulPaint":851.5,"firstMeaningfulPaint":863.5,"speedIndex":1037.8273906697978,"largestContentfulPaint":863.5,"totalBlockingTime":33.5,"cumulativeLayoutShift":0,"timeToInteractive":1414,"maxPotentialFirstInputDelay":117,"timeToFirstByte":240,"weight":{"total":78527,"image":3773,"imageCount":1,"script":54259,"scriptCount":1,"document":3449,"font":0,"fontCount":0,"stylesheet":11147,"stylesheetCount":3,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":78,"+weight.total":48,"-weight.document":73,"+weight.document":52,"-weight.script":63,"+weight.script":13,"-weight.image":16,"+weight.image":55,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":50,"-totalBlockingTime":17,"-largestContentfulPaint":9},"axe":{"passes":85,"violations":0},"previousRanks":{"hundos":106,"performance":63,"accessibility":30,"cumulative":106},"hash":"5cbdc094"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm"><li class="inlinelist-item"><a href="https://glitch.com/edit/#!/remix/https://glitch.com/~til-blog" class="elv-externalexempt">Remix on Glitch</a></li>
</ul>
<div class="sites-site-description">A project showing a basic blog with tags, based on eleventy-base-blog and optimized for Glitch.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-wcag-reporter.netlify.app/" class="elv-externalexempt" title="eleventy-wcag-reporter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fhidde%2Feleventy-wcag-reporter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/hidde/eleventy-wcag-reporter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-wcag-reporter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-wcag-reporter.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-wcag-reporter.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/hidde/eleventy-wcag-reporter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/hidde/eleventy-wcag-reporter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/hidde/eleventy-wcag-reporter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter pack for creating WCAG conformance reports with Eleventy
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-garden.netlify.app/" class="elv-externalexempt" title="Eleventy Garden">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fb3u%2Feleventy-garden/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/b3u/eleventy-garden" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Garden</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-garden.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-garden.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-garden.netlify.app/","requestedUrl":"https://eleventy-garden.netlify.app/","timestamp":1708021125743,"ranks":{"hundos":76,"performance":97,"accessibility":35,"cumulative":75},"lighthouse":{"version":"11.4.0","performance":0.94,"accessibility":1,"bestPractices":1,"seo":0.97,"total":391},"firstContentfulPaint":2540.5,"firstMeaningfulPaint":2540.5,"speedIndex":2540.5,"largestContentfulPaint":2540.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.03222302753819411,"timeToInteractive":2540.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":34,"weight":{"total":76864,"image":49275,"imageCount":1,"script":0,"scriptCount":0,"document":1036,"font":22355,"fontCount":1,"stylesheet":4198,"stylesheetCount":3,"thirdParty":25271,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":75,"+weight.total":51,"-weight.document":8,"+weight.document":117,"-weight.script":1,"+weight.script":76,"-weight.image":42,"+weight.image":29,"-weight.font":9,"+weight.font":30,"+weight.fontCount":5,"-timeToFirstByte":7,"-totalBlockingTime":1,"-largestContentfulPaint":100},"axe":{"passes":46,"violations":0},"previousRanks":{"hundos":83,"performance":100,"accessibility":35,"cumulative":83},"hash":"52d88395"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/b3u/eleventy-garden" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/b3u/eleventy-garden" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/b3u/eleventy-garden" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter site for building a digital garden, or personal wiki, in Eleventy.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11straps.com/" class="elv-externalexempt" title="11straps">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11straps.com/" width="150" height="150" alt="IndieWeb Avatar for https://11straps.com" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11straps</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11straps.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11straps.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11straps.com/","requestedUrl":"https://11straps.com/","timestamp":1708021052894,"ranks":{"hundos":100,"performance":107,"accessibility":95,"cumulative":100},"lighthouse":{"version":"11.4.0","performance":0.91,"accessibility":0.94,"bestPractices":0.96,"seo":1,"total":381},"firstContentfulPaint":2822.5,"firstMeaningfulPaint":2822.5,"speedIndex":2822.5,"largestContentfulPaint":2822.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.00041987678199779786,"timeToInteractive":2822.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":358,"weight":{"total":92263,"image":13163,"imageCount":6,"script":24393,"scriptCount":2,"document":2426,"font":47362,"fontCount":1,"stylesheet":4919,"stylesheetCount":2,"thirdParty":50984,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":84,"+weight.total":42,"-weight.document":53,"+weight.document":72,"-weight.script":57,"+weight.script":19,"-weight.image":24,"+weight.image":47,"-weight.font":15,"+weight.font":24,"+weight.fontCount":5,"-timeToFirstByte":65,"-totalBlockingTime":1,"-largestContentfulPaint":106},"axe":{"passes":145,"violations":1},"previousRanks":{"hundos":102,"performance":109,"accessibility":95,"cumulative":101},"hash":"809b8c03"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<div class="sites-site-description">A Eleventy + Bootstrap 5 starterkit
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://text11ty.pages.dev/" class="elv-externalexempt" title="Text11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Ftext11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/text11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Text11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://text11ty.pages.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ftext11ty.pages.dev%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://text11ty.pages.dev/","requestedUrl":"https://text11ty.pages.dev/","timestamp":1708021190053,"ranks":{"hundos":87,"performance":86,"accessibility":106,"cumulative":87},"lighthouse":{"version":"11.4.0","performance":0.98,"accessibility":0.91,"bestPractices":1,"seo":1,"total":389},"firstContentfulPaint":1872,"firstMeaningfulPaint":1872,"speedIndex":1872,"largestContentfulPaint":1872,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1872,"maxPotentialFirstInputDelay":16,"timeToFirstByte":246,"weight":{"total":40048,"image":5303,"imageCount":1,"script":0,"scriptCount":0,"document":6767,"font":0,"fontCount":0,"stylesheet":27978,"stylesheetCount":2,"thirdParty":27093,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":60,"+weight.total":66,"-weight.document":104,"+weight.document":21,"-weight.script":1,"+weight.script":76,"-weight.image":19,"+weight.image":52,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":51,"-totalBlockingTime":1,"-largestContentfulPaint":81},"axe":{"passes":351,"violations":3},"previousRanks":{"hundos":86,"performance":88,"accessibility":106,"cumulative":86},"hash":"fe9502dc"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/text11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/text11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/text11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Just a simple text to focus on creating blog article content or you can create a documentation page.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://getzeropoint.com/" class="elv-externalexempt" title="ZeroPoint">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgetzeropoint.com/" width="150" height="150" alt="IndieWeb Avatar for https://getzeropoint.com" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">ZeroPoint</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://getzeropoint.com" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgetzeropoint.com/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<div class="sites-site-description">A modern, opinionated, bare-bones Jamstack starter using Eleventy to get 'up to zero' on a project quickly and easily.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-bliss.lkmt.us/" class="elv-externalexempt" title="Bliss">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Flwojcik%2Feleventy-template-bliss/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/lwojcik/eleventy-template-bliss" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Bliss</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-bliss.lkmt.us/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-bliss.lkmt.us%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-bliss.lkmt.us/","requestedUrl":"https://eleventy-bliss.lkmt.us/","timestamp":1708021055796,"ranks":{"hundos":15,"performance":26,"accessibility":64,"cumulative":34},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":970,"firstMeaningfulPaint":1020.5,"speedIndex":1096.165284003933,"largestContentfulPaint":1073,"totalBlockingTime":29.5,"cumulativeLayoutShift":0.0037447204637484762,"timeToInteractive":1092,"maxPotentialFirstInputDelay":101,"timeToFirstByte":77,"weight":{"total":39582,"image":1394,"imageCount":1,"script":2311,"scriptCount":1,"document":4302,"font":23578,"fontCount":1,"stylesheet":7997,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":58,"+weight.total":68,"-weight.document":90,"+weight.document":35,"-weight.script":26,"+weight.script":50,"-weight.image":6,"+weight.image":65,"-weight.font":10,"+weight.font":29,"+weight.fontCount":5,"-timeToFirstByte":27,"-totalBlockingTime":16,"-largestContentfulPaint":48},"axe":{"passes":322,"violations":3},"previousRanks":{"hundos":13,"performance":38,"accessibility":64,"cumulative":32},"hash":"4c348bd5"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/lwojcik/eleventy-template-bliss" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/lwojcik/eleventy-template-bliss" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/lwojcik/eleventy-template-bliss" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Single-column feature-rich blog template with strong focus on simplicity without sacrificing functionality
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://grandlimousine.netlify.app/" class="elv-externalexempt" title="Car11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Flimocar11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/limocar11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Car11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://grandlimousine.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgrandlimousine.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://grandlimousine.netlify.app/","requestedUrl":"https://grandlimousine.netlify.app/","timestamp":1708021102824,"ranks":{"hundos":108,"performance":113,"accessibility":102,"cumulative":108},"lighthouse":{"version":"11.4.0","performance":0.84,"accessibility":0.92,"bestPractices":1,"seo":1,"total":376},"firstContentfulPaint":1223,"firstMeaningfulPaint":1223,"speedIndex":1442.4840154347644,"largestContentfulPaint":2873,"totalBlockingTime":52,"cumulativeLayoutShift":0.2193920901068757,"timeToInteractive":1416.5,"maxPotentialFirstInputDelay":105,"timeToFirstByte":107,"weight":{"total":648868,"image":621187,"imageCount":9,"script":0,"scriptCount":0,"document":2505,"font":0,"fontCount":0,"stylesheet":25176,"stylesheetCount":2,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":118,"+weight.total":8,"-weight.document":59,"+weight.document":66,"-weight.script":1,"+weight.script":76,"-weight.image":64,"+weight.image":7,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":32,"-totalBlockingTime":20,"-largestContentfulPaint":110},"axe":{"passes":234,"violations":3},"previousRanks":{"hundos":92,"performance":97,"accessibility":102,"cumulative":93},"hash":"4cf90cc2"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/limocar11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/limocar11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/limocar11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Clean Design + Auto SEO , starter project for car services website template themes
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://marcamos-jet.netlify.app/" class="elv-externalexempt" title="jet 🛩">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmarcamos%2Fjet/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/marcamos/jet" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">jet 🛩</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://marcamos-jet.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmarcamos-jet.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://marcamos-jet.netlify.app/","requestedUrl":"https://marcamos-jet.netlify.app/","timestamp":1708021161957,"ranks":{"hundos":33,"performance":52,"accessibility":39,"cumulative":18},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":944,"firstMeaningfulPaint":944,"speedIndex":1434.2193039040567,"largestContentfulPaint":944,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":967,"maxPotentialFirstInputDelay":76,"timeToFirstByte":439,"weight":{"total":5769,"image":2933,"imageCount":2,"script":0,"scriptCount":0,"document":943,"font":0,"fontCount":0,"stylesheet":1893,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":24,"+weight.total":102,"-weight.document":3,"+weight.document":122,"-weight.script":1,"+weight.script":76,"-weight.image":15,"+weight.image":56,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":94,"-totalBlockingTime":1,"-largestContentfulPaint":27},"axe":{"passes":41,"violations":0},"previousRanks":{"hundos":32,"performance":72,"accessibility":39,"cumulative":20},"hash":"d713b44"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/marcamos/jet" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/marcamos/jet" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/marcamos/jet" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">It’s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it’s still really small though.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy.rongying.co/" class="elv-externalexempt" title="11ty-blog-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fkohrongying%2F11ty-blog-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/kohrongying/11ty-blog-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-blog-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy.rongying.co/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy.rongying.co%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy.rongying.co/","requestedUrl":"https://eleventy.rongying.co/","timestamp":1708021054958,"ranks":{"hundos":44,"performance":79,"accessibility":60,"cumulative":43},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":1,"bestPractices":1,"seo":1,"total":399},"firstContentfulPaint":1774,"firstMeaningfulPaint":1774,"speedIndex":1774,"largestContentfulPaint":1774,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1774,"maxPotentialFirstInputDelay":16,"timeToFirstByte":24,"weight":{"total":11008,"image":1380,"imageCount":2,"script":0,"scriptCount":0,"document":2091,"font":0,"fontCount":0,"stylesheet":7537,"stylesheetCount":3,"thirdParty":1310,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":39,"+weight.total":87,"-weight.document":44,"+weight.document":81,"-weight.script":1,"+weight.script":76,"-weight.image":5,"+weight.image":66,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":5,"-totalBlockingTime":1,"-largestContentfulPaint":77},"axe":{"passes":137,"violations":2},"previousRanks":{"hundos":50,"performance":92,"accessibility":60,"cumulative":50},"hash":"8610a206"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/kohrongying/11ty-blog-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/kohrongying/11ty-blog-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/kohrongying/11ty-blog-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Minimal blog template. Supports browsing in the internet without Javascript.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://programrestoran.axcora.com/" class="elv-externalexempt" title="landingpage11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Flandingpage11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/landingpage11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">landingpage11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://programrestoran.axcora.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fprogramrestoran.axcora.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://programrestoran.axcora.com/","requestedUrl":"https://programrestoran.axcora.com/","timestamp":1708021165302,"ranks":{"hundos":6,"performance":28,"accessibility":56,"cumulative":30},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1119,"firstMeaningfulPaint":1119,"speedIndex":1119,"largestContentfulPaint":1119,"totalBlockingTime":0,"cumulativeLayoutShift":0.010181791916326045,"timeToInteractive":1119,"maxPotentialFirstInputDelay":16,"timeToFirstByte":133,"weight":{"total":92832,"image":53299,"imageCount":11,"script":1406,"scriptCount":1,"document":4283,"font":0,"fontCount":0,"stylesheet":33844,"stylesheetCount":2,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":85,"+weight.total":41,"-weight.document":88,"+weight.document":37,"-weight.script":20,"+weight.script":56,"-weight.image":43,"+weight.image":28,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":37,"-totalBlockingTime":1,"-largestContentfulPaint":52},"axe":{"passes":301,"violations":2},"previousRanks":{"hundos":6,"performance":25,"accessibility":56,"cumulative":31},"hash":"3167274a"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/landingpage11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/landingpage11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/landingpage11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Starter landing page 11ty with auto SEO injection
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-midnight.netlify.app/" class="elv-externalexempt" title="11ty-midnight">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fsidswork%2F11ty-midnight/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/sidswork/11ty-midnight" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-midnight</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-midnight.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-midnight.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-midnight.netlify.app/","requestedUrl":"https://11ty-midnight.netlify.app/","timestamp":1708021066062,"ranks":{"hundos":73,"performance":104,"accessibility":16,"cumulative":68},"lighthouse":{"version":"11.4.0","performance":0.92,"accessibility":1,"bestPractices":1,"seo":1,"total":392},"firstContentfulPaint":2664.5,"firstMeaningfulPaint":2664.5,"speedIndex":2664.5,"largestContentfulPaint":2664.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.0322986532541972,"timeToInteractive":2664.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":184,"weight":{"total":23589,"image":2241,"imageCount":1,"script":0,"scriptCount":0,"document":1487,"font":14832,"fontCount":1,"stylesheet":5029,"stylesheetCount":3,"thirdParty":18379,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":49,"+weight.total":77,"-weight.document":32,"+weight.document":93,"-weight.script":1,"+weight.script":76,"-weight.image":10,"+weight.image":61,"-weight.font":4,"+weight.font":35,"+weight.fontCount":5,"-timeToFirstByte":43,"-totalBlockingTime":1,"-largestContentfulPaint":103},"axe":{"passes":155,"violations":0},"previousRanks":{"hundos":76,"performance":105,"accessibility":16,"cumulative":70},"hash":"b329bea3"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/sidswork/11ty-midnight" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/sidswork/11ty-midnight" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/sidswork/11ty-midnight" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Minimalist dark mode starter template for 11ty with support for jsfiddle embeds and prismjs syntax highlighting.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://elepwanty.netlify.app/" class="elv-externalexempt" title="elePWAnty - 11ty + lit PWA starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fheartistizio%2FelePWAnty%23readme/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/heartistizio/elePWAnty#readme" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">elePWAnty - 11ty + lit PWA starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://elepwanty.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Felepwanty.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://elepwanty.netlify.app/","requestedUrl":"https://elepwanty.netlify.app/","timestamp":1708021108712,"ranks":{"hundos":56,"performance":64,"accessibility":42,"cumulative":56},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":0.96,"seo":1,"total":396},"firstContentfulPaint":942,"firstMeaningfulPaint":942,"speedIndex":1655.7060719908472,"largestContentfulPaint":942,"totalBlockingTime":0,"cumulativeLayoutShift":0.0034015965653323567,"timeToInteractive":942,"maxPotentialFirstInputDelay":16,"timeToFirstByte":399,"weight":{"total":73644,"image":59876,"imageCount":1,"script":10436,"scriptCount":3,"document":2258,"font":0,"fontCount":0,"stylesheet":1074,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":74,"+weight.total":52,"-weight.document":47,"+weight.document":78,"-weight.script":44,"+weight.script":32,"-weight.image":46,"+weight.image":25,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":83,"-totalBlockingTime":1,"-largestContentfulPaint":25},"axe":{"passes":33,"violations":0},"previousRanks":{"hundos":55,"performance":57,"accessibility":42,"cumulative":55},"hash":"a4228a16"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/heartistizio/elePWAnty#readme" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/heartistizio/elePWAnty#readme" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/heartistizio/elePWAnty#readme" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A PWA template using 11ty, Lit, Rollup.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://elva.scott.ee/" class="elv-externalexempt" title="elva">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fscottsweb%2Felva/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/scottsweb/elva" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">elva</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://elva.scott.ee" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Felva.scott.ee/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/scottsweb/elva" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/scottsweb/elva" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/scottsweb/elva" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A multilingual, clean, green, 11ty starter theme. elva provides solid foundations for your next web project and a built in CMS (Front Matter CMS) for managing content.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://skeleventy.netlify.app/" class="elv-externalexempt" title="Skeleventy">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjosephdyer%2Fskeleventy/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/josephdyer/skeleventy" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Skeleventy</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://skeleventy.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fskeleventy.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://skeleventy.netlify.app/","requestedUrl":"https://skeleventy.netlify.app/","timestamp":1708021180212,"ranks":{"hundos":26,"performance":40,"accessibility":15,"cumulative":13},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":924.5,"firstMeaningfulPaint":924.5,"speedIndex":1262.2144000053404,"largestContentfulPaint":924.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":924.5,"maxPotentialFirstInputDelay":41,"timeToFirstByte":381,"weight":{"total":10908,"image":0,"imageCount":0,"script":1402,"scriptCount":1,"document":2448,"font":0,"fontCount":0,"stylesheet":5582,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":38,"+weight.total":88,"-weight.document":54,"+weight.document":71,"-weight.script":18,"+weight.script":58,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":77,"-totalBlockingTime":1,"-largestContentfulPaint":20},"axe":{"passes":161,"violations":0},"previousRanks":{"hundos":20,"performance":13,"accessibility":15,"cumulative":10},"hash":"fe9f115b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/josephdyer/skeleventy" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/josephdyer/skeleventy" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/josephdyer/skeleventy" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A skeleton boilerplate built with Eleventy and Tailwind CSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ta.netlify.app/" class="elv-externalexempt" title="11TA">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2F11ta%2F11ta-template/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/11ta/11ta-template" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11TA</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ta.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ta.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ta.netlify.app/","requestedUrl":"https://11ta.netlify.app/","timestamp":1708021053214,"ranks":{"hundos":95,"performance":95,"accessibility":55,"cumulative":95},"lighthouse":{"version":"11.4.0","performance":0.95,"accessibility":1,"bestPractices":0.96,"seo":0.93,"total":384},"firstContentfulPaint":1066.5,"firstMeaningfulPaint":1066.5,"speedIndex":1741.5815785698287,"largestContentfulPaint":2866.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1072.5,"maxPotentialFirstInputDelay":90,"timeToFirstByte":296,"weight":{"total":276310,"image":245458,"imageCount":3,"script":11183,"scriptCount":1,"document":13993,"font":0,"fontCount":0,"stylesheet":5676,"stylesheetCount":1,"thirdParty":9218,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":104,"+weight.total":22,"-weight.document":117,"+weight.document":8,"-weight.script":45,"+weight.script":31,"-weight.image":56,"+weight.image":15,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":56,"-totalBlockingTime":1,"-largestContentfulPaint":109},"axe":{"passes":640,"violations":2},"previousRanks":{"hundos":96,"performance":96,"accessibility":55,"cumulative":96},"hash":"d1567e0a"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/11ta/11ta-template" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/11ta/11ta-template" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/11ta/11ta-template" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11TA is a deeply customizable, full-featured, ready-to-publish blog/marketing template system built with 11ty, TailwindCSS, & Alpine.js
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-webpack.netlify.app/" class="elv-externalexempt" title="eleventy-webpack">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fclenemt%2Feleventy-webpack/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/clenemt/eleventy-webpack" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-webpack</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-webpack.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-webpack.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-webpack.netlify.app/","requestedUrl":"https://eleventy-webpack.netlify.app/","timestamp":1708021148639,"ranks":{"hundos":22,"performance":50,"accessibility":41,"cumulative":9},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":947,"firstMeaningfulPaint":947,"speedIndex":1394.3487520042656,"largestContentfulPaint":991,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":947,"maxPotentialFirstInputDelay":37,"timeToFirstByte":381,"weight":{"total":17701,"image":13609,"imageCount":1,"script":568,"scriptCount":1,"document":1155,"font":0,"fontCount":0,"stylesheet":923,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":45,"+weight.total":81,"-weight.document":17,"+weight.document":108,"-weight.script":8,"+weight.script":68,"-weight.image":25,"+weight.image":46,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":77,"-totalBlockingTime":1,"-largestContentfulPaint":35},"axe":{"passes":37,"violations":0},"previousRanks":{"hundos":22,"performance":69,"accessibility":41,"cumulative":12},"hash":"78c4c4c7"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/clenemt/eleventy-webpack" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/clenemt/eleventy-webpack" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/clenemt/eleventy-webpack" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A barebone Eleventy and Webpack boilerplate 🎈
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-notes.vercel.app/" class="elv-externalexempt" title="11ty-notes">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fshadowtime2000%2F11ty-notes/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/shadowtime2000/11ty-notes" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-notes</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-notes.vercel.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-notes.vercel.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/shadowtime2000/11ty-notes" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/shadowtime2000/11ty-notes" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/shadowtime2000/11ty-notes" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty-notes is an Eleventy starter to manage your notes so you don't forget stuff
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://frontenso-11ty-starter.netlify.app/" class="elv-externalexempt" title="frontenso-11ty-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Ffrontenso%2Ffrontenso-11ty-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/frontenso/frontenso-11ty-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">frontenso-11ty-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://frontenso-11ty-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ffrontenso-11ty-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://frontenso-11ty-starter.netlify.app/","requestedUrl":"https://frontenso-11ty-starter.netlify.app/","timestamp":1708021153939,"ranks":{"hundos":52,"performance":63,"accessibility":89,"cumulative":54},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.97,"bestPractices":1,"seo":1,"total":397},"firstContentfulPaint":1235,"firstMeaningfulPaint":1235,"speedIndex":1652.349200004339,"largestContentfulPaint":1235,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1235,"maxPotentialFirstInputDelay":16,"timeToFirstByte":377,"weight":{"total":71453,"image":35090,"imageCount":2,"script":13711,"scriptCount":1,"document":7344,"font":0,"fontCount":0,"stylesheet":15308,"stylesheetCount":2,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":73,"+weight.total":53,"-weight.document":110,"+weight.document":15,"-weight.script":47,"+weight.script":29,"-weight.image":36,"+weight.image":35,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":76,"-totalBlockingTime":1,"-largestContentfulPaint":62},"axe":{"passes":156,"violations":16},"previousRanks":{"hundos":51,"performance":70,"accessibility":89,"cumulative":52},"hash":"a3cb72b3"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/frontenso/frontenso-11ty-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/frontenso/frontenso-11ty-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/frontenso/frontenso-11ty-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A production-ready starter that features Nunjucks, SASS, TailwindCSS, Webpack and ESNext. 11ty is responsible for building HTML only, the rest is built with Gulp.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-i18n.netlify.app/" class="elv-externalexempt" title="eleventy-i18n">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmadrilene%2Feleventy-i18n/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/madrilene/eleventy-i18n" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-i18n</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-i18n.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-i18n.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/madrilene/eleventy-i18n" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/madrilene/eleventy-i18n" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/madrilene/eleventy-i18n" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Minimal starter for localized content, using Eleventy's own Internationalization (I18n) plugin
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://trusting-pasteur-48f806.netlify.app/" class="elv-externalexempt" title="beginnersBase11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FEwan-D%2FbeginnersBase11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Ewan-D/beginnersBase11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">beginnersBase11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://trusting-pasteur-48f806.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ftrusting-pasteur-48f806.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://trusting-pasteur-48f806.netlify.app/","requestedUrl":"https://trusting-pasteur-48f806.netlify.app/","timestamp":1708021100544,"ranks":{"hundos":42,"performance":77,"accessibility":83,"cumulative":46},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":1,"bestPractices":1,"seo":1,"total":399},"firstContentfulPaint":937,"firstMeaningfulPaint":937,"speedIndex":1681.2435480130912,"largestContentfulPaint":1957,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":948.5,"maxPotentialFirstInputDelay":53,"timeToFirstByte":433,"weight":{"total":197611,"image":190216,"imageCount":2,"script":0,"scriptCount":0,"document":1880,"font":0,"fontCount":0,"stylesheet":5515,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":97,"+weight.total":29,"-weight.document":38,"+weight.document":87,"-weight.script":1,"+weight.script":76,"-weight.image":53,"+weight.image":18,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":93,"-totalBlockingTime":1,"-largestContentfulPaint":86},"axe":{"passes":116,"violations":11},"previousRanks":{"hundos":40,"performance":80,"accessibility":83,"cumulative":45},"hash":"441d01cb"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Ewan-D/beginnersBase11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Ewan-D/beginnersBase11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Ewan-D/beginnersBase11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">belt and braces starter for a blog. Includes 11ty's image, rss & navigation plugins + tailwind & fan art!
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://bjankord.github.io/eleventy-site/" class="elv-externalexempt" title="eleventy-site">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fbjankord%2Feleventy-site/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/bjankord/eleventy-site" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-site</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://bjankord.github.io/eleventy-site/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbjankord.github.io%2Feleventy-site%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://bjankord.github.io/eleventy-site/","requestedUrl":"https://bjankord.github.io/eleventy-site/","timestamp":1708021137682,"ranks":{"hundos":72,"performance":7,"accessibility":70,"cumulative":72},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":0.92,"total":392},"firstContentfulPaint":855.5,"firstMeaningfulPaint":855.5,"speedIndex":855.5,"largestContentfulPaint":914.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.029622236756435945,"timeToInteractive":882.5,"maxPotentialFirstInputDelay":59,"timeToFirstByte":76,"weight":{"total":10194,"image":7239,"imageCount":1,"script":714,"scriptCount":1,"document":1087,"font":0,"fontCount":0,"stylesheet":1154,"stylesheetCount":1,"thirdParty":10194,"thirdPartyCount":4},"run":{"number":1,"total":1},"sidequests":{"-weight.total":34,"+weight.total":92,"-weight.document":14,"+weight.document":111,"-weight.script":9,"+weight.script":67,"-weight.image":21,"+weight.image":50,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":26,"-totalBlockingTime":1,"-largestContentfulPaint":16},"axe":{"passes":19,"violations":3},"previousRanks":{"hundos":75,"performance":3,"accessibility":70,"cumulative":74},"hash":"da55def8"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/bjankord/eleventy-site" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/bjankord/eleventy-site" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/bjankord/eleventy-site" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple Eleventy site
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://venerable-sundae-621325.netlify.app/" class="elv-externalexempt" title="Minimalism Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FMarcoMicale%2FMinimalism/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/MarcoMicale/Minimalism" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Minimalism Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://venerable-sundae-621325.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fvenerable-sundae-621325.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/MarcoMicale/Minimalism" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/MarcoMicale/Minimalism" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/MarcoMicale/Minimalism" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A blog template and theme using 11ty, TailwindCSS, PWA etc...
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11st-starter-kit.netlify.app/" class="elv-externalexempt" title="11st-Starter-Kit">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fstefanfrede%2F11st-starter-kit/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/stefanfrede/11st-starter-kit" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11st-Starter-Kit</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11st-starter-kit.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11st-starter-kit.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11st-starter-kit.netlify.app/","requestedUrl":"https://11st-starter-kit.netlify.app/","timestamp":1708021054075,"ranks":{"hundos":109,"performance":120,"accessibility":20,"cumulative":109},"lighthouse":{"version":"11.4.0","performance":0.75,"accessibility":1,"bestPractices":1,"seo":1,"total":375},"firstContentfulPaint":3597.5,"firstMeaningfulPaint":3597.5,"speedIndex":3973.615419999182,"largestContentfulPaint":3597.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.15496861130513978,"timeToInteractive":3597.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":346,"weight":{"total":377172,"image":1803,"imageCount":1,"script":16733,"scriptCount":1,"document":3325,"font":346610,"fontCount":1,"stylesheet":8701,"stylesheetCount":3,"thirdParty":349974,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":108,"+weight.total":18,"-weight.document":71,"+weight.document":54,"-weight.script":50,"+weight.script":26,"-weight.image":7,"+weight.image":64,"-weight.font":37,"+weight.font":2,"+weight.fontCount":5,"-timeToFirstByte":63,"-totalBlockingTime":1,"-largestContentfulPaint":117},"axe":{"passes":126,"violations":0},"previousRanks":{"hundos":71,"performance":103,"accessibility":20,"cumulative":68},"hash":"42189b19"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/stefanfrede/11st-starter-kit" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/stefanfrede/11st-starter-kit" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/stefanfrede/11st-starter-kit" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty, powered by Vite with Tailwind CSS and Alpine.js.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/" class="elv-externalexempt" title="Eleventy Starter Boilerplate">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fixartz%2FEleventy-Starter-Boilerplate%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/ixartz/Eleventy-Starter-Boilerplate/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Starter Boilerplate</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcreativedesignsguru.com%2Fdemo%2FEleventy-Starter-Boilerplate%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/","requestedUrl":"https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/","timestamp":1708021144202,"ranks":{"hundos":30,"performance":15,"accessibility":74,"cumulative":38},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":927,"firstMeaningfulPaint":927,"speedIndex":927,"largestContentfulPaint":927,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":941.5,"maxPotentialFirstInputDelay":71,"timeToFirstByte":160,"weight":{"total":4670,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1415,"font":0,"fontCount":0,"stylesheet":3255,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":20,"+weight.total":106,"-weight.document":27,"+weight.document":98,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":41,"-totalBlockingTime":1,"-largestContentfulPaint":21},"axe":{"passes":85,"violations":4},"previousRanks":{"hundos":30,"performance":24,"accessibility":74,"cumulative":36},"hash":"9c716140"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/ixartz/Eleventy-Starter-Boilerplate/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Eleventy-Starter-Boilerplate/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/ixartz/Eleventy-Starter-Boilerplate" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">🚀 Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. ⚡️ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://mobile11ty.pages.dev/" class="elv-externalexempt" title="Mobile11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fmobile11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/mobile11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Mobile11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://mobile11ty.pages.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmobile11ty.pages.dev%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://mobile11ty.pages.dev/","requestedUrl":"https://mobile11ty.pages.dev/","timestamp":1708021173806,"ranks":{"hundos":94,"performance":112,"accessibility":84,"cumulative":94},"lighthouse":{"version":"11.4.0","performance":0.86,"accessibility":1,"bestPractices":1,"seo":1,"total":386},"firstContentfulPaint":2347.5,"firstMeaningfulPaint":2347.5,"speedIndex":3062.429688008785,"largestContentfulPaint":3398,"totalBlockingTime":71.5,"cumulativeLayoutShift":0.0957146295169947,"timeToInteractive":2465.5,"maxPotentialFirstInputDelay":83.5,"timeToFirstByte":403,"weight":{"total":216962,"image":102048,"imageCount":2,"script":96660,"scriptCount":33,"document":2297,"font":0,"fontCount":0,"stylesheet":5861,"stylesheetCount":2,"thirdParty":116120,"thirdPartyCount":44},"run":{"number":1,"total":1},"sidequests":{"-weight.total":99,"+weight.total":27,"-weight.document":49,"+weight.document":76,"-weight.script":70,"+weight.script":6,"-weight.image":49,"+weight.image":22,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":84,"-totalBlockingTime":24,"-largestContentfulPaint":115},"axe":{"passes":526,"violations":20},"previousRanks":{"hundos":93,"performance":114,"accessibility":84,"cumulative":94},"hash":"bc4cfec1"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/mobile11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/mobile11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/mobile11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Build modern mobile website and android app with mobile11ty eleventy feat ionic
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/ianrose/deventy" class="elv-externalexempt" title="deventy">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fianrose%2Fdeventy/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/ianrose/deventy" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">deventy</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/ianrose/deventy" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fianrose%2Fdeventy/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/ianrose/deventy" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/ianrose/deventy" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/ianrose/deventy" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A minimal 11ty starting point for building static websites with modern tools.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://agilitycms-eleventy-starter-2020.vercel.app/" class="elv-externalexempt" title="Eleventy-AgilityCMS-Starter-Blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fagility%2Fagilitycms-eleventy-starter-2020/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/agility/agilitycms-eleventy-starter-2020" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy-AgilityCMS-Starter-Blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://agilitycms-eleventy-starter-2020.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fagilitycms-eleventy-starter-2020.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/agility/agilitycms-eleventy-starter-2020" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/agility/agilitycms-eleventy-starter-2020" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/agility/agilitycms-eleventy-starter-2020" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter blog using Eleventy and powered by Agility CMS with full page and module management. Uses TailwindCSS and Alpine.js.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-portway-starter.netlify.app/" class="elv-externalexempt" title="Eleventy Portway Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fashur%2Feleventy-portway-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/ashur/eleventy-portway-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Portway Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-portway-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-portway-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-portway-starter.netlify.app/","requestedUrl":"https://eleventy-portway-starter.netlify.app/","timestamp":1708021137453,"ranks":{"hundos":59,"performance":73,"accessibility":66,"cumulative":59},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":1,"bestPractices":0.96,"seo":1,"total":395},"firstContentfulPaint":1215,"firstMeaningfulPaint":1215,"speedIndex":1313.0778000004589,"largestContentfulPaint":1935,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1215,"maxPotentialFirstInputDelay":50,"timeToFirstByte":405,"weight":{"total":5442,"image":0,"imageCount":7,"script":0,"scriptCount":0,"document":5442,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":7},"run":{"number":1,"total":1},"sidequests":{"-weight.total":23,"+weight.total":103,"-weight.document":97,"+weight.document":28,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":85,"-totalBlockingTime":1,"-largestContentfulPaint":84},"axe":{"passes":270,"violations":3},"previousRanks":{"hundos":58,"performance":17,"accessibility":66,"cumulative":58},"hash":"6bcf83e2"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/ashur/eleventy-portway-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/ashur/eleventy-portway-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/ashur/eleventy-portway-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter template for building a blog with Eleventy and Portway
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://twelvety.netlify.app/" class="elv-externalexempt" title="Twelvety">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fgregives%2Ftwelvety/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/gregives/twelvety" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Twelvety</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://twelvety.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ftwelvety.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://twelvety.netlify.app/","requestedUrl":"https://twelvety.netlify.app/","timestamp":1708021195224,"ranks":{"hundos":12,"performance":14,"accessibility":29,"cumulative":6},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":923,"firstMeaningfulPaint":923,"speedIndex":923,"largestContentfulPaint":1179,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":923,"maxPotentialFirstInputDelay":37,"timeToFirstByte":189,"weight":{"total":49238,"image":45422,"imageCount":2,"script":508,"scriptCount":1,"document":1974,"font":0,"fontCount":0,"stylesheet":1334,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":62,"+weight.total":64,"-weight.document":41,"+weight.document":84,"-weight.script":5,"+weight.script":71,"-weight.image":41,"+weight.image":30,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":45,"-totalBlockingTime":1,"-largestContentfulPaint":57},"axe":{"passes":93,"violations":0},"previousRanks":{"hundos":12,"performance":29,"accessibility":29,"cumulative":6},"hash":"c749a32b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/gregives/twelvety" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/gregives/twelvety" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/gregives/twelvety" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Twelvety is an Eleventy starter project built to be fast, with component architecture, CSS & JS pipelines, a responsive picture shortcode with WebP support and more
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/kmelve/eleventy-sanity-blog-boilerplate" class="elv-externalexempt" title="eleventy-sanity-blog-boilerplate">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fkmelve%2Feleventy-sanity-blog-boilerplate/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/kmelve/eleventy-sanity-blog-boilerplate" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-sanity-blog-boilerplate</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/kmelve/eleventy-sanity-blog-boilerplate" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fkmelve%2Feleventy-sanity-blog-boilerplate/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/kmelve/eleventy-sanity-blog-boilerplate" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/kmelve/eleventy-sanity-blog-boilerplate" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/kmelve/eleventy-sanity-blog-boilerplate" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An eleventy + headless CMS blog boilerplate. Includes Sanity Studio, quick start, config and instructions for deploying on Netlify and `now`.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://xenodochial-morse-1c8f1c.netlify.app/" class="elv-externalexempt" title="11ty-hbs-webpack">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fuuki%2F11ty-hbs-webpack/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/uuki/11ty-hbs-webpack" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-hbs-webpack</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://xenodochial-morse-1c8f1c.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fxenodochial-morse-1c8f1c.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://xenodochial-morse-1c8f1c.netlify.app/","requestedUrl":"https://xenodochial-morse-1c8f1c.netlify.app/","timestamp":1708021066211,"ranks":{"hundos":25,"performance":43,"accessibility":40,"cumulative":12},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1123.5,"firstMeaningfulPaint":1123.5,"speedIndex":1295.9010560393333,"largestContentfulPaint":1123.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.00016400800591850738,"timeToInteractive":1123.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":22,"weight":{"total":10322,"image":5577,"imageCount":1,"script":516,"scriptCount":1,"document":1221,"font":982,"fontCount":1,"stylesheet":1045,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":35,"+weight.total":91,"-weight.document":21,"+weight.document":104,"-weight.script":6,"+weight.script":70,"-weight.image":20,"+weight.image":51,"-weight.font":1,"+weight.font":38,"+weight.fontCount":5,"-timeToFirstByte":4,"-totalBlockingTime":1,"-largestContentfulPaint":53},"axe":{"passes":38,"violations":0},"previousRanks":{"hundos":24,"performance":37,"accessibility":40,"cumulative":14},"hash":"fb0c6d9f"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/uuki/11ty-hbs-webpack" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/uuki/11ty-hbs-webpack" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/uuki/11ty-hbs-webpack" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Eleventy with Handlebars(support asynchronous helper) and Webpack boilerplate.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://ta11y.app/" class="elv-externalexempt" title="ta11y">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FMarkBuskbjerg%2Fta11y/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/MarkBuskbjerg/ta11y" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">ta11y</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://ta11y.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fta11y.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://ta11y.app/","requestedUrl":"https://ta11y.app/","timestamp":1708021186777,"ranks":{"hundos":43,"performance":76,"accessibility":28,"cumulative":42},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":1,"bestPractices":1,"seo":1,"total":399},"firstContentfulPaint":1281,"firstMeaningfulPaint":1733.5,"speedIndex":1595.1638210477481,"largestContentfulPaint":2186,"totalBlockingTime":0,"cumulativeLayoutShift":0.0006192226757279776,"timeToInteractive":1733.5,"maxPotentialFirstInputDelay":50,"timeToFirstByte":328,"weight":{"total":27658,"image":0,"imageCount":0,"script":17323,"scriptCount":1,"document":10335,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":17323,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":54,"+weight.total":72,"-weight.document":114,"+weight.document":11,"-weight.script":53,"+weight.script":23,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":60,"-totalBlockingTime":1,"-largestContentfulPaint":92},"axe":{"passes":93,"violations":0},"previousRanks":{"hundos":49,"performance":89,"accessibility":28,"cumulative":48},"hash":"4fc52758"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/MarkBuskbjerg/ta11y" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/MarkBuskbjerg/ta11y" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/MarkBuskbjerg/ta11y" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An 11ty starter template with posts and pages using Tailwind CSS and AlpineJS and features like draft and scheduled content
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://hidegh.github.io/jamstack-eleventy-custom/" class="elv-externalexempt" title="1st Blog Template on 11ty with All-In Blogging Features">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fhidegh%2Fjamstack-eleventy-custom%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/hidegh/jamstack-eleventy-custom/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">1st Blog Template on 11ty with All-In Blogging Features</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://hidegh.github.io/jamstack-eleventy-custom/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fhidegh.github.io%2Fjamstack-eleventy-custom%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://reflectivetechconsulting.com/jamstack-eleventy-custom/","requestedUrl":"https://hidegh.github.io/jamstack-eleventy-custom/","timestamp":1708021100949,"ranks":{"hundos":124,"performance":123,"accessibility":124,"cumulative":124},"lighthouse":{"version":"11.4.0","performance":0.66,"accessibility":0.71,"bestPractices":0.96,"seo":0.93,"total":326},"firstContentfulPaint":5281,"firstMeaningfulPaint":5281,"speedIndex":5281,"largestContentfulPaint":5731,"totalBlockingTime":0,"cumulativeLayoutShift":0.003293726779239247,"timeToInteractive":5303.25,"maxPotentialFirstInputDelay":59,"timeToFirstByte":100,"weight":{"total":508642,"image":36988,"imageCount":1,"script":120484,"scriptCount":15,"document":17017,"font":197646,"fontCount":4,"stylesheet":114886,"stylesheetCount":11,"thirdParty":384480,"thirdPartyCount":26},"run":{"number":1,"total":1},"sidequests":{"-weight.total":113,"+weight.total":13,"-weight.document":120,"+weight.document":5,"-weight.script":71,"+weight.script":5,"-weight.image":37,"+weight.image":34,"-weight.font":35,"+weight.font":4,"+weight.fontCount":2,"-timeToFirstByte":30,"-totalBlockingTime":1,"-largestContentfulPaint":121},"axe":{"passes":2229,"violations":80},"previousRanks":{"hundos":123,"performance":123,"accessibility":124,"cumulative":123},"hash":"e9bc084f"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/hidegh/jamstack-eleventy-custom/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/hidegh/jamstack-eleventy-custom/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/hidegh/jamstack-eleventy-custom" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Full featured BLOGGING template - supporting: hierarchical categories, images in post folder, searching inside blogs, deployment, etc...all built up incrementally from the ground!
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/Andrewrico/Jam11ty" class="elv-externalexempt" title="Jam11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FAndrewrico%2FJam11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Andrewrico/Jam11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Jam11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/Andrewrico/Jam11ty" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2FAndrewrico%2FJam11ty/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Andrewrico/Jam11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Andrewrico/Jam11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Andrewrico/Jam11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty Started Theme for Headless Ecommerce
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://gitlab.com/alexmozaidze/11ty-template-sensible" class="elv-externalexempt" title="11ty-sensible">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgitlab.com%2Falexmozaidze%2F11ty-template-sensible/" width="150" height="150" alt="IndieWeb Avatar for https://gitlab.com/alexmozaidze/11ty-template-sensible" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-sensible</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://gitlab.com/alexmozaidze/11ty-template-sensible" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgitlab.com%2Falexmozaidze%2F11ty-template-sensible/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://gitlab.com/alexmozaidze/11ty-template-sensible" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://gitlab.com/alexmozaidze/11ty-template-sensible" class="elv-externalexempt">Deploy to Netlify</a></li>
</ul>
<div class="sites-site-description">11ty with sensible defaults. SCSS, excerpts, minification and more!
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://smix.netlify.app/" class="elv-externalexempt" title="Smix">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FMaybeThisIsRu%2Fsmix-eleventy-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/MaybeThisIsRu/smix-eleventy-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Smix</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://smix.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fsmix.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://smix.netlify.app/","requestedUrl":"https://smix.netlify.app/","timestamp":1708021184554,"ranks":{"hundos":57,"performance":74,"accessibility":31,"cumulative":57},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":1,"bestPractices":0.96,"seo":1,"total":395},"firstContentfulPaint":1078.5,"firstMeaningfulPaint":1078.5,"speedIndex":1431.3781920824051,"largestContentfulPaint":1867,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1078.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":288,"weight":{"total":19129,"image":9050,"imageCount":1,"script":3174,"scriptCount":2,"document":1575,"font":0,"fontCount":0,"stylesheet":4631,"stylesheetCount":1,"thirdParty":2233,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":47,"+weight.total":79,"-weight.document":33,"+weight.document":92,"-weight.script":29,"+weight.script":47,"-weight.image":22,"+weight.image":49,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":54,"-totalBlockingTime":1,"-largestContentfulPaint":80},"axe":{"passes":73,"violations":0},"previousRanks":{"hundos":57,"performance":39,"accessibility":31,"cumulative":56},"hash":"3c7939b0"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/MaybeThisIsRu/smix-eleventy-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/MaybeThisIsRu/smix-eleventy-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/MaybeThisIsRu/smix-eleventy-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A standards-respecting starter kit for Eleventy. Go Indie. Uses PostCSS and esbuild.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventree.netlify.app/" class="elv-externalexempt" title="Eleventree">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FTed2xmen%2Feleventree/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Ted2xmen/eleventree" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventree</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventree.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventree.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventree.netlify.app/","requestedUrl":"https://eleventree.netlify.app/","timestamp":1708021053829,"ranks":{"hundos":115,"performance":115,"accessibility":119,"cumulative":116},"lighthouse":{"version":"11.4.0","performance":0.83,"accessibility":0.83,"bestPractices":1,"seo":1,"total":366},"firstContentfulPaint":3394,"firstMeaningfulPaint":3394,"speedIndex":3394,"largestContentfulPaint":3641,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":3394,"maxPotentialFirstInputDelay":16,"timeToFirstByte":428,"weight":{"total":274443,"image":29056,"imageCount":2,"script":88232,"scriptCount":1,"document":2691,"font":131396,"fontCount":2,"stylesheet":23068,"stylesheetCount":2,"thirdParty":266682,"thirdPartyCount":7},"run":{"number":1,"total":1},"sidequests":{"-weight.total":103,"+weight.total":23,"-weight.document":62,"+weight.document":63,"-weight.script":69,"+weight.script":7,"-weight.image":33,"+weight.image":38,"-weight.font":31,"+weight.font":8,"+weight.fontCount":4,"-timeToFirstByte":90,"-totalBlockingTime":1,"-largestContentfulPaint":118},"axe":{"passes":114,"violations":17},"previousRanks":{"hundos":114,"performance":116,"accessibility":120,"cumulative":115},"hash":"eb893c28"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Ted2xmen/eleventree" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Ted2xmen/eleventree" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Ted2xmen/eleventree" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Link gallery for developers
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventyduo.netlify.app/" class="elv-externalexempt" title="Eleventy Duo">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fyinkakun%2Feleventy-duo/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/yinkakun/eleventy-duo" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Duo</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventyduo.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventyduo.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/yinkakun/eleventy-duo" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/yinkakun/eleventy-duo" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/yinkakun/eleventy-duo" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Eleventy Duo is a production-ready and SEO-friendly starter for building a blog or personal website. Comes with a customizable duotone theme, minimal and clean design.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-fylgja.netlify.app/" class="elv-externalexempt" title="Eleventy Fylgja Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Ffylgja%2F11ty-starter-template/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/fylgja/11ty-starter-template" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Fylgja Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-fylgja.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-fylgja.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-fylgja.netlify.app/","requestedUrl":"https://11ty-fylgja.netlify.app/","timestamp":1708021125417,"ranks":{"hundos":66,"performance":75,"accessibility":96,"cumulative":66},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":0.94,"bestPractices":1,"seo":1,"total":393},"firstContentfulPaint":988.5,"firstMeaningfulPaint":988.5,"speedIndex":1439.9121495437657,"largestContentfulPaint":1234.5,"totalBlockingTime":93.5,"cumulativeLayoutShift":0,"timeToInteractive":1182,"maxPotentialFirstInputDelay":147,"timeToFirstByte":427,"weight":{"total":33072,"image":15346,"imageCount":2,"script":4599,"scriptCount":1,"document":3819,"font":0,"fontCount":0,"stylesheet":5762,"stylesheetCount":1,"thirdParty":1795,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":56,"+weight.total":70,"-weight.document":81,"+weight.document":44,"-weight.script":35,"+weight.script":41,"-weight.image":26,"+weight.image":45,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":89,"-totalBlockingTime":26,"-largestContentfulPaint":61},"axe":{"passes":245,"violations":2},"previousRanks":{"hundos":62,"performance":59,"accessibility":96,"cumulative":62},"hash":"7c03b420"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/fylgja/11ty-starter-template" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/fylgja/11ty-starter-template" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/fylgja/11ty-starter-template?terminal=start" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty starter template build using Fylgja CSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/jeremydaly/eleventy-tailwind-template" class="elv-externalexempt" title="Eleventy Tailwind Template">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjeremydaly%2Feleventy-tailwind-template/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jeremydaly/eleventy-tailwind-template" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Tailwind Template</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/jeremydaly/eleventy-tailwind-template" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fjeremydaly%2Feleventy-tailwind-template/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jeremydaly/eleventy-tailwind-template" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jeremydaly/eleventy-tailwind-template" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jeremydaly/eleventy-tailwind-template" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Starter template for building Eleventy static sites with Tailwind CSS automatically generating the corresponding styles and writing them to a static CSS file.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-minimal-developer.netlify.app/" class="elv-externalexempt" title="Minimal Developer">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FRamkarthik%2Fminimal-developer/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Ramkarthik/minimal-developer" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Minimal Developer</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-minimal-developer.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-minimal-developer.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-minimal-developer.netlify.app/","requestedUrl":"https://eleventy-minimal-developer.netlify.app/","timestamp":1708021066207,"ranks":{"hundos":88,"performance":9,"accessibility":105,"cumulative":86},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.91,"bestPractices":1,"seo":0.98,"total":389},"firstContentfulPaint":879.5,"firstMeaningfulPaint":879.5,"speedIndex":879.5,"largestContentfulPaint":879.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":879.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":125,"weight":{"total":2529,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1121,"font":0,"fontCount":0,"stylesheet":1408,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":6,"+weight.total":120,"-weight.document":15,"+weight.document":110,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":34,"-totalBlockingTime":1,"-largestContentfulPaint":11},"axe":{"passes":94,"violations":1},"previousRanks":{"hundos":87,"performance":41,"accessibility":105,"cumulative":85},"hash":"c275e976"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Ramkarthik/minimal-developer" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Ramkarthik/minimal-developer" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Ramkarthik/minimal-developer" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A very minimal developer blog theme built with Eleventy
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://yatas.netlify.app/" class="elv-externalexempt" title="YATAS">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fyhaefliger%2Fyatas/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/yhaefliger/yatas" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">YATAS</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://yatas.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fyatas.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://yatas.netlify.app/","requestedUrl":"https://yatas.netlify.app/","timestamp":1708021200912,"ranks":{"hundos":17,"performance":20,"accessibility":71,"cumulative":35},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":875.5,"firstMeaningfulPaint":875.5,"speedIndex":1001.391199998185,"largestContentfulPaint":1066.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":875.5,"maxPotentialFirstInputDelay":48,"timeToFirstByte":122,"weight":{"total":18952,"image":1931,"imageCount":1,"script":14100,"scriptCount":1,"document":1170,"font":0,"fontCount":0,"stylesheet":1751,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":46,"+weight.total":80,"-weight.document":18,"+weight.document":107,"-weight.script":48,"+weight.script":28,"-weight.image":8,"+weight.image":63,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":33,"-totalBlockingTime":1,"-largestContentfulPaint":47},"axe":{"passes":10,"violations":3},"previousRanks":{"hundos":14,"performance":1,"accessibility":71,"cumulative":33},"hash":"23a6121"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/yhaefliger/yatas" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/yhaefliger/yatas" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/yhaefliger/yatas" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Yet Another Tailwind Apline Starter. Tailwind v2 compiled in JIT mode and Alpine v3.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://bucolic-pegasus-5dab5c.netlify.app/" class="elv-externalexempt" title="11ty-portfolio-template">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Faadityavaze%2F11ty-portfolio-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/aadityavaze/11ty-portfolio-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-portfolio-template</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://bucolic-pegasus-5dab5c.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbucolic-pegasus-5dab5c.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://bucolic-pegasus-5dab5c.netlify.app/","requestedUrl":"https://bucolic-pegasus-5dab5c.netlify.app/","timestamp":1708021078771,"ranks":{"hundos":118,"performance":88,"accessibility":120,"cumulative":118},"lighthouse":{"version":"11.4.0","performance":0.98,"accessibility":0.81,"bestPractices":1,"seo":0.83,"total":362},"firstContentfulPaint":1682,"firstMeaningfulPaint":1682,"speedIndex":1956.6968999999947,"largestContentfulPaint":1948,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1682,"maxPotentialFirstInputDelay":16,"timeToFirstByte":376,"weight":{"total":526046,"image":470557,"imageCount":5,"script":22741,"scriptCount":1,"document":3703,"font":0,"fontCount":0,"stylesheet":17090,"stylesheetCount":2,"thirdParty":12739,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":115,"+weight.total":11,"-weight.document":79,"+weight.document":46,"-weight.script":56,"+weight.script":20,"-weight.image":61,"+weight.image":10,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":75,"-totalBlockingTime":1,"-largestContentfulPaint":85},"axe":{"passes":112,"violations":11},"previousRanks":{"hundos":116,"performance":91,"accessibility":121,"cumulative":116},"hash":"11f5b820"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/aadityavaze/11ty-portfolio-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/aadityavaze/11ty-portfolio-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/aadityavaze/11ty-portfolio-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty portfolio powered by bootstrap and nunjucks
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://kailoon.com/" class="elv-externalexempt" title="kailoon.com">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fkailoon%2Fkailoon.com%23readme/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/kailoon/kailoon.com#readme" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">kailoon.com</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://kailoon.com" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fkailoon.com/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/kailoon/kailoon.com#readme" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/kailoon/kailoon.com#readme" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/kailoon/kailoon.com#readme" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">My simple portfolio blog built using 11th and tailwindcss.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://reeseschultz.github.io/11r/" class="elv-externalexempt" title="11r">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Freeseschultz%2F11r%23readme/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/reeseschultz/11r#readme" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11r</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://reeseschultz.github.io/11r/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Freeseschultz.github.io%2F11r%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://reeseschultz.github.io/11r/","requestedUrl":"https://reeseschultz.github.io/11r/","timestamp":1708021054236,"ranks":{"hundos":106,"performance":106,"accessibility":98,"cumulative":106},"lighthouse":{"version":"11.4.0","performance":0.91,"accessibility":0.94,"bestPractices":1,"seo":0.91,"total":376},"firstContentfulPaint":2788,"firstMeaningfulPaint":2788,"speedIndex":2788,"largestContentfulPaint":2788,"totalBlockingTime":0,"cumulativeLayoutShift":0.029911365010882908,"timeToInteractive":2788,"maxPotentialFirstInputDelay":16,"timeToFirstByte":78,"weight":{"total":98382,"image":0,"imageCount":0,"script":4970,"scriptCount":2,"document":2953,"font":80787,"fontCount":3,"stylesheet":9115,"stylesheetCount":3,"thirdParty":98382,"thirdPartyCount":10},"run":{"number":1,"total":1},"sidequests":{"-weight.total":86,"+weight.total":40,"-weight.document":66,"+weight.document":59,"-weight.script":36,"+weight.script":40,"-weight.image":1,"+weight.image":71,"-weight.font":24,"+weight.font":15,"+weight.fontCount":3,"-timeToFirstByte":28,"-totalBlockingTime":1,"-largestContentfulPaint":105},"axe":{"passes":171,"violations":12},"previousRanks":{"hundos":108,"performance":107,"accessibility":98,"cumulative":107},"hash":"47e6f08e"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/reeseschultz/11r#readme" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/reeseschultz/11r#readme" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/reeseschultz/11r#readme" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A blog template and theme using 11ty, TailwindCSS, Rollup, Prism syntax highlighting, etc.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/craigbuckler/11ty-starter" class="elv-externalexempt" title="11ty-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcraigbuckler%2F11ty-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/craigbuckler/11ty-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/craigbuckler/11ty-starter" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fcraigbuckler%2F11ty-starter/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/craigbuckler/11ty-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/craigbuckler/11ty-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/craigbuckler/11ty-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Demonstration static site and blog using Eleventy as a build tool for all content, CSS, JavaScript, and images.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-dot-js-blog.netlify.app/" class="elv-externalexempt" title="🍦.11ty.js">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgitlab.com%2Freubenlillie%2Feleventy-dot-js-blog%23readme/" width="150" height="150" alt="IndieWeb Avatar for https://gitlab.com/reubenlillie/eleventy-dot-js-blog#readme" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">🍦.11ty.js</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-dot-js-blog.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-dot-js-blog.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-dot-js-blog.netlify.app/","requestedUrl":"https://eleventy-dot-js-blog.netlify.app/","timestamp":1708021123565,"ranks":{"hundos":29,"performance":25,"accessibility":10,"cumulative":15},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1094,"firstMeaningfulPaint":1094,"speedIndex":1094,"largestContentfulPaint":1094,"totalBlockingTime":6.5,"cumulativeLayoutShift":0,"timeToInteractive":1125.5,"maxPotentialFirstInputDelay":149,"timeToFirstByte":183,"weight":{"total":6666,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":6666,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":27,"+weight.total":99,"-weight.document":102,"+weight.document":23,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":42,"-totalBlockingTime":7,"-largestContentfulPaint":51},"axe":{"passes":206,"violations":0},"previousRanks":{"hundos":29,"performance":49,"accessibility":10,"cumulative":18},"hash":"173a2d2e"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://gitlab.com/reubenlillie/eleventy-dot-js-blog#readme" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://gitlab.com/reubenlillie/eleventy-dot-js-blog#readme" class="elv-externalexempt">Deploy to Netlify</a></li>
</ul>
<div class="sites-site-description">How to build an extensible blog with JavaScript templates (*.11ty.js files).
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://fundamenty.netlify.app/" class="elv-externalexempt" title="Fundamenty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcreasoft-dev%2Ffundamenty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/creasoft-dev/fundamenty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Fundamenty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://fundamenty.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ffundamenty.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/creasoft-dev/fundamenty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/creasoft-dev/fundamenty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/creasoft-dev/fundamenty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Multi-language support, SEO-friendly, GitHub/GitLab Pages-ready. TailwindCSS+Webpack.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://mandrasch.github.io/11ty-plain-bootstrap5/" class="elv-externalexempt" title="11ty-plain-bootstrap5">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmandrasch%2F11ty-plain-bootstrap5/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mandrasch/11ty-plain-bootstrap5" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-plain-bootstrap5</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://mandrasch.github.io/11ty-plain-bootstrap5/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmandrasch.github.io%2F11ty-plain-bootstrap5%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://mandrasch.github.io/11ty-plain-bootstrap5/","requestedUrl":"https://mandrasch.github.io/11ty-plain-bootstrap5/","timestamp":1708021077074,"ranks":{"hundos":5,"performance":39,"accessibility":14,"cumulative":2},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1259.5,"firstMeaningfulPaint":1259.5,"speedIndex":1259.5,"largestContentfulPaint":1334.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1259.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":56,"weight":{"total":104121,"image":43203,"imageCount":1,"script":24453,"scriptCount":1,"document":5261,"font":0,"fontCount":0,"stylesheet":31204,"stylesheetCount":1,"thirdParty":104121,"thirdPartyCount":4},"run":{"number":1,"total":1},"sidequests":{"-weight.total":88,"+weight.total":38,"-weight.document":95,"+weight.document":30,"-weight.script":58,"+weight.script":18,"-weight.image":39,"+weight.image":32,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":18,"-totalBlockingTime":1,"-largestContentfulPaint":67},"axe":{"passes":167,"violations":0},"previousRanks":{"hundos":4,"performance":33,"accessibility":14,"cumulative":2},"hash":"58956d6a"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mandrasch/11ty-plain-bootstrap5" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mandrasch/11ty-plain-bootstrap5" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mandrasch/11ty-plain-bootstrap5" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Simple plain starter with 11ty and Bootstrap5 (via npm)
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://cuteblog.pages.dev/" class="elv-externalexempt" title="Cuteblog11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fcuteblog11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/cuteblog11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Cuteblog11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://cuteblog.pages.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcuteblog.pages.dev%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://cuteblog.pages.dev/","requestedUrl":"https://cuteblog.pages.dev/","timestamp":1708021107609,"ranks":{"hundos":85,"performance":100,"accessibility":13,"cumulative":85},"lighthouse":{"version":"11.4.0","performance":0.93,"accessibility":1,"bestPractices":0.96,"seo":1,"total":389},"firstContentfulPaint":2537,"firstMeaningfulPaint":2537,"speedIndex":2986.178591880798,"largestContentfulPaint":2537,"totalBlockingTime":0,"cumulativeLayoutShift":0.05882642653746433,"timeToInteractive":2537,"maxPotentialFirstInputDelay":16,"timeToFirstByte":132,"weight":{"total":86122,"image":30705,"imageCount":3,"script":0,"scriptCount":0,"document":3172,"font":22187,"fontCount":1,"stylesheet":30058,"stylesheetCount":4,"thirdParty":81880,"thirdPartyCount":7},"run":{"number":1,"total":1},"sidequests":{"-weight.total":81,"+weight.total":45,"-weight.document":70,"+weight.document":55,"-weight.script":1,"+weight.script":76,"-weight.image":34,"+weight.image":37,"-weight.font":8,"+weight.font":31,"+weight.fontCount":5,"-timeToFirstByte":36,"-totalBlockingTime":1,"-largestContentfulPaint":99},"axe":{"passes":173,"violations":0},"previousRanks":{"hundos":94,"performance":110,"accessibility":13,"cumulative":92},"hash":"e394e00d"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/cuteblog11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/cuteblog11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/cuteblog11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Cute blog for blogger with auto SEO.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventastic.netlify.app/" class="elv-externalexempt" title="eleventastic">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmaxboeck%2Feleventastic/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/maxboeck/eleventastic" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventastic</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventastic.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventastic.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventastic.netlify.app/","requestedUrl":"https://eleventastic.netlify.app/","timestamp":1708021111141,"ranks":{"hundos":24,"performance":38,"accessibility":32,"cumulative":11},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":929,"firstMeaningfulPaint":929,"speedIndex":1254.6966000080108,"largestContentfulPaint":929,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":929,"maxPotentialFirstInputDelay":43,"timeToFirstByte":482,"weight":{"total":10168,"image":0,"imageCount":0,"script":4484,"scriptCount":1,"document":3014,"font":0,"fontCount":0,"stylesheet":2670,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":33,"+weight.total":93,"-weight.document":69,"+weight.document":56,"-weight.script":34,"+weight.script":42,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":102,"-totalBlockingTime":1,"-largestContentfulPaint":22},"axe":{"passes":72,"violations":0},"previousRanks":{"hundos":26,"performance":51,"accessibility":32,"cumulative":16},"hash":"a9676356"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/maxboeck/eleventastic" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/maxboeck/eleventastic" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/maxboeck/eleventastic" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple Eleventy Starter Kit, the Max Böck base for all new 11ty projects.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://simplejournal.netlify.app/" class="elv-externalexempt" title="Simple Journal">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fscottishstoater%2Fsimple-journal/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/scottishstoater/simple-journal" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Simple Journal</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://simplejournal.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fsimplejournal.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://simplejournal.netlify.app/","requestedUrl":"https://simplejournal.netlify.app/","timestamp":1708021180528,"ranks":{"hundos":93,"performance":19,"accessibility":111,"cumulative":93},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.9,"bestPractices":1,"seo":0.97,"total":387},"firstContentfulPaint":995,"firstMeaningfulPaint":995,"speedIndex":995,"largestContentfulPaint":995,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":995,"maxPotentialFirstInputDelay":50,"timeToFirstByte":211,"weight":{"total":6715,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":6715,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":28,"+weight.total":98,"-weight.document":103,"+weight.document":22,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":46,"-totalBlockingTime":1,"-largestContentfulPaint":36},"axe":{"passes":68,"violations":6},"previousRanks":{"hundos":91,"performance":43,"accessibility":111,"cumulative":90},"hash":"8e1849f0"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/scottishstoater/simple-journal" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/scottishstoater/simple-journal" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/scottishstoater/simple-journal" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple journal/photo log website built on top of 11ty.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://cloudcannon.axcora.com/" class="elv-externalexempt" title="cloudcannon11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fcloudcannon-11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/cloudcannon-11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">cloudcannon11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://cloudcannon.axcora.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcloudcannon.axcora.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://cloudcannon.axcora.com/","requestedUrl":"https://cloudcannon.axcora.com/","timestamp":1708021106482,"ranks":{"hundos":105,"performance":119,"accessibility":46,"cumulative":105},"lighthouse":{"version":"11.4.0","performance":0.77,"accessibility":1,"bestPractices":1,"seo":1,"total":377},"firstContentfulPaint":2859,"firstMeaningfulPaint":2859,"speedIndex":3480.8643640637397,"largestContentfulPaint":2859,"totalBlockingTime":0,"cumulativeLayoutShift":0.25253527743476456,"timeToInteractive":2859,"maxPotentialFirstInputDelay":16,"timeToFirstByte":304,"weight":{"total":167745,"image":116562,"imageCount":12,"script":0,"scriptCount":0,"document":2452,"font":13519,"fontCount":1,"stylesheet":35212,"stylesheetCount":2,"thirdParty":13519,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":95,"+weight.total":31,"-weight.document":55,"+weight.document":70,"-weight.script":1,"+weight.script":76,"-weight.image":50,"+weight.image":21,"-weight.font":3,"+weight.font":36,"+weight.fontCount":5,"-timeToFirstByte":57,"-totalBlockingTime":1,"-largestContentfulPaint":108},"axe":{"passes":240,"violations":1},"previousRanks":{"hundos":95,"performance":115,"accessibility":46,"cumulative":95},"hash":"2154f44e"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/cloudcannon-11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/cloudcannon-11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/cloudcannon-11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Simple Starter Blog 11ty integration with cloudcannon headless cms
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="http://ido.g.gitlab.io/idog-blog-daisyui/" class="elv-externalexempt" title="Tisot">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fidogal%2Ftisot-blog-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/idogal/tisot-blog-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Tisot</span>
<div class="sites-screenshot-container"><img alt="Screenshot of http://ido.g.gitlab.io/idog-blog-daisyui/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/http%3A%2F%2Fido.g.gitlab.io%2Fidog-blog-daisyui%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"http://ido.g.gitlab.io/idog-blog-daisyui/","requestedUrl":"http://ido.g.gitlab.io/idog-blog-daisyui/","timestamp":1708021199615,"ranks":{"hundos":122,"performance":116,"accessibility":47,"cumulative":122},"lighthouse":{"version":"11.4.0","performance":0.81,"accessibility":1,"bestPractices":0.81,"seo":0.92,"total":354},"firstContentfulPaint":2403.5,"firstMeaningfulPaint":2403.5,"speedIndex":3130.609695942402,"largestContentfulPaint":4414,"totalBlockingTime":22,"cumulativeLayoutShift":0.0011357360902770472,"timeToInteractive":4331.5,"maxPotentialFirstInputDelay":94,"timeToFirstByte":471,"weight":{"total":452470,"image":254555,"imageCount":4,"script":20716,"scriptCount":3,"document":15082,"font":54514,"fontCount":2,"stylesheet":107603,"stylesheetCount":2,"thirdParty":18539,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":111,"+weight.total":15,"-weight.document":119,"+weight.document":6,"-weight.script":55,"+weight.script":21,"-weight.image":57,"+weight.image":14,"-weight.font":20,"+weight.font":19,"+weight.fontCount":4,"-timeToFirstByte":100,"-totalBlockingTime":11,"-largestContentfulPaint":120},"axe":{"passes":232,"violations":1},"previousRanks":{"hundos":119,"performance":117,"accessibility":47,"cumulative":120},"hash":"15e7fe06"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/idogal/tisot-blog-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/idogal/tisot-blog-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/idogal/tisot-blog-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A blog template and a starter kit, based on Eleventy and TailwindCSS/daisyUI.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://vocal-licorice-a3b377.netlify.app/" class="elv-externalexempt" title="11ty-TailScript">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2F4lador%2F11ty-tailscript/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/4lador/11ty-tailscript" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-TailScript</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://vocal-licorice-a3b377.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fvocal-licorice-a3b377.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/4lador/11ty-tailscript" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/4lador/11ty-tailscript" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/4lador/11ty-tailscript" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Minimalist, ready to use Eleventy starter project that embarks Tailwind, PostCSS (nesting, imports, media queries, minify), Fontawesome, Webpack, Typescript and Vite
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-blog-njk-starter.netlify.app/" class="elv-externalexempt" title="11ty-blog-njk-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fhttpsterio%2F11ty-blog-njk-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/httpsterio/11ty-blog-njk-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-blog-njk-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-blog-njk-starter.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-blog-njk-starter.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/httpsterio/11ty-blog-njk-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/httpsterio/11ty-blog-njk-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/httpsterio/11ty-blog-njk-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Forked from Rong Ying's starter, now with njk and a few tiny fixes
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://roxo-eleventy.staticmania.com/" class="elv-externalexempt" title="roxo-eleventy">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FStaticMania%2Froxo-eleventy/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/StaticMania/roxo-eleventy" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">roxo-eleventy</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://roxo-eleventy.staticmania.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Froxo-eleventy.staticmania.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://roxo-eleventy.staticmania.com/","requestedUrl":"https://roxo-eleventy.staticmania.com/","timestamp":1708021185424,"ranks":{"hundos":125,"performance":121,"accessibility":125,"cumulative":125},"lighthouse":{"version":"11.4.0","performance":0.7,"accessibility":0.7,"bestPractices":0.96,"seo":0.82,"total":318},"firstContentfulPaint":2965,"firstMeaningfulPaint":2965,"speedIndex":2965,"largestContentfulPaint":8387,"totalBlockingTime":25.5,"cumulativeLayoutShift":0.004403539974916035,"timeToInteractive":5676,"maxPotentialFirstInputDelay":97,"timeToFirstByte":35,"weight":{"total":1756228,"image":1589105,"imageCount":16,"script":59661,"scriptCount":3,"document":3737,"font":63334,"fontCount":2,"stylesheet":40391,"stylesheetCount":6,"thirdParty":64812,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":124,"+weight.total":2,"-weight.document":80,"+weight.document":45,"-weight.script":64,"+weight.script":12,"-weight.image":69,"+weight.image":2,"-weight.font":22,"+weight.font":17,"+weight.fontCount":4,"-timeToFirstByte":8,"-totalBlockingTime":12,"-largestContentfulPaint":123},"axe":{"passes":385,"violations":55},"previousRanks":{"hundos":124,"performance":121,"accessibility":126,"cumulative":124},"hash":"2cef4933"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/StaticMania/roxo-eleventy" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticMania/roxo-eleventy" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/StaticMania/roxo-eleventy" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Roxo is an 11ty starter project for creative agencies, freelancers, graphic designers, photographers
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://githubbox.com/jhackett1/wp-11ty/" class="elv-externalexempt" title="WP 11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjhackett1%2Fwp-11ty%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jhackett1/wp-11ty/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">WP 11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://githubbox.com/jhackett1/wp-11ty/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithubbox.com%2Fjhackett1%2Fwp-11ty%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jhackett1/wp-11ty/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jhackett1/wp-11ty/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jhackett1/wp-11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A minimal example showing how to use the WordPress API to drive a static Eleventy frontend.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-classic-blog-starter.netlify.app/" class="elv-externalexempt" title="Eleventy Classic Blog Starter (ECBS)">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FTigersWay%2Feleventy-classic-blog-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/TigersWay/eleventy-classic-blog-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Classic Blog Starter (ECBS)</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-classic-blog-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-classic-blog-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-classic-blog-starter.netlify.app/","requestedUrl":"https://eleventy-classic-blog-starter.netlify.app/","timestamp":1708021120982,"ranks":{"hundos":60,"performance":27,"accessibility":94,"cumulative":61},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.94,"bestPractices":1,"seo":1,"total":394},"firstContentfulPaint":937.5,"firstMeaningfulPaint":937.5,"speedIndex":1103.1064160912038,"largestContentfulPaint":937.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.0013355812054135483,"timeToInteractive":937.5,"maxPotentialFirstInputDelay":48,"timeToFirstByte":370,"weight":{"total":229761,"image":117042,"imageCount":2,"script":0,"scriptCount":0,"document":5995,"font":106724,"fontCount":3,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":100,"+weight.total":26,"-weight.document":99,"+weight.document":26,"-weight.script":1,"+weight.script":76,"-weight.image":51,"+weight.image":20,"-weight.font":29,"+weight.font":10,"+weight.fontCount":3,"-timeToFirstByte":73,"-totalBlockingTime":1,"-largestContentfulPaint":24},"axe":{"passes":232,"violations":1},"previousRanks":{"hundos":60,"performance":26,"accessibility":94,"cumulative":61},"hash":"fe24a23b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/TigersWay/eleventy-classic-blog-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/TigersWay/eleventy-classic-blog-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/TigersWay/eleventy-classic-blog-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter template to build a classic `Hyde` blog with Eleventy.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11tyshop.pages.dev/" class="elv-externalexempt" title="11tyshop">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2F11ty-shop/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/11ty-shop" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11tyshop</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11tyshop.pages.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11tyshop.pages.dev%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11tyshop.pages.dev/","requestedUrl":"https://11tyshop.pages.dev/","timestamp":1708021090155,"ranks":{"hundos":83,"performance":94,"accessibility":88,"cumulative":84},"lighthouse":{"version":"11.4.0","performance":0.97,"accessibility":0.97,"bestPractices":0.96,"seo":1,"total":390},"firstContentfulPaint":1334.5,"firstMeaningfulPaint":1334.5,"speedIndex":2136.3738719581365,"largestContentfulPaint":2147,"totalBlockingTime":0,"cumulativeLayoutShift":0.07238579774378479,"timeToInteractive":1334.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":233,"weight":{"total":374244,"image":314001,"imageCount":15,"script":25433,"scriptCount":1,"document":4096,"font":0,"fontCount":0,"stylesheet":30714,"stylesheetCount":2,"thirdParty":25433,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":107,"+weight.total":19,"-weight.document":86,"+weight.document":39,"-weight.script":61,"+weight.script":15,"-weight.image":58,"+weight.image":13,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":48,"-totalBlockingTime":1,"-largestContentfulPaint":90},"axe":{"passes":334,"violations":9},"previousRanks":{"hundos":78,"performance":84,"accessibility":88,"cumulative":81},"hash":"11ebaaa5"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/11ty-shop" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/11ty-shop" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/11ty-shop" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Built modern 11ty Online Shop e-commerce integration with ecwid headless online shop
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-not-so-minimal-blog-starter.netlify.app/" class="elv-externalexempt" title="Eleventy Not So Minimal Blog Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FMangamaui%2Feleventy-not-so-minimal-blog-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/Mangamaui/eleventy-not-so-minimal-blog-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Not So Minimal Blog Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-not-so-minimal-blog-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-not-so-minimal-blog-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-not-so-minimal-blog-starter.netlify.app/","requestedUrl":"https://eleventy-not-so-minimal-blog-starter.netlify.app/","timestamp":1708021077470,"ranks":{"hundos":78,"performance":108,"accessibility":24,"cumulative":77},"lighthouse":{"version":"11.4.0","performance":0.91,"accessibility":1,"bestPractices":1,"seo":1,"total":391},"firstContentfulPaint":2832.5,"firstMeaningfulPaint":2832.5,"speedIndex":2860.427523895979,"largestContentfulPaint":2832.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.00015136554295572786,"timeToInteractive":2832.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":487,"weight":{"total":55062,"image":0,"imageCount":0,"script":1778,"scriptCount":1,"document":1726,"font":47668,"fontCount":1,"stylesheet":2479,"stylesheetCount":2,"thirdParty":48852,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":65,"+weight.total":61,"-weight.document":35,"+weight.document":90,"-weight.script":23,"+weight.script":53,"-weight.image":1,"+weight.image":71,"-weight.font":17,"+weight.font":22,"+weight.fontCount":5,"-timeToFirstByte":103,"-totalBlockingTime":1,"-largestContentfulPaint":107},"axe":{"passes":117,"violations":0},"previousRanks":{"hundos":79,"performance":108,"accessibility":24,"cumulative":78},"hash":"e284fb55"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/Mangamaui/eleventy-not-so-minimal-blog-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/Mangamaui/eleventy-not-so-minimal-blog-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/Mangamaui/eleventy-not-so-minimal-blog-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A blog starter including some key features such as RSS, a sitemap, meta tags for Twitter & OG, image-optimization(eleventy-image), SVG-icon-sprites, Sass and more...
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-m10y.lkmt.us/" class="elv-externalexempt" title="Multiplicity">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Flwojcik%2Feleventy-template-multiplicity/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/lwojcik/eleventy-template-multiplicity" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Multiplicity</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-m10y.lkmt.us/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-m10y.lkmt.us%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-m10y.lkmt.us/","requestedUrl":"https://eleventy-m10y.lkmt.us/","timestamp":1708021076623,"ranks":{"hundos":23,"performance":51,"accessibility":6,"cumulative":10},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":989,"firstMeaningfulPaint":989,"speedIndex":1405.608487984836,"largestContentfulPaint":989,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":989,"maxPotentialFirstInputDelay":16,"timeToFirstByte":268,"weight":{"total":15627,"image":2842,"imageCount":2,"script":1156,"scriptCount":1,"document":3683,"font":0,"fontCount":0,"stylesheet":7946,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":42,"+weight.total":84,"-weight.document":77,"+weight.document":48,"-weight.script":14,"+weight.script":62,"-weight.image":14,"+weight.image":57,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":53,"-totalBlockingTime":1,"-largestContentfulPaint":34},"axe":{"passes":334,"violations":0},"previousRanks":{"hundos":21,"performance":54,"accessibility":6,"cumulative":11},"hash":"b57eb887"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/lwojcik/eleventy-template-multiplicity" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/lwojcik/eleventy-template-multiplicity" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/lwojcik/eleventy-template-multiplicity" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">RSS-based blog aggregator starter pack
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://myonlinecookbook.netlify.app/" class="elv-externalexempt" title="My Online Cookbook">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmaeligg%2Fmy-online-cookbook%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/maeligg/my-online-cookbook/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">My Online Cookbook</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://myonlinecookbook.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fmyonlinecookbook.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://myonlinecookbook.netlify.app/","requestedUrl":"https://myonlinecookbook.netlify.app/","timestamp":1708021174154,"ranks":{"hundos":51,"performance":91,"accessibility":48,"cumulative":52},"lighthouse":{"version":"11.4.0","performance":0.97,"accessibility":1,"bestPractices":1,"seo":1,"total":397},"firstContentfulPaint":1004,"firstMeaningfulPaint":1004,"speedIndex":1335.892382172076,"largestContentfulPaint":2511,"totalBlockingTime":56,"cumulativeLayoutShift":0.002799639693747371,"timeToInteractive":2511,"maxPotentialFirstInputDelay":104,"timeToFirstByte":61,"weight":{"total":273377,"image":83696,"imageCount":2,"script":64890,"scriptCount":2,"document":7191,"font":117600,"fontCount":1,"stylesheet":0,"stylesheetCount":0,"thirdParty":64890,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":102,"+weight.total":24,"-weight.document":108,"+weight.document":17,"-weight.script":67,"+weight.script":9,"-weight.image":48,"+weight.image":23,"-weight.font":30,"+weight.font":9,"+weight.fontCount":5,"-timeToFirstByte":21,"-totalBlockingTime":22,"-largestContentfulPaint":98},"axe":{"passes":144,"violations":1},"previousRanks":{"hundos":46,"performance":83,"accessibility":48,"cumulative":49},"hash":"c1f4aee5"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/maeligg/my-online-cookbook/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/maeligg/my-online-cookbook/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/maeligg/my-online-cookbook" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An easily customisable starter kit to create your own cookbook of online recipes, using Netlify CMS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://distantcam.github.io/elevento/" class="elv-externalexempt" title="Elevento">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdistantcam%2Felevento/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/distantcam/elevento" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Elevento</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://distantcam.github.io/elevento/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdistantcam.github.io%2Felevento%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://distantcam.github.io/elevento/","requestedUrl":"https://distantcam.github.io/elevento/","timestamp":1708021112088,"ranks":{"hundos":84,"performance":96,"accessibility":44,"cumulative":83},"lighthouse":{"version":"11.4.0","performance":0.94,"accessibility":1,"bestPractices":0.96,"seo":1,"total":390},"firstContentfulPaint":2491,"firstMeaningfulPaint":2491,"speedIndex":2491,"largestContentfulPaint":2491,"totalBlockingTime":0,"cumulativeLayoutShift":0.00014263286379292782,"timeToInteractive":2491,"maxPotentialFirstInputDelay":16,"timeToFirstByte":57,"weight":{"total":26471,"image":4637,"imageCount":1,"script":0,"scriptCount":0,"document":1317,"font":15703,"fontCount":1,"stylesheet":4814,"stylesheetCount":2,"thirdParty":26471,"thirdPartyCount":5},"run":{"number":1,"total":1},"sidequests":{"-weight.total":53,"+weight.total":73,"-weight.document":25,"+weight.document":100,"-weight.script":1,"+weight.script":76,"-weight.image":18,"+weight.image":53,"-weight.font":6,"+weight.font":33,"+weight.fontCount":5,"-timeToFirstByte":19,"-totalBlockingTime":1,"-largestContentfulPaint":97},"axe":{"passes":28,"violations":0},"previousRanks":{"hundos":84,"performance":98,"accessibility":44,"cumulative":84},"hash":"8d804b23"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/distantcam/elevento" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/distantcam/elevento" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/distantcam/elevento" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Elevento is a static links page deployed to github pages.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://optimasiwebsite.axcora.com/" class="elv-externalexempt" title="agency11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fagency11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/agency11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">agency11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://optimasiwebsite.axcora.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Foptimasiwebsite.axcora.com%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://optimasiwebsite.axcora.com/","requestedUrl":"https://optimasiwebsite.axcora.com/","timestamp":1708021090680,"ranks":{"hundos":67,"performance":102,"accessibility":79,"cumulative":74},"lighthouse":{"version":"11.4.0","performance":0.92,"accessibility":1,"bestPractices":1,"seo":1,"total":392},"firstContentfulPaint":1965,"firstMeaningfulPaint":1965,"speedIndex":2237.270112015247,"largestContentfulPaint":3022.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.057507012356373496,"timeToInteractive":1965,"maxPotentialFirstInputDelay":16,"timeToFirstByte":329,"weight":{"total":441678,"image":390608,"imageCount":13,"script":1404,"scriptCount":1,"document":37791,"font":11875,"fontCount":1,"stylesheet":0,"stylesheetCount":0,"thirdParty":11875,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":109,"+weight.total":17,"-weight.document":123,"+weight.document":2,"-weight.script":19,"+weight.script":57,"-weight.image":60,"+weight.image":11,"-weight.font":2,"+weight.font":37,"+weight.fontCount":5,"-timeToFirstByte":61,"-totalBlockingTime":1,"-largestContentfulPaint":112},"axe":{"passes":304,"violations":7},"previousRanks":{"hundos":65,"performance":99,"accessibility":79,"cumulative":66},"hash":"cd236093"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/agency11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/agency11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/agency11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Startup and SEO agency website template eleventy 11ty
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/bobarros/11typroject" class="elv-externalexempt" title="11typroject">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fbobarros%2F11typroject/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/bobarros/11typroject" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11typroject</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/bobarros/11typroject" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fbobarros%2F11typroject/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/bobarros/11typroject" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/bobarros/11typroject" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/bobarros/11typroject" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty very light but useful landing page with video and extra url with amp-story
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventonia.mattdecamp.com/" class="elv-externalexempt" title="eleventonia">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmattdecamp%2Feleventonia/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mattdecamp/eleventonia" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventonia</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventonia.mattdecamp.com" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventonia.mattdecamp.com/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mattdecamp/eleventonia" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mattdecamp/eleventonia" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mattdecamp/eleventonia" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A mildly opinionated Eleventy starter.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://gallery.contentful.com/" class="elv-externalexempt" title="11ty-Contentful-Photo-Gallery">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcontentful%2F11ty-contentful-gallery/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/contentful/11ty-contentful-gallery" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-Contentful-Photo-Gallery</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://gallery.contentful.com/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgallery.contentful.com%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/contentful/11ty-contentful-gallery" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/contentful/11ty-contentful-gallery" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/contentful/11ty-contentful-gallery" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A Photo Gallery made using Contentful and 11ty, deployed via GitHub Actions and hosted on GitHub Pages.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-sass.netlify.app/" class="elv-externalexempt" title="11ty-SASS">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FNikitaZanella%2F11ty-SASS/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/NikitaZanella/11ty-SASS" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-SASS</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-sass.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-sass.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-sass.netlify.app/","requestedUrl":"https://11ty-sass.netlify.app/","timestamp":1708021052870,"ranks":{"hundos":116,"performance":2,"accessibility":123,"cumulative":115},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.74,"bestPractices":1,"seo":0.92,"total":366},"firstContentfulPaint":821,"firstMeaningfulPaint":821,"speedIndex":821,"largestContentfulPaint":821,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":842,"maxPotentialFirstInputDelay":58,"timeToFirstByte":34,"weight":{"total":6422,"image":2481,"imageCount":1,"script":1343,"scriptCount":1,"document":1443,"font":0,"fontCount":0,"stylesheet":1155,"stylesheetCount":1,"thirdParty":2481,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":26,"+weight.total":100,"-weight.document":29,"+weight.document":96,"-weight.script":16,"+weight.script":60,"-weight.image":11,"+weight.image":60,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":7,"-totalBlockingTime":1,"-largestContentfulPaint":2},"axe":{"passes":75,"violations":5},"previousRanks":{"hundos":115,"performance":47,"accessibility":125,"cumulative":114},"hash":"a0c6492d"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/NikitaZanella/11ty-SASS" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/NikitaZanella/11ty-SASS" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/NikitaZanella/11ty-SASS" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty blog starter template with SASS and Dark Mode
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-chirpy-blog-template.netlify.app/" class="elv-externalexempt" title="Eleventy Chirpy Blog Template">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmuenzpraeger%2Feleventy-chirpy-blog-template/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/muenzpraeger/eleventy-chirpy-blog-template" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Chirpy Blog Template</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-chirpy-blog-template.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-chirpy-blog-template.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-chirpy-blog-template.netlify.app/","requestedUrl":"https://eleventy-chirpy-blog-template.netlify.app/","timestamp":1708021120119,"ranks":{"hundos":75,"performance":85,"accessibility":82,"cumulative":81},"lighthouse":{"version":"11.4.0","performance":0.98,"accessibility":1,"bestPractices":1,"seo":0.93,"total":391},"firstContentfulPaint":1405,"firstMeaningfulPaint":1405,"speedIndex":1847.5184001922607,"largestContentfulPaint":2288,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1405,"maxPotentialFirstInputDelay":49,"timeToFirstByte":371,"weight":{"total":84360,"image":4524,"imageCount":1,"script":63206,"scriptCount":3,"document":8635,"font":0,"fontCount":0,"stylesheet":7995,"stylesheetCount":2,"thirdParty":46781,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":80,"+weight.total":46,"-weight.document":112,"+weight.document":13,"-weight.script":66,"+weight.script":10,"-weight.image":17,"+weight.image":54,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":74,"-totalBlockingTime":1,"-largestContentfulPaint":93},"axe":{"passes":218,"violations":10},"previousRanks":{"hundos":73,"performance":79,"accessibility":82,"cumulative":77},"hash":"e3c69461"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/muenzpraeger/eleventy-chirpy-blog-template" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/muenzpraeger/eleventy-chirpy-blog-template" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/muenzpraeger/eleventy-chirpy-blog-template" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty version of the popular Chirpy Jekyll blog template.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://danfascia.github.io/tai11s/" class="elv-externalexempt" title="Tai11s">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdanfascia%2Ftai11s/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/danfascia/tai11s" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Tai11s</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://danfascia.github.io/tai11s/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdanfascia.github.io%2Ftai11s%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://danfascia.github.io/tai11s/","requestedUrl":"https://danfascia.github.io/tai11s/","timestamp":1708021188072,"ranks":{"hundos":91,"performance":17,"accessibility":114,"cumulative":91},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.88,"bestPractices":1,"seo":1,"total":388},"firstContentfulPaint":948,"firstMeaningfulPaint":948,"speedIndex":948,"largestContentfulPaint":948,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":948,"maxPotentialFirstInputDelay":16,"timeToFirstByte":66,"weight":{"total":6806,"image":0,"imageCount":0,"script":1227,"scriptCount":1,"document":3529,"font":0,"fontCount":0,"stylesheet":2050,"stylesheetCount":1,"thirdParty":6806,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":29,"+weight.total":97,"-weight.document":75,"+weight.document":50,"-weight.script":15,"+weight.script":61,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":23,"-totalBlockingTime":1,"-largestContentfulPaint":28},"axe":{"passes":154,"violations":12},"previousRanks":{"hundos":89,"performance":11,"accessibility":114,"cumulative":89},"hash":"b13f65cc"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/danfascia/tai11s" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/danfascia/tai11s" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/danfascia/tai11s" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An Eleventy starter with Tailwind CSS and PurgeCSS
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-starter-typescript.vercel.app/" class="elv-externalexempt" title="eleventy-starter-typescript">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fc0derabbit%2Feleventy-starter-typescript%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/c0derabbit/eleventy-starter-typescript/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-starter-typescript</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-starter-typescript.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-starter-typescript.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-starter-typescript.vercel.app/","requestedUrl":"https://eleventy-starter-typescript.vercel.app/","timestamp":1708021145933,"ranks":{"hundos":39,"performance":1,"accessibility":38,"cumulative":23},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":813,"firstMeaningfulPaint":813,"speedIndex":813,"largestContentfulPaint":813,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":834.5,"maxPotentialFirstInputDelay":61,"timeToFirstByte":45,"weight":{"total":1081,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1081,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":1,"+weight.total":125,"-weight.document":13,"+weight.document":112,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":12,"-totalBlockingTime":1,"-largestContentfulPaint":1},"axe":{"passes":41,"violations":0},"previousRanks":{"hundos":38,"performance":2,"accessibility":38,"cumulative":24},"hash":"b5bf1acd"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/c0derabbit/eleventy-starter-typescript/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/c0derabbit/eleventy-starter-typescript/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/c0derabbit/eleventy-starter-typescript" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Unopinionated, minimal starter with TypeScript templates.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventyplusvite.netlify.app/" class="elv-externalexempt" title="Eleventy Plus Vite">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmatthiasott%2Feleventy-plus-vite/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/matthiasott/eleventy-plus-vite" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Plus Vite</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventyplusvite.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventyplusvite.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventyplusvite.netlify.app/","requestedUrl":"https://eleventyplusvite.netlify.app/","timestamp":1708021136327,"ranks":{"hundos":10,"performance":41,"accessibility":11,"cumulative":5},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":940.5,"firstMeaningfulPaint":1468.5,"speedIndex":1269.3886253489375,"largestContentfulPaint":1468.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.0014826942957708795,"timeToInteractive":1468.5,"maxPotentialFirstInputDelay":46,"timeToFirstByte":344,"weight":{"total":100314,"image":0,"imageCount":0,"script":1700,"scriptCount":1,"document":4436,"font":91192,"fontCount":5,"stylesheet":2986,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":87,"+weight.total":39,"-weight.document":92,"+weight.document":33,"-weight.script":22,"+weight.script":54,"-weight.image":1,"+weight.image":71,"-weight.font":27,"+weight.font":12,"+weight.fontCount":1,"-timeToFirstByte":62,"-totalBlockingTime":1,"-largestContentfulPaint":71},"axe":{"passes":181,"violations":0},"previousRanks":{"hundos":8,"performance":50,"accessibility":11,"cumulative":5},"hash":"671a01d7"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/matthiasott/eleventy-plus-vite" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/matthiasott/eleventy-plus-vite" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/matthiasott/eleventy-plus-vite" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A clean and fast Eleventy Starter Project with Vite.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://docs.miayam.io/" class="elv-externalexempt" title="Miayam 11ty Starter Project">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmiayam%2Fmiayam/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/miayam/miayam" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Miayam 11ty Starter Project</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://docs.miayam.io" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdocs.miayam.io/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/miayam/miayam" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/miayam/miayam" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/miayam/miayam" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A brutalist 11ty starter project built with as little tooling as possible. Atomic Design, Webpack, Pug, SCSS, Vanilla JS
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://once-eleventy.netlify.app/" class="elv-externalexempt" title="Once">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjalediazb%2Fonce/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jalediazb/once" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Once</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://once-eleventy.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fonce-eleventy.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://once-eleventy.netlify.app/","requestedUrl":"https://once-eleventy.netlify.app/","timestamp":1708021177382,"ranks":{"hundos":68,"performance":67,"accessibility":65,"cumulative":71},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":0.92,"total":392},"firstContentfulPaint":1051,"firstMeaningfulPaint":1051,"speedIndex":1856.997112118721,"largestContentfulPaint":1414,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1073,"maxPotentialFirstInputDelay":78,"timeToFirstByte":389,"weight":{"total":516448,"image":505522,"imageCount":7,"script":0,"scriptCount":0,"document":5200,"font":0,"fontCount":0,"stylesheet":5726,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":114,"+weight.total":12,"-weight.document":94,"+weight.document":31,"-weight.script":1,"+weight.script":76,"-weight.image":63,"+weight.image":8,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":79,"-totalBlockingTime":1,"-largestContentfulPaint":68},"axe":{"passes":290,"violations":3},"previousRanks":{"hundos":68,"performance":67,"accessibility":65,"cumulative":73},"hash":"5c1633e9"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jalediazb/once" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jalediazb/once" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jalediazb/once" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Personal theme made with Eleventy and Bulma
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://airleventy.netlify.app/" class="elv-externalexempt" title="airleventy">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fgeotrev%2Fairleventy/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/geotrev/airleventy" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">airleventy</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://airleventy.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fairleventy.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/geotrev/airleventy" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/geotrev/airleventy" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/geotrev/airleventy" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Build static websites with 11ty, Sass for CSS, and modern JavaScript.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://webpixels-bootstrap-starter-kit.netlify.app/" class="elv-externalexempt" title="Bootstrap Starter Kit">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fwebpixels%2Fbootstrap-starter-kit/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/webpixels/bootstrap-starter-kit" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Bootstrap Starter Kit</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://webpixels-bootstrap-starter-kit.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwebpixels-bootstrap-starter-kit.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/webpixels/bootstrap-starter-kit" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/webpixels/bootstrap-starter-kit" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/webpixels/bootstrap-starter-kit" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Minimal starter template for websites using Bootstrap 5 and Webpixels CSS next to the Eleventy static site generator.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://pack11ty.dev/" class="elv-externalexempt" title="pack11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fnhoizey%2Fpack11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/nhoizey/pack11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">pack11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://pack11ty.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fpack11ty.dev%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://pack11ty.dev/","requestedUrl":"https://pack11ty.dev/","timestamp":1708021177371,"ranks":{"hundos":18,"performance":18,"accessibility":8,"cumulative":7},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":976,"firstMeaningfulPaint":976,"speedIndex":976,"largestContentfulPaint":976,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1011.5,"maxPotentialFirstInputDelay":58,"timeToFirstByte":46,"weight":{"total":13681,"image":2098,"imageCount":2,"script":3638,"scriptCount":1,"document":5397,"font":0,"fontCount":0,"stylesheet":2548,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":41,"+weight.total":85,"-weight.document":96,"+weight.document":29,"-weight.script":31,"+weight.script":45,"-weight.image":9,"+weight.image":62,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":13,"-totalBlockingTime":1,"-largestContentfulPaint":31},"axe":{"passes":307,"violations":0},"previousRanks":{"hundos":16,"performance":12,"accessibility":8,"cumulative":7},"hash":"1535e76"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/nhoizey/pack11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/nhoizey/pack11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/nhoizey/pack11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An opinionated template for Eleventy projects, with automated collections from folders hierarchy, assets bundling (with Rollup and Sass), responsive images, Service Worker, etc.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-aws.corysilva.com/" class="elv-externalexempt" title="11ty AWS">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcoryasilva%2F11ty-aws/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/coryasilva/11ty-aws" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty AWS</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-aws.corysilva.com" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-aws.corysilva.com/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/coryasilva/11ty-aws" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/coryasilva/11ty-aws" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/coryasilva/11ty-aws" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty + TailwindCSS + AlpineJS + AWS-CDK
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://zuixjs.github.io/zuix-web-starter/" class="elv-externalexempt" title="zuix-web-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fzuixjs%2Fzuix-web-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/zuixjs/zuix-web-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">zuix-web-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://zuixjs.github.io/zuix-web-starter/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fzuixjs.github.io%2Fzuix-web-starter%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://zuixjs.github.io/zuix-web-starter/","requestedUrl":"https://zuixjs.github.io/zuix-web-starter/","timestamp":1708021088675,"ranks":{"hundos":61,"performance":80,"accessibility":92,"cumulative":62},"lighthouse":{"version":"11.4.0","performance":0.99,"accessibility":0.95,"bestPractices":1,"seo":1,"total":394},"firstContentfulPaint":1790.5,"firstMeaningfulPaint":1790.5,"speedIndex":1790.5,"largestContentfulPaint":1790.5,"totalBlockingTime":18.5,"cumulativeLayoutShift":0,"timeToInteractive":1890.5,"maxPotentialFirstInputDelay":71,"timeToFirstByte":41,"weight":{"total":55857,"image":13054,"imageCount":3,"script":25269,"scriptCount":3,"document":14112,"font":0,"fontCount":0,"stylesheet":3422,"stylesheetCount":1,"thirdParty":55857,"thirdPartyCount":9},"run":{"number":1,"total":1},"sidequests":{"-weight.total":66,"+weight.total":60,"-weight.document":118,"+weight.document":7,"-weight.script":59,"+weight.script":17,"-weight.image":23,"+weight.image":48,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":10,"-totalBlockingTime":10,"-largestContentfulPaint":78},"axe":{"passes":287,"violations":5},"previousRanks":{"hundos":61,"performance":77,"accessibility":92,"cumulative":63},"hash":"e3cebc9"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/zuixjs/zuix-web-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/zuixjs/zuix-web-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/zuixjs/zuix-web-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Mobile first and component based web starter template (PWA).
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://statisweb.pages.dev/" class="elv-externalexempt" title="Cool11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fcool11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/cool11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Cool11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://statisweb.pages.dev/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fstatisweb.pages.dev%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://statisweb.pages.dev/","requestedUrl":"https://statisweb.pages.dev/","timestamp":1708021111004,"ranks":{"hundos":113,"performance":111,"accessibility":118,"cumulative":113},"lighthouse":{"version":"11.4.0","performance":0.87,"accessibility":0.83,"bestPractices":1,"seo":1,"total":370},"firstContentfulPaint":3127.5,"firstMeaningfulPaint":3127.5,"speedIndex":3127.5,"largestContentfulPaint":3127.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.015806948845197726,"timeToInteractive":3127.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":249,"weight":{"total":123656,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":3883,"font":85036,"fontCount":2,"stylesheet":34737,"stylesheetCount":4,"thirdParty":118506,"thirdPartyCount":5},"run":{"number":1,"total":1},"sidequests":{"-weight.total":89,"+weight.total":37,"-weight.document":82,"+weight.document":43,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":26,"+weight.font":13,"+weight.fontCount":4,"-timeToFirstByte":52,"-totalBlockingTime":1,"-largestContentfulPaint":113},"axe":{"passes":239,"violations":14},"previousRanks":{"hundos":112,"performance":113,"accessibility":119,"cumulative":112},"hash":"64a8b734"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/cool11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/cool11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/cool11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">New eleventy cool 11ty modern blog themes.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://elf-eleventy.netlify.app/" class="elv-externalexempt" title="Elf">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fstowball%2Felf/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/stowball/elf" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Elf</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://elf-eleventy.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Felf-eleventy.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://elf-eleventy.netlify.app/","requestedUrl":"https://elf-eleventy.netlify.app/","timestamp":1708021151074,"ranks":{"hundos":27,"performance":56,"accessibility":37,"cumulative":14},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":952,"firstMeaningfulPaint":952,"speedIndex":1517.8704679033756,"largestContentfulPaint":952,"totalBlockingTime":1,"cumulativeLayoutShift":0.009553057829793373,"timeToInteractive":1024.5,"maxPotentialFirstInputDelay":56,"timeToFirstByte":353,"weight":{"total":10622,"image":1346,"imageCount":1,"script":7791,"scriptCount":2,"document":1028,"font":0,"fontCount":0,"stylesheet":457,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":37,"+weight.total":89,"-weight.document":7,"+weight.document":118,"-weight.script":39,"+weight.script":37,"-weight.image":4,"+weight.image":67,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":64,"-totalBlockingTime":2,"-largestContentfulPaint":29},"axe":{"passes":44,"violations":0},"previousRanks":{"hundos":25,"performance":55,"accessibility":37,"cumulative":15},"hash":"e03e2dc1"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/stowball/elf" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/stowball/elf" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/stowball/elf" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Elf is a simple, magical starter kit using webpack, Babel and Sass.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-solo-starter-njk.vercel.app/" class="elv-externalexempt" title="Eleventy Solo Starter (.njk version)">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fbrycewray%2Feleventy_solo_starter_njk/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/brycewray/eleventy_solo_starter_njk" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Solo Starter (.njk version)</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-solo-starter-njk.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-solo-starter-njk.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-solo-starter-njk.vercel.app/","requestedUrl":"https://eleventy-solo-starter-njk.vercel.app/","timestamp":1708021141840,"ranks":{"hundos":21,"performance":4,"accessibility":17,"cumulative":8},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":846.5,"firstMeaningfulPaint":846.5,"speedIndex":846.5,"largestContentfulPaint":846.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":868,"maxPotentialFirstInputDelay":54,"timeToFirstByte":41,"weight":{"total":9232,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":2250,"font":0,"fontCount":0,"stylesheet":6982,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":31,"+weight.total":95,"-weight.document":46,"+weight.document":79,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":10,"-totalBlockingTime":1,"-largestContentfulPaint":5},"axe":{"passes":155,"violations":0},"previousRanks":{"hundos":19,"performance":5,"accessibility":17,"cumulative":9},"hash":"8a0a01e7"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/brycewray/eleventy_solo_starter_njk" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/brycewray/eleventy_solo_starter_njk" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/brycewray/eleventy_solo_starter_njk" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Eleventy starter with PostCSS, Tailwind CSS, Lazyload (“vanilla lazyload”), and build-time creation and processing of responsive images; Nunjucks templating, with alternate JavaScript-based (.11ty.js) version.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://contentful.github.io/11ty-contentful-starter/" class="elv-externalexempt" title="11ty-Contentful-Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcontentful%2F11ty-contentful-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/contentful/11ty-contentful-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-Contentful-Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://contentful.github.io/11ty-contentful-starter/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcontentful.github.io%2F11ty-contentful-starter%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/contentful/11ty-contentful-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/contentful/11ty-contentful-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/contentful/11ty-contentful-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An Eleventy powered multipage starter project that uses Contentful to create, and manage pages. The front end utilizes the HTML5UP Solid State theme for layout and styling.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://neat-starter.netlify.app/" class="elv-externalexempt" title="Eleventy NEAT Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fsurjithctly%2Fneat-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/surjithctly/neat-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy NEAT Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://neat-starter.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fneat-starter.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://neat-starter.netlify.app/","requestedUrl":"https://neat-starter.netlify.app/","timestamp":1708021135442,"ranks":{"hundos":112,"performance":109,"accessibility":110,"cumulative":112},"lighthouse":{"version":"11.4.0","performance":0.9,"accessibility":0.9,"bestPractices":1,"seo":0.91,"total":371},"firstContentfulPaint":874,"firstMeaningfulPaint":874,"speedIndex":1547.039353853368,"largestContentfulPaint":874,"totalBlockingTime":28.5,"cumulativeLayoutShift":0.2031981503818676,"timeToInteractive":2057,"maxPotentialFirstInputDelay":79,"timeToFirstByte":304,"weight":{"total":77702,"image":0,"imageCount":0,"script":69395,"scriptCount":2,"document":1885,"font":0,"fontCount":0,"stylesheet":6422,"stylesheetCount":1,"thirdParty":55069,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":77,"+weight.total":49,"-weight.document":39,"+weight.document":86,"-weight.script":68,"+weight.script":8,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":57,"-totalBlockingTime":15,"-largestContentfulPaint":10},"axe":{"passes":80,"violations":4},"previousRanks":{"hundos":113,"performance":111,"accessibility":110,"cumulative":113},"hash":"239e963b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/surjithctly/neat-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/surjithctly/neat-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/surjithctly/neat-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Eleventy Starter Template with NEAT Stack - Netlify CMS, Eleventy, Alphine JS & Tailwind CSS
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy.ghost.org/" class="elv-externalexempt" title="Eleventy Starter Ghost">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FTryGhost%2Feleventy-starter-ghost/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/TryGhost/eleventy-starter-ghost" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Starter Ghost</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy.ghost.org/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy.ghost.org%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy.ghost.org/","requestedUrl":"https://eleventy.ghost.org/","timestamp":1708021150957,"ranks":{"hundos":50,"performance":83,"accessibility":5,"cumulative":50},"lighthouse":{"version":"11.4.0","performance":0.98,"accessibility":1,"bestPractices":1,"seo":0.99,"total":397},"firstContentfulPaint":1075,"firstMeaningfulPaint":1075,"speedIndex":1191.9431719878914,"largestContentfulPaint":2402.5,"totalBlockingTime":3.5,"cumulativeLayoutShift":0,"timeToInteractive":1103.5,"maxPotentialFirstInputDelay":84,"timeToFirstByte":21,"weight":{"total":637930,"image":622037,"imageCount":6,"script":4435,"scriptCount":1,"document":11458,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":4435,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":117,"+weight.total":9,"-weight.document":115,"+weight.document":10,"-weight.script":33,"+weight.script":43,"-weight.image":65,"+weight.image":6,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":3,"-totalBlockingTime":4,"-largestContentfulPaint":95},"axe":{"passes":339,"violations":0},"previousRanks":{"hundos":53,"performance":93,"accessibility":5,"cumulative":53},"hash":"8f2f439a"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/TryGhost/eleventy-starter-ghost" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/TryGhost/eleventy-starter-ghost" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/TryGhost/eleventy-starter-ghost" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter template to build websites with Ghost & Eleventy.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11tyai.danlevin.xyz/" class="elv-externalexempt" title="11tyAI">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdtlevin%2F11tyAI/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/dtlevin/11tyAI" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11tyAI</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11tyai.danlevin.xyz/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11tyai.danlevin.xyz%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11tyai.danlevin.xyz/","requestedUrl":"https://11tyai.danlevin.xyz/","timestamp":1708021087734,"ranks":{"hundos":58,"performance":36,"accessibility":61,"cumulative":58},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":0.95,"total":395},"firstContentfulPaint":808,"firstMeaningfulPaint":808,"speedIndex":1252.6569999933242,"largestContentfulPaint":891,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":847,"maxPotentialFirstInputDelay":83,"timeToFirstByte":14,"weight":{"total":10466,"image":0,"imageCount":0,"script":997,"scriptCount":1,"document":1681,"font":0,"fontCount":0,"stylesheet":7788,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":36,"+weight.total":90,"-weight.document":34,"+weight.document":91,"-weight.script":12,"+weight.script":64,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":1,"-totalBlockingTime":1,"-largestContentfulPaint":13},"axe":{"passes":105,"violations":2},"previousRanks":{"hundos":59,"performance":27,"accessibility":61,"cumulative":59},"hash":"44b001d6"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/dtlevin/11tyAI" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/dtlevin/11tyAI" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/dtlevin/11tyAI" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple 11ty starter site. Includes navigation, SASS, Webpack, and more.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://11ty-netlify-jumpstart.netlify.app/" class="elv-externalexempt" title="11ty Netlify Jumpstart">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F11ty-netlify-jumpstart.netlify.app%2F/" width="150" height="150" alt="IndieWeb Avatar for https://11ty-netlify-jumpstart.netlify.app/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty Netlify Jumpstart</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-netlify-jumpstart.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-netlify-jumpstart.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-netlify-jumpstart.netlify.app/","requestedUrl":"https://11ty-netlify-jumpstart.netlify.app/","timestamp":1708021074968,"ranks":{"hundos":9,"performance":6,"accessibility":19,"cumulative":4},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":838.5,"firstMeaningfulPaint":838.5,"speedIndex":853.8804879293442,"largestContentfulPaint":838.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.004572859123243474,"timeToInteractive":838.5,"maxPotentialFirstInputDelay":46,"timeToFirstByte":143,"weight":{"total":61701,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":3958,"font":54512,"fontCount":2,"stylesheet":3231,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":70,"+weight.total":56,"-weight.document":84,"+weight.document":41,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":19,"+weight.font":20,"+weight.fontCount":4,"-timeToFirstByte":38,"-totalBlockingTime":1,"-largestContentfulPaint":4},"axe":{"passes":139,"violations":0},"previousRanks":{"hundos":5,"performance":8,"accessibility":19,"cumulative":3},"hash":"ac8f87f5"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<div class="sites-site-description">Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://fruits-express.netlify.app/" class="elv-externalexempt" title="Fruits Express">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2FTigersWay%2Ffruits-express/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/TigersWay/fruits-express" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Fruits Express</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://fruits-express.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ffruits-express.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://fruits-express.netlify.app/","requestedUrl":"https://fruits-express.netlify.app/","timestamp":1708021160071,"ranks":{"hundos":47,"performance":84,"accessibility":7,"cumulative":47},"lighthouse":{"version":"11.4.0","performance":0.98,"accessibility":1,"bestPractices":1,"seo":1,"total":398},"firstContentfulPaint":1147,"firstMeaningfulPaint":1147,"speedIndex":1786.7227360661027,"largestContentfulPaint":2326.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1147,"maxPotentialFirstInputDelay":50,"timeToFirstByte":463,"weight":{"total":260761,"image":204159,"imageCount":14,"script":519,"scriptCount":1,"document":6898,"font":43751,"fontCount":4,"stylesheet":5434,"stylesheetCount":1,"thirdParty":204159,"thirdPartyCount":14},"run":{"number":1,"total":1},"sidequests":{"-weight.total":101,"+weight.total":25,"-weight.document":105,"+weight.document":20,"-weight.script":7,"+weight.script":69,"-weight.image":55,"+weight.image":16,"-weight.font":13,"+weight.font":26,"+weight.fontCount":2,"-timeToFirstByte":99,"-totalBlockingTime":1,"-largestContentfulPaint":94},"axe":{"passes":310,"violations":0},"previousRanks":{"hundos":47,"performance":85,"accessibility":7,"cumulative":46},"hash":"84e8e9a7"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/TigersWay/fruits-express" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/TigersWay/fruits-express" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/TigersWay/fruits-express" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Simple sample with Eleventy & TailwindCSS
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventyblog.vercel.app/" class="elv-externalexempt" title="Bootstrap11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Feleventyblog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/eleventyblog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Bootstrap11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventyblog.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventyblog.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventyblog.vercel.app/","requestedUrl":"https://eleventyblog.vercel.app/","timestamp":1708021104061,"ranks":{"hundos":110,"performance":117,"accessibility":54,"cumulative":110},"lighthouse":{"version":"11.4.0","performance":0.78,"accessibility":1,"bestPractices":0.96,"seo":1,"total":374},"firstContentfulPaint":1155,"firstMeaningfulPaint":1155,"speedIndex":1155,"largestContentfulPaint":2151,"totalBlockingTime":0,"cumulativeLayoutShift":0.5057005844904829,"timeToInteractive":1155,"maxPotentialFirstInputDelay":16,"timeToFirstByte":30,"weight":{"total":546815,"image":477642,"imageCount":12,"script":25298,"scriptCount":1,"document":11696,"font":0,"fontCount":0,"stylesheet":32179,"stylesheetCount":2,"thirdParty":366462,"thirdPartyCount":9},"run":{"number":1,"total":1},"sidequests":{"-weight.total":116,"+weight.total":10,"-weight.document":116,"+weight.document":9,"-weight.script":60,"+weight.script":16,"-weight.image":62,"+weight.image":9,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":6,"-totalBlockingTime":1,"-largestContentfulPaint":91},"axe":{"passes":850,"violations":2},"previousRanks":{"hundos":110,"performance":119,"accessibility":54,"cumulative":110},"hash":"7569592b"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/eleventyblog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/eleventyblog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/eleventyblog" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Eleventy for blogger with bootstrap and auto SEO full.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://distantcam.github.io/windty/" class="elv-externalexempt" title="windty 🌬️">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdistantcam%2Fwindty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/distantcam/windty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">windty 🌬️</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://distantcam.github.io/windty/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdistantcam.github.io%2Fwindty%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://distantcam.github.io/windty/","requestedUrl":"https://distantcam.github.io/windty/","timestamp":1708021198143,"ranks":{"hundos":31,"performance":10,"accessibility":43,"cumulative":16},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":884.5,"firstMeaningfulPaint":884.5,"speedIndex":884.5,"largestContentfulPaint":884.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":884.5,"maxPotentialFirstInputDelay":40,"timeToFirstByte":60,"weight":{"total":4402,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":1760,"font":0,"fontCount":0,"stylesheet":2642,"stylesheetCount":1,"thirdParty":4402,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":17,"+weight.total":109,"-weight.document":36,"+weight.document":89,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":20,"-totalBlockingTime":1,"-largestContentfulPaint":12},"axe":{"passes":31,"violations":0},"previousRanks":{"hundos":28,"performance":7,"accessibility":43,"cumulative":17},"hash":"f1827830"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/distantcam/windty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/distantcam/windty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/distantcam/windty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Windty is a basic template using 11ty and Tailwind, and deploys to github pages.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-netlify-boilerplate.netlify.app/" class="elv-externalexempt" title="eleventy-netlify-boilerplate">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdanurbanowicz%2Feleventy-netlify-boilerplate/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/danurbanowicz/eleventy-netlify-boilerplate" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-netlify-boilerplate</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-netlify-boilerplate.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-netlify-boilerplate.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-netlify-boilerplate.netlify.app/","requestedUrl":"https://eleventy-netlify-boilerplate.netlify.app/","timestamp":1708021134500,"ranks":{"hundos":64,"performance":31,"accessibility":100,"cumulative":64},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.93,"bestPractices":1,"seo":1,"total":393},"firstContentfulPaint":1139,"firstMeaningfulPaint":1139,"speedIndex":1139,"largestContentfulPaint":1139,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1139,"maxPotentialFirstInputDelay":16,"timeToFirstByte":365,"weight":{"total":4407,"image":2481,"imageCount":1,"script":0,"scriptCount":0,"document":1926,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":2481,"thirdPartyCount":1},"run":{"number":1,"total":1},"sidequests":{"-weight.total":19,"+weight.total":107,"-weight.document":40,"+weight.document":85,"-weight.script":1,"+weight.script":76,"-weight.image":11,"+weight.image":60,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":70,"-totalBlockingTime":1,"-largestContentfulPaint":55},"axe":{"passes":100,"violations":5},"previousRanks":{"hundos":66,"performance":22,"accessibility":100,"cumulative":65},"hash":"2ab80535"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/danurbanowicz/eleventy-netlify-boilerplate" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/danurbanowicz/eleventy-netlify-boilerplate" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/danurbanowicz/eleventy-netlify-boilerplate" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A template for building a simple blog web site with Eleventy and deploying it to Netlify. Includes Netlify CMS and Netlify Forms.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://nonplain-11ty-starter.vercel.app/" class="elv-externalexempt" title="nonplain-11ty-starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fnonplain%2Fnonplain-11ty-starter%23readme/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/nonplain/nonplain-11ty-starter#readme" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">nonplain-11ty-starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://nonplain-11ty-starter.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fnonplain-11ty-starter.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://nonplain-11ty-starter.vercel.app/","requestedUrl":"https://nonplain-11ty-starter.vercel.app/","timestamp":1708021176110,"ranks":{"hundos":35,"performance":12,"accessibility":27,"cumulative":20},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":917,"firstMeaningfulPaint":917,"speedIndex":917,"largestContentfulPaint":917,"totalBlockingTime":25.5,"cumulativeLayoutShift":0,"timeToInteractive":992.5,"maxPotentialFirstInputDelay":101,"timeToFirstByte":51,"weight":{"total":2701,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":2701,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":8,"+weight.total":118,"-weight.document":63,"+weight.document":62,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":15,"-totalBlockingTime":12,"-largestContentfulPaint":17},"axe":{"passes":99,"violations":0},"previousRanks":{"hundos":34,"performance":20,"accessibility":27,"cumulative":22},"hash":"a05187fe"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/nonplain/nonplain-11ty-starter#readme" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/nonplain/nonplain-11ty-starter#readme" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/nonplain/nonplain-11ty-starter#readme" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Create an 11ty website out of nonplain files
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-kickstart-blog.vercel.app/" class="elv-externalexempt" title="Eleventy Kickstart Blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Floctran016%2Feleventy-kickstart-blog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/loctran016/eleventy-kickstart-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Kickstart Blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-kickstart-blog.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-kickstart-blog.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-kickstart-blog.vercel.app/","requestedUrl":"https://eleventy-kickstart-blog.vercel.app/","timestamp":1708021136071,"ranks":{"hundos":123,"performance":124,"accessibility":112,"cumulative":123},"lighthouse":{"version":"11.4.0","performance":0.57,"accessibility":0.9,"bestPractices":1,"seo":0.92,"total":339},"firstContentfulPaint":1085.5,"firstMeaningfulPaint":1085.5,"speedIndex":2993.8252455024485,"largestContentfulPaint":14211,"totalBlockingTime":717.75,"cumulativeLayoutShift":0,"timeToInteractive":5696.75,"maxPotentialFirstInputDelay":953,"timeToFirstByte":55,"weight":{"total":2546382,"image":1994238,"imageCount":2,"script":538781,"scriptCount":4,"document":2943,"font":0,"fontCount":0,"stylesheet":10420,"stylesheetCount":1,"thirdParty":94947,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":125,"+weight.total":1,"-weight.document":65,"+weight.document":60,"-weight.script":74,"+weight.script":2,"-weight.image":70,"+weight.image":1,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":17,"-totalBlockingTime":28,"-largestContentfulPaint":124},"axe":{"passes":129,"violations":7},"previousRanks":{"hundos":122,"performance":124,"accessibility":112,"cumulative":122},"hash":"67fc0601"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/loctran016/eleventy-kickstart-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/loctran016/eleventy-kickstart-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/loctran016/eleventy-kickstart-blog" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Kickstart your website with this production-ready template using 11ty, the new vite, tailwindcss and daisyui.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://awesome11ty.ttntm.me/" class="elv-externalexempt" title="11ty landing page starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fttntm%2F11ty-landing-page/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/ttntm/11ty-landing-page" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty landing page starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://awesome11ty.ttntm.me/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fawesome11ty.ttntm.me%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://awesome11ty.ttntm.me/","requestedUrl":"https://awesome11ty.ttntm.me/","timestamp":1708021067496,"ranks":{"hundos":54,"performance":93,"accessibility":57,"cumulative":53},"lighthouse":{"version":"11.4.0","performance":0.97,"accessibility":1,"bestPractices":1,"seo":1,"total":397},"firstContentfulPaint":2017.65092,"firstMeaningfulPaint":2017.65092,"speedIndex":2017.65092,"largestContentfulPaint":2092.65092,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":2017.65092,"maxPotentialFirstInputDelay":16,"timeToFirstByte":62,"weight":{"total":46492,"image":18561,"imageCount":10,"script":16987,"scriptCount":2,"document":3494,"font":0,"fontCount":0,"stylesheet":5219,"stylesheetCount":1,"thirdParty":19218,"thirdPartyCount":6},"run":{"number":1,"total":1},"sidequests":{"-weight.total":61,"+weight.total":65,"-weight.document":74,"+weight.document":51,"-weight.script":52,"+weight.script":24,"-weight.image":30,"+weight.image":41,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":22,"-totalBlockingTime":1,"-largestContentfulPaint":88},"axe":{"passes":293,"violations":2},"previousRanks":{"hundos":56,"performance":95,"accessibility":57,"cumulative":57},"hash":"9e7fd8ce"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/ttntm/11ty-landing-page" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/ttntm/11ty-landing-page" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/ttntm/11ty-landing-page" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple landing page built with 11ty and Tailwind CSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventyone.netlify.app/" class="elv-externalexempt" title="eleventyone">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fphilhawksworth%2Feleventyone/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/philhawksworth/eleventyone" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventyone</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventyone.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventyone.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventyone.netlify.app/","requestedUrl":"https://eleventyone.netlify.app/","timestamp":1708021148804,"ranks":{"hundos":99,"performance":47,"accessibility":108,"cumulative":99},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.91,"bestPractices":1,"seo":0.91,"total":382},"firstContentfulPaint":862,"firstMeaningfulPaint":862,"speedIndex":1342.4472399878503,"largestContentfulPaint":862,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":862,"maxPotentialFirstInputDelay":46,"timeToFirstByte":416,"weight":{"total":4322,"image":532,"imageCount":1,"script":0,"scriptCount":0,"document":2229,"font":0,"fontCount":0,"stylesheet":1561,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":16,"+weight.total":110,"-weight.document":45,"+weight.document":80,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":70,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":87,"-totalBlockingTime":1,"-largestContentfulPaint":8},"axe":{"passes":204,"violations":28},"previousRanks":{"hundos":100,"performance":68,"accessibility":108,"cumulative":100},"hash":"f8227b47"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/philhawksworth/eleventyone" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/philhawksworth/eleventyone" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/philhawksworth/eleventyone" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">is an Eleventy scaffold project created by the legendary Phil Hawksworth. Makes use of Eleventy and PostCSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://vredeburg.netlify.app/" class="elv-externalexempt" title="vredeburg">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdafiulh%2Fvredeburg/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/dafiulh/vredeburg" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">vredeburg</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://vredeburg.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fvredeburg.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://vredeburg.netlify.app/","requestedUrl":"https://vredeburg.netlify.app/","timestamp":1708021200656,"ranks":{"hundos":120,"performance":110,"accessibility":122,"cumulative":120},"lighthouse":{"version":"11.4.0","performance":0.9,"accessibility":0.76,"bestPractices":1,"seo":0.93,"total":359},"firstContentfulPaint":2753.5,"firstMeaningfulPaint":2753.5,"speedIndex":2753.5,"largestContentfulPaint":2903.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":2753.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":130,"weight":{"total":445954,"image":388349,"imageCount":6,"script":1519,"scriptCount":1,"document":2640,"font":47364,"fontCount":1,"stylesheet":6082,"stylesheetCount":2,"thirdParty":124031,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":110,"+weight.total":16,"-weight.document":61,"+weight.document":64,"-weight.script":21,"+weight.script":55,"-weight.image":59,"+weight.image":12,"-weight.font":16,"+weight.font":23,"+weight.fontCount":5,"-timeToFirstByte":35,"-totalBlockingTime":1,"-largestContentfulPaint":111},"axe":{"passes":171,"violations":3},"previousRanks":{"hundos":118,"performance":112,"accessibility":123,"cumulative":118},"hash":"adf78ffd"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/dafiulh/vredeburg" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/dafiulh/vredeburg" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/dafiulh/vredeburg" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A simple starter project to create a blog using Eleventy and Tailwind CSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://clever-newton-cbb08a.netlify.app/" class="elv-externalexempt" title="Minimal 11ty + Tailwind Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Ftomreinert%2Fminimal-11ty-tailwind-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/tomreinert/minimal-11ty-tailwind-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Minimal 11ty + Tailwind Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://clever-newton-cbb08a.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fclever-newton-cbb08a.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/tomreinert/minimal-11ty-tailwind-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/tomreinert/minimal-11ty-tailwind-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/tomreinert/minimal-11ty-tailwind-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A very minimal, beginner-friendly starter with tailwind and a smart navigation component.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://web-grease.netlify.app/" class="elv-externalexempt" title="Grease">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fadamstddrd%2Fgrease/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/adamstddrd/grease" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Grease</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://web-grease.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fweb-grease.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://web-grease.netlify.app/","requestedUrl":"https://web-grease.netlify.app/","timestamp":1708021159003,"ranks":{"hundos":70,"performance":101,"accessibility":4,"cumulative":67},"lighthouse":{"version":"11.4.0","performance":0.92,"accessibility":1,"bestPractices":1,"seo":1,"total":392},"firstContentfulPaint":981.5,"firstMeaningfulPaint":981.5,"speedIndex":981.5,"largestContentfulPaint":981.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.1814652006639099,"timeToInteractive":981.5,"maxPotentialFirstInputDelay":28,"timeToFirstByte":125,"weight":{"total":57910,"image":0,"imageCount":0,"script":1150,"scriptCount":1,"document":4336,"font":48150,"fontCount":1,"stylesheet":4274,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":69,"+weight.total":57,"-weight.document":91,"+weight.document":34,"-weight.script":13,"+weight.script":63,"-weight.image":1,"+weight.image":71,"-weight.font":18,"+weight.font":21,"+weight.fontCount":5,"-timeToFirstByte":34,"-totalBlockingTime":1,"-largestContentfulPaint":32},"axe":{"passes":364,"violations":0},"previousRanks":{"hundos":72,"performance":102,"accessibility":4,"cumulative":69},"hash":"6587f105"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/adamstddrd/grease" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/adamstddrd/grease" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/adamstddrd/grease" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Grease is a website starter that makes building performant, accessible, aesthetic websites fast & frictionless. It uses 11ty, Lightning CSS, and Esbuild, and includes a lightweight, declarative CSS architecture that sets you up for success.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventy-shortcomps.netlify.app/" class="elv-externalexempt" title="eleventy-shortcomps">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fadamduncan%2Feleventy-shortcomps/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/adamduncan/eleventy-shortcomps" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-shortcomps</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-shortcomps.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-shortcomps.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/adamduncan/eleventy-shortcomps" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/adamduncan/eleventy-shortcomps" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/adamduncan/eleventy-shortcomps" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Starter project for static site by Adam Duncan, using Eleventy and shortcode components pattern.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://disjfa.github.io/eleventy-encore/" class="elv-externalexempt" title="11ty-encore">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdisjfa%2Feleventy-encore/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/disjfa/eleventy-encore" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-encore</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://disjfa.github.io/eleventy-encore/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fdisjfa.github.io%2Feleventy-encore%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://disjfa.github.io/eleventy-encore/","requestedUrl":"https://disjfa.github.io/eleventy-encore/","timestamp":1708021064870,"ranks":{"hundos":111,"performance":92,"accessibility":104,"cumulative":111},"lighthouse":{"version":"11.4.0","performance":0.97,"accessibility":0.92,"bestPractices":1,"seo":0.85,"total":374},"firstContentfulPaint":1402.5,"firstMeaningfulPaint":1402.5,"speedIndex":1562.2827368459607,"largestContentfulPaint":2558.5,"totalBlockingTime":28,"cumulativeLayoutShift":0,"timeToInteractive":2558.5,"maxPotentialFirstInputDelay":106,"timeToFirstByte":50,"weight":{"total":293396,"image":34318,"imageCount":1,"script":62487,"scriptCount":2,"document":2297,"font":157381,"fontCount":2,"stylesheet":36913,"stylesheetCount":1,"thirdParty":293396,"thirdPartyCount":7},"run":{"number":1,"total":1},"sidequests":{"-weight.total":105,"+weight.total":21,"-weight.document":49,"+weight.document":76,"-weight.script":65,"+weight.script":11,"-weight.image":35,"+weight.image":36,"-weight.font":33,"+weight.font":6,"+weight.fontCount":4,"-timeToFirstByte":14,"-totalBlockingTime":14,"-largestContentfulPaint":101},"axe":{"passes":139,"violations":23},"previousRanks":{"hundos":107,"performance":75,"accessibility":104,"cumulative":109},"hash":"19ebc2c5"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/disjfa/eleventy-encore" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/disjfa/eleventy-encore" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/disjfa/eleventy-encore" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty using webpack encore
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://polyglot-tech-blog.netlify.app/" class="elv-externalexempt" title="Polyglot Tech Blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgitlab.com%2Fflorent_tassy%2Fpolyglot-tech-blog/" width="150" height="150" alt="IndieWeb Avatar for https://gitlab.com/florent_tassy/polyglot-tech-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Polyglot Tech Blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://polyglot-tech-blog.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fpolyglot-tech-blog.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://polyglot-tech-blog.netlify.app/en/","requestedUrl":"https://polyglot-tech-blog.netlify.app/","timestamp":1708021178469,"ranks":{"hundos":53,"performance":24,"accessibility":3,"cumulative":51},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":0.97,"total":397},"firstContentfulPaint":1050,"firstMeaningfulPaint":1050,"speedIndex":1050,"largestContentfulPaint":1050,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1050,"maxPotentialFirstInputDelay":16,"timeToFirstByte":41,"weight":{"total":28364,"image":2776,"imageCount":2,"script":3598,"scriptCount":3,"document":8888,"font":0,"fontCount":0,"stylesheet":12607,"stylesheetCount":6,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":55,"+weight.total":71,"-weight.document":113,"+weight.document":12,"-weight.script":30,"+weight.script":46,"-weight.image":13,"+weight.image":58,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":10,"-totalBlockingTime":1,"-largestContentfulPaint":45},"axe":{"passes":371,"violations":0},"previousRanks":{"hundos":52,"performance":35,"accessibility":3,"cumulative":51},"hash":"72fcaabd"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://gitlab.com/florent_tassy/polyglot-tech-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://gitlab.com/florent_tassy/polyglot-tech-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
</ul>
<div class="sites-site-description">An 11ty starter project for multilingual personal pages and blogs.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-blog-mnml.netlify.app/" class="elv-externalexempt" title="eleventy-blog-mnml">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Farpitbatra123%2Feleventy-blog-mnml/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/arpitbatra123/eleventy-blog-mnml" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-blog-mnml</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-blog-mnml.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-blog-mnml.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-blog-mnml.netlify.app/","requestedUrl":"https://eleventy-blog-mnml.netlify.app/","timestamp":1708021116898,"ranks":{"hundos":14,"performance":11,"accessibility":62,"cumulative":31},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":839.5,"firstMeaningfulPaint":1123.5,"speedIndex":887.9578238315582,"largestContentfulPaint":1123.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.003799447134487582,"timeToInteractive":1123.5,"maxPotentialFirstInputDelay":49,"timeToFirstByte":146,"weight":{"total":38418,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":958,"font":36560,"fontCount":2,"stylesheet":900,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":57,"+weight.total":69,"-weight.document":5,"+weight.document":120,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":11,"+weight.font":28,"+weight.fontCount":4,"-timeToFirstByte":40,"-totalBlockingTime":1,"-largestContentfulPaint":53},"axe":{"passes":51,"violations":2},"previousRanks":{"hundos":125,"performance":126,"accessibility":62,"cumulative":125},"hash":"d72d3da7"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/arpitbatra123/eleventy-blog-mnml" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/arpitbatra123/eleventy-blog-mnml" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/arpitbatra123/eleventy-blog-mnml" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A minimal blog template using eleventy
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://thisis11ty.netlify.app/" class="elv-externalexempt" title="Thisis">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmesinkasir%2Fthisis-11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mesinkasir/thisis-11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Thisis</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://thisis11ty.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fthisis11ty.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://thisis11ty.netlify.app/","requestedUrl":"https://thisis11ty.netlify.app/","timestamp":1708021194574,"ranks":{"hundos":62,"performance":72,"accessibility":97,"cumulative":63},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.94,"bestPractices":1,"seo":1,"total":394},"firstContentfulPaint":1417.5,"firstMeaningfulPaint":1417.5,"speedIndex":2227.5715996742247,"largestContentfulPaint":1417.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1417.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":516,"weight":{"total":25818,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":2501,"font":0,"fontCount":0,"stylesheet":23317,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":52,"+weight.total":74,"-weight.document":57,"+weight.document":68,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":105,"-totalBlockingTime":1,"-largestContentfulPaint":69},"axe":{"passes":306,"violations":10},"previousRanks":{"hundos":63,"performance":73,"accessibility":97,"cumulative":64},"hash":"aeb0d2ce"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mesinkasir/thisis-11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mesinkasir/thisis-11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mesinkasir/thisis-11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Thisis just classic blog seo template.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://11ty-nostrils.netlify.app/" class="elv-externalexempt" title="11ty-nostrils">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fcbergen%2F11ty-nostrils/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/cbergen/11ty-nostrils" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-nostrils</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-nostrils.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-nostrils.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-nostrils.netlify.app/","requestedUrl":"https://11ty-nostrils.netlify.app/","timestamp":1708021076088,"ranks":{"hundos":20,"performance":55,"accessibility":85,"cumulative":40},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":913.5,"firstMeaningfulPaint":913.5,"speedIndex":1497.7443759967086,"largestContentfulPaint":913.5,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":913.5,"maxPotentialFirstInputDelay":16,"timeToFirstByte":430,"weight":{"total":19684,"image":17319,"imageCount":1,"script":494,"scriptCount":1,"document":1247,"font":0,"fontCount":0,"stylesheet":624,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":48,"+weight.total":78,"-weight.document":22,"+weight.document":103,"-weight.script":3,"+weight.script":73,"-weight.image":29,"+weight.image":42,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":91,"-totalBlockingTime":1,"-largestContentfulPaint":15},"axe":{"passes":107,"violations":21},"previousRanks":{"hundos":18,"performance":52,"accessibility":85,"cumulative":38},"hash":"3bd2b09d"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/cbergen/11ty-nostrils" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/cbergen/11ty-nostrils" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/cbergen/11ty-nostrils" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A starter config for Eleventy with pipelines for Typescript and PostCSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://jace-ty.netlify.app/" class="elv-externalexempt" title="jace-ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjacebenson%2Fjace-ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jacebenson/jace-ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">jace-ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://jace-ty.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fjace-ty.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://jace-ty.netlify.app/","requestedUrl":"https://jace-ty.netlify.app/","timestamp":1708021167548,"ranks":{"hundos":103,"performance":69,"accessibility":115,"cumulative":103},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.87,"bestPractices":1,"seo":0.92,"total":379},"firstContentfulPaint":1543,"firstMeaningfulPaint":1543,"speedIndex":1951.4453464363799,"largestContentfulPaint":1543,"totalBlockingTime":18,"cumulativeLayoutShift":0,"timeToInteractive":1602.5,"maxPotentialFirstInputDelay":226,"timeToFirstByte":502,"weight":{"total":198172,"image":191692,"imageCount":3,"script":0,"scriptCount":0,"document":6480,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":191692,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":98,"+weight.total":28,"-weight.document":100,"+weight.document":25,"-weight.script":1,"+weight.script":76,"-weight.image":54,"+weight.image":17,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":104,"-totalBlockingTime":9,"-largestContentfulPaint":72},"axe":{"passes":652,"violations":5},"previousRanks":{"hundos":105,"performance":60,"accessibility":115,"cumulative":105},"hash":"4d264af2"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jacebenson/jace-ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jacebenson/jace-ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jacebenson/jace-ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Search, Folders for Posts, Utteranc.es for comments
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://supermaya-demo.netlify.app/" class="elv-externalexempt" title="Supermaya">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmadebymike%2Fsupermaya/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/madebymike/supermaya" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Supermaya</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://supermaya-demo.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fsupermaya-demo.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://supermaya-demo.netlify.app/","requestedUrl":"https://supermaya-demo.netlify.app/","timestamp":1708021187332,"ranks":{"hundos":80,"performance":46,"accessibility":90,"cumulative":78},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.95,"bestPractices":0.96,"seo":1,"total":391},"firstContentfulPaint":1018,"firstMeaningfulPaint":1018,"speedIndex":1329.4629999399185,"largestContentfulPaint":1018,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1018,"maxPotentialFirstInputDelay":16,"timeToFirstByte":318,"weight":{"total":15884,"image":0,"imageCount":0,"script":8415,"scriptCount":4,"document":2581,"font":0,"fontCount":0,"stylesheet":3378,"stylesheetCount":2,"thirdParty":1510,"thirdPartyCount":4},"run":{"number":1,"total":1},"sidequests":{"-weight.total":43,"+weight.total":83,"-weight.document":60,"+weight.document":65,"-weight.script":40,"+weight.script":36,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":58,"-totalBlockingTime":1,"-largestContentfulPaint":42},"axe":{"passes":178,"violations":3},"previousRanks":{"hundos":80,"performance":19,"accessibility":90,"cumulative":79},"hash":"6871824"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/madebymike/supermaya" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/madebymike/supermaya" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/madebymike/supermaya" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Supermaya is an Eleventy starter kit designed to help you add rich features to a blog or website without the need for a complicated build process.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://11ty-theme-by-design-2-seo.netlify.app/" class="elv-externalexempt" title="11ty Theme by design 2 SEO">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjeremyfaucher%2F11ty-theme-by-design-2-seo.git/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jeremyfaucher/11ty-theme-by-design-2-seo.git" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty Theme by design 2 SEO</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-theme-by-design-2-seo.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-theme-by-design-2-seo.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-theme-by-design-2-seo.netlify.app/","requestedUrl":"https://11ty-theme-by-design-2-seo.netlify.app/","timestamp":1707761880035,"ranks":{"hundos":11,"performance":30,"accessibility":9,"cumulative":5},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1021,"firstMeaningfulPaint":1021,"speedIndex":1069.6088520298003,"largestContentfulPaint":1274,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1023.5,"maxPotentialFirstInputDelay":52,"timeToFirstByte":228,"weight":{"total":48725,"image":43074,"imageCount":2,"script":0,"scriptCount":0,"document":5651,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":62,"+weight.total":66,"-weight.document":100,"+weight.document":28,"-weight.script":1,"+weight.script":77,"-weight.image":39,"+weight.image":33,"-weight.font":1,"+weight.font":40,"+weight.fontCount":6,"-timeToFirstByte":60,"-totalBlockingTime":1,"-largestContentfulPaint":62},"axe":{"passes":277,"violations":0},"previousRanks":{"hundos":13,"performance":29,"accessibility":9,"cumulative":5},"hash":"4771de2c"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jeremyfaucher/11ty-theme-by-design-2-seo.git" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jeremyfaucher/11ty-theme-by-design-2-seo.git" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jeremyfaucher/11ty-theme-by-design-2-seo.git" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty blog theme with grid CSS, subcategories and breadcrumbs.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://captain-log.netlify.app/" class="elv-externalexempt" title="Captain's Log">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Ftskarhed%2Fcaptains-log/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/tskarhed/captains-log" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Captain's Log</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://captain-log.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fcaptain-log.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://captain-log.netlify.app/","requestedUrl":"https://captain-log.netlify.app/","timestamp":1708021102103,"ranks":{"hundos":89,"performance":103,"accessibility":26,"cumulative":89},"lighthouse":{"version":"11.4.0","performance":0.92,"accessibility":1,"bestPractices":1,"seo":0.97,"total":389},"firstContentfulPaint":2449,"firstMeaningfulPaint":2599,"speedIndex":2515.091523974419,"largestContentfulPaint":2449,"totalBlockingTime":0,"cumulativeLayoutShift":0.09546601143351668,"timeToInteractive":2599,"maxPotentialFirstInputDelay":16,"timeToFirstByte":360,"weight":{"total":139393,"image":38003,"imageCount":5,"script":0,"scriptCount":0,"document":1283,"font":94965,"fontCount":3,"stylesheet":5142,"stylesheetCount":4,"thirdParty":16630,"thirdPartyCount":3},"run":{"number":1,"total":1},"sidequests":{"-weight.total":93,"+weight.total":33,"-weight.document":24,"+weight.document":101,"-weight.script":1,"+weight.script":76,"-weight.image":38,"+weight.image":33,"-weight.font":28,"+weight.font":11,"+weight.fontCount":3,"-timeToFirstByte":66,"-totalBlockingTime":1,"-largestContentfulPaint":96},"axe":{"passes":99,"violations":0},"previousRanks":{"hundos":88,"performance":106,"accessibility":26,"cumulative":88},"hash":"5001e736"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/tskarhed/captains-log" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/tskarhed/captains-log" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/tskarhed/captains-log" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An old timey blog theme with blog posts that looks like old letters.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://link-in-bio-11ty.glitch.me/" class="elv-externalexempt" title="Link-in-Bio 11ty">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fclottman%2Flink-in-bio-11ty/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/clottman/link-in-bio-11ty" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Link-in-Bio 11ty</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://link-in-bio-11ty.glitch.me/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Flink-in-bio-11ty.glitch.me%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/clottman/link-in-bio-11ty" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/clottman/link-in-bio-11ty" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/clottman/link-in-bio-11ty" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A single page containing a list of links generated from data defined in JS
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://11tyby.netlify.app/" class="elv-externalexempt" title="11tyby">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fjahilldev%2F11tyby/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/jahilldev/11tyby" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11tyby</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11tyby.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11tyby.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11tyby.netlify.app/","requestedUrl":"https://11tyby.netlify.app/","timestamp":1708021087641,"ranks":{"hundos":16,"performance":37,"accessibility":53,"cumulative":28},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1017,"firstMeaningfulPaint":1017,"speedIndex":1253.8783920516967,"largestContentfulPaint":1722,"totalBlockingTime":2,"cumulativeLayoutShift":0.0007365453053769011,"timeToInteractive":1089.5,"maxPotentialFirstInputDelay":70,"timeToFirstByte":441,"weight":{"total":56499,"image":0,"imageCount":0,"script":10429,"scriptCount":2,"document":1339,"font":43610,"fontCount":3,"stylesheet":1121,"stylesheetCount":1,"thirdParty":44731,"thirdPartyCount":4},"run":{"number":1,"total":1},"sidequests":{"-weight.total":67,"+weight.total":59,"-weight.document":26,"+weight.document":99,"-weight.script":43,"+weight.script":33,"-weight.image":1,"+weight.image":71,"-weight.font":12,"+weight.font":27,"+weight.fontCount":3,"-timeToFirstByte":96,"-totalBlockingTime":3,"-largestContentfulPaint":75},"axe":{"passes":30,"violations":1},"previousRanks":{"hundos":11,"performance":31,"accessibility":53,"cumulative":29},"hash":"1dab46a9"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/jahilldev/11tyby" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/jahilldev/11tyby" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/jahilldev/11tyby" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11tyby tries to emulate the great DX of Gatsby, but with 11ty! It's setup with TypeScript, SASS, CSS Modules, Webpack, Preact and more. All optimised for performance.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://festive-haibt-b7ead0.netlify.app/" class="elv-externalexempt" title="eleventy-agile-blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fmjgs%2Feleventy-agile-blog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/mjgs/eleventy-agile-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-agile-blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://festive-haibt-b7ead0.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Ffestive-haibt-b7ead0.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/mjgs/eleventy-agile-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/mjgs/eleventy-agile-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/mjgs/eleventy-agile-blog" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A minimal blog template using Eleventy, this one implements a simple agile development workflow so you can get stuff done
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://elevenpack.netlify.app/" class="elv-externalexempt" title="Elevenpack">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdeviousdodo%2Felevenpack/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/deviousdodo/elevenpack" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Elevenpack</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://elevenpack.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Felevenpack.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://elevenpack.netlify.app/","requestedUrl":"https://elevenpack.netlify.app/","timestamp":1708021111439,"ranks":{"hundos":107,"performance":57,"accessibility":117,"cumulative":107},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.85,"bestPractices":1,"seo":0.91,"total":376},"firstContentfulPaint":1017,"firstMeaningfulPaint":1017,"speedIndex":1523.2463999986646,"largestContentfulPaint":1017,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1017,"maxPotentialFirstInputDelay":16,"timeToFirstByte":363,"weight":{"total":3818,"image":0,"imageCount":0,"script":960,"scriptCount":1,"document":1057,"font":0,"fontCount":0,"stylesheet":1801,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":15,"+weight.total":111,"-weight.document":12,"+weight.document":113,"-weight.script":11,"+weight.script":65,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":68,"-totalBlockingTime":1,"-largestContentfulPaint":41},"axe":{"passes":33,"violations":12},"previousRanks":{"hundos":109,"performance":58,"accessibility":117,"cumulative":108},"hash":"51c5b457"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/deviousdodo/elevenpack" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/deviousdodo/elevenpack" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/deviousdodo/elevenpack" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">An Eleventy starter pack with webpack, PostCSS and cache busting for production deployments.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://brooks-html-template.netlify.app/" class="elv-externalexempt" title="Brook">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftemplatedeck.com/" width="150" height="150" alt="IndieWeb Avatar for https://templatedeck.com" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Brook</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://brooks-html-template.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fbrooks-html-template.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://brooks-html-template.netlify.app/","requestedUrl":"https://brooks-html-template.netlify.app/","timestamp":1708021099889,"ranks":{"hundos":32,"performance":59,"accessibility":21,"cumulative":17},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":1077,"firstMeaningfulPaint":1077,"speedIndex":1541.8409999132157,"largestContentfulPaint":1077,"totalBlockingTime":0,"cumulativeLayoutShift":0,"timeToInteractive":1081,"maxPotentialFirstInputDelay":51,"timeToFirstByte":440,"weight":{"total":6343,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":2087,"font":0,"fontCount":0,"stylesheet":4256,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":25,"+weight.total":101,"-weight.document":43,"+weight.document":82,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":95,"-totalBlockingTime":1,"-largestContentfulPaint":50},"axe":{"passes":126,"violations":0},"previousRanks":{"hundos":23,"performance":15,"accessibility":21,"cumulative":13},"hash":"264393a"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<div class="sites-site-description">Handcrafted, clean and minimalisitc 11ty Blog Theme
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/nhoizey/1y" class="elv-externalexempt" title="1y">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fnhoizey%2F1y/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/nhoizey/1y" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">1y</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/nhoizey/1y" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fnhoizey%2F1y/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/nhoizey/1y" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/nhoizey/1y" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/nhoizey/1y" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A template project to build a short URL manager with Eleventy
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://voight-microsite.netlify.app/" class="elv-externalexempt" title="microsite">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fvoightco%2Fmicro-site%2F/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/voightco/micro-site/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">microsite</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://voight-microsite.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fvoight-microsite.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/voightco/micro-site/" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/voightco/micro-site/" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/voightco/micro-site" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Opinionated micro front-end that sets common 11ty defaults. Great for creating landing pages.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://yaes.netlify.app/" class="elv-externalexempt" title="YAES">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2F22mahmoud%2FYAES/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/22mahmoud/YAES" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">YAES</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://yaes.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fyaes.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://yaes.netlify.app/","requestedUrl":"https://yaes.netlify.app/","timestamp":1708021202940,"ranks":{"hundos":13,"performance":53,"accessibility":52,"cumulative":27},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":930,"firstMeaningfulPaint":930,"speedIndex":1442.0004559962763,"largestContentfulPaint":1435,"totalBlockingTime":0,"cumulativeLayoutShift":0.00016383599961969405,"timeToInteractive":930,"maxPotentialFirstInputDelay":50,"timeToFirstByte":425,"weight":{"total":82735,"image":24866,"imageCount":1,"script":3833,"scriptCount":1,"document":7165,"font":45872,"fontCount":3,"stylesheet":999,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":79,"+weight.total":47,"-weight.document":107,"+weight.document":18,"-weight.script":32,"+weight.script":44,"-weight.image":32,"+weight.image":39,"-weight.font":14,"+weight.font":25,"+weight.fontCount":3,"-timeToFirstByte":88,"-totalBlockingTime":1,"-largestContentfulPaint":70},"axe":{"passes":60,"violations":1},"previousRanks":{"hundos":10,"performance":62,"accessibility":52,"cumulative":28},"hash":"13ece5d1"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/22mahmoud/YAES" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/22mahmoud/YAES" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/22mahmoud/YAES" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Starter kit for your next eleventy(11ty) project using postcss, es6, snowpack, webpack.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-react.netlify.app/" class="elv-externalexempt" title="Eleventy React">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fsignalkuppe%2Feleventy-react/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/signalkuppe/eleventy-react" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy React</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-react.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-react.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-react.netlify.app/","requestedUrl":"https://eleventy-react.netlify.app/","timestamp":1708021136943,"ranks":{"hundos":1,"performance":8,"accessibility":69,"cumulative":32},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":875,"firstMeaningfulPaint":875,"speedIndex":875,"largestContentfulPaint":1607.5,"totalBlockingTime":0,"cumulativeLayoutShift":0.02051040156407946,"timeToInteractive":875,"maxPotentialFirstInputDelay":48,"timeToFirstByte":20,"weight":{"total":138897,"image":135204,"imageCount":2,"script":0,"scriptCount":0,"document":3693,"font":0,"fontCount":0,"stylesheet":0,"stylesheetCount":0,"thirdParty":135204,"thirdPartyCount":2},"run":{"number":1,"total":1},"sidequests":{"-weight.total":92,"+weight.total":34,"-weight.document":78,"+weight.document":47,"-weight.script":1,"+weight.script":76,"-weight.image":52,"+weight.image":19,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":2,"-totalBlockingTime":1,"-largestContentfulPaint":74},"axe":{"passes":88,"violations":3},"previousRanks":{"hundos":41,"performance":76,"accessibility":69,"cumulative":42},"hash":"c4c771cf"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/signalkuppe/eleventy-react" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/signalkuppe/eleventy-react" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/signalkuppe/eleventy-react" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">Use React, styled components and storybook in Eleventy
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://7ty.tech/" class="elv-externalexempt" title="Seven">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2F7ty.tech%2F/" width="150" height="150" alt="IndieWeb Avatar for https://7ty.tech/" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Seven</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://7ty.tech/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F7ty.tech%2F/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
</ul>
<div class="sites-site-description">An eleventy template based on bootstrap4layouts. Includes webpack, sass version of bootstrap, vue.js powered search and a whole lot more.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://eleventywebstarter.netlify.app/" class="elv-externalexempt" title="Eleventy Web Starter">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fscottishstoater%2Feleventy-web-starter/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/scottishstoater/eleventy-web-starter" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Eleventy Web Starter</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventywebstarter.netlify.app" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventywebstarter.netlify.app/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/scottishstoater/eleventy-web-starter" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/scottishstoater/eleventy-web-starter" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/scottishstoater/eleventy-web-starter" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A lightweight Eleventy boilerplate utilising, esbuild Tailwind CSS and Post CSS.
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://11ty-blog-vanilla.netlify.app/" class="elv-externalexempt" title="11ty-vanilla-blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fdylnbk%2F11ty-blog/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/dylnbk/11ty-blog" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">11ty-vanilla-blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://11ty-blog-vanilla.netlify.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2F11ty-blog-vanilla.netlify.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://11ty-blog-vanilla.netlify.app/","requestedUrl":"https://11ty-blog-vanilla.netlify.app/","timestamp":1708021065712,"ranks":{"hundos":101,"performance":66,"accessibility":99,"cumulative":102},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":0.93,"bestPractices":1,"seo":0.87,"total":380},"firstContentfulPaint":1029,"firstMeaningfulPaint":1029,"speedIndex":1830.4325439836975,"largestContentfulPaint":1029,"totalBlockingTime":27.5,"cumulativeLayoutShift":0.00003467315513605003,"timeToInteractive":1106.5,"maxPotentialFirstInputDelay":103,"timeToFirstByte":439,"weight":{"total":170442,"image":0,"imageCount":0,"script":0,"scriptCount":0,"document":890,"font":168659,"fontCount":1,"stylesheet":893,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":96,"+weight.total":30,"-weight.document":1,"+weight.document":124,"-weight.script":1,"+weight.script":76,"-weight.image":1,"+weight.image":71,"-weight.font":34,"+weight.font":5,"+weight.fontCount":5,"-timeToFirstByte":94,"-totalBlockingTime":13,"-largestContentfulPaint":43},"axe":{"passes":110,"violations":4},"previousRanks":{"hundos":103,"performance":28,"accessibility":99,"cumulative":104},"hash":"eeeb5265"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/dylnbk/11ty-blog" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/dylnbk/11ty-blog" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/dylnbk/11ty-blog" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A very vanilla 11ty starter for a static blog site with paginated posts and integration with Netlify CMS
</div>
</div>
<div class="sites-site-vert" data-filter-tags="perfectlh">
<a href="https://eleventy-stylus-blog-theme.vercel.app/" class="elv-externalexempt" title="Purple: Eleventy + Stylus Starter Blog">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Far363%2Feleventy-stylus-blog-theme/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/ar363/eleventy-stylus-blog-theme" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Purple: Eleventy + Stylus Starter Blog</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://eleventy-stylus-blog-theme.vercel.app/" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Feleventy-stylus-blog-theme.vercel.app%2F/small/1:1/" width="375" height="375">
</div>
<div class="sites-site-lighthouse">
<is-land on:visible="" import="/js/speedlify-score.js">
<speedlify-score raw-data='{"url":"https://eleventy-stylus-blog-theme.vercel.app/","requestedUrl":"https://eleventy-stylus-blog-theme.vercel.app/","timestamp":1708021146493,"ranks":{"hundos":28,"performance":3,"accessibility":68,"cumulative":36},"lighthouse":{"version":"11.4.0","performance":1,"accessibility":1,"bestPractices":1,"seo":1,"total":400},"firstContentfulPaint":822,"firstMeaningfulPaint":822,"speedIndex":822,"largestContentfulPaint":822,"totalBlockingTime":0,"cumulativeLayoutShift":0.0004128151171519851,"timeToInteractive":822,"maxPotentialFirstInputDelay":16,"timeToFirstByte":73,"weight":{"total":5078,"image":1019,"imageCount":1,"script":0,"scriptCount":0,"document":2420,"font":0,"fontCount":0,"stylesheet":1639,"stylesheetCount":1,"thirdParty":0,"thirdPartyCount":0},"run":{"number":1,"total":1},"sidequests":{"-weight.total":22,"+weight.total":104,"-weight.document":52,"+weight.document":73,"-weight.script":1,"+weight.script":76,"-weight.image":2,"+weight.image":69,"-weight.font":1,"+weight.font":39,"+weight.fontCount":6,"-timeToFirstByte":25,"-totalBlockingTime":1,"-largestContentfulPaint":3},"axe":{"passes":188,"violations":3},"previousRanks":{"hundos":27,"performance":6,"accessibility":68,"cumulative":34},"hash":"a9ffa23"}'></speedlify-score>
</is-land>
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/ar363/eleventy-stylus-blog-theme" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/ar363/eleventy-stylus-blog-theme" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/ar363/eleventy-stylus-blog-theme" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">A nice looking, simple blog theme built with Eleventy SSG and Stylus Preprocessor
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/psalaets/eleventy-bookmarklet" class="elv-externalexempt" title="eleventy-bookmarklet">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fpsalaets%2Feleventy-bookmarklet/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/psalaets/eleventy-bookmarklet" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">eleventy-bookmarklet</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/psalaets/eleventy-bookmarklet" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fpsalaets%2Feleventy-bookmarklet/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/psalaets/eleventy-bookmarklet" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/psalaets/eleventy-bookmarklet" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/psalaets/eleventy-bookmarklet" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty starter for a bookmarklet
</div>
</div>
<div class="sites-site-vert" data-filter-tags="">
<a href="https://github.com/vktrwlt/pugsum" class="elv-externalexempt" title="Pugsum">
<span class="sites-site-name"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fgithub.com%2Fvktrwlt%2Fpugsum/" width="150" height="150" alt="IndieWeb Avatar for https://github.com/vktrwlt/pugsum" class="avatar avatar-indieweb avatar-large" loading="lazy" decoding="async">Pugsum</span>
<div class="sites-screenshot-container"><img alt="Screenshot of https://github.com/vktrwlt/pugsum" loading="lazy" decoding="async" class="sites-screenshot" src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2Fvktrwlt%2Fpugsum/small/1:1/" width="375" height="375">
</div>
</a>
<ul class="inlinelist inlinelist-sm">
<li class="inlinelist-item"><a href="https://github.com/vktrwlt/pugsum" class="elv-externalexempt">Source code</a></li>
<li class="inlinelist-item"><a href="https://app.netlify.com/start/deploy?repository=https://github.com/vktrwlt/pugsum" class="elv-externalexempt">Deploy to Netlify</a></li>
<li class="inlinelist-item"><a href="https://stackblitz.com/github/vktrwlt/pugsum" class="elv-externalexempt">Try on StackBlitz</a></li>
</ul>
<div class="sites-site-description">11ty starter kit using TailwindCSS, Pug, and Webpack
</div>
</div>
</div>
</div>
</filter-container>
<h2 id="lists" tabindex="-1">Lists <a class="direct-link" href="https://www.11ty.dev/docs/starter/#lists">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://jamstackthemes.dev/ssg/eleventy/"><picture><source type="image/avif" srcset="https://www.11ty.dev/img/avatars/twitter/ZEfaySxzUv-90.avif 90w"><source type="image/webp" srcset="https://www.11ty.dev/img/avatars/twitter/ZEfaySxzUv-90.webp 90w"><img alt="stackbithq’s twitter avatar" loading="lazy" decoding="async" class="avatar" src="https://www.11ty.dev/img/avatars/twitter/ZEfaySxzUv-90.jpeg" width="90" height="90"></picture>Jamstack Themes</a> A list of starter themes filterable by supported static site generator and CMS.</li>
</ul>
<h2 id="source-code-samples" tabindex="-1">Source Code Samples <a class="direct-link" href="https://www.11ty.dev/docs/starter/#source-code-samples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Be sure to check out a <a href="https://www.11ty.dev/docs/samples/">full list of every Built With Eleventy site that has provided a link to their source code</a>.</p>
Eleventy 中文文档
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/supporters/
<h1>Thank You Eleventy Contributors!</h1>
<p>Eleventy is made possible by financial contributions from these lovely people:</p>
<div class="facepile supporters-facepile fl">
<div>
<a href="https://nordhealth.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnordhealth%2Fefa1c77%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nordhealth" class="avatar avatar-large" loading="lazy" decoding="async">Nordhealth</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://transloadit.com/?utm_source=opencollective&utm_medium=referral&utm_campaign=sponsorship" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftransloadit%2Fd761fba%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Transloadit" class="avatar avatar-large" loading="lazy" decoding="async">Transloadit</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.springernature.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fspringer-nature%2Fd3d132a%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Springer Nature" class="avatar avatar-large" loading="lazy" decoding="async">Springer Nature</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
</span>
</div>
<div>
<a href="https://www.unabridgedsoftware.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Funabridged-software%2F9a7236d%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Unabridged Software" class="avatar avatar-large" loading="lazy" decoding="async">Unabridged Software</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://pqina.nl/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frikschennink%2F0c531f0%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for PQINA" class="avatar avatar-large" loading="lazy" decoding="async">PQINA</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://frontendmasters.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ffrontendmasters%2F0b9cda4%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Frontend Masters" class="avatar avatar-large" loading="lazy" decoding="async">Frontend Masters</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
</span>
</div>
<div>
<a href="https://sonspring.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnathansmith%2F030d6c5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nathan Smith" class="avatar avatar-large" loading="lazy" decoding="async">Nathan Smith</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://monarchairgroup.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fprivate-jet-charter%2F3baa6e9%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Monarch Air Group" class="avatar avatar-large" loading="lazy" decoding="async">Monarch Air Group</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.mercuryjets.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fprivate-flight%2Fd5b295f%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mercury Jets" class="avatar avatar-large" loading="lazy" decoding="async">Mercury Jets</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.oceg.org/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Foceg%2F6492742%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for OCEG" class="avatar avatar-large" loading="lazy" decoding="async">OCEG</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty"></span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/touchless" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftouchless%2F273bc74%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Touchless" class="avatar avatar-large" loading="lazy" decoding="async">Touchless</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈</span></span>
</span>
</div>
<div>
<a href="https://github.com/sponsors/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fgithub-sponsors%2Fdc0ae97%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for GitHub Sponsors" class="avatar avatar-large" loading="lazy" decoding="async">GitHub Sponsors</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/tyler-gaw" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftyler-gaw%2Ff47e905%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tyler Gaw" class="avatar avatar-large" loading="lazy" decoding="async">Tyler Gaw</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.movavi.com/screen-recorder-mac/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmovavi-software%2Fa1d0167%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Screen recorder for Mac" class="avatar avatar-large" loading="lazy" decoding="async">Screen recorder for Mac</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈</span></span>
</span>
</div>
<div>
<a href="https://arie.ls/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fviljamis%2F9ee636a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ariel Salminen" class="avatar avatar-large" loading="lazy" decoding="async">Ariel Salminen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://scire.au/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fscire%2F916737c%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Scire" class="avatar avatar-large" loading="lazy" decoding="async">Scire</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://about.me/peterdehaan" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fpdehaan%2F1b46cd1%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Peter deHaan" class="avatar avatar-large" loading="lazy" decoding="async">Peter deHaan</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/melanie-sumner" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmelanie-sumner%2F50586d0%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Melanie Sumner" class="avatar avatar-large" loading="lazy" decoding="async">Melanie Sumner</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.bennash.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbennash%2F8198b87%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ben Nash" class="avatar avatar-large" loading="lazy" decoding="async">Ben Nash</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://hire.wil.to/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmat-marquis%2F9ccc6a8%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mat Marquis" class="avatar avatar-large" loading="lazy" decoding="async">Mat Marquis</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://pborenstein.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fphilip-borenstein%2F15b523f%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Philip Borenstein" class="avatar avatar-large" loading="lazy" decoding="async">Philip Borenstein</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/arcxyz" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Farcxyz%2F5346eab%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alejandro Rodríguez" class="avatar avatar-large" loading="lazy" decoding="async">Alejandro Rodríguez</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.webstoemp.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjeromecoupe%2F2910bec%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jérôme Coupé" class="avatar avatar-large" loading="lazy" decoding="async">Jérôme Coupé</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://jsheroes.io/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjsheroes1%2F9fedf0b%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for JSHeroes " class="avatar avatar-large" loading="lazy" decoding="async">JSHeroes </a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.tilde.io/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftilde%2F4773a20%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tilde Inc" class="avatar avatar-large" loading="lazy" decoding="async">Tilde Inc</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-ca48effd" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-ca48effd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jimmy Nilsson" class="avatar avatar-large" loading="lazy" decoding="async">Jimmy Nilsson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-fe447c6a" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-fe447c6a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://infrequently.org/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fslightlyoff%2F749bec0%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alex Russell" class="avatar avatar-large" loading="lazy" decoding="async">Alex Russell</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://nicolas-hoizey.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnhoizey%2F36ba3cd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nicolas Hoizey" class="avatar avatar-large" loading="lazy" decoding="async">Nicolas Hoizey</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/katie-sylor-miller" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkatie-sylor-miller%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Katie Sylor-Miller" class="avatar avatar-large" loading="lazy" decoding="async">Katie Sylor-Miller</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://mikeaparicio.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fperuvianidol%2F19d74c9%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mike Aparicio" class="avatar avatar-large" loading="lazy" decoding="async">Mike Aparicio</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://markbuskbjerg.dk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmark-buskbjerg%2F686c145%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mark Buskbjerg" class="avatar avatar-large" loading="lazy" decoding="async">Mark Buskbjerg</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/aaron-hans" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Faaron-hans%2F78e780c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Aaron Hans" class="avatar avatar-large" loading="lazy" decoding="async">Aaron Hans</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://lauris-webdev.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Flauris-consulting%2F96df930%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Lauris Consulting" class="avatar avatar-large" loading="lazy" decoding="async">Lauris Consulting</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://mxb.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmax-boeck%2F0e09681%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Max Böck" class="avatar avatar-large" loading="lazy" decoding="async">Max Böck</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://hidde.blog/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhdv%2F25c0886%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Hidde" class="avatar avatar-large" loading="lazy" decoding="async">Hidde</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://morten.dk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmortendk%2F48ad9b0%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for mortendk" class="avatar avatar-large" loading="lazy" decoding="async">mortendk</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.higby.io/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhigby%2Fc9a5276%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Branden Higby" class="avatar avatar-large" loading="lazy" decoding="async">Branden Higby</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://jennmoney.biz/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjennschiffer%2F3297823%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jenn Schiffer" class="avatar avatar-large" loading="lazy" decoding="async">Jenn Schiffer</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://ashur.cab/rera" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fashur%2F9880f81%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ashur Cabrera" class="avatar avatar-large" loading="lazy" decoding="async">Ashur Cabrera</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.tgiles.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftim-giles%2Fb0f8f31%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tim Giles" class="avatar avatar-large" loading="lazy" decoding="async">Tim Giles</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://ericwbailey.design/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fericwbailey%2F237fbe6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Eric Bailey" class="avatar avatar-large" loading="lazy" decoding="async">Eric Bailey</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://krs.tf/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkristof-michiels%2Fb32a3f6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kristof Michiels" class="avatar avatar-large" loading="lazy" decoding="async">Kristof Michiels</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://joshcrain.io/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjoshcrain%2F88fcee2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Josh Crain" class="avatar avatar-large" loading="lazy" decoding="async">Josh Crain</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://lukeb.co.uk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcodefoodpixels%2F353a8bd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Luke Bonaccorsi" class="avatar avatar-large" loading="lazy" decoding="async">Luke Bonaccorsi</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/devin-clark" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdevin-clark%2Fcc6e1fb%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Devin Clark" class="avatar avatar-large" loading="lazy" decoding="async">Devin Clark</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/manuel-matuzovic" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmanuel-matuzovic%2Fbf991db%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Manuel Matuzovic" class="avatar avatar-large" loading="lazy" decoding="async">Manuel Matuzovic</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://itsmeara.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fitsmeara%2Fb359a78%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ara Abcarians" class="avatar avatar-large" loading="lazy" decoding="async">Ara Abcarians</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://twitter.com/LostInBrittany" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Flostinbrittany%2Fe75508b%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Horacio Gonzalez" class="avatar avatar-large" loading="lazy" decoding="async">Horacio Gonzalez</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-3b6553b5" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-3b6553b5%2F95bd0d3%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Sam" class="avatar avatar-large" loading="lazy" decoding="async">Sam</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/kyosuke" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkyosuke%2F8702d2a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kyosuke Nakamura" class="avatar avatar-large" loading="lazy" decoding="async">Kyosuke Nakamura</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://thinkdobecreate.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2F5t3ph%2F48723d3%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Stephanie Eckles" class="avatar avatar-large" loading="lazy" decoding="async">Stephanie Eckles</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://hans.gerwitz.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhans-gerwitz%2Fe2e2b49%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Hans Gerwitz" class="avatar avatar-large" loading="lazy" decoding="async">Hans Gerwitz</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://makotokw.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmakoto-kawasaki%2F6ceb0e1%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Makoto Kawasaki" class="avatar avatar-large" loading="lazy" decoding="async">Makoto Kawasaki</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://forte.is/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnoelforte%2Fd916de1%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Noel Forte" class="avatar avatar-large" loading="lazy" decoding="async">Noel Forte</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://dryan.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fd%2F6f3fc9d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Dan Ryan" class="avatar avatar-large" loading="lazy" decoding="async">Dan Ryan</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://angeliqueweger.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fangelique-weger%2Fa75564a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Angelique Weger" class="avatar avatar-large" loading="lazy" decoding="async">Angelique Weger</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.softiron.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsoftiron%2Ffd386ad%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for SoftIron" class="avatar avatar-large" loading="lazy" decoding="async">SoftIron</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/richard-hemmer" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frichard-hemmer%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Richard Hemmer" class="avatar avatar-large" loading="lazy" decoding="async">Richard Hemmer</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://nicknisi.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnicknisi%2F9324d74%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nick Nisi" class="avatar avatar-large" loading="lazy" decoding="async">Nick Nisi</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://edspencer.me.uk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fed-spencer%2F3cacd8c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ed Spencer" class="avatar avatar-large" loading="lazy" decoding="async">Ed Spencer</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://genehack.org/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fgenehack%2F6abda44%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for John SJ Anderson" class="avatar avatar-large" loading="lazy" decoding="async">John SJ Anderson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/ryan-swaney" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fryan-swaney%2F97a6929%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ryan Swaney" class="avatar avatar-large" loading="lazy" decoding="async">Ryan Swaney</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://alistairshepherd.uk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Falistair-shepherd%2F99fdf5d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alistair Shepherd" class="avatar avatar-large" loading="lazy" decoding="async">Alistair Shepherd</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://ivoherrmann.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fivo%2Fed43e75%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ivo Herrmann" class="avatar avatar-large" loading="lazy" decoding="async">Ivo Herrmann</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/rich-holman" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frich-holman%2F3929abe%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Rich Holman" class="avatar avatar-large" loading="lazy" decoding="async">Rich Holman</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://johnhall.codes/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjohn-hall%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for John Hall" class="avatar avatar-large" loading="lazy" decoding="async">John Hall</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://jamessteinbach.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjdsteinbach%2Fde720c5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for James Steinbach" class="avatar avatar-large" loading="lazy" decoding="async">James Steinbach</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://oddbird.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmirisuzanne%2F9acf937%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Miriam Suzanne" class="avatar avatar-large" loading="lazy" decoding="async">Miriam Suzanne</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://bentleydavis.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbentleydavis%2Ff6a0982%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Bentley Davis" class="avatar avatar-large" loading="lazy" decoding="async">Bentley Davis</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://tattooed.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fvince-falconi%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for vince falconi" class="avatar avatar-large" loading="lazy" decoding="async">vince falconi</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://martinschneider.me/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmartin-schneider%2Fa2cdd47%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Martin Schneider" class="avatar avatar-large" loading="lazy" decoding="async">Martin Schneider</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://frontendweekly.tokyo/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ffrontend_weekly%2F7a3396f%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Frontend Weekly Tokyo" class="avatar avatar-large" loading="lazy" decoding="async">Frontend Weekly Tokyo</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://alex.zappa.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Freatlat%2Fff18ac2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alex Zappa" class="avatar avatar-large" loading="lazy" decoding="async">Alex Zappa</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://chrisburnell.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fchrisburnell%2Fb9878c5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Chris Burnell" class="avatar avatar-large" loading="lazy" decoding="async">Chris Burnell</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://ximenavf.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fximenavf92%2Fb90781c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ximenav Vf." class="avatar avatar-large" loading="lazy" decoding="async">Ximenav Vf.</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/kasper-storgaard" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkasper-storgaard%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kasper Storgaard" class="avatar avatar-large" loading="lazy" decoding="async">Kasper Storgaard</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://kevhealy.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkevhealy_oc%2F39978a6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kevin Healy" class="avatar avatar-large" loading="lazy" decoding="async">Kevin Healy</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.david-herron.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdavid-a-herron%2F84f5e02%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for David A. Herron" class="avatar avatar-large" loading="lazy" decoding="async">David A. Herron</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/hellogreg" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhellogreg%2F179eb76%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Greg Gibson" class="avatar avatar-large" loading="lazy" decoding="async">Greg Gibson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/michelle-barker" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmichelle-barker%2F87681dc%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Michelle Barker" class="avatar avatar-large" loading="lazy" decoding="async">Michelle Barker</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://alesandroortiz.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Falesandroortiz%2F412d20a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alesandro Ortiz" class="avatar avatar-large" loading="lazy" decoding="async">Alesandro Ortiz</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://paulrobertlloyd.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fpaulrobertlloyd%2F416ab08%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Paul Robert Lloyd" class="avatar avatar-large" loading="lazy" decoding="async">Paul Robert Lloyd</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.andreavaghi.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fandrea-vaghi%2Fa162ad2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Andrea Vaghi" class="avatar avatar-large" loading="lazy" decoding="async">Andrea Vaghi</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/bryan-robinson" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbryan-robinson%2Fdaa7341%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Bryan Robinson" class="avatar avatar-large" loading="lazy" decoding="async">Bryan Robinson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://joelamyman.co.uk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjoe-lamyman%2Fa9f17ed%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Joe Lamyman" class="avatar avatar-large" loading="lazy" decoding="async">Joe Lamyman</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://neckam.nl/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmichel-van-der-kroef%2F71306a0%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Michel van der Kroef" class="avatar avatar-large" loading="lazy" decoding="async">Michel van der Kroef</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.joshvickerson.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjoshvickerson%2F844ff21%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Josh Vickerson" class="avatar avatar-large" loading="lazy" decoding="async">Josh Vickerson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://wipdeveloper.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbrettmn%2Fe206999%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Brett Nelson" class="avatar avatar-large" loading="lazy" decoding="async">Brett Nelson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="http://melanie-richards.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmelanie-richards%2F01a04fd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Melanie Richards" class="avatar avatar-large" loading="lazy" decoding="async">Melanie Richards</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/marco-zehe" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarco-zehe%2F59e6e8c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Marco Zehe" class="avatar avatar-large" loading="lazy" decoding="async">Marco Zehe</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/wesruv" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fwesruv%2Fecb6a90%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Wes Ruvalcaba" class="avatar avatar-large" loading="lazy" decoding="async">Wes Ruvalcaba</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.kloh.ch/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkloh%2Fe64386e%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Luc Poupard" class="avatar avatar-large" loading="lazy" decoding="async">Luc Poupard</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.entle.co/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fweareentle%2Faa0baa6%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Entle Web Solutions" class="avatar avatar-large" loading="lazy" decoding="async">Entle Web Solutions</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://jesseheady.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjheady%2F01517a6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jesse Heady" class="avatar avatar-large" loading="lazy" decoding="async">Jesse Heady</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://cjlm.ca/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fchristian-miles%2Fb61e380%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Christian Miles" class="avatar avatar-large" loading="lazy" decoding="async">Christian Miles</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://allaboutken.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkhawkins98%2Fed3b782%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ken Hawkins" class="avatar avatar-large" loading="lazy" decoding="async">Ken Hawkins</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://henry.codes/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fxdesro%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for xdesro" class="avatar avatar-large" loading="lazy" decoding="async">xdesro</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.fershad.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-4eff0fb3%2Fd714af5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Fershad Irani" class="avatar avatar-large" loading="lazy" decoding="async">Fershad Irani</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://netinnopeustesti.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnetinnopeustesti%2F59994b0%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Netin nopeustesti" class="avatar avatar-large" loading="lazy" decoding="async">Netin nopeustesti</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://mefody.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdark_mefody%2F2d526c2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nikita Dubko" class="avatar avatar-large" loading="lazy" decoding="async">Nikita Dubko</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.chrisswithinbank.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fswithinbank%2F1042c9b%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Chris" class="avatar avatar-large" loading="lazy" decoding="async">Chris</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://benjamingeese.de/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbenimnetz%2Fbfdac92%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Benjamin Geese" class="avatar avatar-large" loading="lazy" decoding="async">Benjamin Geese</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.marcusrelacion.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarcus-relacion%2Fe8d34bd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Marcus Relacion" class="avatar avatar-large" loading="lazy" decoding="async">Marcus Relacion</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://hoeser.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fraphael-hoeser%2Fc8616e3%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Raphael Höser" class="avatar avatar-large" loading="lazy" decoding="async">Raphael Höser</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://alextheward.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcthos%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Cthos" class="avatar avatar-large" loading="lazy" decoding="async">Cthos</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://sia.codes/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsia-karamalegos%2Fe903fbf%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Sia Karamalegos" class="avatar avatar-large" loading="lazy" decoding="async">Sia Karamalegos</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://nickcolley.co.uk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnickcolley%2F3b8c65d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nick Colley" class="avatar avatar-large" loading="lazy" decoding="async">Nick Colley</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://jonkuperman.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjon-kuperman%2Fc8fe8c1%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jon Kuperman" class="avatar avatar-large" loading="lazy" decoding="async">Jon Kuperman</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/sachin-sancheti" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsachin-sancheti%2F0f1921a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Sachin Sancheti" class="avatar avatar-large" loading="lazy" decoding="async">Sachin Sancheti</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://saneef.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsaneef%2F2a9f441%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Saneef Ansari" class="avatar avatar-large" loading="lazy" decoding="async">Saneef Ansari</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/colin-fahrion" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcolin-fahrion%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Colin Fahrion" class="avatar avatar-large" loading="lazy" decoding="async">Colin Fahrion</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://danburzo.ro/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdanburzo%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Dan Burzo" class="avatar avatar-large" loading="lazy" decoding="async">Dan Burzo</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/jens-grochtdreis" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjens-grochtdreis%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jens Grochtdreis" class="avatar avatar-large" loading="lazy" decoding="async">Jens Grochtdreis</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://dtott.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdanieltott%2F1cc5c4c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Dan Ott" class="avatar avatar-large" loading="lazy" decoding="async">Dan Ott</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://vpsdime.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcheap-vps-by-vpsdime%2Fb85d020%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Cheap VPS" class="avatar avatar-large" loading="lazy" decoding="async">Cheap VPS</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://danabyerly.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsuperterrific%2F7f40b16%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Dana Byerly" class="avatar avatar-large" loading="lazy" decoding="async">Dana Byerly</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://oisin.io/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Foisinq%2Ff2dbacb%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Oisín Quinn" class="avatar avatar-large" loading="lazy" decoding="async">Oisín Quinn</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://renkaatsopivasti.fi/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frenkaatsopivasti%2F501d6f4%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Renkaatsopivasti" class="avatar avatar-large" loading="lazy" decoding="async">Renkaatsopivasti</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://windesol.fi/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fwindesol-sahkon-kilpailutus%2F0302627%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Windesol Sähkön Kilpailutus" class="avatar avatar-large" loading="lazy" decoding="async">Windesol Sähkön Kilpailutus</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.interroban.gg/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-8991c3a9%2F91b7756%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Luke Mitchell" class="avatar avatar-large" loading="lazy" decoding="async">Luke Mitchell</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/signpostmarv" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsignpostmarv%2F49a9057%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for SignpostMarv" class="avatar avatar-large" loading="lazy" decoding="async">SignpostMarv</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.bobmonsour.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbobmonsour%2F24c1988%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Bob Monsour" class="avatar avatar-large" loading="lazy" decoding="async">Bob Monsour</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.centralvainsulation.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcentral-va-insulation%2F18bd484%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Richmond Insulation" class="avatar avatar-large" loading="lazy" decoding="async">Richmond Insulation</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-559626bc" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-559626bc%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Patrick Byrne" class="avatar avatar-large" loading="lazy" decoding="async">Patrick Byrne</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-353478b4" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-353478b4%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for zapscribbles" class="avatar avatar-large" loading="lazy" decoding="async">zapscribbles</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-a2e5f55d" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-a2e5f55d%2F9488043%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Frank Reding" class="avatar avatar-large" loading="lazy" decoding="async">Frank Reding</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/quinnanya" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fquinnanya%2F2337ca7%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for quinnanya" class="avatar avatar-large" loading="lazy" decoding="async">quinnanya</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://birdsong.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcbirdsong%2F43f344c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Cory Birdsong" class="avatar avatar-large" loading="lazy" decoding="async">Cory Birdsong</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://nicolasfriedli.ch/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnfriedli%2Ff3e9e03%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nicolas Friedli" class="avatar avatar-large" loading="lazy" decoding="async">Nicolas Friedli</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/aramzs" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Faramzs%2F6ed4588%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Aram ZS" class="avatar avatar-large" loading="lazy" decoding="async">Aram ZS</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/robin-rendle" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frobin-rendle%2F9d7a6a2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Robin Rendle" class="avatar avatar-large" loading="lazy" decoding="async">Robin Rendle</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://justin.poehnelt.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjpoehnelt%2F53d26c7%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for jpoehnelt" class="avatar avatar-large" loading="lazy" decoding="async">jpoehnelt</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.richmondconcretepros.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-0b57b3c8%2F8aa7329%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Richmond Concrete" class="avatar avatar-large" loading="lazy" decoding="async">Richmond Concrete</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://tannerdolby.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftanner-dolby%2F869309b%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tanner Dolby" class="avatar avatar-large" loading="lazy" decoding="async">Tanner Dolby</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://tomquinonero.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftomquinonero%2Fa2ad001%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tom" class="avatar avatar-large" loading="lazy" decoding="async">Tom</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.celinedesign.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcelinedesign%2Fd5b4d93%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for CelineDesign" class="avatar avatar-large" loading="lazy" decoding="async">CelineDesign</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-a64a7403" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-a64a7403%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nic Chan" class="avatar avatar-large" loading="lazy" decoding="async">Nic Chan</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://steedgood.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fstephen-bell%2F0f1fc74%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Stephen Bell" class="avatar avatar-large" loading="lazy" decoding="async">Stephen Bell</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-44d19b87" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-44d19b87%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.lion-byte.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Flion-byte%2F68603d5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mark Hernandez" class="avatar avatar-large" loading="lazy" decoding="async">Mark Hernandez</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/robert-haselbacher" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frobert-haselbacher%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Robert Haselbacher" class="avatar avatar-large" loading="lazy" decoding="async">Robert Haselbacher</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.lenesaile.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Flene%2Fa991fbd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Lene" class="avatar avatar-large" loading="lazy" decoding="async">Lene</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/brett-dewoody" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbrett-dewoody%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Brett DeWoody" class="avatar avatar-large" loading="lazy" decoding="async">Brett DeWoody</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://eaton-works.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Featonz%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Eaton Zveare" class="avatar avatar-large" loading="lazy" decoding="async">Eaton Zveare</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/marc-huber" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarc-huber%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Marc Huber" class="avatar avatar-large" loading="lazy" decoding="async">Marc Huber</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/aleja-soft-d-o-o" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Faleja-soft-d-o-o%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for ALEJA soft d.o.o." class="avatar avatar-large" loading="lazy" decoding="async">ALEJA soft d.o.o.</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/brian-zerangue" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbrian-zerangue%2Fb5ddc67%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Brian Zerangue" class="avatar avatar-large" loading="lazy" decoding="async">Brian Zerangue</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/coryd" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcoryd%2Fbbb0579%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Cory Dransfeldt" class="avatar avatar-large" loading="lazy" decoding="async">Cory Dransfeldt</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://metatierlist.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmetatierlist%2F68a5b41%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Meta Tier List" class="avatar avatar-large" loading="lazy" decoding="async">Meta Tier List</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://mallonbacka.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmallonbacka%2F29ee50b%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Matthew Hallonbacka" class="avatar avatar-large" loading="lazy" decoding="async">Matthew Hallonbacka</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://ivatech.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fiva-tech%2Fc9a8d8c%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Iva Tech" class="avatar avatar-large" loading="lazy" decoding="async">Iva Tech</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/daniel-saunders" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdaniel-saunders%2F30ca0d9%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Daniel Saunders" class="avatar avatar-large" loading="lazy" decoding="async">Daniel Saunders</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/eric-portis" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Feric-portis%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Eric Portis" class="avatar avatar-large" loading="lazy" decoding="async">Eric Portis</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://danleatherman.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdan-leatherman%2F50d41b7%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for dan leatherman" class="avatar avatar-large" loading="lazy" decoding="async">dan leatherman</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.simoncox.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsimon-cox%2F97d3772%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Simon Cox" class="avatar avatar-large" loading="lazy" decoding="async">Simon Cox</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://kvibber.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkelson-vibber%2Ff17c939%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kelson Vibber" class="avatar avatar-large" loading="lazy" decoding="async">Kelson Vibber</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://cbd.topreview.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcbd-review%2Fd2589dd%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for CBD Review" class="avatar avatar-large" loading="lazy" decoding="async">CBD Review</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.nhhousedemcaucus.com/team/rep-eric-gallager" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Feric-gallager%2F07b9db9%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Eric Gallager" class="avatar avatar-large" loading="lazy" decoding="async">Eric Gallager</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.softermii.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsoftermii_inc%2F5766829%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Softermii" class="avatar avatar-large" loading="lazy" decoding="async">Softermii</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-4cacf993" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-4cacf993%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Zearin" class="avatar avatar-large" loading="lazy" decoding="async">Zearin</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/mael-brunet" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmael-brunet%2F61b7f3a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Maël Brunet" class="avatar avatar-large" loading="lazy" decoding="async">Maël Brunet</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/rabbott" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frabbott%2F1309472%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ryan Abbott" class="avatar avatar-large" loading="lazy" decoding="async">Ryan Abbott</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://fudge.org/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjaycuthrell%2F0d8a132%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jay Cuthrell" class="avatar avatar-large" loading="lazy" decoding="async">Jay Cuthrell</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/joachim-kliemann" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjoachim-kliemann%2F90a2dd8%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Joachim Kliemann" class="avatar avatar-large" loading="lazy" decoding="async">Joachim Kliemann</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://gittings.studio/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fryan-gittings%2F24ed81e%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ryan Gittings" class="avatar avatar-large" loading="lazy" decoding="async">Ryan Gittings</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-656cc0f2" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-656cc0f2%2F909d171%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Austin Carr" class="avatar avatar-large" loading="lazy" decoding="async">Austin Carr</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://iganony.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fanony%2F00676be%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for IgAnony" class="avatar avatar-large" loading="lazy" decoding="async">IgAnony</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-1861337d" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-1861337d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://glenn.thedixons.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdonblanco%2F7f5b6e8%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Glenn Dixon" class="avatar avatar-large" loading="lazy" decoding="async">Glenn Dixon</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/john-j-mills" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjohn-j-mills%2F4842a96%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for John J. Mills" class="avatar avatar-large" loading="lazy" decoding="async">John J. Mills</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-059331f2" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-059331f2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Timon Forrer" class="avatar avatar-large" loading="lazy" decoding="async">Timon Forrer</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-9f542478" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-9f542478%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Léa Tortay" class="avatar avatar-large" loading="lazy" decoding="async">Léa Tortay</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-e9fa8238" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-e9fa8238%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jacques TISSEAU" class="avatar avatar-large" loading="lazy" decoding="async">Jacques TISSEAU</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://buskersbern.ch/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbuskersbern%2F556747d%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Buskers Bern" class="avatar avatar-large" loading="lazy" decoding="async">Buskers Bern</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/nick-huntington" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnick-huntington%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nick Huntington" class="avatar avatar-large" loading="lazy" decoding="async">Nick Huntington</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/bridget-stewart" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbridget-stewart%2Fd193950%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Bridget Stewart" class="avatar avatar-large" loading="lazy" decoding="async">Bridget Stewart</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/djame-goldston" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdjame-goldston%2F0983479%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Djame Goldston" class="avatar avatar-large" loading="lazy" decoding="async">Djame Goldston</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.johntitus.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fthejohnrt%2F7ce51da%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for John Titus" class="avatar avatar-large" loading="lazy" decoding="async">John Titus</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://drhayes.io/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdrhayes%2Fb0c6e42%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for David Hayes" class="avatar avatar-large" loading="lazy" decoding="async">David Hayes</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/kevin-yank" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkevin-yank%2F4850bc1%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kevin Yank" class="avatar avatar-large" loading="lazy" decoding="async">Kevin Yank</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://mattstein.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmattstein%2Ff76d6e0%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Matt Stein" class="avatar avatar-large" loading="lazy" decoding="async">Matt Stein</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/piotr-swiderek" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fpiotr-swiderek%2Fc235b6c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Piotr Świderek" class="avatar avatar-large" loading="lazy" decoding="async">Piotr Świderek</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.silvestar.codes/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcitadoo%2F958b7be%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Silvestar Bistrović" class="avatar avatar-large" loading="lazy" decoding="async">Silvestar Bistrović</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/eben-gilkenson" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Feben-gilkenson%2F2d2d007%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Eben Gilkenson" class="avatar avatar-large" loading="lazy" decoding="async">Eben Gilkenson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.marcfilleul.fr/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarcfilleul%2F4d4ddf5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Marc FILLEUL" class="avatar avatar-large" loading="lazy" decoding="async">Marc FILLEUL</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/richard-guenther" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frichard-guenther%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Richard Günther" class="avatar avatar-large" loading="lazy" decoding="async">Richard Günther</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://danurbanowicz.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdan-urbanowicz%2Fcf2a447%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Dan Urbanowicz" class="avatar avatar-large" loading="lazy" decoding="async">Dan Urbanowicz</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://frank.taillandier.me/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ffranktaillandier%2F2a3ce2f%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Frank Taillandier" class="avatar avatar-large" loading="lazy" decoding="async">Frank Taillandier</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-8f032021" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-8f032021%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for fLaMEd" class="avatar avatar-large" loading="lazy" decoding="async">fLaMEd</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/shivjm" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fshivjm%2F3795984%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Shiv J.M." class="avatar avatar-large" loading="lazy" decoding="async">Shiv J.M.</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://quentin.delcourt.be/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fquentin-delcourt%2F3317abf%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Quentin Delcourt" class="avatar avatar-large" loading="lazy" decoding="async">Quentin Delcourt</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://stackaid.us/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fstackaid%2Fc1d8ea2%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for StackAid" class="avatar avatar-large" loading="lazy" decoding="async">StackAid</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://thomasclausen.dk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fthomasclausen%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Thomas Clausen" class="avatar avatar-large" loading="lazy" decoding="async">Thomas Clausen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/oscar-braunert" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Foscar-braunert%2Fda29f07%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Oscar Braunert" class="avatar avatar-large" loading="lazy" decoding="async">Oscar Braunert</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://chriskirknielsen.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fchriskirknielsen%2Fe0d3299%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for chriskirknielsen" class="avatar avatar-large" loading="lazy" decoding="async">chriskirknielsen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://playaucasino.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fplayaucasino%2Fda52350%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for PlayAUCasino.com" class="avatar avatar-large" loading="lazy" decoding="async">PlayAUCasino.com</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://best-casinos-australia.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbest-casinos-australia-bca%2F826f8cd%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Best Casinos Australia - BCA" class="avatar avatar-large" loading="lazy" decoding="async">Best Casinos Australia - BCA</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://bengo.is/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbengo%2Fba8582b%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for bengo" class="avatar avatar-large" loading="lazy" decoding="async">bengo</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://jendowns.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjendowns%2F65afd21%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jen Downs" class="avatar avatar-large" loading="lazy" decoding="async">Jen Downs</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://daily-dev-tips.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdailydevtips1%2Fde39fa3%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Daily Dev Tips" class="avatar avatar-large" loading="lazy" decoding="async">Daily Dev Tips</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.srwild.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fscott-wild%2F3aafcce%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Scott Wild" class="avatar avatar-large" loading="lazy" decoding="async">Scott Wild</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://basementfloodhelpers.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbasement-flood-helpers%2F4fad7a5%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Basement Flood Helpers" class="avatar avatar-large" loading="lazy" decoding="async">Basement Flood Helpers</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://github.com/TotallyMehis/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmehis%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mehis" class="avatar avatar-large" loading="lazy" decoding="async">Mehis</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://thomasrigby.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhryggrbyr%2F0e10bdc%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Thomas Rigby" class="avatar avatar-large" loading="lazy" decoding="async">Thomas Rigby</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://ezcasino.in/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fezcasinoin%2Fbbdb3c0%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for EzCasino" class="avatar avatar-large" loading="lazy" decoding="async">EzCasino</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://rxdb.info/?utm_source=opencollective&utm_medium=banner&utm_campaign=opencollective_sponsor&utm_content=logo" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frxdbjs%2F2aec389%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for RxDB" class="avatar avatar-large" loading="lazy" decoding="async">RxDB</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/uncenter" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Funcenter%2F4920869%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for uncenter" class="avatar avatar-large" loading="lazy" decoding="async">uncenter</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://mah-rye-kuh.nl/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmah-rye-kuh%2F2f0cfaf%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Marijke" class="avatar avatar-large" loading="lazy" decoding="async">Marijke</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://qrayg.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fqrayg%2Fd463241%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for qrayg" class="avatar avatar-large" loading="lazy" decoding="async">qrayg</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.chadams.me/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fchadamski%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for chadamski" class="avatar avatar-large" loading="lazy" decoding="async">chadamski</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-7b00a09d" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-7b00a09d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Chad Henry" class="avatar avatar-large" loading="lazy" decoding="async">Chad Henry</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/anton-whalley" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fanton-whalley%2F29168a9%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Anton Whalley" class="avatar avatar-large" loading="lazy" decoding="async">Anton Whalley</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-b5ea4f67" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-b5ea4f67%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for shiyan Lim" class="avatar avatar-large" loading="lazy" decoding="async">shiyan Lim</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://meiert.com/en/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fj9t%2F2389b68%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jens Oliver Meiert" class="avatar avatar-large" loading="lazy" decoding="async">Jens Oliver Meiert</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/ava-wroten" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fava-wroten%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ava Wroten" class="avatar avatar-large" loading="lazy" decoding="async">Ava Wroten</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-68053359" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-68053359%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Max" class="avatar avatar-large" loading="lazy" decoding="async">Max</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.juanfernandes.uk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjuanfernandes%2Fc8b2722%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Juan Fernandes" class="avatar avatar-large" loading="lazy" decoding="async">Juan Fernandes</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://boris.schapira.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fborisschapira%2F6881a0d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Boris Schapira" class="avatar avatar-large" loading="lazy" decoding="async">Boris Schapira</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/timothy-smith" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftimothy-smith%2Fa90468b%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Timothy Smith" class="avatar avatar-large" loading="lazy" decoding="async">Timothy Smith</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/darby-dixon-iii" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdarby-dixon-iii%2Fdedde03%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Darby Dixon III" class="avatar avatar-large" loading="lazy" decoding="async">Darby Dixon III</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/rhian-van-esch" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frhian-van-esch%2F35c7d7a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Rhian van Esch" class="avatar avatar-large" loading="lazy" decoding="async">Rhian van Esch</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/alex-ward1" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Falex-ward1%2Ff23d299%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alex Ward" class="avatar avatar-large" loading="lazy" decoding="async">Alex Ward</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/benjamin-randall" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbenjamin-randall%2F2cb2a8d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Benjamin Randall" class="avatar avatar-large" loading="lazy" decoding="async">Benjamin Randall</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.andrewpucci.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fandrewpucci%2F8b7315f%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Andrew Pucci" class="avatar avatar-large" loading="lazy" decoding="async">Andrew Pucci</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/david-woodman" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdavid-woodman%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for David Woodman" class="avatar avatar-large" loading="lazy" decoding="async">David Woodman</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/rob-anderson" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frob-anderson%2F7b27556%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Rob Anderson" class="avatar avatar-large" loading="lazy" decoding="async">Rob Anderson</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://iganony.cc/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Figanony1%2Ffb85868%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for iganony" class="avatar avatar-large" loading="lazy" decoding="async">iganony</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.lightcdn.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Flightcdn%2Fa8c8b6e%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for LightCDN" class="avatar avatar-large" loading="lazy" decoding="async">LightCDN</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/rknightuk" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frknightuk%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Robb Knight" class="avatar avatar-large" loading="lazy" decoding="async">Robb Knight</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://www.lightnode.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Flightnode%2F4847412%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for LightNode" class="avatar avatar-large" loading="lazy" decoding="async">LightNode</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/chris-peckham" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fchris-peckham%2Fd2b1d37%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Chris Peckham" class="avatar avatar-large" loading="lazy" decoding="async">Chris Peckham</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://michaelscepaniak.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhispanic%2F18f184d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Michael Scepaniak" class="avatar avatar-large" loading="lazy" decoding="async">Michael Scepaniak</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://jamforforsakringar.se/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjamfor-forsakringar%2Fd6362fa%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jämför försäkringar" class="avatar avatar-large" loading="lazy" decoding="async">Jämför försäkringar</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://celebian.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fcelebian%2F0a4a5b7%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Celebian" class="avatar avatar-large" loading="lazy" decoding="async">Celebian</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://bikes.emilyhorsman.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Femily-horsman%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Emily Horsman" class="avatar avatar-large" loading="lazy" decoding="async">Emily Horsman</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-1ae986f5" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-1ae986f5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Beau" class="avatar avatar-large" loading="lazy" decoding="async">Beau</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/khoiuna" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkhoiuna%2Fbf4eeee%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Khoi Nguyen" class="avatar avatar-large" loading="lazy" decoding="async">Khoi Nguyen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-46d46801" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-46d46801%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://chrisbemister.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fchris-bemister%2Fb133df3%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Chris Bemister" class="avatar avatar-large" loading="lazy" decoding="async">Chris Bemister</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/michael-fig" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmichael-fig%2F9976a5c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Michael FIG" class="avatar avatar-large" loading="lazy" decoding="async">Michael FIG</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/daniel-fascia" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdaniel-fascia%2F6369e00%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Daniel Fascia" class="avatar avatar-large" loading="lazy" decoding="async">Daniel Fascia</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://robinbakker.nl/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Frobinbakker%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Robin Bakker" class="avatar avatar-large" loading="lazy" decoding="async">Robin Bakker</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/marcop135" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarcop135%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for marcop135" class="avatar avatar-large" loading="lazy" decoding="async">marcop135</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-85b9f9bc" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-85b9f9bc%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for KC" class="avatar avatar-large" loading="lazy" decoding="async">KC</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-fe0e330a" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-fe0e330a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Andrew" class="avatar avatar-large" loading="lazy" decoding="async">Andrew</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/palanisamy-k-k" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fpalanisamy-k-k%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Palanisamy K K" class="avatar avatar-large" loading="lazy" decoding="async">Palanisamy K K</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/dan-bateyko" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdan-bateyko%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Daniel Bateyko" class="avatar avatar-large" loading="lazy" decoding="async">Daniel Bateyko</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/marco-slooten" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarco-slooten%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Marco Slooten" class="avatar avatar-large" loading="lazy" decoding="async">Marco Slooten</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://ohhelloana.blog/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fana-rodrigues%2F240202a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ana Rodrigues" class="avatar avatar-large" loading="lazy" decoding="async">Ana Rodrigues</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/jecelyn-yeen" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjecelyn-yeen%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for jecelyn yeen" class="avatar avatar-large" loading="lazy" decoding="async">jecelyn yeen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://arnaudligny.fr/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Faligny%2Fa45deab%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Arnaud Ligny" class="avatar avatar-large" loading="lazy" decoding="async">Arnaud Ligny</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.webreactiva.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fwebreactiva%2F30e1f11%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Daniel Primo" class="avatar avatar-large" loading="lazy" decoding="async">Daniel Primo</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/justus-grunow" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjustus-grunow%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Justus Grunow" class="avatar avatar-large" loading="lazy" decoding="async">Justus Grunow</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://davepowers.me/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdave-powers%2Ffe35eb6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Dave Powers" class="avatar avatar-large" loading="lazy" decoding="async">Dave Powers</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/tom-feeley" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftom-feeley%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tom Feeley" class="avatar avatar-large" loading="lazy" decoding="async">Tom Feeley</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://corina-rudel.de/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ffricca%2Fc2ee229%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Corina Rudel" class="avatar avatar-large" loading="lazy" decoding="async">Corina Rudel</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.inventage.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Finventageag%2F9430699%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Inventage AG" class="avatar avatar-large" loading="lazy" decoding="async">Inventage AG</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://natesteiner.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnsteiner%2Fd92c1e7%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Nate Steiner" class="avatar avatar-large" loading="lazy" decoding="async">Nate Steiner</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://organicsocialboost.com/buy-youtube-video-views/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbuy-youtube-views-paypal%2F856d920%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Buy Youtube Views PayPal" class="avatar avatar-large" loading="lazy" decoding="async">Buy Youtube Views PayPal</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://tixie.name/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftixie%2Ff4c77d5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Tixie" class="avatar avatar-large" loading="lazy" decoding="async">Tixie</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://hittarabattkod.nu/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhitta-rabattkod%2F73075b6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Hitta rabattkod" class="avatar avatar-large" loading="lazy" decoding="async">Hitta rabattkod</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://plentysocial.com/buy-instagram-followers" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fplentysocialcom%2F54d9769%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for PlentySocial" class="avatar avatar-large" loading="lazy" decoding="async">PlentySocial</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://opencollective.com/kevin-c-tofel" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fkevin-c-tofel%2Fd3db5c6%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Kevin C. Tofel" class="avatar avatar-large" loading="lazy" decoding="async">Kevin C. Tofel</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
<span class="supporters-tier"><span aria-hidden="true" class="emoji">📅</span> Monthly</span>
</span>
</div>
<div>
<a href="https://bullrich.dev/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbullrich%2Fab560e0%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Javier Bullrich" class="avatar avatar-large" loading="lazy" decoding="async">Javier Bullrich</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://sayzlim.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsayzlim%2F22f657d%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Sayz Lim" class="avatar avatar-large" loading="lazy" decoding="async">Sayz Lim</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://sampittko.sk/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsampittko%2F0699646%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Samuel Pitoňák" class="avatar avatar-large" loading="lazy" decoding="async">Samuel Pitoňák</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-47caabe9" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-47caabe9%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Lrnec Gcysiam" class="avatar avatar-large" loading="lazy" decoding="async">Lrnec Gcysiam</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://jaredmusil.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjared-musil%2F6a972d3%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Jared Musil" class="avatar avatar-large" loading="lazy" decoding="async">Jared Musil</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-80664a11" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-80664a11%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mike Healy" class="avatar avatar-large" loading="lazy" decoding="async">Mike Healy</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/gedw99" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fgedw99%2F2bba265%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for gedw99" class="avatar avatar-large" loading="lazy" decoding="async">gedw99</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.tikaj.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ftikajhq%2F168d5b4%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for TIKAJ" class="avatar avatar-large" loading="lazy" decoding="async">TIKAJ</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.benjaminrancourt.ca/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbenjaminrancourt%2F8339090%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Benjamin Rancourt" class="avatar avatar-large" loading="lazy" decoding="async">Benjamin Rancourt</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://pavel.codes/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fnawok%2F34b18a4%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Pavel Fomchenkov" class="avatar avatar-large" loading="lazy" decoding="async">Pavel Fomchenkov</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/markus-schork" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmarkus-schork%2Fa23ec73%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Markus Schork" class="avatar avatar-large" loading="lazy" decoding="async">Markus Schork</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/msfragala" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fmsfragala%2F6c82cb4%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Mitchell Fragala" class="avatar avatar-large" loading="lazy" decoding="async">Mitchell Fragala</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://julien-brionne.fr/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fjulien-brionne%2F19ca358%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Julien Brionne" class="avatar avatar-large" loading="lazy" decoding="async">Julien Brionne</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/hampton-moore" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fhampton-moore%2Ff4a174f%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Hampton Moore" class="avatar avatar-large" loading="lazy" decoding="async">Hampton Moore</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://blog7.org/seo-uslugi/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fpanagiotiskontogiannis%2Fdc31c3c%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Panagiotis Kontogiannis" class="avatar avatar-large" loading="lazy" decoding="async">Panagiotis Kontogiannis</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/leah-wagner" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fleah-wagner%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Leah Wagner" class="avatar avatar-large" loading="lazy" decoding="async">Leah Wagner</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/antonio-mateo" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fantonio-mateo%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Antonio Mateo" class="avatar avatar-large" loading="lazy" decoding="async">Antonio Mateo</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/ed-johnson-williams" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fed-johnson-williams%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Ed Johnson-Williams" class="avatar avatar-large" loading="lazy" decoding="async">Ed Johnson-Williams</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/sebastian-murphy" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fsebastian-murphy%2Fca122cd%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Sebastian Murphy" class="avatar avatar-large" loading="lazy" decoding="async">Sebastian Murphy</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/incognito-62374879" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fincognito-62374879%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for incognito" class="avatar avatar-large" loading="lazy" decoding="async">incognito</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-47418cad" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-47418cad%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-810291f7" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-810291f7%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://leadscanner.com.ua/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fleadscanner%2Ff66dd9c%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Leadscanner" class="avatar avatar-large" loading="lazy" decoding="async">Leadscanner</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-0fb9c071" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-0fb9c071%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Sarah" class="avatar avatar-large" loading="lazy" decoding="async">Sarah</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-75d1fbfb" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-75d1fbfb%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-29c7a764" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-29c7a764%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-ca675c75" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-ca675c75%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Carol" class="avatar avatar-large" loading="lazy" decoding="async">Carol</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-2a874cef" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-2a874cef%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-26ba1dd8" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-26ba1dd8%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-108cf2c5" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-108cf2c5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Lisa" class="avatar avatar-large" loading="lazy" decoding="async">Lisa</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-3090e3c5" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-3090e3c5%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for stacey" class="avatar avatar-large" loading="lazy" decoding="async">stacey</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://swissdevjobs.ch/jobs/Java/All" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fswissdev-jobs%2F73ec46a%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for SwissDev Jobs" class="avatar avatar-large" loading="lazy" decoding="async">SwissDev Jobs</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-7de80209" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-7de80209%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.bilder-zum-ausmalen.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fbilder-zum-ausmalen%2F0a28756%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Bilder zum Ausmalen" class="avatar avatar-large" loading="lazy" decoding="async">Bilder zum Ausmalen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://alle-fehler.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Falle-fehler%2F6eb59e2%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Alle-Fehler.com" class="avatar avatar-large" loading="lazy" decoding="async">Alle-Fehler.com</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://waschfehler.de/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fwaschfehler%2F9797855%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for WaschFehler" class="avatar avatar-large" loading="lazy" decoding="async">WaschFehler</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.drucker-fehlermeldungen.de/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdrucker-fehlermeldungen%2F8195ae4%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Drucker Fehlermeldungen" class="avatar avatar-large" loading="lazy" decoding="async">Drucker Fehlermeldungen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.fehler-loschen.de/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ffehler-loschen%2F7aaa761%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Fehler Löschen" class="avatar avatar-large" loading="lazy" decoding="async">Fehler Löschen</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.on7g.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fon7g%2F15cc93e%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for ON7G.com Ausmalbilder" class="avatar avatar-large" loading="lazy" decoding="async">ON7G.com Ausmalbilder</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://www.freude-kinder.com/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Ffreude-kinder%2F437d576%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Freude Kinder" class="avatar avatar-large" loading="lazy" decoding="async">Freude Kinder</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://opencollective.com/guest-af1daa6a" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fguest-af1daa6a%2Favatar.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Guest" class="avatar avatar-large" loading="lazy" decoding="async">Guest</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div>
<a href="https://doxford.net/" class="elv-externalexempt supporters-link" rel="sponsored"><img src="https://v1.image.11ty.dev/https%3A%2F%2Fimages.opencollective.com%2Fdoxford%2Faf614f3%2Flogo.png/webp/66/" width="66" height="66" alt="Open Collective Avatar for Doxford" class="avatar avatar-large" loading="lazy" decoding="async">Doxford</a>
<span class="fl fl-inline fl-nowrap">
<span class="supporters-hearts">🎈<span class="supporters-hearts-empty">🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈</span></span>
</span>
</div>
<div><a href="https://opencollective.com/11ty"><img src="https://www.11ty.dev/img/default-avatar.png" alt="Default Avatar Image" loading="lazy" class="avatar"><strong>and you?</strong> <span aria-hidden="true" class="emoji">🎁</span><span aria-hidden="true" class="emoji">🎁</span><span aria-hidden="true" class="emoji">🎁</span></a></div>
</div>
<p>There are <a href="https://www.11ty.dev/docs/how-to-support/"><strong>other ways to support Eleventy</strong> too</a>!</p>
Working with Templates
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/templates/
<h1>使用模板</h1>
<ul><li><a href="https://www.11ty.dev/docs/assets/">Add CSS, JS, Fonts</a>: Add assets to your Eleventy project.</li>
<li><a href="https://www.11ty.dev/docs/layouts/">Layouts</a>: Wrap content in other content.<ul><li><a href="https://www.11ty.dev/docs/layout-chaining/">Layout Chaining</a>: Wrap layouts in other layouts.</li></ul></li>
<li><a href="https://www.11ty.dev/docs/collections/">Collections</a>: Group, reuse, and sort content in interesting ways.</li>
<li><a href="https://www.11ty.dev/docs/pages-from-data/">Create Pages From Data</a>: Iterate over a data set and create multiple output files.</li>
<li><a href="https://www.11ty.dev/docs/pagination/">Pagination</a>: Iterate over a data set and create multiple files from a single template.<ul><li><a href="https://www.11ty.dev/docs/pagination/nav/">Pagination Navigation</a>: Create a list of links to every paginated page on a pagination template.</li></ul></li>
<li><a href="https://www.11ty.dev/docs/dates/">Content Dates</a>: Assigning dates to content, using dates in front matter.</li>
<li><a href="https://www.11ty.dev/docs/permalinks/">Permalinks</a>: Remap a template to a new output location (or prevent writing a file)</li>
<li><a href="https://www.11ty.dev/docs/i18n/">Internationalization (i18n)</a>: How to best deliver localized multi-language content.</li>
<li><a href="https://www.11ty.dev/docs/pitfalls/">Common Pitfalls</a>: Some common problems that people run into.</li></ul>
Opening a Terminal
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/terminal-window/
<h1>Opening a Terminal Window</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/terminal-window/#mac-os">Mac OS </a></li><li><a href="https://www.11ty.dev/docs/terminal-window/#windows">Windows </a></li><li><a href="https://www.11ty.dev/docs/terminal-window/#popular-alternatives">Popular Alternatives </a><ul><li><a href="https://www.11ty.dev/docs/terminal-window/#editors-bundled-with-terminals">Editors bundled with Terminals </a></li></ul></li></ul></div><p></p>
</details>
<p>Eleventy runs in a <a href="https://en.wikipedia.org/wiki/Terminal_emulator">Terminal window</a>. If you’re not familiar with Terminal windows, they’re used to run typed commands (and programs) on your computer. A Terminal window is mostly synonymous with terms like Command Line Interface (CLI) or shell prompt.</p>
<p>Here’s how to open a Terminal window in various operating systems:</p>
<h2 id="mac-os" tabindex="-1">Mac OS <a class="direct-link" href="https://www.11ty.dev/docs/terminal-window/#mac-os">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Mac OS includes an Application called <code>Terminal.app</code> which can be used to run Eleventy. Depending on your version of Mac OS, it may be in <code>/Applications/Utilities/Terminal.app</code>.</p>
<ul>
<li><a href="https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac">Open or quit Terminal on Mac on the <em>Apple Terminal User Guide</em></a></li>
</ul>
<h2 id="windows" tabindex="-1">Windows <a class="direct-link" href="https://www.11ty.dev/docs/terminal-window/#windows">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Depending on your version of Windows, it may include the <code>Terminal</code> App (aka Windows PowerShell), the <code>Command Prompt</code> (also known as <code>cmd.exe</code>), or both.</p>
<h2 id="popular-alternatives" tabindex="-1">Popular Alternatives <a class="direct-link" href="https://www.11ty.dev/docs/terminal-window/#popular-alternatives">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://iterm2.com/">iTerm2</a> (Mac OS)</li>
</ul>
<h3 id="editors-bundled-with-terminals" tabindex="-1">Editors bundled with Terminals <a class="direct-link" href="https://www.11ty.dev/docs/terminal-window/#editors-bundled-with-terminals">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<ul>
<li><a href="https://nova.app/">Nova</a> (Mac OS)</li>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a> (Mac OS, Windows, Linux)
<ul>
<li>On Windows, Visual Studio Code is bundled with Windows Powershell.</li>
</ul>
</li>
</ul>
Incremental
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/usage/incremental/
<h1>Incremental Builds</h1>
<p>Incremental builds via the command line flag <code>--incremental</code> perform a partial build operating only on files that have changed to improve build times when doing local development.</p>
<p>Let’s check in on the current capabilities and the roadmap:</p>
<ul>
<li><strong>Templates</strong>
<ul>
<li>If you create/update a template file, Eleventy will run the build for that file and only that file.</li>
<li><strong>Layouts</strong> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.21">Added in v2.0.0</span>
<ul>
<li>When you change a layout file, any templates using that layout file are rebuilt.</li>
</ul>
</li>
<li><strong>Template Dependencies</strong> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.19">Added in v2.0.0</span>Any templates using a dependency mapped via <a href="https://www.11ty.dev/docs/languages/custom/#registering-dependencies">the <code>addDependencies</code> method</a> will be rebuilt when those dependencies change.
<ul>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="1.0.0">Added in v1.0.0</span>This feature was previously exposed as part of the API for <a href="https://www.11ty.dev/docs/languages/custom/#isincrementalmatch">Custom template extensions</a> via the <code>isIncrementalMatch</code> function.</li>
<li><strong>Other Includes</strong>: If the created/updated file is in your <a href="https://www.11ty.dev/docs/config/#directory-for-includes">Includes</a> or <a href="https://www.11ty.dev/docs/config/#directory-for-layouts-(optional)">Layouts</a> directories, a full build will run. <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.21">Added in v2.0.0</span>Files used as Eleventy Layouts in your build are exempted.</li>
</ul>
</li>
<li><strong>Collections</strong> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.21">Added in v2.0.0</span>
<ul>
<li>When you add or delete a tag from a template, any templates using that collection tag (as declared by <a href="https://www.11ty.dev/docs/pagination/"><code>pagination.data</code></a> or <a href="https://www.11ty.dev/docs/collections/#declare-your-collections-for-incremental-builds"><code>eleventyImport.collections</code></a>) will be rebuilt.</li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.11ty.dev/docs/copy/"><strong>Passthrough Copy</strong></a>
<ul>
<li>Incremental passthrough copy uses the following rules:</li>
<li>Only copy a passthrough copy file when it actively changed. Don’t run a template build if only a passthrough copy file has changed.</li>
<li>If a template has changed, don’t copy the passthrough copy files.</li>
<li>There was some discussion about making this behavior default at <a href="https://github.com/11ty/eleventy/issues/1109">Issue #1109</a>.</li>
<li><span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.12">Added in v2.0.0</span> <a href="https://www.11ty.dev/docs/copy/#passthrough-during-serve">Passthrough copy can be emulated during <code>--serve</code></a> to speed up both incremental and non-incremental builds.</li>
</ul>
</li>
<li><strong>Configuration File</strong>
<ul>
<li>If you create/update your Eleventy configuration file, a full build will run.</li>
</ul>
</li>
<li><strong>Don’t build on startup</strong>: <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.25">Added in v2.0.0</span> <a href="https://www.11ty.dev/docs/usage/#ignore-initial-to-run-eleventy-without-an-initial-build"><code>--ignore-initial</code></a> was added and works great with <code>--incremental</code>.</li>
</ul>
<h2 id="additional-template-language-features" tabindex="-1">Additional Template Language Features <a class="direct-link" href="https://www.11ty.dev/docs/usage/incremental/#additional-template-language-features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>The previously stated incremental features are implemented in Eleventy core and are available to all template languages. Some template types offer additional <code>--incremental</code> build support:</p>
<ul>
<li><a href="https://www.11ty.dev/docs/languages/webc/">WebC</a>: deep knowledge of the full component dependency graph allows us to smartly build templates that use a component when that component is changed.</li>
</ul>
<h2 id="🗓-to-do" tabindex="-1">🗓 To Do <a class="direct-link" href="https://www.11ty.dev/docs/usage/incremental/#%F0%9F%97%93-to-do">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><strong>Cold Start Incremental</strong>: <code>--incremental</code> does a full build to start out to provide a fresh starting point to work from. This feature would save the state of the build to the file system for faster cold starts. <a href="https://github.com/11ty/eleventy/issues/984">Issue #984</a></li>
<li><strong>Incremental on a Build Server</strong>: Cache the output folder between builds on a CI server like Netlify and only process/write templates that have changed since the last build. <a href="https://github.com/11ty/eleventy/issues/2775">Issue #2775</a></li>
<li>Global/directory/template Data file usage mapped to templates (would give some improvements to serverless too) <a href="https://github.com/11ty/eleventy/issues/2706">Issue #2706</a></li>
<li>Template types
<ul>
<li><code>11ty.js</code>: Map JavaScript dependencies</li>
<li><code>liquid</code>: Dependency mapping for Liquid templates (<code>{% include %}</code>, etc)</li>
<li><s>Dependency mapping for Nunjucks templates (<code>{% include %}</code>, etc)</s> Unlikely due to Nunjucks API limitations.</li>
</ul>
</li>
<li>Collections dependencies improvements: while we have <code>eleventyImport.collections</code> to declaratively log collections dependencies, we may be able to dive deeper into template syntax APIs to find the symbols in use. <a href="https://github.com/11ty/eleventy/issues/1615">Issue #1615</a> Alternatively we may be able to change the collections API to use Proxies to get smarter about this in an easier way (though previous experiments with this for <code>eleventyComputed</code> failed in some languages).</li>
<li><a href="https://www.11ty.dev/docs/plugins/render/">Render plugin</a>: <code>{% renderFile %}</code> dependencies</li>
<li><em>Stretch goal</em>: Pagination-level incremental that operates on a subset of data <a href="https://github.com/11ty/eleventy/issues/1087">Issue #1087</a></li>
</ul>
Release History
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/versions/
<h1>版本历史</h1>
<p>You can also browse the latest releases <a href="https://www.npmjs.com/package/@11ty/eleventy?activeTab=versions">on npm</a> or <a href="https://github.com/11ty/eleventy/releases">on GitHub</a>.</p>
<ul>
<li><code>LATEST</code>—<a href="https://www.11ty.dev/docs/">Docs</a></li>
<li><code>v2.0.1</code>—<a href="https://v2-0-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v2.0.1">Release Notes</a></li>
<li><code>v2.0.0</code>—<a href="https://v2-0-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v2.0.0">Release Notes</a></li>
<li><code>v1.0.2</code>—<a href="https://v1-0-2.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v1.0.2">Release Notes</a></li>
<li><code>v1.0.1</code>—<a href="https://v1-0-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v1.0.1">Release Notes</a></li>
<li><code>v1.0.0</code>—<a href="https://v1-0-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v1.0.0">Release Notes</a></li>
<li><code>v0.12.1</code>—<a href="https://v0-12-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.12.1">Release Notes</a></li>
<li><code>v0.12.0</code>—<a href="https://v0-12-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.12.0">Release Notes</a></li>
<li><code>v0.11.1</code>—<a href="https://v0-11-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.11.1">Release Notes</a></li>
<li><code>v0.11.0</code>—<a href="https://v0-11-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.11.0">Release Notes</a></li>
<li><code>v0.10.0</code>—<a href="https://v0-10-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.10.0">Release Notes</a></li>
<li><code>v0.9.0</code>—<a href="https://v0-9-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.9.0">Release Notes</a></li>
<li><code>v0.8.3</code>—<a href="https://v0-8-3.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.8.3">Release Notes</a></li>
<li><code>v0.8.2</code>—<a href="https://v0-8-2.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.8.2">Release Notes</a></li>
<li><code>v0.8.1</code>—<a href="https://v0-8-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.8.1">Release Notes</a></li>
<li><code>v0.8.0</code>—<a href="https://v0-8-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.8.0">Release Notes</a></li>
<li><code>v0.7.1</code>—<a href="https://v0-7-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.7.1">Release Notes</a></li>
<li><code>v0.7.0</code>—<a href="https://v0-7-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.7.0">Release Notes</a></li>
<li><code>v0.6.0</code>—<a href="https://v0-6-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.6.0">Release Notes</a></li>
<li><code>v0.5.4</code>—<a href="https://v0-5-4.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.5.4">Release Notes</a></li>
<li><code>v0.5.3</code>—<a href="https://v0-5-3.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.5.3">Release Notes</a></li>
<li><code>v0.5.2</code>—<a href="https://v0-5-2.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.5.2">Release Notes</a></li>
<li><code>v0.5.1</code>—<a href="https://v0-5-1.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.5.1">Release Notes</a></li>
<li><code>v0.5.0</code>—<a href="https://v0-5-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.5.0">Release Notes</a></li>
<li><code>v0.4.0</code>—<a href="https://v0-4-0.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.4.0">Release Notes</a></li>
<li><code>v0.3.6</code>—<a href="https://v0-3-6.11ty.dev/docs/">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.3.6">Release Notes</a></li>
<li><code>v0.3.5</code>—<a href="https://github.com/11ty/eleventy/blob/v0.3.5/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.3.5">Release Notes</a></li>
<li><code>v0.3.4</code>—<a href="https://github.com/11ty/eleventy/blob/v0.3.4/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.3.4">Release Notes</a></li>
<li><code>v0.3.3</code>—<a href="https://github.com/11ty/eleventy/blob/v0.3.3/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.3.3">Release Notes</a></li>
<li><code>v0.3.1</code>—<a href="https://github.com/11ty/eleventy/blob/v0.3.1/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.3.1">Release Notes</a></li>
<li><code>v0.3.0</code>—<a href="https://github.com/11ty/eleventy/blob/v0.3.0/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.3.0">Release Notes</a></li>
<li><code>v0.2.15</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.15/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.2.15">Release Notes</a></li>
<li><code>v0.2.14</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.14/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.2.14">Release Notes</a></li>
<li><code>v0.2.13</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.13/README.md">Docs</a></li>
<li><code>v0.2.12</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.12/README.md">Docs</a></li>
<li><code>v0.2.11</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.11/README.md">Docs</a></li>
<li><code>v0.2.10</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.10/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.2.10">Release Notes</a></li>
<li><code>v0.2.9</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.9/README.md">Docs</a></li>
<li><code>v0.2.8</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.8/README.md">Docs</a></li>
<li><code>v0.2.7</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.7/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.2.7">Release Notes</a></li>
<li><code>v0.2.6</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.6/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.2.6">Release Notes</a></li>
<li><code>v0.2.5</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.5/README.md">Docs</a></li>
<li><code>v0.2.4</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.4/README.md">Docs</a></li>
<li><code>v0.2.3</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.3/README.md">Docs</a></li>
<li><code>v0.2.2</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.2/README.md">Docs</a> and <a href="https://github.com/11ty/eleventy/releases/tag/v0.2.2">Release Notes</a></li>
<li><code>v0.2.1</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.1/README.md">Docs</a></li>
<li><code>v0.2.0</code>—<a href="https://github.com/11ty/eleventy/blob/v0.2.0/README.md">Docs</a></li>
<li><code>v0.1.9</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.9/README.md">Docs</a></li>
<li><code>v0.1.8</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.8/README.md">Docs</a></li>
<li><code>v0.1.7</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.7/README.md">Docs</a></li>
<li><code>v0.1.6</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.6/README.md">Docs</a></li>
<li><code>v0.1.5</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.5/README.md">Docs</a></li>
<li><code>v0.1.4</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.4/README.md">Docs</a></li>
<li><code>v0.1.3</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.3/README.md">Docs</a></li>
<li><code>v0.1.2</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.2/README.md">Docs</a></li>
<li><code>v0.1.1</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.1/README.md">Docs</a></li>
<li><code>v0.1.0</code>—<a href="https://github.com/11ty/eleventy/blob/v0.1.0/README.md">Docs</a></li>
</ul>
Watch and Serve
2023-03-18T09:02:31Z
https://www.11ty.dev/docs/watch-serve/
<h1>Watch and Serve Configuration</h1>
<details class="toc">
<summary>Contents</summary>
<p></p><div class="table-of-contents"><ul><li><a href="https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets">Add Your Own Watch Targets </a></li><li><a href="https://www.11ty.dev/docs/watch-serve/#ignore-watching-files">Ignore Watching Files </a><ul><li><a href="https://www.11ty.dev/docs/watch-serve/#.gitignore">.gitignore </a></li><li><a href="https://www.11ty.dev/docs/watch-serve/#configuration-api">Configuration API </a></li></ul></li><li><a href="https://www.11ty.dev/docs/watch-serve/#watch-javascript-dependencies">Watch JavaScript Dependencies </a></li><li><a href="https://www.11ty.dev/docs/watch-serve/#add-delay-before-re-running">Add delay before re-running </a></li><li><a href="https://www.11ty.dev/docs/watch-serve/#eleventy-dev-server">Eleventy Dev Server </a></li><li><a href="https://www.11ty.dev/docs/watch-serve/#browsersync">Browsersync </a></li></ul></div><p></p>
</details>
<h2 id="add-your-own-watch-targets" tabindex="-1">Add Your Own Watch Targets <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>The <code>addWatchTarget</code> config method allows you to manually add a file or directory for Eleventy to watch. When the file or the files in this directory change Eleventy will trigger a build. This is useful if Eleventy is not directly aware of any external file dependencies.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addWatchTarget</span><span class="token punctuation">(</span><span class="token string">"./src/scss/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><strong>Advanced usage note:</strong> This works with <a href="https://github.com/paulmillr/chokidar#api"><code>chokidar</code> under the hood</a> and chokidar uses <a href="https://github.com/micromatch/picomatch"><code>picomatch</code> for globbing</a>:</p>
<ul>
<li>Both <code>**/*.(png|jpeg)</code> and <code>**/*.{png,jpeg}</code> are valid globs to matches any <code>png</code> or <code>jpeg</code> file in your project.</li>
</ul>
<h2 id="ignore-watching-files" tabindex="-1">Ignore Watching Files <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#ignore-watching-files">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<h3 id=".gitignore" tabindex="-1"><code>.gitignore</code> <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#.gitignore">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Eleventy will ignore changes to files or folders listed in your <code>.gitignore</code> file by default, <a href="https://www.11ty.dev/docs/ignores/#opt-out-of-using-.gitignore">unless <code>setUseGitIgnore</code> is turned off</a>.</p>
<h3 id="configuration-api" tabindex="-1">Configuration API <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0-canary.18">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#configuration-api">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Previously, <a href="https://www.11ty.dev/docs/ignores/#configuration-api">the configuration API ignores for template processing</a> were also used as ignores for watching (e.g. <code>eleventyConfig.ignores.add("README.md")</code>).</p>
<p>New in v2.0.0, watch target ignores now have their own dedicated API:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Do not rebuild when README.md changes (You can use a glob here too)</span><br> eleventyConfig<span class="token punctuation">.</span>watchIgnores<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"README.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// Or delete entries too</span><br> eleventyConfig<span class="token punctuation">.</span>watchIgnores<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"README.md"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The <code>watchIgnores</code> Set starts with a default <code>**/node_modules/**</code> entry.</p>
<h2 id="watch-javascript-dependencies" tabindex="-1">Watch JavaScript Dependencies <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#watch-javascript-dependencies">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>When in <code>--watch</code> mode, Eleventy will spider the dependencies of your <a href="https://www.11ty.dev/docs/languages/javascript/">JavaScript Templates</a> (<code>.11ty.js</code>), <a href="https://www.11ty.dev/docs/data-js/">JavaScript Data Files</a> (<code>.11tydata.js</code> or <code>_data/**/*.js</code>), or Configuration File (usually <code>.eleventy.js</code>) to watch those files too. Files in <code>node_modules</code> directories are ignored. This feature is <em>enabled by default</em>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Enabled by default</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setWatchJavaScriptDependencies</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="add-delay-before-re-running" tabindex="-1">Add delay before re-running <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#add-delay-before-re-running">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>A hardcoded amount of time Eleventy will wait before triggering a new build when files have changes during <code>--watch</code> or <code>--serve</code> modes. You probably won’t need this, but is useful in some edge cases with other task runners (Gulp, Grunt, etc).</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// default is 0</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setWatchThrottleWaitTime</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// in milliseconds</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="eleventy-dev-server" tabindex="-1">Eleventy Dev Server <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span> <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#eleventy-dev-server">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div id="swap-back-to-browsersync"></div>
<ul>
<li><a href="https://www.11ty.dev/docs/dev-server/">This content has moved to <code>/docs/dev-server/</code></a></li>
</ul>
<h2 id="browsersync" tabindex="-1">Browsersync <a class="direct-link" href="https://www.11ty.dev/docs/watch-serve/#browsersync">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li><a href="https://www.11ty.dev/docs/server-browsersync/">This content has moved to <code>/docs/server-browsersync/</code></a></li>
</ul>
Quick Tip #011—Draft Posts using Computed Data
2023-01-24T00:00:00Z
https://www.11ty.dev/docs/quicktips/draft-posts/
<p>Here’s a quick snippet that shows how to combine Eleventy’s <a href="https://www.11ty.dev/docs/data-global-custom/">Configuration API Global Data</a> and <a href="https://www.11ty.dev/docs/data-computed/">Computed Data</a> features in your Eleventy Configuration file to implement a simple drafts feature for any piece of content.</p>
<p>Set <code>draft: true</code> anywhere in a file’s <a href="https://www.11ty.dev/docs/data-cascade/">data cascade</a> and that file will be <em>only</em> be built when using Eleventy in <code>--serve</code> or <code>--watch</code> modes. It will be excluded from full Eleventy builds.</p>
<p>You might imagine how this could be extended to add a publishing date feature too: to exclude content from builds before a specific date set in a post’s front matter (or elsewhere in the data cascade).</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// When `permalink` is false, the file is not written to disk</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"eleventyComputed.permalink"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Always skip during non-watch/serve builds</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>draft <span class="token operator">&&</span> <span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BUILD_DRAFTS</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">return</span> data<span class="token punctuation">.</span>permalink<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// When `eleventyExcludeFromCollections` is true, the file is not included in any collections</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addGlobalData</span><span class="token punctuation">(</span><span class="token string">"eleventyComputed.eleventyExcludeFromCollections"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Always exclude from non-watch/serve builds</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>draft <span class="token operator">&&</span> <span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BUILD_DRAFTS</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">return</span> data<span class="token punctuation">.</span>eleventyExcludeFromCollections<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"eleventy.before"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>runMode<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// Set the environment variable</span><br> <span class="token keyword">if</span><span class="token punctuation">(</span>runMode <span class="token operator">===</span> <span class="token string">"serve"</span> <span class="token operator">||</span> runMode <span class="token operator">===</span> <span class="token string">"watch"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BUILD_DRAFTS</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<h2 id="related" tabindex="-1">Related <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/draft-posts/#related">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>You can see the <a href="https://github.com/11ty/eleventy-base-blog/blob/851eafdc4c3a612142e0e6ae84f54cb0f0eb98b1/eleventy.config.drafts.js">above code in action on the <code>eleventy-base-blog</code> project</a></li>
<li><a href="https://www.11ty.dev/docs/permalinks/#skip-writing-to-the-file-system">Skip Writing to the File System with <code>permalink: false</code></a></li>
<li><a href="https://www.11ty.dev/docs/collections/#how-to-exclude-content-from-collections">How to exclude content from collections with <code>eleventyExcludeFromCollections</code></a></li>
</ul>
Quick Tip #010—Transform Global Data using an `eleventyComputed.js` Global Data File
2020-11-01T00:00:00Z
https://www.11ty.dev/docs/quicktips/create-multiple-computed-data-elements/
<p>You can generate multiple data cascade elements in one <code>eleventyComputed.js</code> file. Following is a working example.</p>
<p>This example generates data cascade elements from multiple <code>.json</code> files in the global data directory.</p>
<p>Assume you have data files named <code>links.json</code> and <code>copyrights.json</code>, and you only want to extract a portion of the json object. In this case, the <code>entry</code> element contains the useful data in the json object, and is a child of the <code>feed</code> element in this case.</p>
<p>The corresponding <code>eleventyComputed.js</code> file contents can look like the following:</p>
<div class="codetitle codetitle-left"><b>Filename </b>_data/eleventyComputed.js</div>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">myCopyrights</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> data<span class="token punctuation">.</span>copyrights<span class="token punctuation">.</span>feed<span class="token punctuation">.</span>entry<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token function-variable function">myLinks</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> data<span class="token punctuation">.</span>links<span class="token punctuation">.</span>feed<span class="token punctuation">.</span>entry<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Cache Data Requests
2020-04-23T00:00:00Z
https://www.11ty.dev/docs/quicktips/cache-api-requests/
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">
Read the full <a href="https://www.11ty.dev/docs/plugins/fetch/">documentation at the <code>eleventy-fetch</code> plugin page</a>.
</div></div>
<p>In <a href="https://www.11ty.dev/docs/quicktips/eliminate-js/">Quick Tip #007</a>, we described a method to fetch data from an API at build time (in this example it was GitHub Stargazers) to display on your site.</p>
<p>However, if you’re working on your site locally, you probably don’t want every Eleventy build to make a request to an external API call. You’d hit the rate limit pretty quickly (on GitHub, 60 per hour) and each request would slow down your build times!</p>
<p>Now there is an easier way. You can use the <a href="https://www.11ty.dev/docs/plugins/fetch/"><code>eleventy-fetch</code></a> utility to cache these requests to save on both API limits and build performance!</p>
<pre><code>npm install @11ty/eleventy-fetch
</code></pre>
<h2 id="features" tabindex="-1">Features <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/cache-api-requests/#features">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ul>
<li>Makes at most one network request in the <code>duration</code> time span—save on both your API limit count and your build time!</li>
<li>Easy graceful handling of bad network requests to an API.</li>
<li>If your cache expires and it makes another request, and that request fails—it automatically falls back to the expired cache entry! This is especially useful if you’re developing without a network connection (airplane-driven-development)—your site will work the same as it did with the network connection—no changes required to your local development environment.</li>
</ul>
<h2 id="example" tabindex="-1">Example <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/cache-api-requests/#example">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This code is currently in use on the Eleventy web site to display GitHub stars in the footer. Check out the <a href="https://github.com/11ty/11ty-website/blob/768b97fb27543e3139fe53dfb19cdeafb12e3d1c/_data/github.js">full source code</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>_data/github.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// https://developer.github.com/v3/repos/#get</span><br> <span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span><span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span> <span class="token comment">// 1 day</span><br> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"json"</span> <span class="token comment">// also supports "text" or "buffer"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">stargazers</span><span class="token operator">:</span> json<span class="token punctuation">.</span>stargazers_count<br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">Take note that if you’re using this on a Netlify build, it will not maintain updates to the cache (as it resets the cache to the files that are checked into git) and will likely re-run every time.
<ul>
<li>Current <a href="https://developer.github.com/v3/#rate-limiting">GitHub rate limits</a> are limited to 60 requests per hour, so this will only be a problem if you do more than 60 Netlify builds in an hour.</li>
<li>The <a href="https://blog.npmjs.org/post/164799520460/api-rate-limiting-rolling-out">npm API doesn’t seem to have a hard limit</a>.</li>
</ul></div></div>
<h3 id="failing-even-more-gracefully" tabindex="-1">Failing Even More Gracefully <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/cache-api-requests/#failing-even-more-gracefully">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<p>Wrap the above code in a nice <code>try catch</code> allows you to return a fake data set if the very first request fails (no expired cache entry is available). <strong>Note that if there is already an expired cache entry available, we use that instead.</strong></p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> EleventyFetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@11ty/eleventy-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">try</span> <span class="token punctuation">{</span><br> <span class="token comment">// https://developer.github.com/v3/repos/#get</span><br> <span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">EleventyFetch</span><span class="token punctuation">(</span><span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token string">"1d"</span><span class="token punctuation">,</span> <span class="token comment">// 1 day</span><br> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"json"</span> <span class="token comment">// also supports "text" or "buffer"</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">stargazers</span><span class="token operator">:</span> json<span class="token punctuation">.</span>stargazers_count<br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"Failed getting GitHub stargazers count, returning 0"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">stargazers</span><span class="token operator">:</span> <span class="token number">0</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
Trigger a Netlify Build Every Day with IFTTT
2019-02-01T00:00:00Z
https://www.11ty.dev/docs/quicktips/netlify-ifttt/
<p>In <a href="https://www.11ty.dev/docs/quicktips/eliminate-js/">Quick Tip #007</a> we talked about migrating away from using a Client-side third-party JavaScript widget to display GitHub stargazer counts and towards a Data fetched at Build time approach.</p>
<p>Updating this data at build time means that the data isn’t necessarily “live” (although the counts are likely cached at by at least one of the upstream dependencies of this widget, with a frequency that is out of your control).</p>
<p>I’m comfortable with these numbers being a little delayed (more than the JS widget method was) and with this new approach I get more control over the frequency of updates BUT I do probably want to run the build at least once a day. To do this, I used an <a href="https://ifttt.com/">IFTTT</a> applet to trigger my Netlify build to run every morning using <a href="https://docs.netlify.com/configure-builds/build-hooks/">Netlify’s Build Hooks</a>.</p>
<p><em>Heavily inspired by <a href="https://www.hawksworx.com/note/tw/1038067638369443840">Phil Hawksworth’s work on RSS Jamstack</a>.</em></p>
<h2 id="get-a-netlify-build-hook" tabindex="-1">Get a Netlify Build Hook <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/netlify-ifttt/#get-a-netlify-build-hook">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ol>
<li>Go into your <a href="https://app.netlify.com/">Netlify</a> site’s <code>Build & Deploy</code> settings</li>
<li>Select <code>Continuous Deployment</code></li>
<li>Add a <code>Build hook</code></li>
<li>Name it <code>Deploy every day</code> (or whatever you’d like)</li>
<li>I selected the <code>master</code> branch for my site.</li>
<li>Save this and it will provide you with a long URL a la <code>https://api.netlify.com/build_hooks/SOME_ID_HERE</code>. This is the URL you want.</li>
</ol>
<h2 id="add-an-ifttt-applet" tabindex="-1">Add an IFTTT Applet <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/netlify-ifttt/#add-an-ifttt-applet">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<ol>
<li>Go to <a href="https://ifttt.com/create"><code>New Applet</code> on ifttt.com</a></li>
<li>Click <code>+this</code></li>
<li>Select the <code>Date & Time</code> service</li>
<li>Select the <code>Every day at</code> option (or whatever frequency you’d like)</li>
<li>Select the time you’d like the build to run.</li>
<li>Click <code>+that</code></li>
<li>Select the <code>Webhooks</code> service</li>
<li>Select the <code>Make a web request</code> option</li>
<li>For the URL field, use the Build Hook URL you’ve already retrieved from Netlify.</li>
<li>For the Method field, choose <code>POST</code>.</li>
<li>For the Content Type field, choose <code>application/x-www-form-urlencoded</code>.</li>
<li>For the Body field, type <code>{}</code>.</li>
<li>Click the <code>Create action</code> button.</li>
<li>Click <code>Finish</code>.</li>
</ol>
Fetch GitHub Stargazers Count (and More) at Build Time
2019-01-31T00:00:00Z
https://www.11ty.dev/docs/quicktips/eliminate-js/
<p>Older iterations of this website used a third party JavaScript widget to show the number of GitHub Stars the project currently had. You can see it in action on the <a href="https://v0-7-1.11ty.dev/docs/">versioned docs for 0.7.1</a> (scroll to the bottom).</p>
<p>This was in fact the only <code><script></code> tag on the entire <a href="https://www.11ty.dev/">11ty.dev</a> web site and it was from a third party. Naturally, it needed to be annihilated.</p>
<p>Let’s change up our architecture to ruthlessly eliminate this client-side JavaScript.</p>
<h2 id="get-the-stargazers-count-from-the-github-api" tabindex="-1">Get the Stargazers Count from the GitHub API <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/eliminate-js/#get-the-stargazers-count-from-the-github-api">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Read more at the <a href="https://developer.github.com/v3/repos/#get">GitHub API documentation</a>.</p>
<p>This is a bit different from our client-side implementation because this data is only updated as often as your build runs. This is implemented using a global <a href="https://www.11ty.dev/docs/data-js/">JavaScript data file</a> at <code>_data/github.js</code>.</p>
<ul>
<li>Install new dependencies: <code>npm install node-fetch@cjs --save-dev</code></li>
<li>Read more about <a href="https://www.npmjs.com/package/node-fetch"><code>node-fetch</code></a></li>
</ul>
<div class="codetitle codetitle-left"><b>Filename </b>_data/github.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> fetch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"node-fetch"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"Fetching new github stargazers count…"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// GitHub API: https://developer.github.com/v3/repos/#get</span><br> <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"https://api.github.com/repos/11ty/eleventy"</span><span class="token punctuation">)</span><br> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// node-fetch option to transform to json</span><br> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">json</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token comment">// prune the data to return only what we want</span><br> <span class="token keyword">return</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">stargazers</span><span class="token operator">:</span> json<span class="token punctuation">.</span>stargazers_count<br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Now in your templates you can output the stargazers count with:</p>
<div class="codetitle codetitle-left"><b>Syntax </b>Liquid, Nunjucks</div>
<pre class="language-html"><code class="language-html">{{ github.stargazers }} GitHub Stars</code></pre>
<p>which outputs</p>
<pre><code>1515 GitHub Stars
</code></pre>
<p>Bonus: I created a <a href="https://github.com/11ty/11ty-website/blob/ac3579909078f860f4af1185c8f7353d56833c22/.eleventy.js#L82"><code>humanReadableNum</code> filter</a>) using the <a href="https://www.npmjs.com/package/human-readable-numbers"><code>human-readable-numbers</code></a> package to format the number.</p>
<h2 id="more-examples" tabindex="-1">More Examples <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/eliminate-js/#more-examples">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>You can look in the footer of this page to see examples of this in use on this very web site. I used it for:</p>
<ul>
<li><a href="https://github.com/11ty/11ty-website/blob/ac3579909078f860f4af1185c8f7353d56833c22/_data/npm.js">NPM Download Count</a></li>
<li><a href="https://github.com/11ty/11ty-website/blob/ac3579909078f860f4af1185c8f7353d56833c22/_data/github.js">GitHub Stargazers Count</a></li>
<li><a href="https://github.com/11ty/11ty-website/blob/ac3579909078f860f4af1185c8f7353d56833c22/_data/twitter.js">Twitter Followers Count</a> (careful here, this one is super brittle but Twitter’s API is historically anti-developer so 😇)</li>
</ul>
<p>These all use the recommended caching mechanism described in the next section.</p>
<h2 id="recommended-cache-the-data-to-the-file-system" tabindex="-1">Recommended: Cache the Data to the File System <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/eliminate-js/#recommended-cache-the-data-to-the-file-system">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">It is highly <strong>recommended</strong> to cache your API call data to the file system so that you aren’t making a ton of requests to an API with every build. Luckily, we have a <a href="https://www.11ty.dev/docs/quicktips/cache-api-requests/">Quick Tip on how to Cache your Data Requests</a>!</div></div>
<h2 id="update-counts-daily" tabindex="-1">Update Counts Daily <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/eliminate-js/#update-counts-daily">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>If you want to update these counts automatically every day, read <a href="https://www.11ty.dev/docs/quicktips/netlify-ifttt/">Quick Tip #008—Trigger a Netlify Build Every Day with IFTTT</a>.</p>
Adding a 404 Not Found Page to your Static Site
2018-09-20T00:00:00Z
https://www.11ty.dev/docs/quicktips/not-found/
<p>A <code>404: Not Found</code> page is a pretty standard thing on the web. It’s particularly useful when someone shares a broken or mistyped link. You don’t need dynamic middleware to do this, it’s pretty easy to add to a statically generated site. There are a few options, depending on your web host:</p>
<p>But first let’s make our <code>404.html</code> template:</p>
<pre class="language-html"><code class="language-html">---<br>title: Oops! Not Found<br>permalink: 404.html<br>---<br><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is where you should tell the user how to find their content. Maybe on the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>home page?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Eleventy will output this template to <code>404.html</code>.</p>
<p>If you’re using <a href="https://help.github.com/en/github/working-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site">GitHub Pages</a>, <a href="https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages">GitLab Pages</a>, or <a href="https://docs.netlify.com/routing/redirects/redirect-options/#custom-404-page-handling">Netlify</a>, there is no step two! A <code>404.html</code> file in your output directory is all you need.</p>
<p>Netlify even has lovely <a href="https://docs.netlify.com/routing/redirects/redirect-options/#custom-404-page-handling">multi-language 404 page support too using <code>Redirects</code></a>.</p>
<h2 id=".htaccess" tabindex="-1">.htaccess <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/not-found/#.htaccess">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>For other hosts, if you use <code>.htaccess</code> for configuration you can use <code>ErrorDocument</code>. Make sure your root directory matches here!</p>
<pre><code>ErrorDocument 404 /404.html
</code></pre>
<h2 id="with-serve" tabindex="-1">With <code>--serve</code> <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/not-found/#with-serve">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<div class="elv-callout elv-callout-info"><div class="elv-callout-label">INFO:</div><div class="elv-callout-c">If you’re using the new <a href="https://www.11ty.dev/docs/watch-serve/#eleventy-dev-server">Eleventy Dev Server</a> <span data-pagefind-ignore="" class="minilink minilink-addedin" data-uncoerced-version="2.0.0">Added in v2.0.0</span>, the <code>404.html</code> convention is now provided to you for free! You can skip this section!<br>
<br>
If you’d like to backport this functionality to Browsersync, keep reading. (Note also that you can <a href="https://www.11ty.dev/docs/dev-server/#swap-back-to-browsersync">use Browsersync with Eleventy 2.0!</a>)<br>
</div></div>
<p>If you're using Browsersync with Eleventy (with <code>eleventy --serve</code>), you can configure it to do the 404 routing by passing a callback in your config. Read more on <a href="https://www.11ty.dev/docs/config/#override-browsersync-server-options">the BrowserSyncConfig option</a>, the <a href="https://browsersync.io/docs/options#option-callbacks">Browsersync callbacks option</a>, and <a href="https://github.com/browsersync/browser-sync/issues/1398">how to provide a 404 using a Browsersync callback</a>.</p>
<div class="codetitle codetitle-left"><b>Filename </b>.eleventy.js</div>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"fs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> <span class="token constant">NOT_FOUND_PATH</span> <span class="token operator">=</span> <span class="token string">"_site/404.html"</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">setBrowserSyncConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br> <span class="token literal-property property">callbacks</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token function-variable function">ready</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> bs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br><br> bs<span class="token punctuation">.</span><span class="token function">addMiddleware</span><span class="token punctuation">(</span><span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>fs<span class="token punctuation">.</span><span class="token function">existsSync</span><span class="token punctuation">(</span><span class="token constant">NOT_FOUND_PATH</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Expected a \`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">NOT_FOUND_PATH</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\` file but could not find one. Did you create a 404.html template?</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token keyword">const</span> content_404 <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token constant">NOT_FOUND_PATH</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// Add 404 http status code in request header.</span><br> res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">404</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string-property property">"Content-Type"</span><span class="token operator">:</span> <span class="token string">"text/html; charset=UTF-8"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// Provides the 404 content without redirect.</span><br> res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>content_404<span class="token punctuation">)</span><span class="token punctuation">;</span><br> res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><em>Thank you <a href="https://github.com/clottman">Cassey Lottman</a>.</em></p>
Quick Tip #005—Super Simple CSS Concatenation
2018-06-27T00:00:00Z
https://www.11ty.dev/docs/quicktips/concatenate/
<p>In some situations you may want to concatenate content files together into a single top level template. Maybe you want to create a single CSS file with all of your component CSS inside.</p>
<p>Consider this sample <code>theme.njk</code> file:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> theme.css</span><br><span class="token punctuation">---</span></span><br>{% include "components/header.css" %}<br>{% include "components/footer.css" %}</code></pre>
<p>That’s an easy way to concatenate files and control the include order.</p>
<p>You might imagine creating an <code>include-all</code> <a href="https://www.11ty.dev/docs/shortcodes/">Shortcode</a> that uses <a href="https://www.npmjs.com/package/fast-glob"><code>fast-glob</code></a> to include a glob of files like <code>{% include-all "components/*.css %}</code>, but that’s an exercise left to the reader!</p>
<h2 id="capture-and-minify" tabindex="-1">Capture and Minify <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/concatenate/#capture-and-minify">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>In our <a href="https://www.11ty.dev/docs/quicktips/inline-css/">Inline CSS Quick Tip</a>, we discussed how to capture and minify a CSS file. This approach can be modified, of course, to capture multiple includes too!</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- capture the CSS content as a Nunjucks variable --></span><br>{% set css %}<br> {% include "components/header.css" %}<br> {% include "components/footer.css" %}<br>{% endset %}<br><span class="token comment"><!-- feed it through our cssmin filter to minify --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token punctuation">{</span><span class="token punctuation">{</span> css | cssmin | safe <span class="token punctuation">}</span><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<h2 id="work-with-what-you-have" tabindex="-1">Work with what you have <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/concatenate/#work-with-what-you-have">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Of course, Eleventy has no desire to replace your existing build pipeline. This is just a super simple example if you want something up and running quickly.</p>
<p>That said, Eleventy wants to work with what you have. As an example, the <a href="https://github.com/philhawksworth/eleventyone/"><code>EleventyOne</code> project scaffold</a> is a fine example of using Eleventy with Gulp and Sass. The <a href="https://github.com/zachleat/zachleat.com">zachleat.com source code</a> is an older example that works with Grunt and Sass.</p>
<h3 id="warning-about-content-security-policy" tabindex="-1">Warning about Content Security Policy <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/concatenate/#warning-about-content-security-policy">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
If you are using a Content Security Policy on your website, make sure the <code>style-src</code> directive allows <code>'unsafe-inline'</code>. Otherwise, your inline CSS will not load.
</div></div>
Add Edit on GitHub Links to All Pages
2018-06-08T00:00:00Z
https://www.11ty.dev/docs/quicktips/edit-on-github-links/
<p>It’s nice to be able to instantly edit your HTML on GitHub when you spot an error or an improvement you can make. Why not facilitate this by adding an <em>Edit this page on GitHub</em> link to every page? You can see an example of this on our page footer.</p>
<h2 id="use-a-layout-file" tabindex="-1">Use a Layout File <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/edit-on-github-links/#use-a-layout-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Make sure you’re using a Layout file so that you can add these to a single place and have the links applied to all of your pages.</p>
<ul>
<li><a href="https://www.11ty.dev/docs/layouts/">Read more about Layouts</a></li>
</ul>
<p>Here’s a sample:</p>
<pre class="language-html"><code class="language-html"> …<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span><br> © 2019 Eleventy<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<h2 id="add-your-link" tabindex="-1">Add your link! <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/edit-on-github-links/#add-your-link">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Edit your layout file to add the link. Provide the URL to the base of your repo and use the Eleventy provided <code>{{ page.inputPath }}</code> variable to point to the correct input file. Yes, this will also work with paginated templates.</p>
<pre class="language-html"><code class="language-html"> …<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span><br> © 2019 Eleventy<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://github.com/11ty/11ty-website/blob/main/{{ page.inputPath }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Edit this page on GitHub<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>That’s it!</p>
Quick Tip #002—Inline Minified JavaScript
2018-06-08T00:00:00Z
https://www.11ty.dev/docs/quicktips/inline-js/
<p><em>Originally posted on <a href="https://www.zachleat.com/web/that-could-possibly-work/">The Simplest Web Site That Could Possible Work Well on zachleat.com</a></em></p>
<p>This tip works great if you have small JS utilities that you’d like to have in your <code><head></code>. For example, this works great with the Filament Group <a href="https://github.com/filamentgroup/loadJS"><code>loadJS</code></a> or <a href="https://github.com/filamentgroup/loadCSS"><code>loadCSS</code></a> utilities.</p>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-js/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><code>npm install terser</code> to make the terser minifier available in your project.</p>
<h2 id="configuration" tabindex="-1">Configuration <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-js/#configuration">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Add the following <code>jsmin</code> filter to your Eleventy Config file:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> minify <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"terser"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>eleventyConfig<span class="token punctuation">.</span><span class="token function">addNunjucksAsyncFilter</span><span class="token punctuation">(</span><span class="token string">"jsmin"</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><br> <span class="token parameter">code<span class="token punctuation">,</span><br> callback</span><br><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">try</span> <span class="token punctuation">{</span><br> <span class="token keyword">const</span> minified <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">minify</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> minified<span class="token punctuation">.</span>code<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">"Terser error: "</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// Fail gracefully.</span><br> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> code<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2 id="create-your-javascript-file" tabindex="-1">Create your JavaScript File <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-js/#create-your-javascript-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Add a sample JavaScript file to your <code>_includes</code> directory. Let’s call it <code>sample.js</code>.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// Hi</span><br>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2 id="capture-and-minify" tabindex="-1">Capture and Minify <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-js/#capture-and-minify">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Capture the JavaScript into a variable and run it through the filter (this sample is using Nunjucks syntax)</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- capture the JS content as a Nunjucks variable --></span><br>{% set js %}<br> {% include "sample.js" %}<br>{% endset %}<br><span class="token comment"><!-- feed it through our jsmin filter to minify --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> <span class="token punctuation">{</span><span class="token punctuation">{</span> js <span class="token operator">|</span> jsmin <span class="token operator">|</span> safe <span class="token punctuation">}</span><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<h3 id="warning-about-content-security-policy" tabindex="-1">Warning about Content Security Policy <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-js/#warning-about-content-security-policy">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
If you are using a Content Security Policy on your website, make sure the <code>script-src</code> directive allows <code>'unsafe-inline'</code>. Otherwise, your inline Javascript will not load.
</div></div>
Quick Tip #004—Zero Maintenance Tag Pages for your Blog
2018-06-08T00:00:00Z
https://www.11ty.dev/docs/quicktips/tag-pages/
<p>This quick tip will show you how to automatically generate Tag Pages (lists of content tagged into a collection).</p>
<p>We’ll use pagination to automatically generate a template for each tag we want to link to.</p>
<p>Here’s a sample pagination template using Nunjucks:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> collections<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">alias</span><span class="token punctuation">:</span> tag<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> /tags/<span class="token punctuation">{</span><span class="token punctuation">{</span> tag <span class="token punctuation">}</span><span class="token punctuation">}</span>/</span><br><span class="token punctuation">---</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Tagged “{{ tag }}”<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br>{% set taglist = collections[ tag ] %}<br>{% for post in taglist | reverse %}<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ post.data.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br>{% endfor %}<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
<p>First up notice how we’re pointing our <code>pagination</code> to iterate over <code>collections</code>, which is an object keyed with tag names pointing to the collection of content containing that tag.</p>
<p>Consider these two sample markdown posts, one using a <code>tech</code> tag and one using a <code>personal</code> tag:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My First Post<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> tech</span><br><span class="token punctuation">---</span></span></code></pre>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My Second Post<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> personal</span><br><span class="token punctuation">---</span></span></code></pre>
<p>Our pagination template above will now generate two pages: <code>/tags/personal/index.html</code> and <code>/tags/tech/index.html</code>.</p>
<p>The great thing here is that we don’t have to manage our tag list in a central place. These tags can be littered throughout our content and individual tag pages will be created automatically.</p>
<h2 id="filtering-/-excluding" tabindex="-1">Filtering / Excluding <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/tag-pages/#filtering-/-excluding">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Have a tag you’d like to exclude from this list? Use <a href="https://www.11ty.dev/docs/pagination/#filtering-values">pagination filtering</a> like this:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">pagination</span><span class="token punctuation">:</span><br> <span class="token key atrule">data</span><span class="token punctuation">:</span> collections<br> <span class="token key atrule">size</span><span class="token punctuation">:</span> <span class="token number">1</span><br> <span class="token key atrule">alias</span><span class="token punctuation">:</span> tag<br> <span class="token key atrule">filter</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> tech<br><span class="token key atrule">permalink</span><span class="token punctuation">:</span> /tags/<span class="token punctuation">{</span><span class="token punctuation">{</span> tag <span class="token punctuation">}</span><span class="token punctuation">}</span>/</span><br><span class="token punctuation">---</span></span></code></pre>
<p>Now Eleventy will only generate a <code>/tags/personal/</code> template and <code>tech</code> will be ignored.</p>
<h2 id="in-practice" tabindex="-1">In Practice <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/tag-pages/#in-practice">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>This is currently in use on the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> sample project</a>. Check out source code in the <a href="https://github.com/11ty/eleventy-base-blog/blob/main/content/tags.njk"><code>tags.njk</code> template</a> and <a href="https://eleventy-base-blog.netlify.com/tags/another-tag/">see a live demo</a>.</p>
Quick Tip #001—Inline Minified CSS
2018-06-07T00:00:00Z
https://www.11ty.dev/docs/quicktips/inline-css/
<p><em>Originally posted on <a href="https://www.zachleat.com/web/that-could-possibly-work/">The Simplest Web Site That Could Possibly Work Well on zachleat.com</a></em></p>
<p>This tip works well on small sites that don’t have a lot of CSS. Inlining your CSS removes an external request from your critical path and speeds up page rendering times! If your CSS file is small enough, this is a simplification/end-around for <a href="https://www.smashingmagazine.com/2015/08/understanding-critical-css/">Critical CSS approaches</a>.</p>
<h2 id="installation" tabindex="-1">Installation <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-css/#installation">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><code>npm install clean-css</code> to make the CSS minifier available in your project.</p>
<h2 id="configuration" tabindex="-1">Configuration <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-css/#configuration">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Add the following <code>cssmin</code> filter to your Eleventy Config file:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> CleanCSS <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"clean-css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"cssmin"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">CleanCSS</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">minify</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span><span class="token punctuation">.</span>styles<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="create-your-css-file" tabindex="-1">Create your CSS File <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-css/#create-your-css-file">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Add a sample CSS file to your <code>_includes</code> directory. Let’s call it <code>sample.css</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span><br> <span class="token property">font-family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<h2 id="capture-and-minify" tabindex="-1">Capture and Minify <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-css/#capture-and-minify">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p>Capture the CSS into a variable and run it through the filter (this sample is using Nunjucks syntax)</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- capture the CSS content as a Nunjucks variable --></span><br>{% set css %}<br> {% include "sample.css" %}<br>{% endset %}<br><span class="token comment"><!-- feed it through our cssmin filter to minify --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token punctuation">{</span><span class="token punctuation">{</span> css | cssmin | safe <span class="token punctuation">}</span><span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<h2 id="using-javascript-templates" tabindex="-1">Using JavaScript templates <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-css/#using-javascript-templates">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h2>
<p><em>Contributed by <a href="https://github.com/zgreen">Zach Green</a></em></p>
<p>You can also inline minified CSS in a <a href="https://www.11ty.dev/docs/languages/javascript/">JavaScript template</a>. This technique does not use filters, and instead uses <code>async</code> functions:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"fs/promises"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> CleanCSS <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"clean-css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><style><br> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">await</span> fs<br> <span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"./sample.css"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">CleanCSS</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">minify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span>styles<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br></style></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></code></pre>
<h3 id="warning-about-content-security-policy" tabindex="-1">Warning about Content Security Policy <a class="direct-link" href="https://www.11ty.dev/docs/quicktips/inline-css/#warning-about-content-security-policy">
<span class="sr-only" data-pagefind-ignore="">Jump to heading</span>
<span aria-hidden="true" data-pagefind-ignore="">#</span>
</a></h3>
<div class="elv-callout elv-callout-warn"><div class="elv-callout-label">WARNING:</div><div class="elv-callout-c">
If you are using a Content Security Policy on your website, make sure the <code>style-src</code> directive allows <code>'unsafe-inline'</code>. Otherwise, your inline CSS will not load.
</div></div>