jekyll-docs 3.8.5 → 3.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/site/404.html +5 -4
- data/site/docs/assets/index.html +22 -21
- data/site/docs/code_of_conduct/index.html +8 -7
- data/site/docs/collections/index.html +44 -43
- data/site/docs/conduct/index.html +8 -7
- data/site/docs/configuration/index.html +68 -67
- data/site/docs/continuous-integration/buddyworks/index.html +10 -9
- data/site/docs/continuous-integration/circleci/index.html +13 -12
- data/site/docs/continuous-integration/index.html +8 -7
- data/site/docs/continuous-integration/travis-ci/index.html +32 -31
- data/site/docs/contributing/index.html +34 -33
- data/site/docs/datafiles/index.html +24 -23
- data/site/docs/deployment-methods/index.html +30 -29
- data/site/docs/drafts/index.html +11 -10
- data/site/docs/extras/index.html +9 -8
- data/site/docs/frontmatter/index.html +8 -7
- data/site/docs/github-pages/index.html +19 -18
- data/site/docs/history/index.html +674 -645
- data/site/docs/home/index.html +8 -7
- data/site/docs/includes/index.html +44 -43
- data/site/docs/installation/index.html +16 -15
- data/site/docs/maintaining/affinity-team-captain/index.html +11 -10
- data/site/docs/maintaining/avoiding-burnout/index.html +8 -7
- data/site/docs/maintaining/becoming-a-maintainer/index.html +9 -8
- data/site/docs/maintaining/index.html +8 -7
- data/site/docs/maintaining/merging-a-pull-request/index.html +23 -22
- data/site/docs/maintaining/releasing-a-new-version/index.html +19 -18
- data/site/docs/maintaining/reviewing-a-pull-request/index.html +10 -9
- data/site/docs/maintaining/special-labels/index.html +14 -13
- data/site/docs/maintaining/triaging-an-issue/index.html +12 -11
- data/site/docs/migrations/index.html +9 -8
- data/site/docs/pages/index.html +12 -11
- data/site/docs/pagination/index.html +25 -24
- data/site/docs/permalinks/index.html +33 -32
- data/site/docs/plugins/index.html +57 -56
- data/site/docs/posts/index.html +37 -36
- data/site/docs/quickstart/index.html +18 -17
- data/site/docs/resources/index.html +9 -8
- data/site/docs/sites/index.html +8 -7
- data/site/docs/static-files/index.html +14 -13
- data/site/docs/structure/index.html +8 -7
- data/site/docs/support/index.html +9 -8
- data/site/docs/templates/index.html +44 -43
- data/site/docs/themes/index.html +63 -62
- data/site/docs/troubleshooting/index.html +48 -47
- data/site/docs/upgrading/0-to-2/index.html +51 -50
- data/site/docs/upgrading/2-to-3/index.html +35 -34
- data/site/docs/upgrading/index.html +11 -10
- data/site/docs/usage/index.html +15 -14
- data/site/docs/variables/index.html +8 -7
- data/site/docs/windows/index.html +29 -28
- data/site/feed.xml +45 -41
- data/site/help/index.html +7 -6
- data/site/index.html +7 -6
- data/site/jekyllconf/index.html +9 -8
- data/site/latest_version.txt +1 -1
- data/site/news/2013/05/05/jekyll-1-0-0-released/index.html +16 -10
- data/site/news/2013/05/08/jekyll-1-0-1-released/index.html +18 -12
- data/site/news/2013/05/12/jekyll-1-0-2-released/index.html +19 -13
- data/site/news/2013/06/07/jekyll-1-0-3-released/index.html +20 -14
- data/site/news/2013/07/14/jekyll-1-1-0-released/index.html +19 -13
- data/site/news/2013/07/24/jekyll-1-1-1-released/index.html +16 -10
- data/site/news/2013/07/25/jekyll-1-0-4-released/index.html +18 -12
- data/site/news/2013/07/25/jekyll-1-1-2-released/index.html +18 -12
- data/site/news/2013/09/06/jekyll-1-2-0-released/index.html +21 -15
- data/site/news/2013/09/14/jekyll-1-2-1-released/index.html +19 -13
- data/site/news/2013/10/28/jekyll-1-3-0-rc1-released/index.html +16 -10
- data/site/news/2013/11/04/jekyll-1-3-0-released/index.html +25 -19
- data/site/news/2013/11/26/jekyll-1-3-1-released/index.html +17 -11
- data/site/news/2013/12/07/jekyll-1-4-0-released/index.html +17 -11
- data/site/news/2013/12/09/jekyll-1-4-1-released/index.html +16 -10
- data/site/news/2013/12/16/jekyll-1-4-2-released/index.html +18 -12
- data/site/news/2014/01/13/jekyll-1-4-3-released/index.html +17 -11
- data/site/news/2014/03/24/jekyll-1-5-0-released/index.html +17 -11
- data/site/news/2014/03/27/jekyll-1-5-1-released/index.html +17 -11
- data/site/news/2014/05/06/jekyll-turns-2-0-0/index.html +20 -14
- data/site/news/2014/05/08/jekyll-2-0-3-released/index.html +16 -10
- data/site/news/2014/06/04/jekyll-stickers-1-dollar-stickermule/index.html +16 -10
- data/site/news/2014/06/28/jekyll-turns-21-i-mean-2-1-0/index.html +21 -15
- data/site/news/2014/07/01/jekyll-2-1-1-released/index.html +18 -12
- data/site/news/2014/07/29/jekyll-2-2-0-released/index.html +17 -11
- data/site/news/2014/08/10/jekyll-2-3-0-released/index.html +24 -18
- data/site/news/2014/09/09/jekyll-2-4-0-released/index.html +23 -17
- data/site/news/2014/11/05/jekylls-midlife-crisis-jekyll-turns-2-5-0/index.html +22 -16
- data/site/news/2014/11/09/jekyll-2-5-1-released/index.html +16 -10
- data/site/news/2014/11/12/jekyll-2-5-2-released/index.html +18 -12
- data/site/news/2014/12/17/alfredxing-welcome-to-jekyll-core/index.html +16 -10
- data/site/news/2014/12/22/jekyll-2-5-3-released/index.html +16 -10
- data/site/news/2015/01/20/jekyll-meet-and-greet/index.html +16 -10
- data/site/news/2015/01/24/jekyll-3-0-0-beta1-released/index.html +16 -10
- data/site/news/2015/02/26/introducing-jekyll-talk/index.html +16 -10
- data/site/news/2015/10/26/jekyll-3-0-released/index.html +21 -15
- data/site/news/2015/11/17/jekyll-3-0-1-released/index.html +20 -14
- data/site/news/2016/01/20/jekyll-3-0-2-released/index.html +18 -12
- data/site/news/2016/01/24/jekyll-3-1-0-released/index.html +21 -15
- data/site/news/2016/01/28/jekyll-3-1-1-released/index.html +21 -15
- data/site/news/2016/02/08/jekyll-3-0-3-released/index.html +17 -11
- data/site/news/2016/02/19/jekyll-3-1-2-released/index.html +18 -12
- data/site/news/2016/03/10/making-it-easier-to-contribute-to-jekyll/index.html +16 -10
- data/site/news/2016/04/19/jekyll-3-0-4-released/index.html +17 -11
- data/site/news/2016/04/19/jekyll-3-1-3-released/index.html +17 -11
- data/site/news/2016/04/26/jekyll-3-0-5-released/index.html +16 -10
- data/site/news/2016/05/18/jekyll-3-1-4-released/index.html +22 -16
- data/site/news/2016/05/18/jekyll-3-1-5-released/index.html +17 -11
- data/site/news/2016/05/19/jekyll-3-1-6-released/index.html +17 -11
- data/site/news/2016/06/03/update-on-jekyll-s-google-summer-of-code-projects/index.html +16 -10
- data/site/news/2016/07/26/jekyll-3-2-0-released/index.html +20 -14
- data/site/news/2016/08/02/jekyll-3-2-1-released/index.html +17 -11
- data/site/news/2016/08/24/jekyll-admin-initial-release/index.html +16 -10
- data/site/news/2016/10/06/jekyll-3-3-is-here/index.html +42 -36
- data/site/news/2016/11/14/jekyll-3-3-1-released/index.html +17 -11
- data/site/news/2017/01/18/jekyll-3-4-0-released/index.html +18 -12
- data/site/news/2017/03/02/jekyll-3-4-1-released/index.html +17 -11
- data/site/news/2017/03/09/jekyll-3-4-2-released/index.html +21 -15
- data/site/news/2017/03/21/jekyll-3-4-3-released/index.html +26 -20
- data/site/news/2017/06/15/jekyll-3-5-0-released/index.html +25 -19
- data/site/news/2017/07/17/jekyll-3-5-1-released/index.html +18 -12
- data/site/news/2017/08/12/jekyll-3-5-2-released/index.html +21 -15
- data/site/news/2017/09/21/jekyll-3-6-0-released/index.html +17 -11
- data/site/news/2017/10/19/diversity-open-source/index.html +18 -12
- data/site/news/2017/10/21/jekyll-3-6-2-released/index.html +18 -12
- data/site/news/2018/01/02/jekyll-3-7-0-released/index.html +21 -15
- data/site/news/2018/01/25/jekyll-3-7-2-released/index.html +26 -20
- data/site/news/2018/02/19/meet-jekyll-s-new-lead-developer/index.html +16 -10
- data/site/news/2018/02/24/jekyll-3-7-3-released/index.html +22 -16
- data/site/news/2018/05/01/jekyll-3-8-1-released/index.html +19 -13
- data/site/news/2018/05/19/jekyll-3-8-2-released/index.html +17 -11
- data/site/news/2018/06/05/jekyll-3-8-3-released/index.html +19 -13
- data/site/news/2019/07/02/jekyll-3-8-6-released/index.html +623 -0
- data/site/news/index.html +263 -218
- data/site/news/releases/index.html +261 -216
- data/site/philosophy.html +1 -1
- data/site/sitemap.xml +61 -57
- data/site/team/index.html +7 -6
- data/site/tutorials/convert-site-to-jekyll/index.html +97 -96
- data/site/tutorials/custom-404-page/index.html +16 -15
- data/site/tutorials/home/index.html +10 -9
- data/site/tutorials/navigation/index.html +102 -101
- data/site/tutorials/orderofinterpretation/index.html +32 -31
- data/site/tutorials/using-jekyll-with-bundler/index.html +19 -18
- data/site/tutorials/video-walkthroughs/index.html +8 -7
- metadata +10 -24
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<meta name="generator" content="Jekyll v3.
|
|
6
|
+
<meta name="generator" content="Jekyll v3.9.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
8
|
<link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
|
12
12
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
13
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
|
-
<!-- Begin Jekyll SEO tag v2.
|
|
14
|
+
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
15
|
<title>Custom 404 Page | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll v3.
|
|
16
|
+
<meta name="generator" content="Jekyll v3.9.0" />
|
|
17
17
|
<meta property="og:title" content="Custom 404 Page" />
|
|
18
18
|
<meta property="og:locale" content="en_US" />
|
|
19
19
|
<meta name="description" content="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." />
|
|
@@ -22,12 +22,13 @@
|
|
|
22
22
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/custom-404-page/" />
|
|
23
23
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
24
24
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
25
|
+
<meta property="article:published_time" content="2020-08-05T11:55:36-07:00" />
|
|
26
26
|
<meta name="twitter:card" content="summary" />
|
|
27
|
+
<meta property="twitter:title" content="Custom 404 Page" />
|
|
27
28
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
28
29
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
29
30
|
<script type="application/ld+json">
|
|
30
|
-
{"headline":"Custom 404 Page","dateModified":"
|
|
31
|
+
{"url":"https://jekyllrb.com/tutorials/custom-404-page/","headline":"Custom 404 Page","dateModified":"2020-08-05T11:55:36-07:00","datePublished":"2020-08-05T11:55:36-07:00","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"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.","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/custom-404-page/"},"@type":"BlogPosting","@context":"https://schema.org"}</script>
|
|
31
32
|
<!-- End Jekyll SEO tag -->
|
|
32
33
|
|
|
33
34
|
<!--[if lt IE 9]>
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
<div class="meta hide-on-mobiles">
|
|
73
74
|
<ul>
|
|
74
75
|
<li>
|
|
75
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/v3.
|
|
76
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v3.9.0">v3.9.0</a>
|
|
76
77
|
</li>
|
|
77
78
|
<li>
|
|
78
79
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -158,11 +159,11 @@
|
|
|
158
159
|
|
|
159
160
|
<h2 id="on-github-pages">On GitHub Pages</h2>
|
|
160
161
|
|
|
161
|
-
<p>Any <code class="highlighter-rouge">404.html</code> at the <strong>root of your <code class="highlighter-rouge">_site</code> directory</strong> will be served automatically by GitHub Pages and the local WEBrick development server.</p>
|
|
162
|
+
<p>Any <code class="language-plaintext highlighter-rouge">404.html</code> at the <strong>root of your <code class="language-plaintext highlighter-rouge">_site</code> directory</strong> will be served automatically by GitHub Pages and the local WEBrick development server.</p>
|
|
162
163
|
|
|
163
|
-
<p>Simply add a <code class="highlighter-rouge">404.md</code> or <code class="highlighter-rouge">404.html</code> at the root of your site’s source directory and include the YAML Front Matter data to use the theme’s base layout.</p>
|
|
164
|
+
<p>Simply add a <code class="language-plaintext highlighter-rouge">404.md</code> or <code class="language-plaintext highlighter-rouge">404.html</code> at the root of your site’s source directory and include the YAML Front Matter data to use the theme’s base layout.</p>
|
|
164
165
|
|
|
165
|
-
<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>
|
|
166
|
+
<p>If you plan to organize your files under subdirectories, the error page should have the following Front Matter Data, set: <code class="language-plaintext highlighter-rouge">permalink: /404.html</code>. This is to ensure that the compiled <code class="language-plaintext highlighter-rouge">404.html</code> resides at the root of your processed site, where it’ll be picked by the server.</p>
|
|
166
167
|
|
|
167
168
|
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
|
|
168
169
|
<span class="c1"># example 404.md</span>
|
|
@@ -178,14 +179,14 @@ Page not found! :(
|
|
|
178
179
|
|
|
179
180
|
<h2 id="hosting-on-apache-web-servers">Hosting on Apache Web Servers</h2>
|
|
180
181
|
|
|
181
|
-
<p>Apache Web Servers load a configuration file named <a href="http://www.htaccess-guide.com/"><code class="highlighter-rouge">.htaccess</code></a> that modifies the functionality of these servers.</p>
|
|
182
|
+
<p>Apache Web Servers load a configuration file named <a href="http://www.htaccess-guide.com/"><code class="language-plaintext highlighter-rouge">.htaccess</code></a> that modifies the functionality of these servers.</p>
|
|
182
183
|
|
|
183
|
-
<p>Simply add the following to your <code class="highlighter-rouge">.htaccess</code> file.</p>
|
|
184
|
+
<p>Simply add the following to your <code class="language-plaintext highlighter-rouge">.htaccess</code> file.</p>
|
|
184
185
|
|
|
185
186
|
<div class="language-apache highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">ErrorDocument</span> 404 /404.html
|
|
186
187
|
</code></pre></div></div>
|
|
187
188
|
|
|
188
|
-
<p>With an <code class="highlighter-rouge">.htaccess</code> file, you have the freedom to place your error page within a subdirectory.</p>
|
|
189
|
+
<p>With an <code class="language-plaintext highlighter-rouge">.htaccess</code> file, you have the freedom to place your error page within a subdirectory.</p>
|
|
189
190
|
|
|
190
191
|
<div class="language-apache highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">ErrorDocument</span> 404 /error_pages/404.html
|
|
191
192
|
</code></pre></div></div>
|
|
@@ -198,7 +199,7 @@ Page not found! :(
|
|
|
198
199
|
|
|
199
200
|
<p>The procedure is just as simple as configuring Apache servers, but slightly different.</p>
|
|
200
201
|
|
|
201
|
-
<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>
|
|
202
|
+
<p>Add the following to the nginx configuration file, <code class="language-plaintext highlighter-rouge">nginx.conf</code>, which is usually located inside <code class="language-plaintext highlighter-rouge">/etc/nginx/</code> or <code class="language-plaintext highlighter-rouge">/etc/nginx/conf/</code>:</p>
|
|
202
203
|
|
|
203
204
|
<div class="language-nginx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">server</span> <span class="p">{</span>
|
|
204
205
|
<span class="kn">error_page</span> <span class="mi">404</span> <span class="n">/404.html</span><span class="p">;</span>
|
|
@@ -208,7 +209,7 @@ Page not found! :(
|
|
|
208
209
|
<span class="p">}</span>
|
|
209
210
|
</code></pre></div></div>
|
|
210
211
|
|
|
211
|
-
<p>The <code class="highlighter-rouge">location</code> directive prevents users from directly browsing the 404.html page.</p>
|
|
212
|
+
<p>The <code class="language-plaintext highlighter-rouge">location</code> directive prevents users from directly browsing the 404.html page.</p>
|
|
212
213
|
|
|
213
214
|
|
|
214
215
|
|
|
@@ -303,7 +304,7 @@ Page not found! :(
|
|
|
303
304
|
<footer>
|
|
304
305
|
<div class="grid">
|
|
305
306
|
<div class="unit one-third center-on-mobiles">
|
|
306
|
-
<p>The contents of this website are <br />©
|
|
307
|
+
<p>The contents of this website are <br />© 2020 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
307
308
|
</div>
|
|
308
309
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
309
310
|
<p>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<meta name="generator" content="Jekyll v3.
|
|
6
|
+
<meta name="generator" content="Jekyll v3.9.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
8
|
<link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
|
12
12
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
13
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
|
-
<!-- Begin Jekyll SEO tag v2.
|
|
14
|
+
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
15
|
<title>Tutorials | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll v3.
|
|
16
|
+
<meta name="generator" content="Jekyll v3.9.0" />
|
|
17
17
|
<meta property="og:title" content="Tutorials" />
|
|
18
18
|
<meta property="og:locale" content="en_US" />
|
|
19
19
|
<meta name="description" content="In contrast to Docs, Tutorials provide more detailed, narrative instruction that cover a variety of Jekyll topics and scenarios. Tutorials might contain the following:" />
|
|
@@ -22,12 +22,13 @@
|
|
|
22
22
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/home/" />
|
|
23
23
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
24
24
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
25
|
+
<meta property="article:published_time" content="2020-08-05T11:55:36-07:00" />
|
|
26
26
|
<meta name="twitter:card" content="summary" />
|
|
27
|
+
<meta property="twitter:title" content="Tutorials" />
|
|
27
28
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
28
29
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
29
30
|
<script type="application/ld+json">
|
|
30
|
-
{"headline":"Tutorials","dateModified":"
|
|
31
|
+
{"url":"https://jekyllrb.com/tutorials/home/","headline":"Tutorials","dateModified":"2020-08-05T11:55:36-07:00","datePublished":"2020-08-05T11:55:36-07:00","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"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:","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/home/"},"@type":"BlogPosting","@context":"https://schema.org"}</script>
|
|
31
32
|
<!-- End Jekyll SEO tag -->
|
|
32
33
|
|
|
33
34
|
<!--[if lt IE 9]>
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
<div class="meta hide-on-mobiles">
|
|
73
74
|
<ul>
|
|
74
75
|
<li>
|
|
75
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/v3.
|
|
76
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v3.9.0">v3.9.0</a>
|
|
76
77
|
</li>
|
|
77
78
|
<li>
|
|
78
79
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -176,9 +177,9 @@
|
|
|
176
177
|
|
|
177
178
|
<ol>
|
|
178
179
|
<li>Fork the Jekyll project by clicking the <strong>Fork</strong> button in the upper-right corner of the <a href="https://github.com/jekyll/jekyll/">jekyll/jekyll project Github repo</a>.</li>
|
|
179
|
-
<li>Add your tutorial in the <code class="highlighter-rouge">_tutorials</code> collection.</li>
|
|
180
|
+
<li>Add your tutorial in the <code class="language-plaintext highlighter-rouge">_tutorials</code> collection.</li>
|
|
180
181
|
<li>Make sure your tutorial has the same front matter items as other tutorial items.</li>
|
|
181
|
-
<li>Add a reference to your tutorial filename in <code class="highlighter-rouge">_data/tutorials.yml</code>. This allows your tutorial to appear in the Tutorials sidebar.</li>
|
|
182
|
+
<li>Add a reference to your tutorial filename in <code class="language-plaintext highlighter-rouge">_data/tutorials.yml</code>. This allows your tutorial to appear in the Tutorials sidebar.</li>
|
|
182
183
|
<li>Follow the regular git workflow to submit the pull request.</li>
|
|
183
184
|
</ol>
|
|
184
185
|
|
|
@@ -264,7 +265,7 @@
|
|
|
264
265
|
<footer>
|
|
265
266
|
<div class="grid">
|
|
266
267
|
<div class="unit one-third center-on-mobiles">
|
|
267
|
-
<p>The contents of this website are <br />©
|
|
268
|
+
<p>The contents of this website are <br />© 2020 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
268
269
|
</div>
|
|
269
270
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
270
271
|
<p>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<meta name="generator" content="Jekyll v3.
|
|
6
|
+
<meta name="generator" content="Jekyll v3.9.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
8
|
<link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
|
|
9
9
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
|
12
12
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
13
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
|
-
<!-- Begin Jekyll SEO tag v2.
|
|
14
|
+
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
15
|
<title>Navigation | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll v3.
|
|
16
|
+
<meta name="generator" content="Jekyll v3.9.0" />
|
|
17
17
|
<meta property="og:title" content="Navigation" />
|
|
18
18
|
<meta property="og:locale" content="en_US" />
|
|
19
19
|
<meta name="description" content="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." />
|
|
@@ -22,12 +22,13 @@
|
|
|
22
22
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/navigation/" />
|
|
23
23
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
24
24
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
25
|
+
<meta property="article:published_time" content="2020-08-05T11:55:36-07:00" />
|
|
26
26
|
<meta name="twitter:card" content="summary" />
|
|
27
|
+
<meta property="twitter:title" content="Navigation" />
|
|
27
28
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
28
29
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
29
30
|
<script type="application/ld+json">
|
|
30
|
-
{"headline":"Navigation","dateModified":"
|
|
31
|
+
{"url":"https://jekyllrb.com/tutorials/navigation/","headline":"Navigation","dateModified":"2020-08-05T11:55:36-07:00","datePublished":"2020-08-05T11:55:36-07:00","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"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.","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/navigation/"},"@type":"BlogPosting","@context":"https://schema.org"}</script>
|
|
31
32
|
<!-- End Jekyll SEO tag -->
|
|
32
33
|
|
|
33
34
|
<!--[if lt IE 9]>
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
<div class="meta hide-on-mobiles">
|
|
73
74
|
<ul>
|
|
74
75
|
<li>
|
|
75
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/v3.
|
|
76
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v3.9.0">v3.9.0</a>
|
|
76
77
|
</li>
|
|
77
78
|
<li>
|
|
78
79
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -161,7 +162,7 @@
|
|
|
161
162
|
<p>There are two primary ways of retrieving pages on a Jekyll site:</p>
|
|
162
163
|
|
|
163
164
|
<ul>
|
|
164
|
-
<li><strong>Retrieve pages listed in a YAML data source</strong>. Store the page data in a YAML (or JSON or CSV) file in the <code class="highlighter-rouge">_data</code> folder, loop through the YAML properties, and insert the values into your theme.</li>
|
|
165
|
+
<li><strong>Retrieve pages listed in a YAML data source</strong>. Store the page data in a YAML (or JSON or CSV) file in the <code class="language-plaintext highlighter-rouge">_data</code> folder, loop through the YAML properties, and insert the values into your theme.</li>
|
|
165
166
|
<li><strong>Retrieve pages by looping through the page front matter</strong>. Look through the front matter of your pages to identify certain properties, return those pages, and insert the pages’ front matter values into your theme.</li>
|
|
166
167
|
</ul>
|
|
167
168
|
|
|
@@ -173,7 +174,7 @@
|
|
|
173
174
|
<li>Result</li>
|
|
174
175
|
</ul>
|
|
175
176
|
|
|
176
|
-
<p>The YAML file in the <code class="highlighter-rouge">_data</code> directory is called <code class="highlighter-rouge">samplelist.yml</code>.</p>
|
|
177
|
+
<p>The YAML file in the <code class="language-plaintext highlighter-rouge">_data</code> directory is called <code class="language-plaintext highlighter-rouge">samplelist.yml</code>.</p>
|
|
177
178
|
|
|
178
179
|
<p>The scenarios are as follows:</p>
|
|
179
180
|
|
|
@@ -211,7 +212,7 @@
|
|
|
211
212
|
|
|
212
213
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><h2><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></h2>
|
|
213
214
|
<ul>
|
|
214
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item
|
|
215
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs</span><span class="w"> </span><span class="p">%}</span>
|
|
215
216
|
<li><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>"><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></a></li>
|
|
216
217
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
217
218
|
</ul>
|
|
@@ -227,9 +228,9 @@
|
|
|
227
228
|
</ul>
|
|
228
229
|
</div>
|
|
229
230
|
|
|
230
|
-
<p class="note info">For the results in these fictitious samples, <code class="highlighter-rouge">#</code> is manually substituted for the actual link value to avoid 404 errors.)</p>
|
|
231
|
+
<p class="note info">For the results in these fictitious samples, <code class="language-plaintext highlighter-rouge">#</code> is manually substituted for the actual link value to avoid 404 errors.)</p>
|
|
231
232
|
|
|
232
|
-
<p>When you use a <code class="highlighter-rouge">for</code> loop, you choose how you want to refer to the items you’re looping through. The variable you choose (in this case, <code class="highlighter-rouge">item</code>) becomes how you access the properties of each item in the list. Dot notation is used to get a property of the item (for example, <code class="highlighter-rouge">item.url</code>).</p>
|
|
233
|
+
<p>When you use a <code class="language-plaintext highlighter-rouge">for</code> loop, you choose how you want to refer to the items you’re looping through. The variable you choose (in this case, <code class="language-plaintext highlighter-rouge">item</code>) becomes how you access the properties of each item in the list. Dot notation is used to get a property of the item (for example, <code class="language-plaintext highlighter-rouge">item.url</code>).</p>
|
|
233
234
|
|
|
234
235
|
<p>The YAML content has two main types of formats that are relevant here:</p>
|
|
235
236
|
|
|
@@ -238,23 +239,23 @@
|
|
|
238
239
|
<li>list</li>
|
|
239
240
|
</ul>
|
|
240
241
|
|
|
241
|
-
<p><code class="highlighter-rouge">docs_list_title: ACME Documentation</code> is a mapping. You access the value with <code class="highlighter-rouge">site.data.samplelist.docs_list_title</code>.</p>
|
|
242
|
+
<p><code class="language-plaintext highlighter-rouge">docs_list_title: ACME Documentation</code> is a mapping. You access the value with <code class="language-plaintext highlighter-rouge">site.data.samplelist.docs_list_title</code>.</p>
|
|
242
243
|
|
|
243
|
-
<p><code class="highlighter-rouge">docs:</code> is a list. The list begins each item with a hyphen. Unlike with mappings, you usually don’t access list properties directly as you do with mappings. If you want to access a specific item in the list, you must identify the position in the list you want, following typical array notation. For example, <code class="highlighter-rouge">site.data.samplelist.docs[0]</code> would access the first item in the list. However, this is rarely done.</p>
|
|
244
|
+
<p><code class="language-plaintext highlighter-rouge">docs:</code> is a list. The list begins each item with a hyphen. Unlike with mappings, you usually don’t access list properties directly as you do with mappings. If you want to access a specific item in the list, you must identify the position in the list you want, following typical array notation. For example, <code class="language-plaintext highlighter-rouge">site.data.samplelist.docs[0]</code> would access the first item in the list. However, this is rarely done.</p>
|
|
244
245
|
|
|
245
|
-
<p>With lists, you usually use <code class="highlighter-rouge">for</code> loops to cycle through the list of items and do something with each item. With navigation menus, you usually insert each list item into <code class="highlighter-rouge">li</code> tags based on the navigation structure you’re using in your HTML theme.</p>
|
|
246
|
+
<p>With lists, you usually use <code class="language-plaintext highlighter-rouge">for</code> loops to cycle through the list of items and do something with each item. With navigation menus, you usually insert each list item into <code class="language-plaintext highlighter-rouge">li</code> tags based on the navigation structure you’re using in your HTML theme.</p>
|
|
246
247
|
|
|
247
|
-
<p>Each hyphen (<code class="highlighter-rouge">-</code>) indicates another item in the list. This example just has two properties with each list item: <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">url</code>. You can include as many properties as you want for each item. The order of properties at each position in the list doesn’t matter.</p>
|
|
248
|
+
<p>Each hyphen (<code class="language-plaintext highlighter-rouge">-</code>) indicates another item in the list. This example just has two properties with each list item: <code class="language-plaintext highlighter-rouge">title</code> and <code class="language-plaintext highlighter-rouge">url</code>. You can include as many properties as you want for each item. The order of properties at each position in the list doesn’t matter.</p>
|
|
248
249
|
|
|
249
250
|
<h2 id="scenario-2-sorted-list">Scenario 2: Sorted list</h2>
|
|
250
251
|
|
|
251
|
-
<p>Suppose you wanted to sort the list by the <code class="highlighter-rouge">title</code>. To do this, convert the reference to the <code class="highlighter-rouge">docs</code> collection to a variable, and then apply Liquid’s <code class="highlighter-rouge">sort</code> filter to the variable:</p>
|
|
252
|
+
<p>Suppose you wanted to sort the list by the <code class="language-plaintext highlighter-rouge">title</code>. To do this, convert the reference to the <code class="language-plaintext highlighter-rouge">docs</code> collection to a variable, and then apply Liquid’s <code class="language-plaintext highlighter-rouge">sort</code> filter to the variable:</p>
|
|
252
253
|
|
|
253
254
|
<p><strong>Liquid</strong></p>
|
|
254
255
|
|
|
255
256
|
<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>
|
|
256
257
|
<ol>
|
|
257
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item
|
|
258
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">doclist</span><span class="w"> </span><span class="p">%}</span>
|
|
258
259
|
<li><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>"><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></a></li>
|
|
259
260
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
260
261
|
</ol>
|
|
@@ -270,14 +271,14 @@
|
|
|
270
271
|
</ol>
|
|
271
272
|
</div>
|
|
272
273
|
|
|
273
|
-
<p>The items now appear in alphabetical order. The <code class="highlighter-rouge">sort</code> property in the Liquid filter applies to the <code class="highlighter-rouge">title</code>, which is an actual property in the list. If <code class="highlighter-rouge">title</code> weren’t a property, we would need to sort by another property.</p>
|
|
274
|
+
<p>The items now appear in alphabetical order. The <code class="language-plaintext highlighter-rouge">sort</code> property in the Liquid filter applies to the <code class="language-plaintext highlighter-rouge">title</code>, which is an actual property in the list. If <code class="language-plaintext highlighter-rouge">title</code> weren’t a property, we would need to sort by another property.</p>
|
|
274
275
|
|
|
275
276
|
<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>
|
|
276
277
|
|
|
277
|
-
<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
|
|
278
|
+
<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><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs</span><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>
|
|
278
279
|
</code></pre></div></div>
|
|
279
280
|
|
|
280
|
-
<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>
|
|
281
|
+
<p>You have to convert <code class="language-plaintext highlighter-rouge">site.data.samplelist.docs</code> to a variable first using either <code class="language-plaintext highlighter-rouge">assign</code> or <code class="language-plaintext highlighter-rouge">capture</code> tags.</p>
|
|
281
282
|
|
|
282
283
|
<h2 id="scenario-3-two-level-navigation-list">Scenario 3: Two-level navigation list</h2>
|
|
283
284
|
|
|
@@ -286,38 +287,38 @@
|
|
|
286
287
|
<p><strong>YAML</strong></p>
|
|
287
288
|
|
|
288
289
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">toc</span><span class="pi">:</span>
|
|
289
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 1</span>
|
|
290
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group </span><span class="m">1</span>
|
|
290
291
|
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
291
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
|
|
292
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing </span><span class="m">1</span>
|
|
292
293
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
|
|
293
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
|
|
294
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing </span><span class="m">2</span>
|
|
294
295
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
|
|
295
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
|
|
296
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing </span><span class="m">3</span>
|
|
296
297
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
|
|
297
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 2</span>
|
|
298
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group </span><span class="m">2</span>
|
|
298
299
|
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
299
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
|
|
300
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece </span><span class="m">1</span>
|
|
300
301
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
|
|
301
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
|
|
302
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece </span><span class="m">2</span>
|
|
302
303
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
|
|
303
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
|
|
304
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece </span><span class="m">3</span>
|
|
304
305
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
|
|
305
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 3</span>
|
|
306
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group </span><span class="m">3</span>
|
|
306
307
|
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
307
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
|
|
308
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">1</span>
|
|
308
309
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
|
|
309
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
|
|
310
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">2</span>
|
|
310
311
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
|
|
311
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
|
|
312
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">3</span>
|
|
312
313
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
|
|
313
314
|
</code></pre></div></div>
|
|
314
315
|
|
|
315
316
|
<p><strong>Liquid</strong></p>
|
|
316
317
|
|
|
317
|
-
<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
|
|
318
|
+
<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><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist.toc</span><span class="w"> </span><span class="p">%}</span>
|
|
318
319
|
<h3><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></h3>
|
|
319
320
|
<ul>
|
|
320
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>entry
|
|
321
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">entry</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">item.subfolderitems</span><span class="w"> </span><span class="p">%}</span>
|
|
321
322
|
<li><a href="<span class="p">{{</span><span class="w"> </span><span class="nv">entry</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"><span class="p">{{</span><span class="w"> </span><span class="nv">entry</span><span class="p">.</span><span class="nv">page</span><span class="w"> </span><span class="p">}}</span></a></li>
|
|
322
323
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
323
324
|
</ul>
|
|
@@ -348,55 +349,55 @@
|
|
|
348
349
|
</ul>
|
|
349
350
|
</div>
|
|
350
351
|
|
|
351
|
-
<p>In this example, <code class="highlighter-rouge">Group 1</code> is the first list item. Within that list item, its subpages are included as a property that itself contains a list (<code class="highlighter-rouge">subfolderitems</code>).</p>
|
|
352
|
+
<p>In this example, <code class="language-plaintext highlighter-rouge">Group 1</code> is the first list item. Within that list item, its subpages are included as a property that itself contains a list (<code class="language-plaintext highlighter-rouge">subfolderitems</code>).</p>
|
|
352
353
|
|
|
353
|
-
<p>The Liquid code looks through the first level with <code class="highlighter-rouge">for item in site.data.samplelist.toc</code>, and then looks through the second-level property with <code class="highlighter-rouge">for entry in item.subfolderitems</code>. Just as <code class="highlighter-rouge">item</code> is an arbitrary name for the items we’re looping through, so is <code class="highlighter-rouge">entry</code>.</p>
|
|
354
|
+
<p>The Liquid code looks through the first level with <code class="language-plaintext highlighter-rouge">for item in site.data.samplelist.toc</code>, and then looks through the second-level property with <code class="language-plaintext highlighter-rouge">for entry in item.subfolderitems</code>. Just as <code class="language-plaintext highlighter-rouge">item</code> is an arbitrary name for the items we’re looping through, so is <code class="language-plaintext highlighter-rouge">entry</code>.</p>
|
|
354
355
|
|
|
355
356
|
<h2 id="scenario-4-three-level-navigation-list">Scenario 4: Three-level navigation list</h2>
|
|
356
357
|
|
|
357
|
-
<p>Building on the previous section, let’s add one more level of depth (<code class="highlighter-rouge">subsubfolderitems</code>) to the list. The formatting will get more complex here, but the principles are the same.</p>
|
|
358
|
+
<p>Building on the previous section, let’s add one more level of depth (<code class="language-plaintext highlighter-rouge">subsubfolderitems</code>) to the list. The formatting will get more complex here, but the principles are the same.</p>
|
|
358
359
|
|
|
359
360
|
<p><strong>YAML</strong></p>
|
|
360
361
|
|
|
361
362
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">toc2</span><span class="pi">:</span>
|
|
362
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 1</span>
|
|
363
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group </span><span class="m">1</span>
|
|
363
364
|
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
364
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
|
|
365
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing </span><span class="m">1</span>
|
|
365
366
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
|
|
366
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
|
|
367
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing </span><span class="m">2</span>
|
|
367
368
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
|
|
368
369
|
<span class="na">subsubfolderitems</span><span class="pi">:</span>
|
|
369
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing 1</span>
|
|
370
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing </span><span class="m">1</span>
|
|
370
371
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/subthing1.html</span>
|
|
371
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing 2</span>
|
|
372
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing </span><span class="m">2</span>
|
|
372
373
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/subthing2.html</span>
|
|
373
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
|
|
374
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing </span><span class="m">3</span>
|
|
374
375
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
|
|
375
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 2</span>
|
|
376
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group </span><span class="m">2</span>
|
|
376
377
|
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
377
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
|
|
378
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece </span><span class="m">1</span>
|
|
378
379
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
|
|
379
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
|
|
380
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece </span><span class="m">2</span>
|
|
380
381
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
|
|
381
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
|
|
382
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece </span><span class="m">3</span>
|
|
382
383
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
|
|
383
384
|
<span class="na">subsubfolderitems</span><span class="pi">:</span>
|
|
384
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece 1</span>
|
|
385
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece </span><span class="m">1</span>
|
|
385
386
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/subpiece1.html</span>
|
|
386
387
|
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece2</span>
|
|
387
388
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/subpiece2.html</span>
|
|
388
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 3</span>
|
|
389
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group </span><span class="m">3</span>
|
|
389
390
|
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
390
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
|
|
391
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">1</span>
|
|
391
392
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
|
|
392
393
|
<span class="na">subsubfolderitems</span><span class="pi">:</span>
|
|
393
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget 1</span>
|
|
394
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget </span><span class="m">1</span>
|
|
394
395
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/subwidget1.html</span>
|
|
395
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget 2</span>
|
|
396
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget </span><span class="m">2</span>
|
|
396
397
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/subwidget2.html</span>
|
|
397
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
|
|
398
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">2</span>
|
|
398
399
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
|
|
399
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
|
|
400
|
+
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">3</span>
|
|
400
401
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
|
|
401
402
|
</code></pre></div></div>
|
|
402
403
|
|
|
@@ -404,15 +405,15 @@
|
|
|
404
405
|
|
|
405
406
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
|
|
406
407
|
<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>
|
|
407
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item
|
|
408
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist.toc2</span><span class="w"> </span><span class="p">%}</span>
|
|
408
409
|
<h3><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></h3>
|
|
409
410
|
<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">subfolderitems</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="w"> </span><span class="p">%}</span>
|
|
410
411
|
<ul>
|
|
411
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>entry
|
|
412
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">entry</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">item.subfolderitems</span><span class="w"> </span><span class="p">%}</span>
|
|
412
413
|
<li><a href="<span class="p">{{</span><span class="w"> </span><span class="nv">entry</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"><span class="p">{{</span><span class="w"> </span><span class="nv">entry</span><span class="p">.</span><span class="nv">page</span><span class="w"> </span><span class="p">}}</span></a>
|
|
413
414
|
<span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">entry</span><span class="p">.</span><span class="nv">subsubfolderitems</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="w"> </span><span class="p">%}</span>
|
|
414
415
|
<ul>
|
|
415
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>subentry
|
|
416
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">subentry</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">entry.subsubfolderitems</span><span class="w"> </span><span class="p">%}</span>
|
|
416
417
|
<li><a href="<span class="p">{{</span><span class="w"> </span><span class="nv">subentry</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"><span class="p">{{</span><span class="w"> </span><span class="nv">subentry</span><span class="p">.</span><span class="nv">page</span><span class="w"> </span><span class="p">}}</span></a></li>
|
|
417
418
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
418
419
|
</ul>
|
|
@@ -463,7 +464,7 @@
|
|
|
463
464
|
</div>
|
|
464
465
|
</div>
|
|
465
466
|
|
|
466
|
-
<p>In this example, <code class="highlighter-rouge">if site.data.samplelist.toc2[0]</code> is used to ensure that the YAML level actually contains items. If there isn’t anything at the <code class="highlighter-rouge">[0]</code> position, we can skip looking in this level.</p>
|
|
467
|
+
<p>In this example, <code class="language-plaintext highlighter-rouge">if site.data.samplelist.toc2[0]</code> is used to ensure that the YAML level actually contains items. If there isn’t anything at the <code class="language-plaintext highlighter-rouge">[0]</code> position, we can skip looking in this level.</p>
|
|
467
468
|
|
|
468
469
|
<div class="note">
|
|
469
470
|
<h5>ProTip: Line up <code>for</code> loops and <code>if</code> statements</h5>
|
|
@@ -487,7 +488,7 @@
|
|
|
487
488
|
<p><strong>Liquid</strong></p>
|
|
488
489
|
|
|
489
490
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
|
|
490
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item
|
|
491
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist[page.sidebar]</span><span class="w"> </span><span class="p">%}</span>
|
|
491
492
|
<li><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>"><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></a></li>
|
|
492
493
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
493
494
|
</ul>
|
|
@@ -503,13 +504,13 @@
|
|
|
503
504
|
</ul>
|
|
504
505
|
</div>
|
|
505
506
|
|
|
506
|
-
<p>In this scenario, we want to pass values from the page’s front matter into a <code class="highlighter-rouge">for</code> loop that contains a variable. When the assigned variable isn’t a string but rather a data reference, you must use brackets (instead of curly braces) to refer to the front matter’s value.</p>
|
|
507
|
+
<p>In this scenario, we want to pass values from the page’s front matter into a <code class="language-plaintext highlighter-rouge">for</code> loop that contains a variable. When the assigned variable isn’t a string but rather a data reference, you must use brackets (instead of curly braces) to refer to the front matter’s value.</p>
|
|
507
508
|
|
|
508
509
|
<p>For more information, see <a href="https://github.com/Shopify/liquid/wiki/Liquid-for-Designers#expressions-and-variables">Expressions and Variables</a> in Liquid’s documentation. Brackets are used in places where dot notation can’t be used. You can also read more details in this <a href="http://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets/4968448#4968448">Stack Overflow answer</a>.</p>
|
|
509
510
|
|
|
510
511
|
<h2 id="scenario-6-applying-the-active-class-for-the-current-page">Scenario 6: Applying the active class for the current page</h2>
|
|
511
512
|
|
|
512
|
-
<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>
|
|
513
|
+
<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="language-plaintext highlighter-rouge">active</code> class for items that match the current page URL.</p>
|
|
513
514
|
|
|
514
515
|
<p><strong>CSS</strong></p>
|
|
515
516
|
<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>
|
|
@@ -519,7 +520,7 @@
|
|
|
519
520
|
</code></pre></div></div>
|
|
520
521
|
<p><strong>Liquid</strong></p>
|
|
521
522
|
|
|
522
|
-
<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
|
|
523
|
+
<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><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs</span><span class="w"> </span><span class="p">%}</span>
|
|
523
524
|
<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>">
|
|
524
525
|
<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>"><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></a>
|
|
525
526
|
</li>
|
|
@@ -543,9 +544,9 @@
|
|
|
543
544
|
</ul>
|
|
544
545
|
</div>
|
|
545
546
|
|
|
546
|
-
<p>In this case, assume <code class="highlighter-rouge">Deployment</code> is the current page.</p>
|
|
547
|
+
<p>In this case, assume <code class="language-plaintext highlighter-rouge">Deployment</code> is the current page.</p>
|
|
547
548
|
|
|
548
|
-
<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>
|
|
549
|
+
<p>To make sure the <code class="language-plaintext highlighter-rouge">item.url</code> (stored in the YAML file) matches the <code class="language-plaintext highlighter-rouge">page.url</code>, it can be helpful to print the <code class="language-plaintext highlighter-rouge">{{ page.url }}</code> to the page.</p>
|
|
549
550
|
|
|
550
551
|
<h2 id="scenario-7-including-items-conditionally">Scenario 7: Including items conditionally</h2>
|
|
551
552
|
|
|
@@ -557,21 +558,21 @@
|
|
|
557
558
|
|
|
558
559
|
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Introduction</span>
|
|
559
560
|
<span class="na">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
|
|
560
|
-
<span class="na">version</span><span class="pi">:</span> <span class="
|
|
561
|
+
<span class="na">version</span><span class="pi">:</span> <span class="m">1</span>
|
|
561
562
|
|
|
562
563
|
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Configuration</span>
|
|
563
564
|
<span class="na">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
|
|
564
|
-
<span class="na">version</span><span class="pi">:</span> <span class="
|
|
565
|
+
<span class="na">version</span><span class="pi">:</span> <span class="m">1</span>
|
|
565
566
|
|
|
566
567
|
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Deployment</span>
|
|
567
568
|
<span class="na">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
|
|
568
|
-
<span class="na">version</span><span class="pi">:</span> <span class="
|
|
569
|
+
<span class="na">version</span><span class="pi">:</span> <span class="m">2</span>
|
|
569
570
|
</code></pre></div></div>
|
|
570
571
|
|
|
571
572
|
<p><strong>Liquid</strong></p>
|
|
572
573
|
|
|
573
574
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <ul>
|
|
574
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item
|
|
575
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs2</span><span class="w"> </span><span class="p">%}</span>
|
|
575
576
|
<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>
|
|
576
577
|
<li><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>"><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></a></li>
|
|
577
578
|
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
@@ -588,70 +589,70 @@
|
|
|
588
589
|
</ul>
|
|
589
590
|
</div>
|
|
590
591
|
|
|
591
|
-
<p>The <code class="highlighter-rouge">Deployment</code> page is excluded because its <code class="highlighter-rouge">version</code> is <code class="highlighter-rouge">2</code>.</p>
|
|
592
|
+
<p>The <code class="language-plaintext highlighter-rouge">Deployment</code> page is excluded because its <code class="language-plaintext highlighter-rouge">version</code> is <code class="language-plaintext highlighter-rouge">2</code>.</p>
|
|
592
593
|
|
|
593
594
|
<h2 id="scenario-8-retrieving-items-based-on-front-matter-properties">Scenario 8: Retrieving items based on front matter properties</h2>
|
|
594
595
|
|
|
595
|
-
<p>If you don’t want to store your navigation items in a YAML file in your <code class="highlighter-rouge">_data</code> folder, you can use <code class="highlighter-rouge">for</code> loops to look through the YAML front matter of each page or collection and get the content based on properties in the front matter.</p>
|
|
596
|
+
<p>If you don’t want to store your navigation items in a YAML file in your <code class="language-plaintext highlighter-rouge">_data</code> folder, you can use <code class="language-plaintext highlighter-rouge">for</code> loops to look through the YAML front matter of each page or collection and get the content based on properties in the front matter.</p>
|
|
596
597
|
|
|
597
|
-
<p>In this scenario, suppose we have a collection called <code class="highlighter-rouge">_docs</code>. Collections are often better than pages because they allow you to narrow the list of what you’re looping through. (Try to avoid scenarios where you loop through large numbers of items, since it will increase your build time. <a href="/docs/collections/">Collections</a> help you narrow the scope.)</p>
|
|
598
|
+
<p>In this scenario, suppose we have a collection called <code class="language-plaintext highlighter-rouge">_docs</code>. Collections are often better than pages because they allow you to narrow the list of what you’re looping through. (Try to avoid scenarios where you loop through large numbers of items, since it will increase your build time. <a href="/docs/collections/">Collections</a> help you narrow the scope.)</p>
|
|
598
599
|
|
|
599
|
-
<p>In our scenario, there are 6 docs in the <code class="highlighter-rouge">docs</code> collection: Sample 1, Sample 2, Topic 1, Topic 2, Widget 1, and Widget 2.</p>
|
|
600
|
+
<p>In our scenario, there are 6 docs in the <code class="language-plaintext highlighter-rouge">docs</code> collection: Sample 1, Sample 2, Topic 1, Topic 2, Widget 1, and Widget 2.</p>
|
|
600
601
|
|
|
601
602
|
<p>Each doc in the collection contains at least 3 properties in the front matter:</p>
|
|
602
603
|
|
|
603
604
|
<ul>
|
|
604
|
-
<li><code class="highlighter-rouge">title</code></li>
|
|
605
|
-
<li><code class="highlighter-rouge">category</code></li>
|
|
606
|
-
<li><code class="highlighter-rouge">order</code></li>
|
|
605
|
+
<li><code class="language-plaintext highlighter-rouge">title</code></li>
|
|
606
|
+
<li><code class="language-plaintext highlighter-rouge">category</code></li>
|
|
607
|
+
<li><code class="language-plaintext highlighter-rouge">order</code></li>
|
|
607
608
|
</ul>
|
|
608
609
|
|
|
609
610
|
<p>The front matter for each page is as follows (consolidated here for brevity):</p>
|
|
610
611
|
|
|
611
612
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
|
|
612
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample 1</span>
|
|
613
|
+
<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample </span><span class="m">1</span>
|
|
613
614
|
<span class="na">category</span><span class="pi">:</span> <span class="s">getting-started</span>
|
|
614
|
-
<span class="na">order</span><span class="pi">:</span> <span class="
|
|
615
|
+
<span class="na">order</span><span class="pi">:</span> <span class="m">1</span>
|
|
615
616
|
<span class="nn">---</span>
|
|
616
617
|
|
|
617
618
|
<span class="nn">---</span>
|
|
618
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample 2</span>
|
|
619
|
+
<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample </span><span class="m">2</span>
|
|
619
620
|
<span class="na">category</span><span class="pi">:</span> <span class="s">getting-started</span>
|
|
620
|
-
<span class="na">order</span><span class="pi">:</span> <span class="
|
|
621
|
+
<span class="na">order</span><span class="pi">:</span> <span class="m">2</span>
|
|
621
622
|
<span class="nn">---</span>
|
|
622
623
|
|
|
623
624
|
<span class="nn">---</span>
|
|
624
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic 1</span>
|
|
625
|
+
<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic </span><span class="m">1</span>
|
|
625
626
|
<span class="na">category</span><span class="pi">:</span> <span class="s">configuration</span>
|
|
626
|
-
<span class="na">order</span><span class="pi">:</span> <span class="
|
|
627
|
+
<span class="na">order</span><span class="pi">:</span> <span class="m">1</span>
|
|
627
628
|
<span class="nn">---</span>
|
|
628
629
|
|
|
629
630
|
<span class="nn">---</span>
|
|
630
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic 2</span>
|
|
631
|
+
<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic </span><span class="m">2</span>
|
|
631
632
|
<span class="na">category</span><span class="pi">:</span> <span class="s">configuration</span>
|
|
632
|
-
<span class="na">order</span><span class="pi">:</span> <span class="
|
|
633
|
+
<span class="na">order</span><span class="pi">:</span> <span class="m">2</span>
|
|
633
634
|
<span class="nn">---</span>
|
|
634
635
|
|
|
635
636
|
<span class="nn">---</span>
|
|
636
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget 1</span>
|
|
637
|
+
<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">1</span>
|
|
637
638
|
<span class="na">category</span><span class="pi">:</span> <span class="s">deployment</span>
|
|
638
|
-
<span class="na">order</span><span class="pi">:</span> <span class="
|
|
639
|
+
<span class="na">order</span><span class="pi">:</span> <span class="m">1</span>
|
|
639
640
|
<span class="nn">---</span>
|
|
640
641
|
|
|
641
642
|
<span class="nn">---</span>
|
|
642
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget 2</span>
|
|
643
|
+
<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget </span><span class="m">2</span>
|
|
643
644
|
<span class="na">category</span><span class="pi">:</span> <span class="s">deployment</span>
|
|
644
|
-
<span class="na">order</span><span class="pi">:</span> <span class="
|
|
645
|
+
<span class="na">order</span><span class="pi">:</span> <span class="m">2</span>
|
|
645
646
|
<span class="nn">---</span>
|
|
646
647
|
</code></pre></div></div>
|
|
647
648
|
|
|
648
|
-
<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>
|
|
649
|
+
<p>Note that even though <code class="language-plaintext highlighter-rouge">category</code> is used in the doc front matter, <code class="language-plaintext 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="language-plaintext highlighter-rouge">category</code> with <code class="language-plaintext highlighter-rouge">site.docs.category</code>.</p>
|
|
649
650
|
|
|
650
|
-
<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>
|
|
651
|
+
<p>If you wanted to simply get all docs in the collection for a specific category, you could use a <code class="language-plaintext highlighter-rouge">for</code> loop with an <code class="language-plaintext highlighter-rouge">if</code> condition to check for a specific category:</p>
|
|
651
652
|
|
|
652
653
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><h3>Getting Started</h3>
|
|
653
654
|
<ul>
|
|
654
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>doc
|
|
655
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">doc</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">site.docs</span><span class="w"> </span><span class="p">%}</span>
|
|
655
656
|
<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>
|
|
656
657
|
<li><a href="<span class="p">{{</span><span class="w"> </span><span class="nv">doc</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"><span class="p">{{</span><span class="w"> </span><span class="nv">doc</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="p">}}</span></a></li>
|
|
657
658
|
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
@@ -674,8 +675,8 @@
|
|
|
674
675
|
<p>But let’s say you want to sort the items by category and group them under the category name, without hard-coding the category names. To achieve this, you could use two filters:</p>
|
|
675
676
|
|
|
676
677
|
<ul>
|
|
677
|
-
<li><code class="highlighter-rouge">group_by</code></li>
|
|
678
|
-
<li><code class="highlighter-rouge">sort</code></li>
|
|
678
|
+
<li><code class="language-plaintext highlighter-rouge">group_by</code></li>
|
|
679
|
+
<li><code class="language-plaintext highlighter-rouge">sort</code></li>
|
|
679
680
|
</ul>
|
|
680
681
|
|
|
681
682
|
<p>Here’s the code for getting lists of pages grouped under their corresponding category headers:</p>
|
|
@@ -683,11 +684,11 @@
|
|
|
683
684
|
<p><strong>Liquid</strong></p>
|
|
684
685
|
|
|
685
686
|
<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>
|
|
686
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>cat
|
|
687
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">cat</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">mydocs</span><span class="w"> </span><span class="p">%}</span>
|
|
687
688
|
<h2><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></h2>
|
|
688
689
|
<ul>
|
|
689
690
|
<span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">items</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">cat</span><span class="p">.</span><span class="nv">items</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">'order'</span><span class="w"> </span><span class="p">%}</span>
|
|
690
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item
|
|
691
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">item</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">items</span><span class="w"> </span><span class="p">%}</span>
|
|
691
692
|
<li><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>"><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></a></li>
|
|
692
693
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
693
694
|
</ul>
|
|
@@ -714,9 +715,9 @@
|
|
|
714
715
|
</ul>
|
|
715
716
|
</div>
|
|
716
717
|
|
|
717
|
-
<p>Let’s walk through the code. First, we assign a variable (<code class="highlighter-rouge">mydocs</code>) to the collection content (<code class="highlighter-rouge">site.docs</code>).</p>
|
|
718
|
+
<p>Let’s walk through the code. First, we assign a variable (<code class="language-plaintext highlighter-rouge">mydocs</code>) to the collection content (<code class="language-plaintext highlighter-rouge">site.docs</code>).</p>
|
|
718
719
|
|
|
719
|
-
<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>
|
|
720
|
+
<p>The <code class="language-plaintext highlighter-rouge">group_by</code> filter groups the collection content by <code class="language-plaintext highlighter-rouge">category</code>. More specifically, the <code class="language-plaintext highlighter-rouge">group_by</code> filter converts <code class="language-plaintext highlighter-rouge">mydocs</code> into an array with <code class="language-plaintext highlighter-rouge">name</code>, <code class="language-plaintext highlighter-rouge">items</code>, and <code class="language-plaintext highlighter-rouge">size</code> properties, somewhat like this:</p>
|
|
720
721
|
|
|
721
722
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">[</span>
|
|
722
723
|
<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>
|
|
@@ -725,13 +726,13 @@
|
|
|
725
726
|
<span class="pi">]</span>
|
|
726
727
|
</code></pre></div></div>
|
|
727
728
|
|
|
728
|
-
<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>
|
|
729
|
+
<p>Using <code class="language-plaintext highlighter-rouge">for cat in mydocs</code>, we look through each item in the <code class="language-plaintext highlighter-rouge">mydocs</code> array and print the category <code class="language-plaintext highlighter-rouge">name</code>.</p>
|
|
729
730
|
|
|
730
|
-
<p>After getting the category name, we assign the variable <code class="highlighter-rouge">items</code> for the docs and use the <code class="highlighter-rouge">sort</code> filter to arrange the docs by their <code class="highlighter-rouge">order</code> property. The dot notation <code class="highlighter-rouge">cat.items</code> is used because we’re accessing the content in the <code class="highlighter-rouge">items</code> array. The <code class="highlighter-rouge">sort</code> filter orders the items by their numbers in ascending order.</p>
|
|
731
|
+
<p>After getting the category name, we assign the variable <code class="language-plaintext highlighter-rouge">items</code> for the docs and use the <code class="language-plaintext highlighter-rouge">sort</code> filter to arrange the docs by their <code class="language-plaintext highlighter-rouge">order</code> property. The dot notation <code class="language-plaintext highlighter-rouge">cat.items</code> is used because we’re accessing the content in the <code class="language-plaintext highlighter-rouge">items</code> array. The <code class="language-plaintext highlighter-rouge">sort</code> filter orders the items by their numbers in ascending order.</p>
|
|
731
732
|
|
|
732
|
-
<p>The <code class="highlighter-rouge">for item in items</code> loop looks through each <code class="highlighter-rouge">item</code> and gets the <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">url</code> to form the list item link.</p>
|
|
733
|
+
<p>The <code class="language-plaintext highlighter-rouge">for item in items</code> loop looks through each <code class="language-plaintext highlighter-rouge">item</code> and gets the <code class="language-plaintext highlighter-rouge">title</code> and <code class="language-plaintext highlighter-rouge">url</code> to form the list item link.</p>
|
|
733
734
|
|
|
734
|
-
<p>For more details on the <code class="highlighter-rouge">group_by</code> filter, see <a href="https://jekyllrb.com/docs/templates/">Jekyll’s Templates documentation</a> as well as <a href="https://www.siteleaf.com/blog/advanced-liquid-group-by/">this Siteleaf tutorial</a>. For more details on the <code class="highlighter-rouge">sort</code> filter, see <a href="https://shopify.github.io/liquid/filters/sort/">sort</a> in Liquid’s documentation.</p>
|
|
735
|
+
<p>For more details on the <code class="language-plaintext highlighter-rouge">group_by</code> filter, see <a href="https://jekyllrb.com/docs/templates/">Jekyll’s Templates documentation</a> as well as <a href="https://www.siteleaf.com/blog/advanced-liquid-group-by/">this Siteleaf tutorial</a>. For more details on the <code class="language-plaintext highlighter-rouge">sort</code> filter, see <a href="https://shopify.github.io/liquid/filters/sort/">sort</a> in Liquid’s documentation.</p>
|
|
735
736
|
|
|
736
737
|
<p>Whether you use properties in your doc’s front matter to retrieve your pages or a YAML data file, in both cases you can programmatically build a more robust navigation for your site.</p>
|
|
737
738
|
|
|
@@ -822,7 +823,7 @@
|
|
|
822
823
|
<footer>
|
|
823
824
|
<div class="grid">
|
|
824
825
|
<div class="unit one-third center-on-mobiles">
|
|
825
|
-
<p>The contents of this website are <br />©
|
|
826
|
+
<p>The contents of this website are <br />© 2020 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
826
827
|
</div>
|
|
827
828
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
828
829
|
<p>
|