jekyll-docs 3.6.0 → 3.6.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/jekyll.rb +195 -0
- data/lib/jekyll/cleaner.rb +110 -0
- data/lib/jekyll/collection.rb +230 -0
- data/lib/jekyll/command.rb +78 -0
- data/lib/jekyll/commands/build.rb +102 -0
- data/lib/jekyll/commands/clean.rb +43 -0
- data/lib/jekyll/commands/doctor.rb +153 -0
- data/lib/jekyll/commands/help.rb +34 -0
- data/lib/jekyll/commands/new.rb +156 -0
- data/lib/jekyll/commands/new_theme.rb +40 -0
- data/lib/jekyll/commands/serve.rb +245 -0
- data/lib/jekyll/commands/serve/servlet.rb +62 -0
- data/lib/jekyll/configuration.rb +410 -0
- data/lib/jekyll/converter.rb +54 -0
- data/lib/jekyll/converters/identity.rb +23 -0
- data/lib/jekyll/converters/markdown.rb +104 -0
- data/lib/jekyll/converters/markdown/kramdown_parser.rb +123 -0
- data/lib/jekyll/converters/markdown/rdiscount_parser.rb +35 -0
- data/lib/jekyll/converters/markdown/redcarpet_parser.rb +108 -0
- data/lib/jekyll/converters/smartypants.rb +36 -0
- data/lib/jekyll/convertible.rb +251 -0
- data/lib/jekyll/deprecator.rb +52 -0
- data/lib/jekyll/document.rb +507 -0
- data/lib/jekyll/drops/collection_drop.rb +22 -0
- data/lib/jekyll/drops/document_drop.rb +69 -0
- data/lib/jekyll/drops/drop.rb +214 -0
- data/lib/jekyll/drops/excerpt_drop.rb +15 -0
- data/lib/jekyll/drops/jekyll_drop.rb +33 -0
- data/lib/jekyll/drops/site_drop.rb +47 -0
- data/lib/jekyll/drops/static_file_drop.rb +13 -0
- data/lib/jekyll/drops/unified_payload_drop.rb +25 -0
- data/lib/jekyll/drops/url_drop.rb +88 -0
- data/lib/jekyll/entry_filter.rb +123 -0
- data/lib/jekyll/errors.rb +20 -0
- data/lib/jekyll/excerpt.rb +126 -0
- data/lib/jekyll/external.rb +74 -0
- data/lib/jekyll/filters.rb +430 -0
- data/lib/jekyll/filters/grouping_filters.rb +65 -0
- data/lib/jekyll/filters/url_filters.rb +60 -0
- data/lib/jekyll/frontmatter_defaults.rb +197 -0
- data/lib/jekyll/generator.rb +5 -0
- data/lib/jekyll/hooks.rb +104 -0
- data/lib/jekyll/layout.rb +62 -0
- data/lib/jekyll/liquid_extensions.rb +24 -0
- data/lib/jekyll/liquid_renderer.rb +49 -0
- data/lib/jekyll/liquid_renderer/file.rb +56 -0
- data/lib/jekyll/liquid_renderer/table.rb +96 -0
- data/lib/jekyll/log_adapter.rb +147 -0
- data/lib/jekyll/mime.types +825 -0
- data/lib/jekyll/page.rb +187 -0
- data/lib/jekyll/plugin.rb +98 -0
- data/lib/jekyll/plugin_manager.rb +113 -0
- data/lib/jekyll/publisher.rb +23 -0
- data/lib/jekyll/reader.rb +134 -0
- data/lib/jekyll/readers/collection_reader.rb +22 -0
- data/lib/jekyll/readers/data_reader.rb +77 -0
- data/lib/jekyll/readers/layout_reader.rb +71 -0
- data/lib/jekyll/readers/page_reader.rb +25 -0
- data/lib/jekyll/readers/post_reader.rb +72 -0
- data/lib/jekyll/readers/static_file_reader.rb +25 -0
- data/lib/jekyll/readers/theme_assets_reader.rb +49 -0
- data/lib/jekyll/regenerator.rb +201 -0
- data/lib/jekyll/related_posts.rb +52 -0
- data/lib/jekyll/renderer.rb +269 -0
- data/lib/jekyll/site.rb +471 -0
- data/lib/jekyll/static_file.rb +162 -0
- data/lib/jekyll/stevenson.rb +61 -0
- data/lib/jekyll/tags/highlight.rb +141 -0
- data/lib/jekyll/tags/include.rb +215 -0
- data/lib/jekyll/tags/link.rb +37 -0
- data/lib/jekyll/tags/post_url.rb +103 -0
- data/lib/jekyll/theme.rb +68 -0
- data/lib/jekyll/theme_builder.rb +119 -0
- data/lib/jekyll/url.rb +161 -0
- data/lib/jekyll/utils.rb +337 -0
- data/lib/jekyll/utils/ansi.rb +59 -0
- data/lib/jekyll/utils/exec.rb +27 -0
- data/lib/jekyll/utils/platforms.rb +82 -0
- data/lib/jekyll/utils/rouge.rb +21 -0
- data/lib/jekyll/utils/win_tz.rb +75 -0
- data/lib/jekyll/version.rb +5 -0
- data/lib/site_template/404.html +24 -0
- data/lib/site_template/_config.yml +43 -0
- data/lib/site_template/_posts/0000-00-00-welcome-to-jekyll.markdown.erb +25 -0
- data/lib/site_template/about.md +18 -0
- data/lib/site_template/index.md +6 -0
- data/lib/theme_template/CODE_OF_CONDUCT.md.erb +74 -0
- data/lib/theme_template/Gemfile +4 -0
- data/lib/theme_template/LICENSE.txt.erb +21 -0
- data/lib/theme_template/README.md.erb +52 -0
- data/lib/theme_template/_layouts/default.html +1 -0
- data/lib/theme_template/_layouts/page.html +5 -0
- data/lib/theme_template/_layouts/post.html +5 -0
- data/lib/theme_template/example/_config.yml.erb +1 -0
- data/lib/theme_template/example/_post.md +12 -0
- data/lib/theme_template/example/index.html +14 -0
- data/lib/theme_template/example/style.scss +7 -0
- data/lib/theme_template/gitignore.erb +5 -0
- data/lib/theme_template/theme.gemspec.erb +19 -0
- metadata +103 -156
- data/lib/jekyll-docs.rb +0 -31
- data/site/404.html +0 -153
- data/site/CNAME +0 -1
- data/site/community/index.html +0 -299
- data/site/conduct/index.html +0 -10
- data/site/css/screen.css +0 -1
- data/site/docs/assets/index.html +0 -724
- data/site/docs/code_of_conduct/index.html +0 -730
- data/site/docs/collections/index.html +0 -1097
- data/site/docs/conduct/index.html +0 -744
- data/site/docs/configuration/index.html +0 -1403
- data/site/docs/continuous-integration/buddyworks/index.html +0 -726
- data/site/docs/continuous-integration/circleci/index.html +0 -757
- data/site/docs/continuous-integration/index.html +0 -681
- data/site/docs/continuous-integration/travis-ci/index.html +0 -891
- data/site/docs/contributing/index.html +0 -863
- data/site/docs/datafiles/index.html +0 -780
- data/site/docs/deployment-methods/index.html +0 -875
- data/site/docs/drafts/index.html +0 -636
- data/site/docs/extras/index.html +0 -689
- data/site/docs/frontmatter/index.html +0 -807
- data/site/docs/github-pages/index.html +0 -819
- data/site/docs/history/index.html +0 -3955
- data/site/docs/home/index.html +0 -644
- data/site/docs/includes/index.html +0 -800
- data/site/docs/index.html +0 -10
- data/site/docs/installation/index.html +0 -732
- data/site/docs/maintaining/affinity-team-captain/index.html +0 -706
- data/site/docs/maintaining/avoiding-burnout/index.html +0 -709
- data/site/docs/maintaining/becoming-a-maintainer/index.html +0 -717
- data/site/docs/maintaining/index.html +0 -713
- data/site/docs/maintaining/merging-a-pull-request/index.html +0 -747
- data/site/docs/maintaining/reviewing-a-pull-request/index.html +0 -725
- data/site/docs/maintaining/special-labels/index.html +0 -705
- data/site/docs/maintaining/triaging-an-issue/index.html +0 -735
- data/site/docs/migrations/index.html +0 -647
- data/site/docs/pages/index.html +0 -695
- data/site/docs/pagination/index.html +0 -870
- data/site/docs/permalinks/index.html +0 -1027
- data/site/docs/plugins/index.html +0 -1800
- data/site/docs/posts/index.html +0 -858
- data/site/docs/quickstart/index.html +0 -650
- data/site/docs/resources/index.html +0 -769
- data/site/docs/sites/index.html +0 -702
- data/site/docs/static-files/index.html +0 -720
- data/site/docs/structure/index.html +0 -822
- data/site/docs/templates/index.html +0 -1208
- data/site/docs/themes/index.html +0 -935
- data/site/docs/troubleshooting/index.html +0 -893
- data/site/docs/upgrading/0-to-2/index.html +0 -826
- data/site/docs/upgrading/2-to-3/index.html +0 -824
- data/site/docs/upgrading/index.html +0 -693
- data/site/docs/usage/index.html +0 -705
- data/site/docs/variables/index.html +0 -1048
- data/site/docs/windows/index.html +0 -799
- data/site/favicon.ico +0 -0
- data/site/feed.xml +0 -372
- data/site/fonts/FontAwesome.eot +0 -0
- data/site/fonts/FontAwesome.svg +0 -12
- data/site/fonts/FontAwesome.ttf +0 -0
- data/site/fonts/FontAwesome.woff +0 -0
- data/site/github.html +0 -10
- data/site/help/index.html +0 -244
- data/site/icomoon-selection.json +0 -96
- data/site/img/article-footer.png +0 -0
- data/site/img/footer-arrow.png +0 -0
- data/site/img/footer-logo.png +0 -0
- data/site/img/jekyll-sticker.jpg +0 -0
- data/site/img/jekylllayoutconcept.png +0 -0
- data/site/img/logo-2x.png +0 -0
- data/site/img/logo-rss.png +0 -0
- data/site/img/octojekyll.png +0 -0
- data/site/index.html +0 -267
- data/site/issues.html +0 -10
- data/site/js/html5shiv.min.js +0 -4
- data/site/js/respond.min.js +0 -5
- data/site/latest_version.txt +0 -1
- data/site/news/2013/05/05/jekyll-1-0-0-released/index.html +0 -570
- data/site/news/2013/05/08/jekyll-1-0-1-released/index.html +0 -570
- data/site/news/2013/05/12/jekyll-1-0-2-released/index.html +0 -571
- data/site/news/2013/06/07/jekyll-1-0-3-released/index.html +0 -568
- data/site/news/2013/07/14/jekyll-1-1-0-released/index.html +0 -570
- data/site/news/2013/07/24/jekyll-1-1-1-released/index.html +0 -569
- data/site/news/2013/07/25/jekyll-1-0-4-released/index.html +0 -565
- data/site/news/2013/07/25/jekyll-1-1-2-released/index.html +0 -565
- data/site/news/2013/09/06/jekyll-1-2-0-released/index.html +0 -572
- data/site/news/2013/09/14/jekyll-1-2-1-released/index.html +0 -566
- data/site/news/2013/10/28/jekyll-1-3-0-rc1-released/index.html +0 -564
- data/site/news/2013/11/04/jekyll-1-3-0-released/index.html +0 -599
- data/site/news/2013/11/26/jekyll-1-3-1-released/index.html +0 -568
- data/site/news/2013/12/07/jekyll-1-4-0-released/index.html +0 -583
- data/site/news/2013/12/09/jekyll-1-4-1-released/index.html +0 -565
- data/site/news/2013/12/16/jekyll-1-4-2-released/index.html +0 -564
- data/site/news/2014/01/13/jekyll-1-4-3-released/index.html +0 -573
- data/site/news/2014/03/24/jekyll-1-5-0-released/index.html +0 -564
- data/site/news/2014/03/27/jekyll-1-5-1-released/index.html +0 -569
- data/site/news/2014/05/06/jekyll-turns-2-0-0/index.html +0 -585
- data/site/news/2014/05/08/jekyll-2-0-3-released/index.html +0 -565
- data/site/news/2014/06/04/jekyll-stickers-1-dollar-stickermule/index.html +0 -567
- data/site/news/2014/06/28/jekyll-turns-21-i-mean-2-1-0/index.html +0 -582
- data/site/news/2014/07/01/jekyll-2-1-1-released/index.html +0 -579
- data/site/news/2014/07/29/jekyll-2-2-0-released/index.html +0 -568
- data/site/news/2014/08/10/jekyll-2-3-0-released/index.html +0 -588
- data/site/news/2014/09/09/jekyll-2-4-0-released/index.html +0 -574
- data/site/news/2014/11/05/jekylls-midlife-crisis-jekyll-turns-2-5-0/index.html +0 -597
- data/site/news/2014/11/09/jekyll-2-5-1-released/index.html +0 -575
- data/site/news/2014/11/12/jekyll-2-5-2-released/index.html +0 -565
- data/site/news/2014/12/17/alfredxing-welcome-to-jekyll-core/index.html +0 -572
- data/site/news/2014/12/22/jekyll-2-5-3-released/index.html +0 -567
- data/site/news/2015/01/20/jekyll-meet-and-greet/index.html +0 -568
- data/site/news/2015/01/24/jekyll-3-0-0-beta1-released/index.html +0 -588
- data/site/news/2015/02/26/introducing-jekyll-talk/index.html +0 -563
- data/site/news/2015/10/26/jekyll-3-0-released/index.html +0 -592
- data/site/news/2015/11/17/jekyll-3-0-1-released/index.html +0 -576
- data/site/news/2016/01/20/jekyll-3-0-2-released/index.html +0 -566
- data/site/news/2016/01/24/jekyll-3-1-0-released/index.html +0 -599
- data/site/news/2016/01/28/jekyll-3-1-1-released/index.html +0 -583
- data/site/news/2016/02/08/jekyll-3-0-3-released/index.html +0 -578
- data/site/news/2016/02/19/jekyll-3-1-2-released/index.html +0 -569
- data/site/news/2016/03/10/making-it-easier-to-contribute-to-jekyll/index.html +0 -565
- data/site/news/2016/04/19/jekyll-3-0-4-released/index.html +0 -571
- data/site/news/2016/04/19/jekyll-3-1-3-released/index.html +0 -566
- data/site/news/2016/04/26/jekyll-3-0-5-released/index.html +0 -572
- data/site/news/2016/05/18/jekyll-3-1-4-released/index.html +0 -576
- data/site/news/2016/05/18/jekyll-3-1-5-released/index.html +0 -564
- data/site/news/2016/05/19/jekyll-3-1-6-released/index.html +0 -566
- data/site/news/2016/06/03/update-on-jekyll-s-google-summer-of-code-projects/index.html +0 -567
- data/site/news/2016/07/26/jekyll-3-2-0-released/index.html +0 -676
- data/site/news/2016/08/02/jekyll-3-2-1-released/index.html +0 -571
- data/site/news/2016/08/24/jekyll-admin-initial-release/index.html +0 -566
- data/site/news/2016/10/06/jekyll-3-3-is-here/index.html +0 -645
- data/site/news/2016/11/14/jekyll-3-3-1-released/index.html +0 -569
- data/site/news/2017/01/18/jekyll-3-4-0-released/index.html +0 -592
- data/site/news/2017/03/02/jekyll-3-4-1-released/index.html +0 -649
- data/site/news/2017/03/09/jekyll-3-4-2-released/index.html +0 -598
- data/site/news/2017/03/21/jekyll-3-4-3-released/index.html +0 -594
- data/site/news/2017/06/15/jekyll-3-5-0-released/index.html +0 -589
- data/site/news/2017/07/17/jekyll-3-5-1-released/index.html +0 -569
- data/site/news/2017/08/12/jekyll-3-5-2-released/index.html +0 -573
- data/site/news/2017/09/21/jekyll-3-6-0-released/index.html +0 -565
- data/site/news/index.html +0 -3609
- data/site/news/releases/index.html +0 -3344
- data/site/philosophy.html +0 -46
- data/site/readme.md +0 -23
- data/site/robots.txt +0 -1
- data/site/sitemap.xml +0 -485
- data/site/tutorials/convert-site-to-jekyll/index.html +0 -793
- data/site/tutorials/custom-404-page/index.html +0 -358
- data/site/tutorials/home/index.html +0 -323
- data/site/tutorials/index.html +0 -10
- data/site/tutorials/navigation/index.html +0 -872
- data/site/tutorials/orderofinterpretation/index.html +0 -441
data/site/tutorials/index.html
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-US">
|
|
3
|
-
<meta charset="utf-8">
|
|
4
|
-
<title>Redirecting…</title>
|
|
5
|
-
<link rel="canonical" href="https://jekyllrb.com/tutorials/home/">
|
|
6
|
-
<meta http-equiv="refresh" content="0; url=https://jekyllrb.com/tutorials/home/">
|
|
7
|
-
<h1>Redirecting…</h1>
|
|
8
|
-
<a href="https://jekyllrb.com/tutorials/home/">Click here if you are not redirected.</a>
|
|
9
|
-
<script>location="https://jekyllrb.com/tutorials/home/"</script>
|
|
10
|
-
</html>
|
|
@@ -1,872 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE HTML>
|
|
2
|
-
<html lang="en-US">
|
|
3
|
-
<head>
|
|
4
|
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
7
|
-
<meta name="generator" content="Jekyll v3.6.0">
|
|
8
|
-
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
|
|
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">
|
|
10
|
-
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
|
|
11
|
-
<link rel="stylesheet" href="/css/screen.css">
|
|
12
|
-
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
13
|
-
<!-- Begin Jekyll SEO tag v2.3.0 -->
|
|
14
|
-
<title>Navigation | Jekyll • Simple, blog-aware, static sites</title>
|
|
15
|
-
<meta property="og:title" content="Navigation">
|
|
16
|
-
<meta property="og:locale" content="en_US">
|
|
17
|
-
<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.">
|
|
18
|
-
<meta property="og: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.">
|
|
19
|
-
<link rel="canonical" href="https://jekyllrb.com/tutorials/navigation/">
|
|
20
|
-
<meta property="og:url" content="https://jekyllrb.com/tutorials/navigation/">
|
|
21
|
-
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
|
|
22
|
-
<meta property="og:type" content="article">
|
|
23
|
-
<meta property="article:published_time" content="2017-10-24T08:07:43-07:00">
|
|
24
|
-
<meta name="twitter:card" content="summary">
|
|
25
|
-
<meta name="twitter:site" content="@jekyllrb">
|
|
26
|
-
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
|
|
27
|
-
<script type="application/ld+json">
|
|
28
|
-
{"name":null,"description":"If your Jekyll site has a lot of pages, you might want to create navigation for the pages. Instead of hard-coding navigation links, you can programmatically retrieve a list of pages to build the navigation for your site.","url":"https://jekyllrb.com/tutorials/navigation/","headline":"Navigation","dateModified":"2017-10-24T08:07:43-07:00","datePublished":"2017-10-24T08:07:43-07:00","sameAs":null,"@type":"BlogPosting","author":null,"image":null,"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/navigation/"},"@context":"http://schema.org"}</script>
|
|
29
|
-
<!-- End Jekyll SEO tag -->
|
|
30
|
-
|
|
31
|
-
<!--[if lt IE 9]>
|
|
32
|
-
<script src="/js/html5shiv.min.js"></script>
|
|
33
|
-
<script src="/js/respond.min.js"></script>
|
|
34
|
-
<![endif]-->
|
|
35
|
-
</head>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<body class="wrap">
|
|
39
|
-
<header>
|
|
40
|
-
<nav class="mobile-nav show-on-mobiles">
|
|
41
|
-
<ul>
|
|
42
|
-
<li class="">
|
|
43
|
-
<a href="/">Home</a>
|
|
44
|
-
</li>
|
|
45
|
-
<li class="">
|
|
46
|
-
<a href="/docs/home/">Docs</a>
|
|
47
|
-
</li>
|
|
48
|
-
<li class="">
|
|
49
|
-
<a href="/news/">News</a>
|
|
50
|
-
</li>
|
|
51
|
-
<li class="">
|
|
52
|
-
<a href="/community/">Community</a>
|
|
53
|
-
</li>
|
|
54
|
-
<li class="">
|
|
55
|
-
<a href="/help/">Help</a>
|
|
56
|
-
</li>
|
|
57
|
-
<li>
|
|
58
|
-
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
59
|
-
</li>
|
|
60
|
-
</ul>
|
|
61
|
-
|
|
62
|
-
</nav>
|
|
63
|
-
<div class="grid">
|
|
64
|
-
<div class="unit one-third center-on-mobiles">
|
|
65
|
-
<h1>
|
|
66
|
-
<a href="/">
|
|
67
|
-
<span class="sr-only">Jekyll</span>
|
|
68
|
-
<img src="/img/logo-2x.png" width="249" height="115" alt="Jekyll Logo">
|
|
69
|
-
</a>
|
|
70
|
-
</h1>
|
|
71
|
-
</div>
|
|
72
|
-
<nav class="main-nav unit two-thirds hide-on-mobiles">
|
|
73
|
-
<ul>
|
|
74
|
-
<li class="">
|
|
75
|
-
<a href="/">Home</a>
|
|
76
|
-
</li>
|
|
77
|
-
<li class="">
|
|
78
|
-
<a href="/docs/home/">Docs</a>
|
|
79
|
-
</li>
|
|
80
|
-
<li class="">
|
|
81
|
-
<a href="/news/">News</a>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="">
|
|
84
|
-
<a href="/community/">Community</a>
|
|
85
|
-
</li>
|
|
86
|
-
<li class="">
|
|
87
|
-
<a href="/help/">Help</a>
|
|
88
|
-
</li>
|
|
89
|
-
<li>
|
|
90
|
-
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
91
|
-
</li>
|
|
92
|
-
</ul>
|
|
93
|
-
|
|
94
|
-
</nav>
|
|
95
|
-
</div>
|
|
96
|
-
</header>
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<section class="docs">
|
|
100
|
-
<div class="grid">
|
|
101
|
-
|
|
102
|
-
<div class="docs-nav-mobile unit whole show-on-mobiles">
|
|
103
|
-
<select onchange="if (this.value) window.location.href=this.value">
|
|
104
|
-
<option value="">Navigate the tutorials…</option>
|
|
105
|
-
|
|
106
|
-
<optgroup label="Tutorials">
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<option value="/tutorials/home/">Tutorials</option>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<option value="/tutorials/navigation/">Navigation</option>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<option value="/tutorials/orderofinterpretation/">Order of interpretation</option>
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<option value="/tutorials/custom-404-page/">Custom 404 Page</option>
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<option value="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</option>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</optgroup>
|
|
130
|
-
|
|
131
|
-
</select>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<div class="unit four-fifths">
|
|
136
|
-
<article>
|
|
137
|
-
<div class="improve right hide-on-mobiles">
|
|
138
|
-
<a href="https://github.com/jekyll/jekyll/edit/master/docs/_tutorials/navigation.md"><i class="fa fa-pencil"></i> Improve this page</a>
|
|
139
|
-
</div>
|
|
140
|
-
<h1>Navigation</h1>
|
|
141
|
-
<p>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.</p>
|
|
142
|
-
|
|
143
|
-
<p>Although there’s already information about <a href="/docs/datafiles/">interacting with data files</a> in other Jekyll docs, this tutorial dives into building more robust navigation for your site.</p>
|
|
144
|
-
|
|
145
|
-
<p>There are two primary ways of retrieving pages on a Jekyll site:</p>
|
|
146
|
-
|
|
147
|
-
<ul>
|
|
148
|
-
<li>
|
|
149
|
-
<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>
|
|
150
|
-
<li>
|
|
151
|
-
<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>
|
|
152
|
-
</ul>
|
|
153
|
-
|
|
154
|
-
<p>The examples that follow start with a basic navigation scenario and add more sophisticated elements to demonstrate different ways of returning the pages. In every scenario, you’ll see 3 elements:</p>
|
|
155
|
-
|
|
156
|
-
<ul>
|
|
157
|
-
<li>YAML</li>
|
|
158
|
-
<li>Liquid</li>
|
|
159
|
-
<li>Result</li>
|
|
160
|
-
</ul>
|
|
161
|
-
|
|
162
|
-
<p>The YAML file in the <code class="highlighter-rouge">_data</code> directory is called <code class="highlighter-rouge">samplelist.yml</code>.</p>
|
|
163
|
-
|
|
164
|
-
<p>The scenarios are as follows:</p>
|
|
165
|
-
|
|
166
|
-
<ul id="markdown-toc">
|
|
167
|
-
<li><a href="#scenario-1-basic-list" id="markdown-toc-scenario-1-basic-list">Scenario 1: Basic List</a></li>
|
|
168
|
-
<li><a href="#scenario-2-sorted-list" id="markdown-toc-scenario-2-sorted-list">Scenario 2: Sorted list</a></li>
|
|
169
|
-
<li><a href="#scenario-3-two-level-navigation-list" id="markdown-toc-scenario-3-two-level-navigation-list">Scenario 3: Two-level navigation list</a></li>
|
|
170
|
-
<li><a href="#scenario-4-three-level-navigation-list" id="markdown-toc-scenario-4-three-level-navigation-list">Scenario 4: Three-level navigation list</a></li>
|
|
171
|
-
<li><a href="#scenario-5-using-a-page-variable-to-select-the-yaml-list" id="markdown-toc-scenario-5-using-a-page-variable-to-select-the-yaml-list">Scenario 5: Using a page variable to select the YAML list</a></li>
|
|
172
|
-
<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>
|
|
173
|
-
<li><a href="#scenario-6-including-items-conditionally" id="markdown-toc-scenario-6-including-items-conditionally">Scenario 6: Including items conditionally</a></li>
|
|
174
|
-
<li><a href="#scenario-7-retrieving-items-based-on-front-matter-properties" id="markdown-toc-scenario-7-retrieving-items-based-on-front-matter-properties">Scenario 7: Retrieving items based on front matter properties</a></li>
|
|
175
|
-
</ul>
|
|
176
|
-
|
|
177
|
-
<h2 id="scenario-1-basic-list">Scenario 1: Basic List</h2>
|
|
178
|
-
|
|
179
|
-
<p>You want to return a basic list of pages.</p>
|
|
180
|
-
|
|
181
|
-
<p><strong>YAML</strong></p>
|
|
182
|
-
|
|
183
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">docs_list_title</span><span class="pi">:</span> <span class="s">ACME Documentation</span>
|
|
184
|
-
<span class="na">docs</span><span class="pi">:</span>
|
|
185
|
-
|
|
186
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Introduction</span>
|
|
187
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
|
|
188
|
-
|
|
189
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Configuration</span>
|
|
190
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
|
|
191
|
-
|
|
192
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Deployment</span>
|
|
193
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
|
|
194
|
-
</code></pre></div></div>
|
|
195
|
-
|
|
196
|
-
<p><strong>Liquid</strong></p>
|
|
197
|
-
|
|
198
|
-
<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>
|
|
199
|
-
<ul>
|
|
200
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span><span class="p">%}</span>
|
|
201
|
-
<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>
|
|
202
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
203
|
-
</ul>
|
|
204
|
-
</code></pre></div></div>
|
|
205
|
-
|
|
206
|
-
<p><strong>Result</strong></p>
|
|
207
|
-
<div class="highlight result">
|
|
208
|
-
<h2>ACME Documentation</h2>
|
|
209
|
-
<ul>
|
|
210
|
-
<li><a href="#" alt="Introduction">Introduction</a></li>
|
|
211
|
-
<li><a href="#" alt="Configuration">Configuration</a></li>
|
|
212
|
-
<li><a href="#" alt="Deployment">Deployment</a></li>
|
|
213
|
-
</ul>
|
|
214
|
-
</div>
|
|
215
|
-
|
|
216
|
-
<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>
|
|
217
|
-
|
|
218
|
-
<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>
|
|
219
|
-
|
|
220
|
-
<p>The YAML content has two main types of formats that are relevant here:</p>
|
|
221
|
-
|
|
222
|
-
<ul>
|
|
223
|
-
<li>mapping</li>
|
|
224
|
-
<li>list</li>
|
|
225
|
-
</ul>
|
|
226
|
-
|
|
227
|
-
<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>
|
|
228
|
-
|
|
229
|
-
<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>
|
|
230
|
-
|
|
231
|
-
<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>
|
|
232
|
-
|
|
233
|
-
<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>
|
|
234
|
-
|
|
235
|
-
<h2 id="scenario-2-sorted-list">Scenario 2: Sorted list</h2>
|
|
236
|
-
|
|
237
|
-
<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>
|
|
238
|
-
|
|
239
|
-
<p><strong>Liquid</strong></p>
|
|
240
|
-
|
|
241
|
-
<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>
|
|
242
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>doclist<span class="w"> </span><span class="p">%}</span>
|
|
243
|
-
<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>
|
|
244
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
245
|
-
</code></pre></div></div>
|
|
246
|
-
|
|
247
|
-
<p><strong>Result</strong></p>
|
|
248
|
-
|
|
249
|
-
<div class="highlight result">
|
|
250
|
-
<li><a href="#" alt="Configuration">Configuration</a></li>
|
|
251
|
-
<li><a href="#" alt="Deployment">Deployment</a></li>
|
|
252
|
-
<li><a href="#" alt="Introduction">Introduction</a></li>
|
|
253
|
-
</div>
|
|
254
|
-
|
|
255
|
-
<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>
|
|
256
|
-
|
|
257
|
-
<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>
|
|
258
|
-
|
|
259
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span>|<span class="w"> </span><span class="na">sort</span><span class="o">:</span><span class="w"> </span><span class="s2">"title"</span><span class="w"> </span><span class="p">%}{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
260
|
-
</code></pre></div></div>
|
|
261
|
-
|
|
262
|
-
<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>
|
|
263
|
-
|
|
264
|
-
<h2 id="scenario-3-two-level-navigation-list">Scenario 3: Two-level navigation list</h2>
|
|
265
|
-
|
|
266
|
-
<p>Suppose you want a more robust list that incorporates multiple sections of heading titles and subitems. To do this, add an additional level to each list item to store this information:</p>
|
|
267
|
-
|
|
268
|
-
<p><strong>YAML</strong></p>
|
|
269
|
-
|
|
270
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">toc</span><span class="pi">:</span>
|
|
271
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 1</span>
|
|
272
|
-
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
273
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
|
|
274
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
|
|
275
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
|
|
276
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
|
|
277
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
|
|
278
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
|
|
279
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 2</span>
|
|
280
|
-
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
281
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
|
|
282
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
|
|
283
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
|
|
284
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
|
|
285
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
|
|
286
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
|
|
287
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 3</span>
|
|
288
|
-
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
289
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
|
|
290
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
|
|
291
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
|
|
292
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
|
|
293
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
|
|
294
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
|
|
295
|
-
</code></pre></div></div>
|
|
296
|
-
|
|
297
|
-
<p><strong>Liquid</strong></p>
|
|
298
|
-
|
|
299
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.toc<span class="w"> </span><span class="p">%}</span>
|
|
300
|
-
<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>
|
|
301
|
-
<ul>
|
|
302
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>entry<span class="w"> </span>in<span class="w"> </span>item.subfolderitems<span class="w"> </span><span class="p">%}</span>
|
|
303
|
-
<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>
|
|
304
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
305
|
-
</ul>
|
|
306
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
307
|
-
</code></pre></div></div>
|
|
308
|
-
|
|
309
|
-
<p><strong>Result</strong></p>
|
|
310
|
-
<div class="highlight result">
|
|
311
|
-
<h3>Group 1</h3>
|
|
312
|
-
<ul>
|
|
313
|
-
<li><a href="#">Thing 1</a></li>
|
|
314
|
-
<li><a href="#">Thing 2</a></li>
|
|
315
|
-
<li><a href="#">Thing 3</a></li>
|
|
316
|
-
</ul>
|
|
317
|
-
|
|
318
|
-
<h3>Group 2</h3>
|
|
319
|
-
<ul>
|
|
320
|
-
<li><a href="#">Piece 1</a></li>
|
|
321
|
-
<li><a href="#">Piece 2</a></li>
|
|
322
|
-
<li><a href="#">Piece 3</a></li>
|
|
323
|
-
</ul>
|
|
324
|
-
|
|
325
|
-
<h3>Group 3</h3>
|
|
326
|
-
<ul>
|
|
327
|
-
<li><a href="#">Widget 1</a></li>
|
|
328
|
-
<li><a href="#">Widget 2</a></li>
|
|
329
|
-
<li><a href="#">Widget 3</a></li>
|
|
330
|
-
</ul>
|
|
331
|
-
</div>
|
|
332
|
-
|
|
333
|
-
<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>
|
|
334
|
-
|
|
335
|
-
<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>
|
|
336
|
-
|
|
337
|
-
<h2 id="scenario-4-three-level-navigation-list">Scenario 4: Three-level navigation list</h2>
|
|
338
|
-
|
|
339
|
-
<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>
|
|
340
|
-
|
|
341
|
-
<p><strong>YAML</strong></p>
|
|
342
|
-
|
|
343
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">toc2</span><span class="pi">:</span>
|
|
344
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 1</span>
|
|
345
|
-
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
346
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 1</span>
|
|
347
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing1.html</span>
|
|
348
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 2</span>
|
|
349
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing2.html</span>
|
|
350
|
-
<span class="na">subsubfolderitems</span><span class="pi">:</span>
|
|
351
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing 1</span>
|
|
352
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/subthing1.html</span>
|
|
353
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subthing 2</span>
|
|
354
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/subthing2.html</span>
|
|
355
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Thing 3</span>
|
|
356
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/thing3.html</span>
|
|
357
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 2</span>
|
|
358
|
-
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
359
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 1</span>
|
|
360
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece1.html</span>
|
|
361
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 2</span>
|
|
362
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece2.html</span>
|
|
363
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Piece 3</span>
|
|
364
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/piece3.html</span>
|
|
365
|
-
<span class="na">subsubfolderitems</span><span class="pi">:</span>
|
|
366
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece 1</span>
|
|
367
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/subpiece1.html</span>
|
|
368
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subpiece2</span>
|
|
369
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/subpiece2.html</span>
|
|
370
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Group 3</span>
|
|
371
|
-
<span class="na">subfolderitems</span><span class="pi">:</span>
|
|
372
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 1</span>
|
|
373
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget1.html</span>
|
|
374
|
-
<span class="na">subsubfolderitems</span><span class="pi">:</span>
|
|
375
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget 1</span>
|
|
376
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/subwidget1.html</span>
|
|
377
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Subwidget 2</span>
|
|
378
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/subwidget2.html</span>
|
|
379
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 2</span>
|
|
380
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget2.html</span>
|
|
381
|
-
<span class="pi">-</span> <span class="na">page</span><span class="pi">:</span> <span class="s">Widget 3</span>
|
|
382
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">/widget3.html</span>
|
|
383
|
-
</code></pre></div></div>
|
|
384
|
-
|
|
385
|
-
<p><strong>Liquid</strong></p>
|
|
386
|
-
|
|
387
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
|
|
388
|
-
<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>
|
|
389
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.toc<span class="mi">2</span><span class="w"> </span><span class="p">%}</span>
|
|
390
|
-
<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>
|
|
391
|
-
<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>
|
|
392
|
-
<ul>
|
|
393
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>entry<span class="w"> </span>in<span class="w"> </span>item.subfolderitems<span class="w"> </span><span class="p">%}</span>
|
|
394
|
-
<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>
|
|
395
|
-
<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>
|
|
396
|
-
<ul>
|
|
397
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>subentry<span class="w"> </span>in<span class="w"> </span>entry.subsubfolderitems<span class="w"> </span><span class="p">%}</span>
|
|
398
|
-
<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>
|
|
399
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
400
|
-
</ul>
|
|
401
|
-
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
402
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
403
|
-
</ul>
|
|
404
|
-
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
405
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
406
|
-
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
407
|
-
</div>
|
|
408
|
-
</code></pre></div></div>
|
|
409
|
-
|
|
410
|
-
<p><strong>Result</strong></p>
|
|
411
|
-
|
|
412
|
-
<div class="highlight result">
|
|
413
|
-
<div>
|
|
414
|
-
<h3>Group 1</h3>
|
|
415
|
-
<ul>
|
|
416
|
-
<li><a href="#">Thing 1</a></li>
|
|
417
|
-
<li><a href="#">Thing 2</a></li>
|
|
418
|
-
<ul>
|
|
419
|
-
<li><a href="#">Subthing 1</a></li>
|
|
420
|
-
<li><a href="#">Subthing 2</a></li>
|
|
421
|
-
</ul>
|
|
422
|
-
<li><a href="#">Thing 3</a></li>
|
|
423
|
-
</ul>
|
|
424
|
-
<h3>Group 2</h3>
|
|
425
|
-
<ul>
|
|
426
|
-
<li><a href="#">Piece 1</a></li>
|
|
427
|
-
<li><a href="#">Piece 2</a></li>
|
|
428
|
-
<li><a href="#">Piece 3</a></li>
|
|
429
|
-
<ul>
|
|
430
|
-
<li><a href="#">Subpiece 1</a></li>
|
|
431
|
-
<li><a href="#">Subpiece2</a></li>
|
|
432
|
-
</ul>
|
|
433
|
-
</ul>
|
|
434
|
-
<h3>Group 3</h3>
|
|
435
|
-
<ul>
|
|
436
|
-
<li><a href="#">Widget 1</a></li>
|
|
437
|
-
<ul>
|
|
438
|
-
<li><a href="#">Subwidget 1</a></li>
|
|
439
|
-
<li><a href="#">Subwidget 2</a></li>
|
|
440
|
-
</ul>
|
|
441
|
-
<li><a href="#">Widget 2</a></li>
|
|
442
|
-
<li><a href="#">Widget 3</a></li>
|
|
443
|
-
</ul>
|
|
444
|
-
</div>
|
|
445
|
-
</div>
|
|
446
|
-
|
|
447
|
-
<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>
|
|
448
|
-
|
|
449
|
-
<div class="note">
|
|
450
|
-
<h5>ProTip: Line up <code>for</code> loops and <code>if</code> statements</h5>
|
|
451
|
-
<p>To keep the code clear, line up the beginning and ending Liquid tags, such as the <code>for</code> loops and <code>if</code> statements. This way you know when the open tags have been closed. If the code will appear in a Markdown page, keep the opening and closing HTML tags flush against the left edge so that the Markdown filter won't treat the content as a code sample. If necessary, you can wrap the entire code sample in a <code>div</code> tag to ensure the code has HTML tags that bookend the code.</p>
|
|
452
|
-
</div>
|
|
453
|
-
|
|
454
|
-
<h2 id="scenario-5-using-a-page-variable-to-select-the-yaml-list">Scenario 5: Using a page variable to select the YAML list</h2>
|
|
455
|
-
|
|
456
|
-
<p>Suppose your sidebar will differ based on various documentation sets. You might have 3 different products on your site, and so you want 3 different sidebars — each unique for that product.</p>
|
|
457
|
-
|
|
458
|
-
<p>You can store the name of the sidebar list in your page front matter and then pass that value into the list dynamically.</p>
|
|
459
|
-
|
|
460
|
-
<p><strong>Page front matter</strong></p>
|
|
461
|
-
|
|
462
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
|
|
463
|
-
<span class="na">title</span><span class="pi">:</span> <span class="s">My page</span>
|
|
464
|
-
<span class="na">sidebar</span><span class="pi">:</span> <span class="s">toc</span>
|
|
465
|
-
<span class="nn">---</span>
|
|
466
|
-
</code></pre></div></div>
|
|
467
|
-
|
|
468
|
-
<p><strong>Liquid</strong></p>
|
|
469
|
-
|
|
470
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
|
|
471
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist[page.sidebar]<span class="w"> </span><span class="p">%}</span>
|
|
472
|
-
<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>
|
|
473
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
474
|
-
</ul>
|
|
475
|
-
</code></pre></div></div>
|
|
476
|
-
<p><strong>Result</strong></p>
|
|
477
|
-
|
|
478
|
-
<div class="highlight result">
|
|
479
|
-
<ul>
|
|
480
|
-
<li><a href="#">Introduction</a></li>
|
|
481
|
-
<li><a href="#">Configuration</a></li>
|
|
482
|
-
<li><a href="#">Deployment</a></li>
|
|
483
|
-
</ul>
|
|
484
|
-
</div>
|
|
485
|
-
|
|
486
|
-
<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>
|
|
487
|
-
|
|
488
|
-
<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>
|
|
489
|
-
|
|
490
|
-
<h2 id="scenario-6-applying-the-active-class-for-the-current-page">Scenario 6: Applying the active class for the current page</h2>
|
|
491
|
-
|
|
492
|
-
<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>
|
|
493
|
-
|
|
494
|
-
<p><strong>CSS</strong></p>
|
|
495
|
-
<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>
|
|
496
|
-
<span class="nl">color</span><span class="p">:</span> <span class="n">lightgray</span><span class="p">;</span>
|
|
497
|
-
<span class="nl">cursor</span><span class="p">:</span> <span class="nb">default</span><span class="p">;</span>
|
|
498
|
-
<span class="p">}</span>
|
|
499
|
-
</code></pre></div></div>
|
|
500
|
-
<p><strong>Liquid</strong></p>
|
|
501
|
-
|
|
502
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="w"> </span><span class="p">%}</span>
|
|
503
|
-
<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>">
|
|
504
|
-
<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>
|
|
505
|
-
</li>
|
|
506
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
507
|
-
</code></pre></div></div>
|
|
508
|
-
|
|
509
|
-
<p><strong>Result</strong></p>
|
|
510
|
-
|
|
511
|
-
<style>
|
|
512
|
-
.result li.active a {
|
|
513
|
-
color: lightgray;
|
|
514
|
-
cursor: default;
|
|
515
|
-
}
|
|
516
|
-
</style>
|
|
517
|
-
|
|
518
|
-
<div class="highlight result">
|
|
519
|
-
<li class=""><a href="#">Introduction</a></li>
|
|
520
|
-
<li class=""><a href="#">Configuration</a></li>
|
|
521
|
-
<li class="active"><a href="#">Deployment</a></li>
|
|
522
|
-
</div>
|
|
523
|
-
|
|
524
|
-
<p>In this case, assume <code class="highlighter-rouge">Deployment</code> is the current page.</p>
|
|
525
|
-
|
|
526
|
-
<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>
|
|
527
|
-
|
|
528
|
-
<h2 id="scenario-6-including-items-conditionally">Scenario 6: Including items conditionally</h2>
|
|
529
|
-
|
|
530
|
-
<p>You might want to include items conditionally in your list. For example, maybe you have multiple site outputs and only want to include the sidebar item for certain outputs. You can add properties in each list item and then use those properties to conditionally include the content.</p>
|
|
531
|
-
|
|
532
|
-
<p><strong>YAML</strong></p>
|
|
533
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">docs2_list_title</span><span class="pi">:</span> <span class="s">ACME Documentation</span>
|
|
534
|
-
<span class="na">docs2</span><span class="pi">:</span>
|
|
535
|
-
|
|
536
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Introduction</span>
|
|
537
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">introduction.html</span>
|
|
538
|
-
<span class="na">version</span><span class="pi">:</span> <span class="s">1</span>
|
|
539
|
-
|
|
540
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Configuration</span>
|
|
541
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">configuration.html</span>
|
|
542
|
-
<span class="na">version</span><span class="pi">:</span> <span class="s">1</span>
|
|
543
|
-
|
|
544
|
-
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Deployment</span>
|
|
545
|
-
<span class="na">url</span><span class="pi">:</span> <span class="s">deployment.html</span>
|
|
546
|
-
<span class="na">version</span><span class="pi">:</span> <span class="s">2</span>
|
|
547
|
-
</code></pre></div></div>
|
|
548
|
-
|
|
549
|
-
<p><strong>Liquid</strong></p>
|
|
550
|
-
|
|
551
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
|
|
552
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>site.data.samplelist.docs<span class="mi">2</span><span class="w"> </span><span class="p">%}</span>
|
|
553
|
-
<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>
|
|
554
|
-
<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>
|
|
555
|
-
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
556
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
557
|
-
</ul>
|
|
558
|
-
</code></pre></div></div>
|
|
559
|
-
|
|
560
|
-
<p><strong>Result</strong></p>
|
|
561
|
-
|
|
562
|
-
<div class="highlight result">
|
|
563
|
-
<ul>
|
|
564
|
-
<li><a href="#">Introduction</a></li>
|
|
565
|
-
<li><a href="#">Configuration</a></li>
|
|
566
|
-
</ul>
|
|
567
|
-
</div>
|
|
568
|
-
|
|
569
|
-
<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>
|
|
570
|
-
|
|
571
|
-
<h2 id="scenario-7-retrieving-items-based-on-front-matter-properties">Scenario 7: Retrieving items based on front matter properties</h2>
|
|
572
|
-
|
|
573
|
-
<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>
|
|
574
|
-
|
|
575
|
-
<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>
|
|
576
|
-
|
|
577
|
-
<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>
|
|
578
|
-
|
|
579
|
-
<p>Each doc in the collection contains at least 3 properties in the front matter:</p>
|
|
580
|
-
|
|
581
|
-
<ul>
|
|
582
|
-
<li><code class="highlighter-rouge">title</code></li>
|
|
583
|
-
<li><code class="highlighter-rouge">category</code></li>
|
|
584
|
-
<li><code class="highlighter-rouge">order</code></li>
|
|
585
|
-
</ul>
|
|
586
|
-
|
|
587
|
-
<p>The front matter for each page is as follows (consolidated here for brevity):</p>
|
|
588
|
-
|
|
589
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
|
|
590
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample 1</span>
|
|
591
|
-
<span class="na">category</span><span class="pi">:</span> <span class="s">getting-started</span>
|
|
592
|
-
<span class="na">order</span><span class="pi">:</span> <span class="s">1</span>
|
|
593
|
-
<span class="nn">---</span>
|
|
594
|
-
|
|
595
|
-
<span class="nn">---</span>
|
|
596
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Sample 2</span>
|
|
597
|
-
<span class="na">category</span><span class="pi">:</span> <span class="s">getting-started</span>
|
|
598
|
-
<span class="na">order</span><span class="pi">:</span> <span class="s">2</span>
|
|
599
|
-
<span class="nn">---</span>
|
|
600
|
-
|
|
601
|
-
<span class="nn">---</span>
|
|
602
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic 1</span>
|
|
603
|
-
<span class="na">category</span><span class="pi">:</span> <span class="s">configuration</span>
|
|
604
|
-
<span class="na">order</span><span class="pi">:</span> <span class="s">1</span>
|
|
605
|
-
<span class="nn">---</span>
|
|
606
|
-
|
|
607
|
-
<span class="nn">---</span>
|
|
608
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Topic 2</span>
|
|
609
|
-
<span class="na">category</span><span class="pi">:</span> <span class="s">configuration</span>
|
|
610
|
-
<span class="na">order</span><span class="pi">:</span> <span class="s">2</span>
|
|
611
|
-
<span class="nn">---</span>
|
|
612
|
-
|
|
613
|
-
<span class="nn">---</span>
|
|
614
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget 1</span>
|
|
615
|
-
<span class="na">category</span><span class="pi">:</span> <span class="s">deployment</span>
|
|
616
|
-
<span class="na">order</span><span class="pi">:</span> <span class="s">1</span>
|
|
617
|
-
<span class="nn">---</span>
|
|
618
|
-
|
|
619
|
-
<span class="nn">---</span>
|
|
620
|
-
<span class="na">Title</span><span class="pi">:</span> <span class="s">Widget 2</span>
|
|
621
|
-
<span class="na">category</span><span class="pi">:</span> <span class="s">deployment</span>
|
|
622
|
-
<span class="na">order</span><span class="pi">:</span> <span class="s">2</span>
|
|
623
|
-
<span class="nn">---</span>
|
|
624
|
-
</code></pre></div></div>
|
|
625
|
-
|
|
626
|
-
<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>
|
|
627
|
-
|
|
628
|
-
<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>
|
|
629
|
-
|
|
630
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><h3>Getting Started</h3>
|
|
631
|
-
<ul>
|
|
632
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>doc<span class="w"> </span>in<span class="w"> </span>site.docs<span class="w"> </span><span class="p">%}</span>
|
|
633
|
-
<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>
|
|
634
|
-
<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>
|
|
635
|
-
<span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
|
|
636
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
637
|
-
</ul>
|
|
638
|
-
</code></pre></div></div>
|
|
639
|
-
|
|
640
|
-
<p>The result would be as follows:</p>
|
|
641
|
-
|
|
642
|
-
<div class="highlight result">
|
|
643
|
-
<h3>Getting Started</h3>
|
|
644
|
-
<ul>
|
|
645
|
-
<li><a href="#">Sample1</a></li>
|
|
646
|
-
<li><a href="#">Sample2</a></li>
|
|
647
|
-
</ul>
|
|
648
|
-
</div>
|
|
649
|
-
|
|
650
|
-
<p>This might be useful if you’re setting up a knowledge base and have dozens of topics in each category, with each category displaying on its own page.</p>
|
|
651
|
-
|
|
652
|
-
<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>
|
|
653
|
-
|
|
654
|
-
<ul>
|
|
655
|
-
<li><code class="highlighter-rouge">group_by</code></li>
|
|
656
|
-
<li><code class="highlighter-rouge">sort</code></li>
|
|
657
|
-
</ul>
|
|
658
|
-
|
|
659
|
-
<p>Here’s the code for getting lists of pages grouped under their corresponding category headers:</p>
|
|
660
|
-
|
|
661
|
-
<p><strong>Liquid</strong></p>
|
|
662
|
-
|
|
663
|
-
<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>
|
|
664
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>cat<span class="w"> </span>in<span class="w"> </span>mydocs<span class="w"> </span><span class="p">%}</span>
|
|
665
|
-
<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>
|
|
666
|
-
<ul>
|
|
667
|
-
<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>
|
|
668
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>item<span class="w"> </span>in<span class="w"> </span>items<span class="w"> </span><span class="p">%}</span>
|
|
669
|
-
<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>
|
|
670
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
671
|
-
</ul>
|
|
672
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
673
|
-
</code></pre></div></div>
|
|
674
|
-
|
|
675
|
-
<p><strong>Result</strong></p>
|
|
676
|
-
|
|
677
|
-
<div class="highlight result">
|
|
678
|
-
<h2>Getting-started</h2>
|
|
679
|
-
<ul>
|
|
680
|
-
<li><a href="#">Sample2</a></li>
|
|
681
|
-
<li><a href="#">Sample1</a></li>
|
|
682
|
-
</ul>
|
|
683
|
-
<h2>Configuration</h2>
|
|
684
|
-
<ul>
|
|
685
|
-
<li><a href="#">Topic2</a></li>
|
|
686
|
-
<li><a href="#">Topic1</a></li>
|
|
687
|
-
</ul>
|
|
688
|
-
<h2>Deployment</h2>
|
|
689
|
-
<ul>
|
|
690
|
-
<li><a href="#">Widget2</a></li>
|
|
691
|
-
<li><a href="#">Widget1</a></li>
|
|
692
|
-
</ul>
|
|
693
|
-
</div>
|
|
694
|
-
|
|
695
|
-
<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>
|
|
696
|
-
|
|
697
|
-
<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>
|
|
698
|
-
|
|
699
|
-
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">[</span>
|
|
700
|
-
<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>
|
|
701
|
-
<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>
|
|
702
|
-
<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>
|
|
703
|
-
<span class="pi">]</span>
|
|
704
|
-
</code></pre></div></div>
|
|
705
|
-
|
|
706
|
-
<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>
|
|
707
|
-
|
|
708
|
-
<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>
|
|
709
|
-
|
|
710
|
-
<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>
|
|
711
|
-
|
|
712
|
-
<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://help.shopify.com/themes/liquid/filters/array-filters#sort">sort</a> in Liquid’s documentation.</p>
|
|
713
|
-
|
|
714
|
-
<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>
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
<div class="section-nav">
|
|
728
|
-
<div class="left align-right">
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
<a href="/tutorials/home/" class="prev">Back</a>
|
|
733
|
-
|
|
734
|
-
</div>
|
|
735
|
-
<div class="right align-left">
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
<a href="/tutorials/orderofinterpretation/" class="next">Next</a>
|
|
740
|
-
|
|
741
|
-
</div>
|
|
742
|
-
</div>
|
|
743
|
-
<div class="clear"></div>
|
|
744
|
-
|
|
745
|
-
</article>
|
|
746
|
-
</div>
|
|
747
|
-
|
|
748
|
-
<div class="unit one-fifth hide-on-mobiles">
|
|
749
|
-
<aside>
|
|
750
|
-
|
|
751
|
-
<h4>Tutorials</h4>
|
|
752
|
-
|
|
753
|
-
<ul>
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
<li class=""><a href="/tutorials/home/">Tutorials</a></li>
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
<li class="current"><a href="/tutorials/navigation/">Navigation</a></li>
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
<li class=""><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
<li class=""><a href="/tutorials/custom-404-page/">Custom 404 Page</a></li>
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
<li class=""><a href="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</a></li>
|
|
774
|
-
|
|
775
|
-
</ul>
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
</aside>
|
|
780
|
-
</div>
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
<div class="clear"></div>
|
|
784
|
-
|
|
785
|
-
</div>
|
|
786
|
-
</section>
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
<footer>
|
|
790
|
-
<div class="grid">
|
|
791
|
-
<div class="unit one-third center-on-mobiles">
|
|
792
|
-
<p>The contents of this website are <br>© 2017 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
793
|
-
</div>
|
|
794
|
-
<div class="unit two-thirds align-right center-on-mobiles">
|
|
795
|
-
<p>
|
|
796
|
-
Proudly hosted by
|
|
797
|
-
<a href="https://github.com">
|
|
798
|
-
<img src="/img/footer-logo.png" width="100" height="30" alt="GitHub • Social coding">
|
|
799
|
-
</a>
|
|
800
|
-
</p>
|
|
801
|
-
</div>
|
|
802
|
-
</div>
|
|
803
|
-
</footer>
|
|
804
|
-
|
|
805
|
-
<script>
|
|
806
|
-
var anchorForId = function (id) {
|
|
807
|
-
var anchor = document.createElement("a");
|
|
808
|
-
anchor.className = "header-link";
|
|
809
|
-
anchor.href = "#" + id;
|
|
810
|
-
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
|
|
811
|
-
anchor.title = "Permalink";
|
|
812
|
-
return anchor;
|
|
813
|
-
};
|
|
814
|
-
|
|
815
|
-
var linkifyAnchors = function (level, containingElement) {
|
|
816
|
-
var headers = containingElement.getElementsByTagName("h" + level);
|
|
817
|
-
for (var h = 0; h < headers.length; h++) {
|
|
818
|
-
var header = headers[h];
|
|
819
|
-
|
|
820
|
-
if (typeof header.id !== "undefined" && header.id !== "") {
|
|
821
|
-
header.appendChild(anchorForId(header.id));
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
};
|
|
825
|
-
|
|
826
|
-
document.onreadystatechange = function () {
|
|
827
|
-
if (this.readyState === "complete") {
|
|
828
|
-
var contentBlock = document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
|
|
829
|
-
if (!contentBlock) {
|
|
830
|
-
return;
|
|
831
|
-
}
|
|
832
|
-
for (var level = 1; level <= 6; level++) {
|
|
833
|
-
linkifyAnchors(level, contentBlock);
|
|
834
|
-
}
|
|
835
|
-
}
|
|
836
|
-
};
|
|
837
|
-
</script>
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
<!-- Gauges (http://get.gaug.es/) -->
|
|
841
|
-
<script>
|
|
842
|
-
var _gauges = _gauges || [];
|
|
843
|
-
(function() {
|
|
844
|
-
var t = document.createElement('script');
|
|
845
|
-
t.type = 'text/javascript';
|
|
846
|
-
t.async = true;
|
|
847
|
-
t.id = 'gauges-tracker';
|
|
848
|
-
t.setAttribute('data-site-id', '503c5af6613f5d0f19000027');
|
|
849
|
-
t.src = '//secure.gaug.es/track.js';
|
|
850
|
-
var s = document.getElementsByTagName('script')[0];
|
|
851
|
-
s.parentNode.insertBefore(t, s);
|
|
852
|
-
})();
|
|
853
|
-
</script>
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
<!-- Google Analytics (https://www.google.com/analytics) -->
|
|
858
|
-
<script>
|
|
859
|
-
!function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){
|
|
860
|
-
(j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k),
|
|
861
|
-
L=e.getElementsByTagName(k)[0],l.src='//www.google-analytics.com/analytics.js',
|
|
862
|
-
L.parentNode.insertBefore(l,L)}(window,document,'script','ga');
|
|
863
|
-
|
|
864
|
-
ga('create', 'UA-50755011-1', 'jekyllrb.com');
|
|
865
|
-
ga('send', 'pageview');
|
|
866
|
-
|
|
867
|
-
</script>
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
</body>
|
|
872
|
-
</html>
|