jekyll-docs 3.9.0 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/jekyll-docs.rb +3 -3
- data/site/404.html +10 -7
- data/site/css/screen.css +3 -1
- data/site/css/screen.css.map +28 -0
- data/site/docs/assets/index.html +412 -453
- data/site/docs/code_of_conduct/index.html +447 -501
- data/site/docs/collections/index.html +487 -674
- data/site/docs/community/bug/index.html +603 -0
- data/site/docs/community/index.html +635 -0
- data/site/docs/conduct/index.html +447 -515
- data/site/docs/configuration/default/index.html +682 -0
- data/site/docs/configuration/environments/index.html +641 -0
- data/site/docs/configuration/front-matter-defaults/index.html +738 -0
- data/site/docs/configuration/incremental-regeneration/index.html +631 -0
- data/site/docs/configuration/index.html +405 -1230
- data/site/docs/configuration/liquid/index.html +616 -0
- data/site/docs/configuration/markdown/index.html +766 -0
- data/site/docs/configuration/options/index.html +1011 -0
- data/site/docs/configuration/webrick/index.html +615 -0
- data/site/docs/continuous-integration/buddyworks/index.html +393 -479
- data/site/docs/continuous-integration/circleci/index.html +465 -481
- data/site/docs/continuous-integration/travis-ci/index.html +450 -507
- data/site/docs/contributing/index.html +425 -514
- data/site/docs/datafiles/index.html +411 -453
- data/site/docs/deployment-methods/index.html +9 -871
- data/site/docs/deployment/automated/index.html +663 -0
- data/site/docs/deployment/index.html +607 -0
- data/site/docs/deployment/manual/index.html +631 -0
- data/site/docs/deployment/third-party/index.html +639 -0
- data/site/docs/drafts/index.html +9 -634
- data/site/docs/extras/index.html +9 -687
- data/site/docs/front-matter/index.html +799 -0
- data/site/docs/frontmatter/index.html +9 -819
- data/site/docs/github-pages/index.html +407 -475
- data/site/docs/history/index.html +1370 -1154
- data/site/docs/home/index.html +9 -627
- data/site/docs/includes/index.html +425 -501
- data/site/docs/index.html +630 -9
- data/site/docs/installation/index.html +403 -540
- data/site/docs/installation/macos/index.html +716 -0
- data/site/docs/installation/other-linux/index.html +613 -0
- data/site/docs/installation/ubuntu/index.html +623 -0
- data/site/docs/installation/windows/index.html +733 -0
- data/site/docs/layouts/index.html +726 -0
- data/site/docs/liquid/filters/index.html +1169 -0
- data/site/docs/liquid/index.html +615 -0
- data/site/docs/liquid/tags/index.html +728 -0
- data/site/docs/maintaining/affinity-team-captain/index.html +395 -479
- data/site/docs/maintaining/avoiding-burnout/index.html +391 -475
- data/site/docs/maintaining/becoming-a-maintainer/index.html +391 -475
- data/site/docs/maintaining/index.html +391 -486
- data/site/docs/maintaining/merging-a-pull-request/index.html +406 -490
- data/site/docs/maintaining/releasing-a-new-version/index.html +409 -485
- data/site/docs/maintaining/reviewing-a-pull-request/index.html +392 -476
- data/site/docs/maintaining/special-labels/index.html +397 -481
- data/site/docs/maintaining/triaging-an-issue/index.html +394 -478
- data/site/docs/markdown-101/index.html +601 -0
- data/site/docs/migrations/index.html +396 -440
- data/site/docs/pages/index.html +408 -482
- data/site/docs/pagination/index.html +450 -509
- data/site/docs/permalinks/index.html +552 -587
- data/site/docs/plugins/commands/index.html +656 -0
- data/site/docs/plugins/converters/index.html +685 -0
- data/site/docs/plugins/filters/index.html +624 -0
- data/site/docs/plugins/generators/index.html +697 -0
- data/site/docs/plugins/hooks/index.html +838 -0
- data/site/docs/plugins/index.html +415 -1565
- data/site/docs/plugins/installation/index.html +681 -0
- data/site/docs/plugins/tags/index.html +699 -0
- data/site/docs/plugins/your-first-plugin/index.html +741 -0
- data/site/docs/posts/index.html +491 -627
- data/site/docs/quickstart/index.html +9 -645
- data/site/docs/resources/index.html +9 -761
- data/site/docs/ruby-101/index.html +640 -0
- data/site/docs/sites/index.html +9 -696
- data/site/docs/static-files/index.html +401 -433
- data/site/docs/step-by-step/01-setup/index.html +771 -0
- data/site/docs/step-by-step/02-liquid/index.html +756 -0
- data/site/docs/step-by-step/03-front-matter/index.html +730 -0
- data/site/docs/step-by-step/04-layouts/index.html +770 -0
- data/site/docs/step-by-step/05-includes/index.html +768 -0
- data/site/docs/step-by-step/06-data-files/index.html +738 -0
- data/site/docs/step-by-step/07-assets/index.html +773 -0
- data/site/docs/step-by-step/08-blogging/index.html +835 -0
- data/site/docs/step-by-step/09-collections/index.html +932 -0
- data/site/docs/step-by-step/10-deployment/index.html +842 -0
- data/site/docs/structure/index.html +411 -430
- data/site/docs/support/index.html +392 -476
- data/site/docs/templates/index.html +9 -1232
- data/site/docs/themes/index.html +487 -521
- data/site/docs/troubleshooting/index.html +443 -520
- data/site/docs/upgrading/0-to-2/index.html +437 -523
- data/site/docs/upgrading/2-to-3/index.html +422 -507
- data/site/docs/upgrading/3-to-4/index.html +765 -0
- data/site/docs/upgrading/index.html +395 -478
- data/site/docs/usage/index.html +409 -506
- data/site/docs/variables/index.html +504 -652
- data/site/docs/windows/index.html +9 -784
- data/site/feed.xml +269 -188
- data/site/feed/release.xml +324 -0
- data/site/fonts/lato-v14-latin-300.woff +0 -0
- data/site/fonts/lato-v14-latin-300.woff2 +0 -0
- data/site/fonts/lato-v14-latin-300italic.woff +0 -0
- data/site/fonts/lato-v14-latin-300italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-700.woff +0 -0
- data/site/fonts/lato-v14-latin-700.woff2 +0 -0
- data/site/fonts/lato-v14-latin-700italic.woff +0 -0
- data/site/fonts/lato-v14-latin-700italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-900.woff +0 -0
- data/site/fonts/lato-v14-latin-900.woff2 +0 -0
- data/site/fonts/lato-v14-latin-900italic.woff +0 -0
- data/site/fonts/lato-v14-latin-900italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-italic.woff +0 -0
- data/site/fonts/lato-v14-latin-italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-regular.woff +0 -0
- data/site/fonts/lato-v14-latin-regular.woff2 +0 -0
- data/site/help/index.html +9 -247
- data/site/img/forestry-logo.svg +19 -0
- data/site/img/jekyll-og.png +0 -0
- data/site/img/spacer.gif +0 -0
- data/site/index.html +56 -29
- data/site/jekyllconf/index.html +62 -35
- data/site/latest_version.txt +1 -1
- data/site/news/2013/05/05/jekyll-1-0-0-released/index.html +180 -115
- data/site/news/2013/05/08/jekyll-1-0-1-released/index.html +182 -117
- data/site/news/2013/05/12/jekyll-1-0-2-released/index.html +183 -118
- data/site/news/2013/06/07/jekyll-1-0-3-released/index.html +184 -119
- data/site/news/2013/07/14/jekyll-1-1-0-released/index.html +183 -118
- data/site/news/2013/07/24/jekyll-1-1-1-released/index.html +180 -115
- data/site/news/2013/07/25/jekyll-1-0-4-released/index.html +182 -117
- data/site/news/2013/07/25/jekyll-1-1-2-released/index.html +182 -117
- data/site/news/2013/09/06/jekyll-1-2-0-released/index.html +185 -120
- data/site/news/2013/09/14/jekyll-1-2-1-released/index.html +183 -118
- data/site/news/2013/10/28/jekyll-1-3-0-rc1-released/index.html +180 -115
- data/site/news/2013/11/04/jekyll-1-3-0-released/index.html +189 -124
- data/site/news/2013/11/26/jekyll-1-3-1-released/index.html +181 -116
- data/site/news/2013/12/07/jekyll-1-4-0-released/index.html +181 -116
- data/site/news/2013/12/09/jekyll-1-4-1-released/index.html +180 -115
- data/site/news/2013/12/16/jekyll-1-4-2-released/index.html +182 -117
- data/site/news/2014/01/13/jekyll-1-4-3-released/index.html +181 -116
- data/site/news/2014/03/24/jekyll-1-5-0-released/index.html +181 -116
- data/site/news/2014/03/27/jekyll-1-5-1-released/index.html +181 -116
- data/site/news/2014/05/06/jekyll-turns-2-0-0/index.html +184 -119
- data/site/news/2014/05/08/jekyll-2-0-3-released/index.html +180 -115
- data/site/news/2014/06/04/jekyll-stickers-1-dollar-stickermule/index.html +181 -116
- data/site/news/2014/06/28/jekyll-turns-21-i-mean-2-1-0/index.html +185 -120
- data/site/news/2014/07/01/jekyll-2-1-1-released/index.html +182 -117
- data/site/news/2014/07/29/jekyll-2-2-0-released/index.html +181 -116
- data/site/news/2014/08/10/jekyll-2-3-0-released/index.html +189 -124
- data/site/news/2014/09/09/jekyll-2-4-0-released/index.html +187 -122
- data/site/news/2014/11/05/jekylls-midlife-crisis-jekyll-turns-2-5-0/index.html +188 -123
- data/site/news/2014/11/09/jekyll-2-5-1-released/index.html +180 -115
- data/site/news/2014/11/12/jekyll-2-5-2-released/index.html +182 -117
- data/site/news/2014/12/17/alfredxing-welcome-to-jekyll-core/index.html +179 -114
- data/site/news/2014/12/22/jekyll-2-5-3-released/index.html +180 -115
- data/site/news/2015/01/20/jekyll-meet-and-greet/index.html +179 -114
- data/site/news/2015/01/24/jekyll-3-0-0-beta1-released/index.html +180 -115
- data/site/news/2015/02/26/introducing-jekyll-talk/index.html +180 -115
- data/site/news/2015/10/26/jekyll-3-0-released/index.html +185 -120
- data/site/news/2015/11/17/jekyll-3-0-1-released/index.html +184 -119
- data/site/news/2016/01/20/jekyll-3-0-2-released/index.html +182 -117
- data/site/news/2016/01/24/jekyll-3-1-0-released/index.html +186 -121
- data/site/news/2016/01/28/jekyll-3-1-1-released/index.html +183 -118
- data/site/news/2016/02/08/jekyll-3-0-3-released/index.html +181 -116
- data/site/news/2016/02/19/jekyll-3-1-2-released/index.html +182 -117
- data/site/news/2016/03/10/making-it-easier-to-contribute-to-jekyll/index.html +179 -114
- data/site/news/2016/04/19/jekyll-3-0-4-released/index.html +181 -116
- data/site/news/2016/04/19/jekyll-3-1-3-released/index.html +181 -116
- data/site/news/2016/04/26/jekyll-3-0-5-released/index.html +180 -115
- data/site/news/2016/05/18/jekyll-3-1-4-released/index.html +186 -121
- data/site/news/2016/05/18/jekyll-3-1-5-released/index.html +181 -116
- data/site/news/2016/05/19/jekyll-3-1-6-released/index.html +181 -116
- data/site/news/2016/06/03/update-on-jekyll-s-google-summer-of-code-projects/index.html +179 -114
- data/site/news/2016/07/26/jekyll-3-2-0-released/index.html +184 -119
- data/site/news/2016/08/02/jekyll-3-2-1-released/index.html +180 -115
- data/site/news/2016/08/24/jekyll-admin-initial-release/index.html +179 -114
- data/site/news/2016/10/06/jekyll-3-3-is-here/index.html +207 -142
- data/site/news/2016/11/14/jekyll-3-3-1-released/index.html +181 -116
- data/site/news/2017/01/18/jekyll-3-4-0-released/index.html +183 -118
- data/site/news/2017/03/02/jekyll-3-4-1-released/index.html +181 -116
- data/site/news/2017/03/09/jekyll-3-4-2-released/index.html +189 -124
- data/site/news/2017/03/21/jekyll-3-4-3-released/index.html +190 -125
- data/site/news/2017/06/15/jekyll-3-5-0-released/index.html +187 -122
- data/site/news/2017/07/17/jekyll-3-5-1-released/index.html +182 -117
- data/site/news/2017/08/12/jekyll-3-5-2-released/index.html +185 -120
- data/site/news/2017/09/21/jekyll-3-6-0-released/index.html +181 -116
- data/site/news/2017/10/19/diversity-open-source/index.html +181 -116
- data/site/news/2017/10/21/jekyll-3-6-2-released/index.html +183 -118
- data/site/news/2018/01/02/jekyll-3-7-0-released/index.html +184 -119
- data/site/news/2018/01/25/jekyll-3-7-2-released/index.html +189 -124
- data/site/news/2018/02/19/meet-jekyll-s-new-lead-developer/index.html +180 -115
- data/site/news/2018/02/24/jekyll-3-7-3-released/index.html +185 -120
- data/site/news/2018/04/19/development-update/index.html +699 -0
- data/site/news/2018/04/19/jekyll-3-8-0-released/index.html +715 -0
- data/site/news/2018/05/01/jekyll-3-8-1-released/index.html +182 -117
- data/site/news/2018/05/19/jekyll-3-8-2-released/index.html +181 -116
- data/site/news/2018/06/05/jekyll-3-8-3-released/index.html +183 -118
- data/site/news/2018/08/01/jekyll-sponsoring/index.html +748 -0
- data/site/news/2018/09/19/security-fixes-for-3-6-3-7-3-8/index.html +692 -0
- data/site/news/2018/11/04/jekyll-3-8-5-released/index.html +682 -0
- data/site/news/2019/03/18/jekyll-4-0-0-pre-alpha1-released/index.html +710 -0
- data/site/news/2019/07/02/jekyll-3-8-6-released/index.html +180 -115
- data/site/news/2019/07/20/jekyll-4-0-0-pre-beta1-released/index.html +11 -0
- data/site/news/2019/08/04/jekyll-4-0-0-pre-beta1-released/index.html +708 -0
- data/site/news/2019/08/20/jekyll-4-0-0-released/index.html +809 -0
- data/site/news/index.html +976 -326
- data/site/news/releases/index.html +820 -321
- data/site/{philosophy.html → philosophy/index.html} +1 -1
- data/site/redirects.json +1 -1
- data/site/resources/index.html +332 -0
- data/site/showcase/index.html +844 -0
- data/site/sitemap.xml +256 -81
- data/site/team/index.html +63 -77
- data/site/tutorials/cache-api/index.html +418 -0
- data/site/tutorials/convert-site-to-jekyll/index.html +155 -124
- data/site/tutorials/custom-404-page/index.html +76 -43
- data/site/tutorials/home/index.html +64 -37
- data/site/tutorials/navigation/index.html +186 -103
- data/site/tutorials/orderofinterpretation/index.html +80 -53
- data/site/tutorials/using-jekyll-with-bundler/index.html +80 -51
- data/site/tutorials/video-walkthroughs/index.html +62 -35
- metadata +102 -13
- data/site/community/index.html +0 -11
- data/site/docs/continuous-integration/index.html +0 -681
|
@@ -3,17 +3,18 @@
|
|
|
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
|
|
6
|
+
<meta name="generator" content="Jekyll v4.0.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
|
+
<link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" />
|
|
8
9
|
<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
|
-
<link rel="
|
|
10
|
-
<link rel="
|
|
11
|
-
<link rel="
|
|
10
|
+
<link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin />
|
|
11
|
+
<link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin />
|
|
12
|
+
<link rel="preload" href="/css/screen.css" as="style">
|
|
12
13
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
14
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
15
|
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
16
|
<title>Custom 404 Page | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll
|
|
17
|
+
<meta name="generator" content="Jekyll v4.0.0" />
|
|
17
18
|
<meta property="og:title" content="Custom 404 Page" />
|
|
18
19
|
<meta property="og:locale" content="en_US" />
|
|
19
20
|
<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." />
|
|
@@ -21,14 +22,16 @@
|
|
|
21
22
|
<link rel="canonical" href="https://jekyllrb.com/tutorials/custom-404-page/" />
|
|
22
23
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/custom-404-page/" />
|
|
23
24
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
25
|
+
<meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
24
26
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
26
|
-
<meta name="twitter:card" content="
|
|
27
|
+
<meta property="article:published_time" content="2019-09-11T07:30:27-07:00" />
|
|
28
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
29
|
+
<meta property="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
27
30
|
<meta property="twitter:title" content="Custom 404 Page" />
|
|
28
31
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
29
32
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
30
33
|
<script type="application/ld+json">
|
|
31
|
-
{"
|
|
34
|
+
{"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.","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/custom-404-page/"},"headline":"Custom 404 Page","dateModified":"2019-09-11T07:30:27-07:00","url":"https://jekyllrb.com/tutorials/custom-404-page/","datePublished":"2019-09-11T07:30:27-07:00","image":"https://jekyllrb.com/img/jekyll-og.png","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"@context":"https://schema.org"}</script>
|
|
32
35
|
<!-- End Jekyll SEO tag -->
|
|
33
36
|
|
|
34
37
|
<!--[if lt IE 9]>
|
|
@@ -51,18 +54,27 @@
|
|
|
51
54
|
</div>
|
|
52
55
|
<nav class="main-nav hide-on-mobiles">
|
|
53
56
|
<ul>
|
|
54
|
-
|
|
57
|
+
|
|
58
|
+
<li>
|
|
55
59
|
<a href="/">Home</a>
|
|
56
60
|
</li>
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
|
|
62
|
+
<li>
|
|
63
|
+
<a href="/docs/">Docs</a>
|
|
64
|
+
</li>
|
|
65
|
+
|
|
66
|
+
<li>
|
|
67
|
+
<a href="/resources/">Resources</a>
|
|
59
68
|
</li>
|
|
60
|
-
|
|
61
|
-
|
|
69
|
+
|
|
70
|
+
<li>
|
|
71
|
+
<a href="/showcase/">Showcase</a>
|
|
62
72
|
</li>
|
|
63
|
-
|
|
64
|
-
|
|
73
|
+
|
|
74
|
+
<li>
|
|
75
|
+
<a href="/news/">News</a>
|
|
65
76
|
</li>
|
|
77
|
+
|
|
66
78
|
</ul>
|
|
67
79
|
|
|
68
80
|
</nav>
|
|
@@ -73,7 +85,7 @@
|
|
|
73
85
|
<div class="meta hide-on-mobiles">
|
|
74
86
|
<ul>
|
|
75
87
|
<li>
|
|
76
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/
|
|
88
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v4.0.0">v4.0.0</a>
|
|
77
89
|
</li>
|
|
78
90
|
<li>
|
|
79
91
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -83,18 +95,24 @@
|
|
|
83
95
|
</div>
|
|
84
96
|
<nav class="mobile-nav show-on-mobiles">
|
|
85
97
|
<ul>
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
+
|
|
99
|
+
<li>
|
|
100
|
+
<a href="/">Home</a>
|
|
101
|
+
</li>
|
|
102
|
+
|
|
103
|
+
<li>
|
|
104
|
+
<a href="/docs/">Docs</a>
|
|
105
|
+
</li>
|
|
106
|
+
|
|
107
|
+
<li>
|
|
108
|
+
<a href="/resources/">Resources</a>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<li>
|
|
113
|
+
<a href="/news/">News</a>
|
|
114
|
+
</li>
|
|
115
|
+
|
|
98
116
|
<li>
|
|
99
117
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
100
118
|
</li>
|
|
@@ -159,11 +177,11 @@
|
|
|
159
177
|
|
|
160
178
|
<h2 id="on-github-pages">On GitHub Pages</h2>
|
|
161
179
|
|
|
162
|
-
<p>Any <code class="
|
|
180
|
+
<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>
|
|
163
181
|
|
|
164
|
-
<p>Simply add a <code class="
|
|
182
|
+
<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 front matter data to use the theme’s base layout.</p>
|
|
165
183
|
|
|
166
|
-
<p>If you plan to organize your files under subdirectories, the error page should have the following Front Matter Data, set: <code class="
|
|
184
|
+
<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>
|
|
167
185
|
|
|
168
186
|
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
|
|
169
187
|
<span class="c1"># example 404.md</span>
|
|
@@ -179,14 +197,14 @@ Page not found! :(
|
|
|
179
197
|
|
|
180
198
|
<h2 id="hosting-on-apache-web-servers">Hosting on Apache Web Servers</h2>
|
|
181
199
|
|
|
182
|
-
<p>Apache Web Servers load a configuration file named <a href="http://www.htaccess-guide.com/"><code class="
|
|
200
|
+
<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>
|
|
183
201
|
|
|
184
|
-
<p>Simply add the following to your <code class="
|
|
202
|
+
<p>Simply add the following to your <code class="highlighter-rouge">.htaccess</code> file.</p>
|
|
185
203
|
|
|
186
204
|
<div class="language-apache highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">ErrorDocument</span> 404 /404.html
|
|
187
205
|
</code></pre></div></div>
|
|
188
206
|
|
|
189
|
-
<p>With an <code class="
|
|
207
|
+
<p>With an <code class="highlighter-rouge">.htaccess</code> file, you have the freedom to place your error page within a subdirectory.</p>
|
|
190
208
|
|
|
191
209
|
<div class="language-apache highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">ErrorDocument</span> 404 /error_pages/404.html
|
|
192
210
|
</code></pre></div></div>
|
|
@@ -199,7 +217,7 @@ Page not found! :(
|
|
|
199
217
|
|
|
200
218
|
<p>The procedure is just as simple as configuring Apache servers, but slightly different.</p>
|
|
201
219
|
|
|
202
|
-
<p>
|
|
220
|
+
<p>The nginx configuration file depends on the system in which it is installed. In most systems, it is the <code class="highlighter-rouge">nginx.conf</code> file, which is usually located inside <code class="highlighter-rouge">/etc/nginx/</code> or <code class="highlighter-rouge">/etc/nginx/conf/</code>. However, in other systems like Ubuntu, you would have to look for a <code class="highlighter-rouge">default</code> nginx configuration file, containing server related information, which is usually located inside <code class="highlighter-rouge">/etc/nginx/sites-available/</code> or <code class="highlighter-rouge">/etc/nginx/sites-enabled/</code>. Add the following to your nginx configuration file, <em>i.e.</em> either to <code class="highlighter-rouge">nginx.conf</code> file or to <code class="highlighter-rouge">default</code> file:</p>
|
|
203
221
|
|
|
204
222
|
<div class="language-nginx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">server</span> <span class="p">{</span>
|
|
205
223
|
<span class="kn">error_page</span> <span class="mi">404</span> <span class="n">/404.html</span><span class="p">;</span>
|
|
@@ -208,8 +226,14 @@ Page not found! :(
|
|
|
208
226
|
<span class="p">}</span>
|
|
209
227
|
<span class="p">}</span>
|
|
210
228
|
</code></pre></div></div>
|
|
229
|
+
<p>If the <code class="highlighter-rouge">server</code> block already exists, only add the code inside the <code class="highlighter-rouge">server</code> block given above.
|
|
230
|
+
The <code class="highlighter-rouge">location</code> directive prevents users from directly browsing the 404.html page.</p>
|
|
211
231
|
|
|
212
|
-
<p>
|
|
232
|
+
<p>More info on nginx error page can be found on <a href="http://nginx.org/en/docs/http/ngx_http_core_module.html#error_page">nginx official documentation</a>.</p>
|
|
233
|
+
|
|
234
|
+
<p class="note warning">
|
|
235
|
+
Proceed with caution while editing the configuration file.
|
|
236
|
+
</p>
|
|
213
237
|
|
|
214
238
|
|
|
215
239
|
|
|
@@ -261,19 +285,19 @@ Page not found! :(
|
|
|
261
285
|
|
|
262
286
|
|
|
263
287
|
|
|
264
|
-
<li
|
|
288
|
+
<li><a href="/tutorials/home/">Tutorials</a></li>
|
|
265
289
|
|
|
266
290
|
|
|
267
291
|
|
|
268
|
-
<li
|
|
292
|
+
<li><a href="/tutorials/video-walkthroughs/">Video Walkthroughs</a></li>
|
|
269
293
|
|
|
270
294
|
|
|
271
295
|
|
|
272
|
-
<li
|
|
296
|
+
<li><a href="/tutorials/navigation/">Navigation</a></li>
|
|
273
297
|
|
|
274
298
|
|
|
275
299
|
|
|
276
|
-
<li
|
|
300
|
+
<li><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
|
277
301
|
|
|
278
302
|
|
|
279
303
|
|
|
@@ -281,11 +305,11 @@ Page not found! :(
|
|
|
281
305
|
|
|
282
306
|
|
|
283
307
|
|
|
284
|
-
<li
|
|
308
|
+
<li><a href="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</a></li>
|
|
285
309
|
|
|
286
310
|
|
|
287
311
|
|
|
288
|
-
<li
|
|
312
|
+
<li><a href="/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</a></li>
|
|
289
313
|
|
|
290
314
|
</ul>
|
|
291
315
|
|
|
@@ -304,7 +328,8 @@ Page not found! :(
|
|
|
304
328
|
<footer>
|
|
305
329
|
<div class="grid">
|
|
306
330
|
<div class="unit one-third center-on-mobiles">
|
|
307
|
-
<p>
|
|
331
|
+
<p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p>
|
|
332
|
+
<p>The contents of this website are <br />© 2019 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
308
333
|
</div>
|
|
309
334
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
310
335
|
<p>
|
|
@@ -314,6 +339,14 @@ Page not found! :(
|
|
|
314
339
|
</a>
|
|
315
340
|
</p>
|
|
316
341
|
</div>
|
|
342
|
+
<div class="unit two-thirds align-right center-on-mobiles">
|
|
343
|
+
<p>
|
|
344
|
+
Jekyll is funded thanks to its
|
|
345
|
+
<a href="https://github.com/jekyll/jekyll#sponsors">
|
|
346
|
+
sponsors!
|
|
347
|
+
</a>
|
|
348
|
+
</p>
|
|
349
|
+
</div>
|
|
317
350
|
</div>
|
|
318
351
|
</footer>
|
|
319
352
|
|
|
@@ -3,17 +3,18 @@
|
|
|
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
|
|
6
|
+
<meta name="generator" content="Jekyll v4.0.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
|
+
<link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" />
|
|
8
9
|
<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
|
-
<link rel="
|
|
10
|
-
<link rel="
|
|
11
|
-
<link rel="
|
|
10
|
+
<link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin />
|
|
11
|
+
<link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin />
|
|
12
|
+
<link rel="preload" href="/css/screen.css" as="style">
|
|
12
13
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
14
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
15
|
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
16
|
<title>Tutorials | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll
|
|
17
|
+
<meta name="generator" content="Jekyll v4.0.0" />
|
|
17
18
|
<meta property="og:title" content="Tutorials" />
|
|
18
19
|
<meta property="og:locale" content="en_US" />
|
|
19
20
|
<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:" />
|
|
@@ -21,14 +22,16 @@
|
|
|
21
22
|
<link rel="canonical" href="https://jekyllrb.com/tutorials/home/" />
|
|
22
23
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/home/" />
|
|
23
24
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
25
|
+
<meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
24
26
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
26
|
-
<meta name="twitter:card" content="
|
|
27
|
+
<meta property="article:published_time" content="2019-09-11T07:30:27-07:00" />
|
|
28
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
29
|
+
<meta property="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
27
30
|
<meta property="twitter:title" content="Tutorials" />
|
|
28
31
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
29
32
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
30
33
|
<script type="application/ld+json">
|
|
31
|
-
{"
|
|
34
|
+
{"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:","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/home/"},"headline":"Tutorials","dateModified":"2019-09-11T07:30:27-07:00","url":"https://jekyllrb.com/tutorials/home/","datePublished":"2019-09-11T07:30:27-07:00","image":"https://jekyllrb.com/img/jekyll-og.png","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"@context":"https://schema.org"}</script>
|
|
32
35
|
<!-- End Jekyll SEO tag -->
|
|
33
36
|
|
|
34
37
|
<!--[if lt IE 9]>
|
|
@@ -51,18 +54,27 @@
|
|
|
51
54
|
</div>
|
|
52
55
|
<nav class="main-nav hide-on-mobiles">
|
|
53
56
|
<ul>
|
|
54
|
-
|
|
57
|
+
|
|
58
|
+
<li>
|
|
55
59
|
<a href="/">Home</a>
|
|
56
60
|
</li>
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
|
|
62
|
+
<li>
|
|
63
|
+
<a href="/docs/">Docs</a>
|
|
64
|
+
</li>
|
|
65
|
+
|
|
66
|
+
<li>
|
|
67
|
+
<a href="/resources/">Resources</a>
|
|
59
68
|
</li>
|
|
60
|
-
|
|
61
|
-
|
|
69
|
+
|
|
70
|
+
<li>
|
|
71
|
+
<a href="/showcase/">Showcase</a>
|
|
62
72
|
</li>
|
|
63
|
-
|
|
64
|
-
|
|
73
|
+
|
|
74
|
+
<li>
|
|
75
|
+
<a href="/news/">News</a>
|
|
65
76
|
</li>
|
|
77
|
+
|
|
66
78
|
</ul>
|
|
67
79
|
|
|
68
80
|
</nav>
|
|
@@ -73,7 +85,7 @@
|
|
|
73
85
|
<div class="meta hide-on-mobiles">
|
|
74
86
|
<ul>
|
|
75
87
|
<li>
|
|
76
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/
|
|
88
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v4.0.0">v4.0.0</a>
|
|
77
89
|
</li>
|
|
78
90
|
<li>
|
|
79
91
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -83,18 +95,24 @@
|
|
|
83
95
|
</div>
|
|
84
96
|
<nav class="mobile-nav show-on-mobiles">
|
|
85
97
|
<ul>
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
+
|
|
99
|
+
<li>
|
|
100
|
+
<a href="/">Home</a>
|
|
101
|
+
</li>
|
|
102
|
+
|
|
103
|
+
<li>
|
|
104
|
+
<a href="/docs/">Docs</a>
|
|
105
|
+
</li>
|
|
106
|
+
|
|
107
|
+
<li>
|
|
108
|
+
<a href="/resources/">Resources</a>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<li>
|
|
113
|
+
<a href="/news/">News</a>
|
|
114
|
+
</li>
|
|
115
|
+
|
|
98
116
|
<li>
|
|
99
117
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
100
118
|
</li>
|
|
@@ -177,9 +195,9 @@
|
|
|
177
195
|
|
|
178
196
|
<ol>
|
|
179
197
|
<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>
|
|
180
|
-
<li>Add your tutorial in the <code class="
|
|
198
|
+
<li>Add your tutorial in the <code class="highlighter-rouge">_tutorials</code> collection.</li>
|
|
181
199
|
<li>Make sure your tutorial has the same front matter items as other tutorial items.</li>
|
|
182
|
-
<li>Add a reference to your tutorial filename in <code class="
|
|
200
|
+
<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>
|
|
183
201
|
<li>Follow the regular git workflow to submit the pull request.</li>
|
|
184
202
|
</ol>
|
|
185
203
|
|
|
@@ -226,27 +244,27 @@
|
|
|
226
244
|
|
|
227
245
|
|
|
228
246
|
|
|
229
|
-
<li
|
|
247
|
+
<li><a href="/tutorials/video-walkthroughs/">Video Walkthroughs</a></li>
|
|
230
248
|
|
|
231
249
|
|
|
232
250
|
|
|
233
|
-
<li
|
|
251
|
+
<li><a href="/tutorials/navigation/">Navigation</a></li>
|
|
234
252
|
|
|
235
253
|
|
|
236
254
|
|
|
237
|
-
<li
|
|
255
|
+
<li><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
|
238
256
|
|
|
239
257
|
|
|
240
258
|
|
|
241
|
-
<li
|
|
259
|
+
<li><a href="/tutorials/custom-404-page/">Custom 404 Page</a></li>
|
|
242
260
|
|
|
243
261
|
|
|
244
262
|
|
|
245
|
-
<li
|
|
263
|
+
<li><a href="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</a></li>
|
|
246
264
|
|
|
247
265
|
|
|
248
266
|
|
|
249
|
-
<li
|
|
267
|
+
<li><a href="/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</a></li>
|
|
250
268
|
|
|
251
269
|
</ul>
|
|
252
270
|
|
|
@@ -265,7 +283,8 @@
|
|
|
265
283
|
<footer>
|
|
266
284
|
<div class="grid">
|
|
267
285
|
<div class="unit one-third center-on-mobiles">
|
|
268
|
-
<p>
|
|
286
|
+
<p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p>
|
|
287
|
+
<p>The contents of this website are <br />© 2019 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
269
288
|
</div>
|
|
270
289
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
271
290
|
<p>
|
|
@@ -275,6 +294,14 @@
|
|
|
275
294
|
</a>
|
|
276
295
|
</p>
|
|
277
296
|
</div>
|
|
297
|
+
<div class="unit two-thirds align-right center-on-mobiles">
|
|
298
|
+
<p>
|
|
299
|
+
Jekyll is funded thanks to its
|
|
300
|
+
<a href="https://github.com/jekyll/jekyll#sponsors">
|
|
301
|
+
sponsors!
|
|
302
|
+
</a>
|
|
303
|
+
</p>
|
|
304
|
+
</div>
|
|
278
305
|
</div>
|
|
279
306
|
</footer>
|
|
280
307
|
|
|
@@ -3,17 +3,18 @@
|
|
|
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
|
|
6
|
+
<meta name="generator" content="Jekyll v4.0.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
|
+
<link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" />
|
|
8
9
|
<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
|
-
<link rel="
|
|
10
|
-
<link rel="
|
|
11
|
-
<link rel="
|
|
10
|
+
<link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin />
|
|
11
|
+
<link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin />
|
|
12
|
+
<link rel="preload" href="/css/screen.css" as="style">
|
|
12
13
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
14
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
15
|
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
16
|
<title>Navigation | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll
|
|
17
|
+
<meta name="generator" content="Jekyll v4.0.0" />
|
|
17
18
|
<meta property="og:title" content="Navigation" />
|
|
18
19
|
<meta property="og:locale" content="en_US" />
|
|
19
20
|
<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." />
|
|
@@ -21,14 +22,16 @@
|
|
|
21
22
|
<link rel="canonical" href="https://jekyllrb.com/tutorials/navigation/" />
|
|
22
23
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/navigation/" />
|
|
23
24
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
25
|
+
<meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
24
26
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
26
|
-
<meta name="twitter:card" content="
|
|
27
|
+
<meta property="article:published_time" content="2019-09-11T07:30:27-07:00" />
|
|
28
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
29
|
+
<meta property="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
27
30
|
<meta property="twitter:title" content="Navigation" />
|
|
28
31
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
29
32
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
30
33
|
<script type="application/ld+json">
|
|
31
|
-
{"
|
|
34
|
+
{"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.","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/navigation/"},"headline":"Navigation","dateModified":"2019-09-11T07:30:27-07:00","url":"https://jekyllrb.com/tutorials/navigation/","datePublished":"2019-09-11T07:30:27-07:00","image":"https://jekyllrb.com/img/jekyll-og.png","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"@context":"https://schema.org"}</script>
|
|
32
35
|
<!-- End Jekyll SEO tag -->
|
|
33
36
|
|
|
34
37
|
<!--[if lt IE 9]>
|
|
@@ -51,18 +54,27 @@
|
|
|
51
54
|
</div>
|
|
52
55
|
<nav class="main-nav hide-on-mobiles">
|
|
53
56
|
<ul>
|
|
54
|
-
|
|
57
|
+
|
|
58
|
+
<li>
|
|
55
59
|
<a href="/">Home</a>
|
|
56
60
|
</li>
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
|
|
62
|
+
<li>
|
|
63
|
+
<a href="/docs/">Docs</a>
|
|
59
64
|
</li>
|
|
60
|
-
|
|
61
|
-
|
|
65
|
+
|
|
66
|
+
<li>
|
|
67
|
+
<a href="/resources/">Resources</a>
|
|
62
68
|
</li>
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
|
|
70
|
+
<li>
|
|
71
|
+
<a href="/showcase/">Showcase</a>
|
|
65
72
|
</li>
|
|
73
|
+
|
|
74
|
+
<li>
|
|
75
|
+
<a href="/news/">News</a>
|
|
76
|
+
</li>
|
|
77
|
+
|
|
66
78
|
</ul>
|
|
67
79
|
|
|
68
80
|
</nav>
|
|
@@ -73,7 +85,7 @@
|
|
|
73
85
|
<div class="meta hide-on-mobiles">
|
|
74
86
|
<ul>
|
|
75
87
|
<li>
|
|
76
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/
|
|
88
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v4.0.0">v4.0.0</a>
|
|
77
89
|
</li>
|
|
78
90
|
<li>
|
|
79
91
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -83,18 +95,24 @@
|
|
|
83
95
|
</div>
|
|
84
96
|
<nav class="mobile-nav show-on-mobiles">
|
|
85
97
|
<ul>
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
+
|
|
99
|
+
<li>
|
|
100
|
+
<a href="/">Home</a>
|
|
101
|
+
</li>
|
|
102
|
+
|
|
103
|
+
<li>
|
|
104
|
+
<a href="/docs/">Docs</a>
|
|
105
|
+
</li>
|
|
106
|
+
|
|
107
|
+
<li>
|
|
108
|
+
<a href="/resources/">Resources</a>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<li>
|
|
113
|
+
<a href="/news/">News</a>
|
|
114
|
+
</li>
|
|
115
|
+
|
|
98
116
|
<li>
|
|
99
117
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
100
118
|
</li>
|
|
@@ -162,7 +180,7 @@
|
|
|
162
180
|
<p>There are two primary ways of retrieving pages on a Jekyll site:</p>
|
|
163
181
|
|
|
164
182
|
<ul>
|
|
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="
|
|
183
|
+
<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>
|
|
166
184
|
<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>
|
|
167
185
|
</ul>
|
|
168
186
|
|
|
@@ -174,7 +192,7 @@
|
|
|
174
192
|
<li>Result</li>
|
|
175
193
|
</ul>
|
|
176
194
|
|
|
177
|
-
<p>The YAML file in the <code class="
|
|
195
|
+
<p>The YAML file in the <code class="highlighter-rouge">_data</code> directory is called <code class="highlighter-rouge">samplelist.yml</code>.</p>
|
|
178
196
|
|
|
179
197
|
<p>The scenarios are as follows:</p>
|
|
180
198
|
|
|
@@ -187,6 +205,7 @@
|
|
|
187
205
|
<li><a href="#scenario-6-applying-the-active-class-for-the-current-page" id="markdown-toc-scenario-6-applying-the-active-class-for-the-current-page">Scenario 6: Applying the active class for the current page</a></li>
|
|
188
206
|
<li><a href="#scenario-7-including-items-conditionally" id="markdown-toc-scenario-7-including-items-conditionally">Scenario 7: Including items conditionally</a></li>
|
|
189
207
|
<li><a href="#scenario-8-retrieving-items-based-on-front-matter-properties" id="markdown-toc-scenario-8-retrieving-items-based-on-front-matter-properties">Scenario 8: Retrieving items based on front matter properties</a></li>
|
|
208
|
+
<li><a href="#scenario-9-nested-tree-navigation-with-recursion" id="markdown-toc-scenario-9-nested-tree-navigation-with-recursion">Scenario 9: Nested tree navigation with recursion</a></li>
|
|
190
209
|
</ul>
|
|
191
210
|
|
|
192
211
|
<h2 id="scenario-1-basic-list">Scenario 1: Basic List</h2>
|
|
@@ -212,25 +231,25 @@
|
|
|
212
231
|
|
|
213
232
|
<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>
|
|
214
233
|
<ul>
|
|
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="
|
|
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>"
|
|
234
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs</span><span class="w"> </span><span class="p">%}</span>
|
|
235
|
+
<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>
|
|
217
236
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
218
237
|
</ul>
|
|
219
238
|
</code></pre></div></div>
|
|
220
239
|
|
|
221
240
|
<p><strong>Result</strong></p>
|
|
222
|
-
<div class="highlight result">
|
|
241
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
223
242
|
<h2>ACME Documentation</h2>
|
|
224
243
|
<ul>
|
|
225
|
-
<li><a href="#"
|
|
226
|
-
<li><a href="#"
|
|
227
|
-
<li><a href="#"
|
|
244
|
+
<li><a href="#">Introduction</a></li>
|
|
245
|
+
<li><a href="#">Configuration</a></li>
|
|
246
|
+
<li><a href="#">Deployment</a></li>
|
|
228
247
|
</ul>
|
|
229
248
|
</div>
|
|
230
249
|
|
|
231
|
-
<p class="note info">For the results in these fictitious samples, <code class="
|
|
250
|
+
<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>
|
|
232
251
|
|
|
233
|
-
<p>When you use a <code class="
|
|
252
|
+
<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>
|
|
234
253
|
|
|
235
254
|
<p>The YAML content has two main types of formats that are relevant here:</p>
|
|
236
255
|
|
|
@@ -239,46 +258,46 @@
|
|
|
239
258
|
<li>list</li>
|
|
240
259
|
</ul>
|
|
241
260
|
|
|
242
|
-
<p><code class="
|
|
261
|
+
<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>
|
|
243
262
|
|
|
244
|
-
<p><code class="
|
|
263
|
+
<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>
|
|
245
264
|
|
|
246
|
-
<p>With lists, you usually use <code class="
|
|
265
|
+
<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>
|
|
247
266
|
|
|
248
|
-
<p>Each hyphen (<code class="
|
|
267
|
+
<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>
|
|
249
268
|
|
|
250
269
|
<h2 id="scenario-2-sorted-list">Scenario 2: Sorted list</h2>
|
|
251
270
|
|
|
252
|
-
<p>Suppose you wanted to sort the list by the <code class="
|
|
271
|
+
<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>
|
|
253
272
|
|
|
254
273
|
<p><strong>Liquid</strong></p>
|
|
255
274
|
|
|
256
275
|
<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>
|
|
257
276
|
<ol>
|
|
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="
|
|
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>"
|
|
277
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">doclist</span><span class="w"> </span><span class="p">%}</span>
|
|
278
|
+
<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>
|
|
260
279
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
261
280
|
</ol>
|
|
262
281
|
</code></pre></div></div>
|
|
263
282
|
|
|
264
283
|
<p><strong>Result</strong></p>
|
|
265
284
|
|
|
266
|
-
<div class="highlight result">
|
|
285
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
267
286
|
<ol>
|
|
268
|
-
<li><a href="#"
|
|
269
|
-
<li><a href="#"
|
|
270
|
-
<li><a href="#"
|
|
287
|
+
<li><a href="#">Configuration</a></li>
|
|
288
|
+
<li><a href="#">Deployment</a></li>
|
|
289
|
+
<li><a href="#">Introduction</a></li>
|
|
271
290
|
</ol>
|
|
272
291
|
</div>
|
|
273
292
|
|
|
274
|
-
<p>The items now appear in alphabetical order. The <code class="
|
|
293
|
+
<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>
|
|
275
294
|
|
|
276
295
|
<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>
|
|
277
296
|
|
|
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="
|
|
297
|
+
<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="kr">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>
|
|
279
298
|
</code></pre></div></div>
|
|
280
299
|
|
|
281
|
-
<p>You have to convert <code class="
|
|
300
|
+
<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>
|
|
282
301
|
|
|
283
302
|
<h2 id="scenario-3-two-level-navigation-list">Scenario 3: Two-level navigation list</h2>
|
|
284
303
|
|
|
@@ -315,10 +334,10 @@
|
|
|
315
334
|
|
|
316
335
|
<p><strong>Liquid</strong></p>
|
|
317
336
|
|
|
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="
|
|
337
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.data.samplelist.toc</span><span class="w"> </span><span class="p">%}</span>
|
|
319
338
|
<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>
|
|
320
339
|
<ul>
|
|
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="
|
|
340
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">item.subfolderitems</span><span class="w"> </span><span class="p">%}</span>
|
|
322
341
|
<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>
|
|
323
342
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
324
343
|
</ul>
|
|
@@ -326,7 +345,7 @@
|
|
|
326
345
|
</code></pre></div></div>
|
|
327
346
|
|
|
328
347
|
<p><strong>Result</strong></p>
|
|
329
|
-
<div class="highlight result">
|
|
348
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
330
349
|
<h3>Group 1</h3>
|
|
331
350
|
<ul>
|
|
332
351
|
<li><a href="#">Thing 1</a></li>
|
|
@@ -349,13 +368,13 @@
|
|
|
349
368
|
</ul>
|
|
350
369
|
</div>
|
|
351
370
|
|
|
352
|
-
<p>In this example, <code class="
|
|
371
|
+
<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>
|
|
353
372
|
|
|
354
|
-
<p>The Liquid code looks through the first level with <code class="
|
|
373
|
+
<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>
|
|
355
374
|
|
|
356
375
|
<h2 id="scenario-4-three-level-navigation-list">Scenario 4: Three-level navigation list</h2>
|
|
357
376
|
|
|
358
|
-
<p>Building on the previous section, let’s add one more level of depth (<code class="
|
|
377
|
+
<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>
|
|
359
378
|
|
|
360
379
|
<p><strong>YAML</strong></p>
|
|
361
380
|
|
|
@@ -405,15 +424,15 @@
|
|
|
405
424
|
|
|
406
425
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
|
|
407
426
|
<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>
|
|
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="
|
|
427
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.data.samplelist.toc2</span><span class="w"> </span><span class="p">%}</span>
|
|
409
428
|
<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>
|
|
410
429
|
<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>
|
|
411
430
|
<ul>
|
|
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="
|
|
431
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">item.subfolderitems</span><span class="w"> </span><span class="p">%}</span>
|
|
413
432
|
<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>
|
|
414
433
|
<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>
|
|
415
434
|
<ul>
|
|
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="
|
|
435
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">entry.subsubfolderitems</span><span class="w"> </span><span class="p">%}</span>
|
|
417
436
|
<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>
|
|
418
437
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
419
438
|
</ul>
|
|
@@ -429,7 +448,7 @@
|
|
|
429
448
|
|
|
430
449
|
<p><strong>Result</strong></p>
|
|
431
450
|
|
|
432
|
-
<div class="highlight result">
|
|
451
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
433
452
|
<div>
|
|
434
453
|
<h3>Group 1</h3>
|
|
435
454
|
<ul>
|
|
@@ -464,7 +483,7 @@
|
|
|
464
483
|
</div>
|
|
465
484
|
</div>
|
|
466
485
|
|
|
467
|
-
<p>In this example, <code class="
|
|
486
|
+
<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>
|
|
468
487
|
|
|
469
488
|
<div class="note">
|
|
470
489
|
<h5>ProTip: Line up <code>for</code> loops and <code>if</code> statements</h5>
|
|
@@ -488,7 +507,7 @@
|
|
|
488
507
|
<p><strong>Liquid</strong></p>
|
|
489
508
|
|
|
490
509
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
|
|
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="
|
|
510
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.data.samplelist[page.sidebar]</span><span class="w"> </span><span class="p">%}</span>
|
|
492
511
|
<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>
|
|
493
512
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
494
513
|
</ul>
|
|
@@ -496,7 +515,7 @@
|
|
|
496
515
|
|
|
497
516
|
<p><strong>Result</strong></p>
|
|
498
517
|
|
|
499
|
-
<div class="highlight result">
|
|
518
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
500
519
|
<ul>
|
|
501
520
|
<li><a href="#">Introduction</a></li>
|
|
502
521
|
<li><a href="#">Configuration</a></li>
|
|
@@ -504,13 +523,13 @@
|
|
|
504
523
|
</ul>
|
|
505
524
|
</div>
|
|
506
525
|
|
|
507
|
-
<p>In this scenario, we want to pass values from the page’s front matter into a <code class="
|
|
526
|
+
<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>
|
|
508
527
|
|
|
509
528
|
<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>
|
|
510
529
|
|
|
511
530
|
<h2 id="scenario-6-applying-the-active-class-for-the-current-page">Scenario 6: Applying the active class for the current page</h2>
|
|
512
531
|
|
|
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="
|
|
532
|
+
<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>
|
|
514
533
|
|
|
515
534
|
<p><strong>CSS</strong></p>
|
|
516
535
|
<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>
|
|
@@ -520,7 +539,7 @@
|
|
|
520
539
|
</code></pre></div></div>
|
|
521
540
|
<p><strong>Liquid</strong></p>
|
|
522
541
|
|
|
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="
|
|
542
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs</span><span class="w"> </span><span class="p">%}</span>
|
|
524
543
|
<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>">
|
|
525
544
|
<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>
|
|
526
545
|
</li>
|
|
@@ -536,7 +555,7 @@
|
|
|
536
555
|
}
|
|
537
556
|
</style>
|
|
538
557
|
|
|
539
|
-
<div class="highlight result">
|
|
558
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
540
559
|
<ul>
|
|
541
560
|
<li class=""><a href="#">Introduction</a></li>
|
|
542
561
|
<li class=""><a href="#">Configuration</a></li>
|
|
@@ -544,9 +563,9 @@
|
|
|
544
563
|
</ul>
|
|
545
564
|
</div>
|
|
546
565
|
|
|
547
|
-
<p>In this case, assume <code class="
|
|
566
|
+
<p>In this case, assume <code class="highlighter-rouge">Deployment</code> is the current page.</p>
|
|
548
567
|
|
|
549
|
-
<p>To make sure the <code class="
|
|
568
|
+
<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>
|
|
550
569
|
|
|
551
570
|
<h2 id="scenario-7-including-items-conditionally">Scenario 7: Including items conditionally</h2>
|
|
552
571
|
|
|
@@ -572,7 +591,7 @@
|
|
|
572
591
|
<p><strong>Liquid</strong></p>
|
|
573
592
|
|
|
574
593
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <ul>
|
|
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="
|
|
594
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.data.samplelist.docs2</span><span class="w"> </span><span class="p">%}</span>
|
|
576
595
|
<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>
|
|
577
596
|
<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>
|
|
578
597
|
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
@@ -582,29 +601,29 @@
|
|
|
582
601
|
|
|
583
602
|
<p><strong>Result</strong></p>
|
|
584
603
|
|
|
585
|
-
<div class="highlight result">
|
|
604
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
586
605
|
<ul>
|
|
587
606
|
<li><a href="#">Introduction</a></li>
|
|
588
607
|
<li><a href="#">Configuration</a></li>
|
|
589
608
|
</ul>
|
|
590
609
|
</div>
|
|
591
610
|
|
|
592
|
-
<p>The <code class="
|
|
611
|
+
<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>
|
|
593
612
|
|
|
594
613
|
<h2 id="scenario-8-retrieving-items-based-on-front-matter-properties">Scenario 8: Retrieving items based on front matter properties</h2>
|
|
595
614
|
|
|
596
|
-
<p>If you don’t want to store your navigation items in a YAML file in your <code class="
|
|
615
|
+
<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 front matter of each page or collection and get the content based on properties in the front matter.</p>
|
|
597
616
|
|
|
598
|
-
<p>In this scenario, suppose we have a collection called <code class="
|
|
617
|
+
<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>
|
|
599
618
|
|
|
600
|
-
<p>In our scenario, there are 6 docs in the <code class="
|
|
619
|
+
<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>
|
|
601
620
|
|
|
602
621
|
<p>Each doc in the collection contains at least 3 properties in the front matter:</p>
|
|
603
622
|
|
|
604
623
|
<ul>
|
|
605
|
-
<li><code class="
|
|
606
|
-
<li><code class="
|
|
607
|
-
<li><code class="
|
|
624
|
+
<li><code class="highlighter-rouge">title</code></li>
|
|
625
|
+
<li><code class="highlighter-rouge">category</code></li>
|
|
626
|
+
<li><code class="highlighter-rouge">order</code></li>
|
|
608
627
|
</ul>
|
|
609
628
|
|
|
610
629
|
<p>The front matter for each page is as follows (consolidated here for brevity):</p>
|
|
@@ -646,13 +665,13 @@
|
|
|
646
665
|
<span class="nn">---</span>
|
|
647
666
|
</code></pre></div></div>
|
|
648
667
|
|
|
649
|
-
<p>Note that even though <code class="
|
|
668
|
+
<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>
|
|
650
669
|
|
|
651
|
-
<p>If you wanted to simply get all docs in the collection for a specific category, you could use a <code class="
|
|
670
|
+
<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>
|
|
652
671
|
|
|
653
672
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><h3>Getting Started</h3>
|
|
654
673
|
<ul>
|
|
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="
|
|
674
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">site.docs</span><span class="w"> </span><span class="p">%}</span>
|
|
656
675
|
<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>
|
|
657
676
|
<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>
|
|
658
677
|
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
@@ -662,7 +681,7 @@
|
|
|
662
681
|
|
|
663
682
|
<p>The result would be as follows:</p>
|
|
664
683
|
|
|
665
|
-
<div class="highlight result">
|
|
684
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
666
685
|
<h3>Getting Started</h3>
|
|
667
686
|
<ul>
|
|
668
687
|
<li><a href="#">Sample1</a></li>
|
|
@@ -675,8 +694,8 @@
|
|
|
675
694
|
<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>
|
|
676
695
|
|
|
677
696
|
<ul>
|
|
678
|
-
<li><code class="
|
|
679
|
-
<li><code class="
|
|
697
|
+
<li><code class="highlighter-rouge">group_by</code></li>
|
|
698
|
+
<li><code class="highlighter-rouge">sort</code></li>
|
|
680
699
|
</ul>
|
|
681
700
|
|
|
682
701
|
<p>Here’s the code for getting lists of pages grouped under their corresponding category headers:</p>
|
|
@@ -684,11 +703,11 @@
|
|
|
684
703
|
<p><strong>Liquid</strong></p>
|
|
685
704
|
|
|
686
705
|
<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>
|
|
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="
|
|
706
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">mydocs</span><span class="w"> </span><span class="p">%}</span>
|
|
688
707
|
<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>
|
|
689
708
|
<ul>
|
|
690
709
|
<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>
|
|
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="
|
|
710
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">items</span><span class="w"> </span><span class="p">%}</span>
|
|
692
711
|
<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>
|
|
693
712
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
694
713
|
</ul>
|
|
@@ -697,7 +716,7 @@
|
|
|
697
716
|
|
|
698
717
|
<p><strong>Result</strong></p>
|
|
699
718
|
|
|
700
|
-
<div class="highlight result">
|
|
719
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
701
720
|
<h2>Getting-started</h2>
|
|
702
721
|
<ul>
|
|
703
722
|
<li><a href="#">Sample2</a></li>
|
|
@@ -715,27 +734,82 @@
|
|
|
715
734
|
</ul>
|
|
716
735
|
</div>
|
|
717
736
|
|
|
718
|
-
<p>Let’s walk through the code. First, we assign a variable (<code class="
|
|
737
|
+
<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>
|
|
719
738
|
|
|
720
|
-
<p>The <code class="
|
|
739
|
+
<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>
|
|
721
740
|
|
|
722
741
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">[</span>
|
|
723
742
|
<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>
|
|
724
|
-
<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>
|
|
743
|
+
<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>
|
|
725
744
|
<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>
|
|
726
745
|
<span class="pi">]</span>
|
|
727
746
|
</code></pre></div></div>
|
|
728
747
|
|
|
729
|
-
<p>Using <code class="
|
|
748
|
+
<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>
|
|
730
749
|
|
|
731
|
-
<p>After getting the category name, we assign the variable <code class="
|
|
750
|
+
<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>
|
|
732
751
|
|
|
733
|
-
<p>The <code class="
|
|
752
|
+
<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>
|
|
734
753
|
|
|
735
|
-
<p>For more details on the <code class="
|
|
754
|
+
<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>
|
|
736
755
|
|
|
737
756
|
<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>
|
|
738
757
|
|
|
758
|
+
<h2 id="scenario-9-nested-tree-navigation-with-recursion">Scenario 9: Nested tree navigation with recursion</h2>
|
|
759
|
+
|
|
760
|
+
<p>Suppose you want a nested tree navigation of any depth. We can achieve this by recursively looping through our tree of navigation links.</p>
|
|
761
|
+
|
|
762
|
+
<p><strong>YAML</strong></p>
|
|
763
|
+
|
|
764
|
+
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">nav</span><span class="pi">:</span>
|
|
765
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Deployment</span>
|
|
766
|
+
<span class="na">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
|
|
767
|
+
<span class="na">subnav</span><span class="pi">:</span>
|
|
768
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Heroku</span>
|
|
769
|
+
<span class="na">url</span><span class="pi">:</span> <span class="s">heroku.html</span>
|
|
770
|
+
<span class="na">subnav</span><span class="pi">:</span>
|
|
771
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Jekyll on Heroku</span>
|
|
772
|
+
<span class="na">url</span><span class="pi">:</span> <span class="s">jekyll-on-heroku.html</span>
|
|
773
|
+
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Help</span>
|
|
774
|
+
<span class="na">url</span><span class="pi">:</span> <span class="s">help.html</span>
|
|
775
|
+
</code></pre></div></div>
|
|
776
|
+
|
|
777
|
+
<p><strong>Liquid</strong></p>
|
|
778
|
+
|
|
779
|
+
<p>First, we’ll create an include that we can use for rendering the navigation tree. This file would be <code class="highlighter-rouge">_includes/nav.html</code></p>
|
|
780
|
+
|
|
781
|
+
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
|
|
782
|
+
<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="kr">in</span><span class="w"> </span><span class="nv">include.nav</span><span class="w"> </span><span class="p">%}</span>
|
|
783
|
+
<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>
|
|
784
|
+
|
|
785
|
+
<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">subnav</span><span class="w"> </span><span class="p">%}</span>
|
|
786
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">nav</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="na">nav</span><span class="o">=</span><span class="nv">item</span><span class="p">.</span><span class="nv">subnav</span><span class="w"> </span><span class="p">%}</span>
|
|
787
|
+
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
788
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
789
|
+
</ul>
|
|
790
|
+
</code></pre></div></div>
|
|
791
|
+
|
|
792
|
+
<p>To render this in your layout or pages, you would simply include the template and pass in the <code class="highlighter-rouge">nav</code> parameter. In this case, we’ll use the <code class="highlighter-rouge">page.nav</code> to grab it from the yaml frontmatter.</p>
|
|
793
|
+
|
|
794
|
+
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">nav</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="na">nav</span><span class="o">=</span><span class="nv">page</span><span class="p">.</span><span class="nv">nav</span><span class="w"> </span><span class="p">%}</span>
|
|
795
|
+
</code></pre></div></div>
|
|
796
|
+
|
|
797
|
+
<p>Our include will use this first, then look through each item for a <code class="highlighter-rouge">subnav</code> property to recursively render the nested lists.</p>
|
|
798
|
+
|
|
799
|
+
<p><strong>Result</strong></p>
|
|
800
|
+
<div class="highlight result" data-proofer-ignore="">
|
|
801
|
+
<ul>
|
|
802
|
+
<li><a href="#">Deployment</a></li>
|
|
803
|
+
<ul>
|
|
804
|
+
<li><a href="#">Heroku</a></li>
|
|
805
|
+
<ul>
|
|
806
|
+
<li><a href="#">Jekyll On Heroku</a></li>
|
|
807
|
+
</ul>
|
|
808
|
+
</ul>
|
|
809
|
+
<li><a href="#">Help</a></li>
|
|
810
|
+
</ul>
|
|
811
|
+
</div>
|
|
812
|
+
|
|
739
813
|
|
|
740
814
|
|
|
741
815
|
|
|
@@ -780,11 +854,11 @@
|
|
|
780
854
|
|
|
781
855
|
|
|
782
856
|
|
|
783
|
-
<li
|
|
857
|
+
<li><a href="/tutorials/home/">Tutorials</a></li>
|
|
784
858
|
|
|
785
859
|
|
|
786
860
|
|
|
787
|
-
<li
|
|
861
|
+
<li><a href="/tutorials/video-walkthroughs/">Video Walkthroughs</a></li>
|
|
788
862
|
|
|
789
863
|
|
|
790
864
|
|
|
@@ -792,19 +866,19 @@
|
|
|
792
866
|
|
|
793
867
|
|
|
794
868
|
|
|
795
|
-
<li
|
|
869
|
+
<li><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
|
796
870
|
|
|
797
871
|
|
|
798
872
|
|
|
799
|
-
<li
|
|
873
|
+
<li><a href="/tutorials/custom-404-page/">Custom 404 Page</a></li>
|
|
800
874
|
|
|
801
875
|
|
|
802
876
|
|
|
803
|
-
<li
|
|
877
|
+
<li><a href="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</a></li>
|
|
804
878
|
|
|
805
879
|
|
|
806
880
|
|
|
807
|
-
<li
|
|
881
|
+
<li><a href="/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</a></li>
|
|
808
882
|
|
|
809
883
|
</ul>
|
|
810
884
|
|
|
@@ -823,7 +897,8 @@
|
|
|
823
897
|
<footer>
|
|
824
898
|
<div class="grid">
|
|
825
899
|
<div class="unit one-third center-on-mobiles">
|
|
826
|
-
<p>
|
|
900
|
+
<p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p>
|
|
901
|
+
<p>The contents of this website are <br />© 2019 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
827
902
|
</div>
|
|
828
903
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
829
904
|
<p>
|
|
@@ -833,6 +908,14 @@
|
|
|
833
908
|
</a>
|
|
834
909
|
</p>
|
|
835
910
|
</div>
|
|
911
|
+
<div class="unit two-thirds align-right center-on-mobiles">
|
|
912
|
+
<p>
|
|
913
|
+
Jekyll is funded thanks to its
|
|
914
|
+
<a href="https://github.com/jekyll/jekyll#sponsors">
|
|
915
|
+
sponsors!
|
|
916
|
+
</a>
|
|
917
|
+
</p>
|
|
918
|
+
</div>
|
|
836
919
|
</div>
|
|
837
920
|
</footer>
|
|
838
921
|
|