jekyll-docs 3.5.2 → 3.6.0

data/site/tutorials/custom-404-page/index.html

@@ -4,13 +4,13 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="generator" content="Jekyll v3.5.2">
+  <meta name="generator" content="Jekyll v3.6.0">
   <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
   <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <!-- Begin Jekyll SEO tag v2.2.3 -->
+  <!-- Begin Jekyll SEO tag v2.3.0 -->
 <title>Custom 404 Page | Jekyll • Simple, blog-aware, static sites</title>
 <meta property="og:title" content="Custom 404 Page">
 <meta property="og:locale" content="en_US">
@@ -20,12 +20,12 @@
 <meta property="og:url" content="https://jekyllrb.com/tutorials/custom-404-page/">
 <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
 <meta property="og:type" content="article">
-<meta property="article:published_time" content="2017-08-12T13:36:54-07:00">
+<meta property="article:published_time" content="2017-10-24T08:07:43-07:00">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:site" content="@jekyllrb">
 <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
 <script type="application/ld+json">
-{"@context":"http://schema.org","@type":"BlogPosting","headline":"Custom 404 Page","datePublished":"2017-08-12T13:36:54-07:00","dateModified":"2017-08-12T13:36:54-07:00","description":"You can easily serve custom 404 error pages with Jekyll to replace the default Error 404 – File Not Found page displayed when one tries to access a broken link on your site.","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/custom-404-page/"},"url":"https://jekyllrb.com/tutorials/custom-404-page/"}</script>
+{"name":null,"description":"You can easily serve custom 404 error pages with Jekyll to replace the default Error 404 – File Not Found page displayed when one tries to access a broken link on your site.","url":"https://jekyllrb.com/tutorials/custom-404-page/","headline":"Custom 404 Page","dateModified":"2017-10-24T08:07:43-07:00","datePublished":"2017-10-24T08:07:43-07:00","sameAs":null,"@type":"BlogPosting","author":null,"image":null,"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/custom-404-page/"},"@context":"http://schema.org"}</script>
 <!-- End Jekyll SEO tag -->
 
   <!--[if lt IE 9]>
@@ -148,8 +148,7 @@
 
 <p>If you plan to organize your files under subdirectories, the error page should have the following Front Matter Data, set: <code class="highlighter-rouge">permalink: /404.html</code>. This is to ensure that the compiled <code class="highlighter-rouge">404.html</code> resides at the root of your processed site, where it’ll be picked by the server.</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 # example 404.md
 
 layout: default
@@ -159,8 +158,7 @@ permalink: /404.html
 # 404
 
 Page not found! :(
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <h2 id="hosting-on-apache-web-servers">Hosting on Apache Web Servers</h2>
 
@@ -168,17 +166,13 @@ Page not found! :(
 
 <p>Simply add the following to your <code class="highlighter-rouge">.htaccess</code> file.</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>ErrorDocument 404 /404.html
-</code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ErrorDocument 404 /404.html
+</code></pre></div></div>
 
 <p>With an <code class="highlighter-rouge">.htaccess</code> file, you have the freedom to place your error page within a subdirectory.</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>ErrorDocument 404 /error_pages/404.html
-</code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ErrorDocument 404 /error_pages/404.html
+</code></pre></div></div>
 
 <p>Where the path is relative to your site’s domain.</p>
 
@@ -188,17 +182,15 @@ Page not found! :(
 
 <p>The procedure is just as simple as configuring Apache servers, but slightly different.</p>
 
-<p>Add the following to the ngnix configuration file, <code class="highlighter-rouge">nginx.conf</code>, which is usually located inside <code class="highlighter-rouge">/etc/nginx/</code> or <code class="highlighter-rouge">/etc/nginx/conf/</code>:</p>
+<p>Add the following to the nginx configuration file, <code class="highlighter-rouge">nginx.conf</code>, which is usually located inside <code class="highlighter-rouge">/etc/nginx/</code> or <code class="highlighter-rouge">/etc/nginx/conf/</code>:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>server {
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>server {
   error_page 404 /404.html;
   location  /404.html {
     internal;
   }
 }
-</code></pre>
-</div>
+</code></pre></div></div>
 <p>The <code class="highlighter-rouge">location</code> directive prevents users from directly browsing the 404.html page.</p>
 
           

data/site/tutorials/home/index.html

@@ -4,13 +4,13 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="generator" content="Jekyll v3.5.2">
+  <meta name="generator" content="Jekyll v3.6.0">
   <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
   <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <!-- Begin Jekyll SEO tag v2.2.3 -->
+  <!-- Begin Jekyll SEO tag v2.3.0 -->
 <title>Tutorials | Jekyll • Simple, blog-aware, static sites</title>
 <meta property="og:title" content="Tutorials">
 <meta property="og:locale" content="en_US">
@@ -20,12 +20,12 @@
 <meta property="og:url" content="https://jekyllrb.com/tutorials/home/">
 <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
 <meta property="og:type" content="article">
-<meta property="article:published_time" content="2017-08-12T13:36:54-07:00">
+<meta property="article:published_time" content="2017-10-24T08:07:43-07:00">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:site" content="@jekyllrb">
 <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
 <script type="application/ld+json">
-{"@context":"http://schema.org","@type":"BlogPosting","headline":"Tutorials","datePublished":"2017-08-12T13:36:54-07:00","dateModified":"2017-08-12T13:36:54-07:00","description":"In contrast to Docs, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/home/"},"url":"https://jekyllrb.com/tutorials/home/"}</script>
+{"name":null,"description":"In contrast to Docs, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:","url":"https://jekyllrb.com/tutorials/home/","headline":"Tutorials","dateModified":"2017-10-24T08:07:43-07:00","datePublished":"2017-10-24T08:07:43-07:00","sameAs":null,"@type":"BlogPosting","author":null,"image":null,"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/home/"},"@context":"http://schema.org"}</script>
 <!-- End Jekyll SEO tag -->
 
   <!--[if lt IE 9]>

data/site/tutorials/navigation/index.html

@@ -4,13 +4,13 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="generator" content="Jekyll v3.5.2">
+  <meta name="generator" content="Jekyll v3.6.0">
   <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
   <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <!-- Begin Jekyll SEO tag v2.2.3 -->
+  <!-- Begin Jekyll SEO tag v2.3.0 -->
 <title>Navigation | Jekyll • Simple, blog-aware, static sites</title>
 <meta property="og:title" content="Navigation">
 <meta property="og:locale" content="en_US">
@@ -20,12 +20,12 @@
 <meta property="og:url" content="https://jekyllrb.com/tutorials/navigation/">
 <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
 <meta property="og:type" content="article">
-<meta property="article:published_time" content="2017-08-12T13:36:54-07:00">
+<meta property="article:published_time" content="2017-10-24T08:07:43-07:00">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:site" content="@jekyllrb">
 <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
 <script type="application/ld+json">
-{"@context":"http://schema.org","@type":"BlogPosting","headline":"Navigation","datePublished":"2017-08-12T13:36:54-07:00","dateModified":"2017-08-12T13:36:54-07:00","description":"If your Jekyll site has a lot of pages, you might want to create navigation for the pages. Instead of hard-coding navigation links, you can programmatically retrieve a list of pages to build the navigation for your site.","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/navigation/"},"url":"https://jekyllrb.com/tutorials/navigation/"}</script>
+{"name":null,"description":"If your Jekyll site has a lot of pages, you might want to create navigation for the pages. Instead of hard-coding navigation links, you can programmatically retrieve a list of pages to build the navigation for your site.","url":"https://jekyllrb.com/tutorials/navigation/","headline":"Navigation","dateModified":"2017-10-24T08:07:43-07:00","datePublished":"2017-10-24T08:07:43-07:00","sameAs":null,"@type":"BlogPosting","author":null,"image":null,"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/navigation/"},"@context":"http://schema.org"}</script>
 <!-- End Jekyll SEO tag -->
 
   <!--[if lt IE 9]>
@@ -180,32 +180,28 @@
 
 <p><strong>YAML</strong></p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="s">docs_list_title</span><span class="pi">:</span> <span class="s">ACME Documentation</span>
-<span class="s">docs</span><span class="pi">:</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">docs_list_title</span><span class="pi">:</span> <span class="s">ACME Documentation</span>
+<span class="na">docs</span><span class="pi">:</span>
 
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Introduction</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Introduction</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
 
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Configuration</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Configuration</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
 
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Deployment</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
-</code></pre>
-</div>
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Deployment</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
+</code></pre></div></div>
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code>&lt;h2&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">docs_list_title</span><span class="w"> </span><span class="p">}}</span>&lt;/h2&gt;
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;h2&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">docs_list_title</span><span class="w"> </span><span class="p">}}</span>&lt;/h2&gt;
 &lt;ul&gt;
    <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span><span class="p">%}</span>
       &lt;li&gt;&lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>" alt="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/a&gt;&lt;/li&gt;
    <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
 &lt;/ul&gt;
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 <div class="highlight result">
@@ -242,13 +238,11 @@
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">doclist</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">docs</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">sort</span><span class="p">:</span><span class="w"> </span><span class="s1">'title'</span><span class="w">  </span><span class="p">%}</span>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">doclist</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">docs</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">sort</span><span class="p">:</span><span class="w"> </span><span class="s1">'title'</span><span class="w">  </span><span class="p">%}</span>
 <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>doclist<span class="w"> </span><span class="p">%}</span>
     &lt;li&gt;&lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>" alt="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/a&gt;&lt;/li&gt;
 <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 
@@ -262,10 +256,8 @@
 
 <p>See the <a href="https://help.shopify.com/themes/liquid/filters/array-filters">Liquid array filter</a> for more filter options. Note that you can’t simply use this syntax:</p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span>|<span class="w"> </span><span class="na">sort</span><span class="o">:</span><span class="w"> </span><span class="s2">"title"</span><span class="w"> </span><span class="p">%}{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span>|<span class="w"> </span><span class="na">sort</span><span class="o">:</span><span class="w"> </span><span class="s2">"title"</span><span class="w"> </span><span class="p">%}{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
+</code></pre></div></div>
 
 <p>You have to convert <code class="highlighter-rouge">site.data.samplelist.docs</code> to a variable first using either <code class="highlighter-rouge">assign</code> or <code class="highlighter-rouge">capture</code> tags.</p>
 
@@ -275,39 +267,36 @@
 
 <p><strong>YAML</strong></p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="s">toc</span><span class="pi">:</span>
-  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 1</span>
-    <span class="s">subfolderitems</span><span class="pi">:</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
-  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 2</span>
-    <span class="s">subfolderitems</span><span class="pi">:</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
-  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 3</span>
-    <span class="s">subfolderitems</span><span class="pi">:</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
-</code></pre>
-</div>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">toc</span><span class="pi">:</span>
+  <span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 1</span>
+    <span class="na">subfolderitems</span><span class="pi">:</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
+  <span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 2</span>
+    <span class="na">subfolderitems</span><span class="pi">:</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
+  <span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 3</span>
+    <span class="na">subfolderitems</span><span class="pi">:</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
+</code></pre></div></div>
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.toc<span class="w"> </span><span class="p">%}</span>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.toc<span class="w"> </span><span class="p">%}</span>
     &lt;h3&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/h3&gt;
       &lt;ul&gt;
         <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>entry<span class="w"> </span>in<span class="w"> </span>item.subfolderitems<span class="w"> </span><span class="p">%}</span>
@@ -315,8 +304,7 @@
         <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
       &lt;/ul&gt;
   <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 <div class="highlight result">
@@ -352,54 +340,51 @@
 
 <p><strong>YAML</strong></p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="s">toc2</span><span class="pi">:</span>
-  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 1</span>
-    <span class="s">subfolderitems</span><span class="pi">:</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
-        <span class="s">subsubfolderitems</span><span class="pi">:</span>
-          <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Subthing 1</span>
-            <span class="s">url</span><span class="pi">:</span> <span class="s">/subthing1.html</span>
-          <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Subthing 2</span>
-            <span class="s">url</span><span class="pi">:</span> <span class="s">/subthing2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
-  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 2</span>
-    <span class="s">subfolderitems</span><span class="pi">:</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
-        <span class="s">subsubfolderitems</span><span class="pi">:</span>
-          <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Subpiece 1</span>
-            <span class="s">url</span><span class="pi">:</span> <span class="s">/subpiece1.html</span>
-          <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Subpiece2</span>
-            <span class="s">url</span><span class="pi">:</span> <span class="s">/subpiece2.html</span>
-  <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Group 3</span>
-    <span class="s">subfolderitems</span><span class="pi">:</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
-        <span class="s">subsubfolderitems</span><span class="pi">:</span>
-          <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Subwidget 1</span>
-            <span class="s">url</span><span class="pi">:</span> <span class="s">/subwidget1.html</span>
-          <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Subwidget 2</span>
-            <span class="s">url</span><span class="pi">:</span> <span class="s">/subwidget2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
-      <span class="pi">-</span> <span class="s">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
-        <span class="s">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
-</code></pre>
-</div>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">toc2</span><span class="pi">:</span>
+  <span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 1</span>
+    <span class="na">subfolderitems</span><span class="pi">:</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
+        <span class="na">subsubfolderitems</span><span class="pi">:</span>
+          <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing 1</span>
+            <span class="na">url</span><span class="pi">:</span> <span class="s">/subthing1.html</span>
+          <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing 2</span>
+            <span class="na">url</span><span class="pi">:</span> <span class="s">/subthing2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
+  <span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 2</span>
+    <span class="na">subfolderitems</span><span class="pi">:</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
+        <span class="na">subsubfolderitems</span><span class="pi">:</span>
+          <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece 1</span>
+            <span class="na">url</span><span class="pi">:</span> <span class="s">/subpiece1.html</span>
+          <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece2</span>
+            <span class="na">url</span><span class="pi">:</span> <span class="s">/subpiece2.html</span>
+  <span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 3</span>
+    <span class="na">subfolderitems</span><span class="pi">:</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
+        <span class="na">subsubfolderitems</span><span class="pi">:</span>
+          <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget 1</span>
+            <span class="na">url</span><span class="pi">:</span> <span class="s">/subwidget1.html</span>
+          <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget 2</span>
+            <span class="na">url</span><span class="pi">:</span> <span class="s">/subwidget2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
+      <span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
+        <span class="na">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
+</code></pre></div></div>
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code>&lt;div&gt;
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;div&gt;
 <span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">data</span><span class="p">.</span><span class="nv">samplelist</span><span class="p">.</span><span class="nv">toc2</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="w"> </span><span class="p">%}</span>
   <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.toc<span class="mi">2</span><span class="w"> </span><span class="p">%}</span>
     &lt;h3&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/h3&gt;
@@ -420,8 +405,7 @@
     <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
 <span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
 &lt;/div&gt;
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 
@@ -475,24 +459,20 @@
 
 <p><strong>Page front matter</strong></p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="nn">---</span>
-<span class="s">title</span><span class="pi">:</span> <span class="s">My page</span>
-<span class="s">sidebar</span><span class="pi">:</span> <span class="s">toc</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
+<span class="na">title</span><span class="pi">:</span> <span class="s">My page</span>
+<span class="na">sidebar</span><span class="pi">:</span> <span class="s">toc</span>
 <span class="nn">---</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code>&lt;ul&gt;
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ul&gt;
     <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist[page.sidebar]<span class="w"> </span><span class="p">%}</span>
       &lt;li&gt;&lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/a&gt;&lt;/li&gt;
     <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
 &lt;/ul&gt;
-</code></pre>
-</div>
+</code></pre></div></div>
 <p><strong>Result</strong></p>
 
 <div class="highlight result">
@@ -512,23 +492,19 @@
 <p>In addition to inserting items from the YAML data file into your list, you also usually want to highlight the current link if the user is viewing that page. You do this by inserting an <code class="highlighter-rouge">active</code> class for items that match the current page URL.</p>
 
 <p><strong>CSS</strong></p>
-<div class="language-css highlighter-rouge">
-<pre class="highlight"><code><span class="nc">.result</span> <span class="nt">li</span><span class="nc">.active</span> <span class="nt">a</span> <span class="p">{</span>
+<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.result</span> <span class="nt">li</span><span class="nc">.active</span> <span class="nt">a</span> <span class="p">{</span>
     <span class="nl">color</span><span class="p">:</span> <span class="n">lightgray</span><span class="p">;</span>
     <span class="nl">cursor</span><span class="p">:</span> <span class="nb">default</span><span class="p">;</span>
   <span class="p">}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span><span class="p">%}</span>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span><span class="p">%}</span>
     &lt;li class="<span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="nv">page</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">%}</span>active<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>"&gt;
       &lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/a&gt;
     &lt;/li&gt;
 <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 
@@ -547,43 +523,39 @@
 
 <p>In this case, assume <code class="highlighter-rouge">Deployment</code> is the current page.</p>
 
-<p>To make sure the <code class="highlighter-rouge">item.url</code> (stored in the YAML file) matches the <code class="highlighter-rouge">page.url</code>, it can be helpful to print the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">page.url</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> to the page.</p>
+<p>To make sure the <code class="highlighter-rouge">item.url</code> (stored in the YAML file) matches the <code class="highlighter-rouge">page.url</code>, it can be helpful to print the <code class="highlighter-rouge">{{ page.url }}</code> to the page.</p>
 
 <h2 id="scenario-6-including-items-conditionally">Scenario 6: Including items conditionally</h2>
 
 <p>You might want to include items conditionally in your list. For example, maybe you have multiple site outputs and only want to include the sidebar item for certain outputs. You can add properties in each list item and then use those properties to conditionally include the content.</p>
 
 <p><strong>YAML</strong></p>
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="s">docs2_list_title</span><span class="pi">:</span> <span class="s">ACME Documentation</span>
-<span class="s">docs2</span><span class="pi">:</span>
-
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Introduction</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
-  <span class="s">version</span><span class="pi">:</span> <span class="s">1</span>
-
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Configuration</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
-  <span class="s">version</span><span class="pi">:</span> <span class="s">1</span>
-
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Deployment</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
-  <span class="s">version</span><span class="pi">:</span> <span class="s">2</span>
-</code></pre>
-</div>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">docs2_list_title</span><span class="pi">:</span> <span class="s">ACME Documentation</span>
+<span class="na">docs2</span><span class="pi">:</span>
+
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Introduction</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
+  <span class="na">version</span><span class="pi">:</span> <span class="s">1</span>
+
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Configuration</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
+  <span class="na">version</span><span class="pi">:</span> <span class="s">1</span>
+
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Deployment</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
+  <span class="na">version</span><span class="pi">:</span> <span class="s">2</span>
+</code></pre></div></div>
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code>&lt;ul&gt;
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ul&gt;
     <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="mi">2</span><span class="w"> </span><span class="p">%}</span>
       <span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">version</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="mi">1</span><span class="w"> </span><span class="p">%}</span>
         &lt;li&gt;&lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">item</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span>&lt;/a&gt;&lt;/li&gt;
       <span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
     <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
 &lt;/ul&gt;
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 
@@ -614,51 +586,48 @@
 
 <p>The front matter for each page is as follows (consolidated here for brevity):</p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="nn">---</span>
-<span class="s">Title</span><span class="pi">:</span> <span class="s">Sample 1</span>
-<span class="s">category</span><span class="pi">:</span> <span class="s">getting-started</span>
-<span class="s">order</span><span class="pi">:</span> <span class="s">1</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
+<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample 1</span>
+<span class="na">category</span><span class="pi">:</span> <span class="s">getting-started</span>
+<span class="na">order</span><span class="pi">:</span> <span class="s">1</span>
 <span class="nn">---</span>
 
 <span class="nn">---</span>
-<span class="s">Title</span><span class="pi">:</span> <span class="s">Sample 2</span>
-<span class="s">category</span><span class="pi">:</span> <span class="s">getting-started</span>
-<span class="s">order</span><span class="pi">:</span> <span class="s">2</span>
+<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample 2</span>
+<span class="na">category</span><span class="pi">:</span> <span class="s">getting-started</span>
+<span class="na">order</span><span class="pi">:</span> <span class="s">2</span>
 <span class="nn">---</span>
 
 <span class="nn">---</span>
-<span class="s">Title</span><span class="pi">:</span> <span class="s">Topic 1</span>
-<span class="s">category</span><span class="pi">:</span> <span class="s">configuration</span>
-<span class="s">order</span><span class="pi">:</span> <span class="s">1</span>
+<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic 1</span>
+<span class="na">category</span><span class="pi">:</span> <span class="s">configuration</span>
+<span class="na">order</span><span class="pi">:</span> <span class="s">1</span>
 <span class="nn">---</span>
 
 <span class="nn">---</span>
-<span class="s">Title</span><span class="pi">:</span> <span class="s">Topic 2</span>
-<span class="s">category</span><span class="pi">:</span> <span class="s">configuration</span>
-<span class="s">order</span><span class="pi">:</span> <span class="s">2</span>
+<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic 2</span>
+<span class="na">category</span><span class="pi">:</span> <span class="s">configuration</span>
+<span class="na">order</span><span class="pi">:</span> <span class="s">2</span>
 <span class="nn">---</span>
 
 <span class="nn">---</span>
-<span class="s">Title</span><span class="pi">:</span> <span class="s">Widget 1</span>
-<span class="s">category</span><span class="pi">:</span> <span class="s">deployment</span>
-<span class="s">order</span><span class="pi">:</span> <span class="s">1</span>
+<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget 1</span>
+<span class="na">category</span><span class="pi">:</span> <span class="s">deployment</span>
+<span class="na">order</span><span class="pi">:</span> <span class="s">1</span>
 <span class="nn">---</span>
 
 <span class="nn">---</span>
-<span class="s">Title</span><span class="pi">:</span> <span class="s">Widget 2</span>
-<span class="s">category</span><span class="pi">:</span> <span class="s">deployment</span>
-<span class="s">order</span><span class="pi">:</span> <span class="s">2</span>
+<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget 2</span>
+<span class="na">category</span><span class="pi">:</span> <span class="s">deployment</span>
+<span class="na">order</span><span class="pi">:</span> <span class="s">2</span>
 <span class="nn">---</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Note that even though <code class="highlighter-rouge">category</code> is used in the doc front matter, <code class="highlighter-rouge">category</code> is not a built-in variable like it is with posts. In other words, you cannot look directly inside <code class="highlighter-rouge">category</code> with <code class="highlighter-rouge">site.docs.category</code>.</p>
 
 <p>If you wanted to simply get all docs in the collection for a specific category, you could use a <code class="highlighter-rouge">for</code> loop with an <code class="highlighter-rouge">if</code> condition to check for a specific category:</p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code>&lt;h3&gt;Getting Started&lt;/h3&gt;
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;h3&gt;Getting Started&lt;/h3&gt;
 &lt;ul&gt;
     <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>doc<span class="w"> </span>in<span class="w"> </span>site.docs<span class="w"> </span><span class="p">%}</span>
       <span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">doc</span><span class="p">.</span><span class="nv">category</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">"getting-started"</span><span class="w"> </span><span class="p">%}</span>
@@ -666,8 +635,7 @@
       <span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
     <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
 &lt;/ul&gt;
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>The result would be as follows:</p>
 
@@ -692,8 +660,7 @@
 
 <p><strong>Liquid</strong></p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">mydocs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">docs</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">group_by</span><span class="p">:</span><span class="w"> </span><span class="s1">'category'</span><span class="w"> </span><span class="p">%}</span>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">mydocs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">docs</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">group_by</span><span class="p">:</span><span class="w"> </span><span class="s1">'category'</span><span class="w"> </span><span class="p">%}</span>
 <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>cat<span class="w"> </span>in<span class="w"> </span>mydocs<span class="w"> </span><span class="p">%}</span>
 &lt;h2&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">cat</span><span class="p">.</span><span class="nv">name</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">capitalize</span><span class="w"> </span><span class="p">}}</span>&lt;/h2&gt;
     &lt;ul&gt;
@@ -703,8 +670,7 @@
       <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
     &lt;/ul&gt;
 <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>Result</strong></p>
 
@@ -730,14 +696,12 @@
 
 <p>The <code class="highlighter-rouge">group_by</code> filter groups the collection content by <code class="highlighter-rouge">category</code>. More specifically, the <code class="highlighter-rouge">group_by</code> filter converts <code class="highlighter-rouge">mydocs</code> into an array with <code class="highlighter-rouge">name</code>, <code class="highlighter-rouge">items</code>, and <code class="highlighter-rouge">size</code> properties, somewhat like this:</p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="pi">[</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">[</span>
   <span class="pi">{</span><span class="s2">"</span><span class="s">name"</span><span class="pi">:</span> <span class="s2">"</span><span class="s">getting-started"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">items"</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Sample 1</span><span class="pi">,</span> <span class="nv">Sample 2</span><span class="pi">],</span><span class="s2">"</span><span class="s">size"</span><span class="pi">:</span> <span class="nv">2</span><span class="pi">},</span>
   <span class="pi">{</span><span class="s2">"</span><span class="s">name"</span><span class="pi">:</span> <span class="s2">"</span><span class="s">configuration"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">items"</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Topic 1</span><span class="pi">,</span> <span class="nv">Topic 2</span><span class="pi">],</span>  <span class="s2">"</span><span class="s">size"</span><span class="pi">:</span> <span class="nv">2</span><span class="pi">},</span>
   <span class="pi">{</span><span class="s2">"</span><span class="s">name"</span><span class="pi">:</span> <span class="s2">"</span><span class="s">deployment"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">items"</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Widget 1</span><span class="pi">,</span> <span class="nv">Widget 2</span><span class="pi">,</span> <span class="s2">"</span><span class="s">size"</span><span class="pi">:</span> <span class="nv">2</span><span class="err">}</span>
 <span class="pi">]</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Using <code class="highlighter-rouge">for cat in mydocs</code>, we look through each item in the <code class="highlighter-rouge">mydocs</code> array and print the category <code class="highlighter-rouge">name</code>.</p>