jekyll-docs 3.4.3 → 3.5.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-docs.rb +1 -1
- data/site/404.html +5 -11
- data/site/community/index.html +9 -15
- data/site/css/screen.css +1 -1468
- data/site/docs/assets/index.html +20 -16
- data/site/docs/collections/index.html +115 -109
- data/site/docs/conduct/index.html +19 -15
- data/site/docs/configuration/index.html +39 -23
- data/site/docs/continuous-integration/buddyworks/index.html +728 -0
- data/site/docs/continuous-integration/circleci/index.html +19 -15
- data/site/docs/continuous-integration/index.html +20 -15
- data/site/docs/continuous-integration/travis-ci/index.html +21 -18
- data/site/docs/contributing/index.html +20 -16
- data/site/docs/datafiles/index.html +23 -15
- data/site/docs/deployment-methods/index.html +24 -20
- data/site/docs/drafts/index.html +19 -15
- data/site/docs/extras/index.html +31 -16
- data/site/docs/frontmatter/index.html +28 -15
- data/site/docs/github-pages/index.html +21 -17
- data/site/docs/history/index.html +521 -315
- data/site/docs/home/index.html +16 -15
- data/site/docs/includes/index.html +21 -17
- data/site/docs/installation/index.html +41 -31
- data/site/docs/maintaining/affinity-team-captain/index.html +19 -15
- data/site/docs/maintaining/avoiding-burnout/index.html +19 -15
- data/site/docs/maintaining/becoming-a-maintainer/index.html +19 -15
- data/site/docs/maintaining/index.html +19 -15
- data/site/docs/maintaining/merging-a-pull-request/index.html +19 -15
- data/site/docs/maintaining/reviewing-a-pull-request/index.html +19 -15
- data/site/docs/maintaining/special-labels/index.html +23 -15
- data/site/docs/maintaining/triaging-an-issue/index.html +20 -16
- data/site/docs/migrations/index.html +19 -15
- data/site/docs/pages/index.html +19 -15
- data/site/docs/pagination/index.html +19 -15
- data/site/docs/permalinks/index.html +19 -15
- data/site/docs/plugins/index.html +36 -23
- data/site/docs/posts/index.html +23 -19
- data/site/docs/quickstart/index.html +18 -17
- data/site/docs/resources/index.html +19 -15
- data/site/docs/sites/index.html +22 -15
- data/site/docs/static-files/index.html +52 -15
- data/site/docs/structure/index.html +19 -15
- data/site/docs/templates/index.html +29 -25
- data/site/docs/themes/index.html +65 -39
- data/site/docs/troubleshooting/index.html +41 -19
- data/site/docs/upgrading/0-to-2/index.html +19 -15
- data/site/docs/upgrading/2-to-3/index.html +20 -16
- data/site/docs/upgrading/index.html +22 -15
- data/site/docs/usage/index.html +20 -16
- data/site/docs/variables/index.html +19 -15
- data/site/docs/windows/index.html +135 -136
- data/site/feed.xml +228 -180
- data/site/help/index.html +11 -13
- data/site/img/jekylllayoutconcept.png +0 -0
- data/site/index.html +7 -14
- data/site/latest_version.txt +1 -1
- data/site/news/2013/05/05/jekyll-1-0-0-released/index.html +33 -19
- data/site/news/2013/05/08/jekyll-1-0-1-released/index.html +33 -19
- data/site/news/2013/05/12/jekyll-1-0-2-released/index.html +33 -19
- data/site/news/2013/06/07/jekyll-1-0-3-released/index.html +33 -19
- data/site/news/2013/07/14/jekyll-1-1-0-released/index.html +33 -19
- data/site/news/2013/07/24/jekyll-1-1-1-released/index.html +33 -19
- data/site/news/2013/07/25/jekyll-1-0-4-released/index.html +33 -19
- data/site/news/2013/07/25/jekyll-1-1-2-released/index.html +33 -19
- data/site/news/2013/09/06/jekyll-1-2-0-released/index.html +33 -19
- data/site/news/2013/09/14/jekyll-1-2-1-released/index.html +33 -19
- data/site/news/2013/10/28/jekyll-1-3-0-rc1-released/index.html +33 -19
- data/site/news/2013/11/04/jekyll-1-3-0-released/index.html +33 -19
- data/site/news/2013/11/26/jekyll-1-3-1-released/index.html +33 -19
- data/site/news/2013/12/07/jekyll-1-4-0-released/index.html +33 -19
- data/site/news/2013/12/09/jekyll-1-4-1-released/index.html +33 -19
- data/site/news/2013/12/16/jekyll-1-4-2-released/index.html +33 -19
- data/site/news/2014/01/13/jekyll-1-4-3-released/index.html +33 -19
- data/site/news/2014/03/24/jekyll-1-5-0-released/index.html +33 -19
- data/site/news/2014/03/27/jekyll-1-5-1-released/index.html +33 -19
- data/site/news/2014/05/06/jekyll-turns-2-0-0/index.html +33 -19
- data/site/news/2014/05/08/jekyll-2-0-3-released/index.html +33 -19
- data/site/news/2014/06/04/jekyll-stickers-1-dollar-stickermule/index.html +35 -21
- data/site/news/2014/06/28/jekyll-turns-21-i-mean-2-1-0/index.html +33 -19
- data/site/news/2014/07/01/jekyll-2-1-1-released/index.html +33 -19
- data/site/news/2014/07/29/jekyll-2-2-0-released/index.html +33 -19
- data/site/news/2014/08/10/jekyll-2-3-0-released/index.html +33 -19
- data/site/news/2014/09/09/jekyll-2-4-0-released/index.html +33 -19
- data/site/news/2014/11/05/jekylls-midlife-crisis-jekyll-turns-2-5-0/index.html +33 -19
- data/site/news/2014/11/09/jekyll-2-5-1-released/index.html +33 -19
- data/site/news/2014/11/12/jekyll-2-5-2-released/index.html +33 -19
- data/site/news/2014/12/17/alfredxing-welcome-to-jekyll-core/index.html +33 -19
- data/site/news/2014/12/22/jekyll-2-5-3-released/index.html +33 -19
- data/site/news/2015/01/20/jekyll-meet-and-greet/index.html +33 -19
- data/site/news/2015/01/24/jekyll-3-0-0-beta1-released/index.html +33 -19
- data/site/news/2015/02/26/introducing-jekyll-talk/index.html +33 -19
- data/site/news/2015/10/26/jekyll-3-0-released/index.html +33 -19
- data/site/news/2015/11/17/jekyll-3-0-1-released/index.html +33 -19
- data/site/news/2016/01/20/jekyll-3-0-2-released/index.html +33 -19
- data/site/news/2016/01/24/jekyll-3-1-0-released/index.html +33 -19
- data/site/news/2016/01/28/jekyll-3-1-1-released/index.html +33 -19
- data/site/news/2016/02/08/jekyll-3-0-3-released/index.html +33 -19
- data/site/news/2016/02/19/jekyll-3-1-2-released/index.html +33 -19
- data/site/news/2016/03/10/making-it-easier-to-contribute-to-jekyll/index.html +33 -19
- data/site/news/2016/04/19/jekyll-3-0-4-released/index.html +33 -19
- data/site/news/2016/04/19/jekyll-3-1-3-released/index.html +33 -19
- data/site/news/2016/04/26/jekyll-3-0-5-released/index.html +33 -19
- data/site/news/2016/05/18/jekyll-3-1-4-released/index.html +33 -19
- data/site/news/2016/05/18/jekyll-3-1-5-released/index.html +33 -19
- data/site/news/2016/05/19/jekyll-3-1-6-released/index.html +33 -19
- data/site/news/2016/06/03/update-on-jekyll-s-google-summer-of-code-projects/index.html +33 -19
- data/site/news/2016/07/26/jekyll-3-2-0-released/index.html +35 -21
- data/site/news/2016/08/02/jekyll-3-2-1-released/index.html +34 -20
- data/site/news/2016/08/24/jekyll-admin-initial-release/index.html +33 -19
- data/site/news/2016/10/06/jekyll-3-3-is-here/index.html +35 -21
- data/site/news/2016/11/14/jekyll-3-3-1-released/index.html +34 -20
- data/site/news/2017/01/18/jekyll-3-4-0-released/index.html +36 -22
- data/site/news/2017/03/02/jekyll-3-4-1-released/index.html +651 -0
- data/site/news/2017/03/09/jekyll-3-4-2-released/index.html +592 -0
- data/site/news/2017/03/21/jekyll-3-4-3-released/index.html +588 -0
- data/site/news/2017/06/15/jekyll-3-5-0-released/index.html +581 -0
- data/site/news/2017/07/17/jekyll-3-5-1-released/index.html +561 -0
- data/site/news/index.html +405 -22
- data/site/news/releases/index.html +405 -22
- data/site/philosophy.html +46 -0
- data/site/sitemap.xml +95 -48
- data/site/tutorials/convert-site-to-jekyll/index.html +851 -0
- data/site/tutorials/custom-404-page/index.html +366 -0
- data/site/tutorials/home/index.html +323 -0
- data/site/tutorials/index.html +10 -0
- data/site/tutorials/navigation/index.html +908 -0
- data/site/tutorials/orderofinterpretation/index.html +459 -0
- metadata +20 -7
- data/site/feed.xslt.xml +0 -4
|
@@ -0,0 +1,459 @@
|
|
|
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.5.1">
|
|
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.2.3 -->
|
|
14
|
+
<title>Order of interpretation | Jekyll • Simple, blog-aware, static sites</title>
|
|
15
|
+
<meta property="og:title" content="Order of interpretation">
|
|
16
|
+
<meta property="og:locale" content="en_US">
|
|
17
|
+
<meta name="description" content="Jekyll’s main job is to convert your raw text files into a static website. It does this by rendering Liquid, Markdown, and other transforms as it generates the static HTML output.">
|
|
18
|
+
<meta property="og:description" content="Jekyll’s main job is to convert your raw text files into a static website. It does this by rendering Liquid, Markdown, and other transforms as it generates the static HTML output.">
|
|
19
|
+
<link rel="canonical" href="https://jekyllrb.com/tutorials/orderofinterpretation/">
|
|
20
|
+
<meta property="og:url" content="https://jekyllrb.com/tutorials/orderofinterpretation/">
|
|
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-07-17T13:16:40-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
|
+
{"@context":"http://schema.org","@type":"BlogPosting","headline":"Order of interpretation","datePublished":"2017-07-17T13:16:40-07:00","dateModified":"2017-07-17T13:16:40-07:00","description":"Jekyll’s main job is to convert your raw text files into a static website. It does this by rendering Liquid, Markdown, and other transforms as it generates the static HTML output.","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/orderofinterpretation/"},"url":"https://jekyllrb.com/tutorials/orderofinterpretation/"}</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/orderofinterpretation.md"><i class="fa fa-pencil"></i> Improve this page</a>
|
|
139
|
+
</div>
|
|
140
|
+
<h1>Order of interpretation</h1>
|
|
141
|
+
<p>Jekyll’s main job is to convert your raw text files into a static website. It does this by rendering Liquid, Markdown, and other transforms as it generates the static HTML output.</p>
|
|
142
|
+
|
|
143
|
+
<p>In this conversion process, it’s important to understand Jekyll’s order of interpretation. By “order of interpretation,” we mean what gets rendered, in what order, and what rules get applied in converting content.</p>
|
|
144
|
+
|
|
145
|
+
<p>If an element isn’t converting, you can troubleshoot the problem by analyzing the order of interpretation.</p>
|
|
146
|
+
|
|
147
|
+
<h2 id="order-of-interpretations">Order of interpretations</h2>
|
|
148
|
+
|
|
149
|
+
<p>Jekyll converts your site in the following order:</p>
|
|
150
|
+
|
|
151
|
+
<ol>
|
|
152
|
+
<li>
|
|
153
|
+
<p><strong>Site variables</strong>. Jekyll looks across your files and populates <a href="/docs/variables/">site variables</a>, such as <code class="highlighter-rouge">site</code>, <code class="highlighter-rouge">page</code>, <code class="highlighter-rouge">post</code>, and collection objects. (From these objects, Jekyll determines the values for permalinks, tags, categories, and other details.)</p>
|
|
154
|
+
</li>
|
|
155
|
+
<li>
|
|
156
|
+
<strong>Liquid</strong>. Jekyll processes any <a href="https://github.com/Shopify/liquid">Liquid</a> formatting in pages that contain <a href="/docs/frontmatter/">front matter</a>. You can identify Liquid as follows:
|
|
157
|
+
<ul>
|
|
158
|
+
<li>
|
|
159
|
+
<strong>Liquid tags</strong> start with <code class="highlighter-rouge"><span class="p">{</span><span class="err">%</span></code> and end with a <code class="highlighter-rouge">%}</code>. For example: <code class="highlighter-rouge"><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">highlight</span><span class="w"> </span><span class="err">%</span><span class="p">}</span></code> or <code class="highlighter-rouge"><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">seo</span><span class="w"> </span><span class="err">%</span><span class="p">}</span></code>. Tags can define blocks or be inline. Block-defining tags will also come with a corresponding end tag — for example, <code class="highlighter-rouge"><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">endhighlight</span><span class="w"> </span><span class="err">%</span><span class="p">}</span></code>.</li>
|
|
160
|
+
<li>
|
|
161
|
+
<strong>Liquid variables</strong> start and end with double curly braces. For example: <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">site.myvariable</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> or <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code>.</li>
|
|
162
|
+
<li>
|
|
163
|
+
<strong>Liquid filters</strong> start with a pipe character (<code class="highlighter-rouge">|</code>) and can only be used within <strong>Liquid variables</strong> after the variable string. For example: the <code class="highlighter-rouge">relative_url</code> filter in <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="nt">"css/main.css"</span><span class="w"> </span><span class="err">|</span><span class="w"> </span><span class="err">relative_url</span><span class="w"> </span><span class="err">}}</span></code>.</li>
|
|
164
|
+
</ul>
|
|
165
|
+
</li>
|
|
166
|
+
<li>
|
|
167
|
+
<p><strong>Markdown</strong>. Jekyll converts Markdown to HTML using the Markdown filter specified in your config file. Files must have a Markdown file extension and front matter in order for Jekyll to convert them.</p>
|
|
168
|
+
</li>
|
|
169
|
+
<li>
|
|
170
|
+
<p><strong>Layout</strong>. Jekyll pushes content into the layouts specified by the page’s front matter (or as specified in the config file). The content from each page gets pushed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tags within the layouts.</p>
|
|
171
|
+
</li>
|
|
172
|
+
<li>
|
|
173
|
+
<strong>Files</strong>. Jekyll writes the generated content into files in the <a href="/docs/structure/">directory structure</a> in <code class="highlighter-rouge">_site</code>. Pages, posts, and collections get structured based on their <a href="/docs/permalinks/">permalink</a> setting. Directories that begin with <code class="highlighter-rouge">_</code> (such as <code class="highlighter-rouge">_includes</code> and <code class="highlighter-rouge">_data</code>) are usually hidden in the output.</li>
|
|
174
|
+
</ol>
|
|
175
|
+
|
|
176
|
+
<h2 id="scenarios-where-incorrect-configurations-create-problems">Scenarios where incorrect configurations create problems</h2>
|
|
177
|
+
|
|
178
|
+
<p>For the most part, you don’t have to think about the order of interpretation when building your Jekyll site. These details only become important to know when something isn’t rendering.</p>
|
|
179
|
+
|
|
180
|
+
<p>The following scenarios highlight potential problems you might encounter. These problems come from misunderstanding the order of interpretation and can be easily fixed.</p>
|
|
181
|
+
|
|
182
|
+
<h3 id="variable-on-page-not-rendered-because-variable-is-assigned-in-layout">Variable on page not rendered because variable is assigned in layout</h3>
|
|
183
|
+
|
|
184
|
+
<p>In your layout file (<code class="highlighter-rouge">_layouts/default.html</code>), suppose you have a variable assigned:</p>
|
|
185
|
+
|
|
186
|
+
<div class="highlighter-rouge">
|
|
187
|
+
<pre class="highlight"><code><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">assign</span><span class="w"> </span><span class="err">myvar</span><span class="w"> </span><span class="err">=</span><span class="w"> </span><span class="nt">"joe"</span><span class="w"> </span><span class="err">%}</span><span class="w">
|
|
188
|
+
</span></code></pre>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<p>On a page that uses the layout, you reference that variable:</p>
|
|
192
|
+
|
|
193
|
+
<div class="highlighter-rouge">
|
|
194
|
+
<pre class="highlight"><code><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">myvar</span><span class="w"> </span><span class="p">}</span><span class="err">}</span><span class="w">
|
|
195
|
+
</span></code></pre>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<p>The variable won’t render because the page’s order of interpretation is to render Liquid first and later process the Layout. When the Liquid rendering happens, the variable assignment isn’t available.</p>
|
|
199
|
+
|
|
200
|
+
<p>To make the code work, you could put the variable assignment into the page’s front matter.</p>
|
|
201
|
+
|
|
202
|
+
<h3 id="markdown-in-include-file-not-processed">Markdown in include file not processed</h3>
|
|
203
|
+
|
|
204
|
+
<p>Suppose you have a Markdown file at <code class="highlighter-rouge">_includes/mycontent.md</code>. In the Markdown file, you have some Markdown formatting:</p>
|
|
205
|
+
|
|
206
|
+
<div class="language-markdown highlighter-rouge">
|
|
207
|
+
<pre class="highlight"><code>This is a list:
|
|
208
|
+
<span class="p">*</span> first item
|
|
209
|
+
<span class="p">*</span> second item
|
|
210
|
+
</code></pre>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<p>You include the file into an HTML file as follows:</p>
|
|
214
|
+
|
|
215
|
+
<div class="language-liquid highlighter-rouge">
|
|
216
|
+
<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="nv">mycontent</span><span class="p">.</span><span class="nv">md</span><span class="w"> </span><span class="p">%}</span>
|
|
217
|
+
</code></pre>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<p>The Markdown is not processed because first the Liquid (<code class="highlighter-rouge">include</code> tag) gets processed, inserting <code class="highlighter-rouge">mycontent.md</code> into the HTML file. <em>Then</em> the Markdown would get processed.</p>
|
|
221
|
+
|
|
222
|
+
<p>But because the content is included into an <em>HTML</em> page, the Markdown isn’t rendered. The Markdown filter processes content only in Markdown files.</p>
|
|
223
|
+
|
|
224
|
+
<p>To make the code work, use HTML formatting in includes that are inserted into HTML files.</p>
|
|
225
|
+
|
|
226
|
+
<p>Note that <code class="highlighter-rouge">highlight</code> tags don’t require Markdown to process. Suppose your include contains the following:</p>
|
|
227
|
+
|
|
228
|
+
<div class="language-liquid highlighter-rouge">
|
|
229
|
+
<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">highlight</span><span class="w"> </span>javascript<span class="w"> </span><span class="p">%}</span>
|
|
230
|
+
console.log('alert');
|
|
231
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">endhighlight</span><span class="w"> </span><span class="p">%}</span>
|
|
232
|
+
</code></pre>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<p>The <code class="highlighter-rouge">highlight</code> tag <em>is</em> Liquid. (Liquid passes the content to Rouge or Pygments for syntax highlighting.) As a result, this code will actually convert to HTML with syntax highlighting. Jekyll does not need the Markdown filter to process <code class="highlighter-rouge">highlight</code> tags.</p>
|
|
236
|
+
|
|
237
|
+
<h3 id="liquid-mixed-with-javascript-isnt-rendered">Liquid mixed with JavaScript isn’t rendered</h3>
|
|
238
|
+
|
|
239
|
+
<p>Suppose you try to mix Liquid’s <code class="highlighter-rouge">assign</code> tag with JavaScript, like this:</p>
|
|
240
|
+
|
|
241
|
+
<div class="language-javascript highlighter-rouge">
|
|
242
|
+
<pre class="highlight"><code><span class="o"><</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">"someFunction()"</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o"><</span><span class="sr">/button</span><span class="err">>
|
|
243
|
+
</span>
|
|
244
|
+
<span class="o"><</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"intro"</span><span class="o">><</span><span class="sr">/p</span><span class="err">>
|
|
245
|
+
</span>
|
|
246
|
+
<span class="o"><</span><span class="nx">script</span><span class="o">></span>
|
|
247
|
+
<span class="p">{</span><span class="o">%</span> <span class="nx">assign</span> <span class="nx">someContent</span> <span class="o">=</span> <span class="s2">"This is some content"</span> <span class="o">%</span><span class="p">}</span>
|
|
248
|
+
<span class="kd">function</span> <span class="nx">someFunction</span><span class="p">()</span> <span class="p">{</span>
|
|
249
|
+
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"intro"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">someContent</span><span class="p">;</span>
|
|
250
|
+
<span class="p">}</span>
|
|
251
|
+
<span class="o"><</span><span class="sr">/script</span><span class="err">>
|
|
252
|
+
</span></code></pre>
|
|
253
|
+
</div>
|
|
254
|
+
|
|
255
|
+
<p>This won’t work because the <code class="highlighter-rouge">assign</code> tag is only available during the Liquid rendering phase of the site. In this JavaScript example, the script executes when a user clicks a button (“Click me”) on the HTML page. At that time, the Liquid logic is no longer available, so the <code class="highlighter-rouge">assign</code> tag wouldn’t return anything.</p>
|
|
256
|
+
|
|
257
|
+
<p>However, you can use Jekyll’s site variables or Liquid to <em>populate</em> a script that is executed at a later time. For example, suppose you have the following property in your front matter: <code class="highlighter-rouge">someContent: "This is some content"</code>. You could do this:</p>
|
|
258
|
+
|
|
259
|
+
<div class="language-js highlighter-rouge">
|
|
260
|
+
<pre class="highlight"><code><span class="o"><</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">"someFunction()"</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o"><</span><span class="sr">/button</span><span class="err">>
|
|
261
|
+
</span>
|
|
262
|
+
<span class="o"><</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"intro"</span><span class="o">><</span><span class="sr">/p</span><span class="err">>
|
|
263
|
+
</span>
|
|
264
|
+
<span class="o"><</span><span class="nx">script</span><span class="o">></span>
|
|
265
|
+
|
|
266
|
+
<span class="kd">function</span> <span class="nx">someFunction</span><span class="p">()</span> <span class="p">{</span>
|
|
267
|
+
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"intro"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">"{{ page.someContent }}"</span><span class="p">;</span>
|
|
268
|
+
<span class="p">}</span>
|
|
269
|
+
<span class="o"><</span><span class="sr">/script</span><span class="err">>
|
|
270
|
+
</span></code></pre>
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
<p>When Jekyll builds the site, this <code class="highlighter-rouge">someContent</code> property populates the script’s values, converting <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">page.someContent</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> to <code class="highlighter-rouge">"This is some content"</code>.</p>
|
|
274
|
+
|
|
275
|
+
<p>The key to remember is that Liquid renders when Jekyll builds your site. Liquid is not available at run-time in the browser when a user executes an event.</p>
|
|
276
|
+
|
|
277
|
+
<h2 id="note-about-using-liquid-in-yaml">Note about using Liquid in YAML</h2>
|
|
278
|
+
|
|
279
|
+
<p>There’s one more detail to remember: Liquid does not render when embedded in YAML files or front matter. (This isn’t related to order of interpretation, but it’s worth mentioning because it’s a common question about element rendering.)</p>
|
|
280
|
+
|
|
281
|
+
<p>For example, suppose you have a <code class="highlighter-rouge">highlight</code> tag in your <code class="highlighter-rouge">_data/mydata.yml</code> file:</p>
|
|
282
|
+
|
|
283
|
+
<div class="highlighter-rouge">
|
|
284
|
+
<pre class="highlight"><code>myvalue: >
|
|
285
|
+
{% highlight javascript %}
|
|
286
|
+
console.log('alert');
|
|
287
|
+
{% endhighlight %}
|
|
288
|
+
</code></pre>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<p>On a page, you try to insert the value:</p>
|
|
292
|
+
|
|
293
|
+
<div class="highlighter-rouge">
|
|
294
|
+
<pre class="highlight"><code><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">site.data.mydata.myvalue</span><span class="w"> </span><span class="p">}</span><span class="err">}</span><span class="w">
|
|
295
|
+
</span></code></pre>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<p>This would render only as a string rather than a code sample with syntax highlighting. To make the code render, consider using an include instead.</p>
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
<div class="section-nav">
|
|
315
|
+
<div class="left align-right">
|
|
316
|
+
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
<a href="/tutorials/navigation/" class="prev">Back</a>
|
|
320
|
+
|
|
321
|
+
</div>
|
|
322
|
+
<div class="right align-left">
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
<a href="/tutorials/custom-404-page/" class="next">Next</a>
|
|
327
|
+
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="clear"></div>
|
|
331
|
+
|
|
332
|
+
</article>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="unit one-fifth hide-on-mobiles">
|
|
336
|
+
<aside>
|
|
337
|
+
|
|
338
|
+
<h4>Tutorials</h4>
|
|
339
|
+
|
|
340
|
+
<ul>
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
<li class=""><a href="/tutorials/home/">Tutorials</a></li>
|
|
345
|
+
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
<li class=""><a href="/tutorials/navigation/">Navigation</a></li>
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
<li class="current"><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
<li class=""><a href="/tutorials/custom-404-page/">Custom 404 Page</a></li>
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
<li class=""><a href="/tutorials/convert-site-to-jekyll/">Convert an HTML site to Jekyll</a></li>
|
|
361
|
+
|
|
362
|
+
</ul>
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
</aside>
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
<div class="clear"></div>
|
|
371
|
+
|
|
372
|
+
</div>
|
|
373
|
+
</section>
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
<footer>
|
|
377
|
+
<div class="grid">
|
|
378
|
+
<div class="unit one-third center-on-mobiles">
|
|
379
|
+
<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>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="unit two-thirds align-right center-on-mobiles">
|
|
382
|
+
<p>
|
|
383
|
+
Proudly hosted by
|
|
384
|
+
<a href="https://github.com">
|
|
385
|
+
<img src="/img/footer-logo.png" width="100" height="30" alt="GitHub • Social coding">
|
|
386
|
+
</a>
|
|
387
|
+
</p>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
</footer>
|
|
391
|
+
|
|
392
|
+
<script>
|
|
393
|
+
var anchorForId = function (id) {
|
|
394
|
+
var anchor = document.createElement("a");
|
|
395
|
+
anchor.className = "header-link";
|
|
396
|
+
anchor.href = "#" + id;
|
|
397
|
+
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
|
|
398
|
+
anchor.title = "Permalink";
|
|
399
|
+
return anchor;
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
var linkifyAnchors = function (level, containingElement) {
|
|
403
|
+
var headers = containingElement.getElementsByTagName("h" + level);
|
|
404
|
+
for (var h = 0; h < headers.length; h++) {
|
|
405
|
+
var header = headers[h];
|
|
406
|
+
|
|
407
|
+
if (typeof header.id !== "undefined" && header.id !== "") {
|
|
408
|
+
header.appendChild(anchorForId(header.id));
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
document.onreadystatechange = function () {
|
|
414
|
+
if (this.readyState === "complete") {
|
|
415
|
+
var contentBlock = document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
|
|
416
|
+
if (!contentBlock) {
|
|
417
|
+
return;
|
|
418
|
+
}
|
|
419
|
+
for (var level = 1; level <= 6; level++) {
|
|
420
|
+
linkifyAnchors(level, contentBlock);
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
};
|
|
424
|
+
</script>
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
<!-- Gauges (http://get.gaug.es/) -->
|
|
428
|
+
<script>
|
|
429
|
+
var _gauges = _gauges || [];
|
|
430
|
+
(function() {
|
|
431
|
+
var t = document.createElement('script');
|
|
432
|
+
t.type = 'text/javascript';
|
|
433
|
+
t.async = true;
|
|
434
|
+
t.id = 'gauges-tracker';
|
|
435
|
+
t.setAttribute('data-site-id', '503c5af6613f5d0f19000027');
|
|
436
|
+
t.src = '//secure.gaug.es/track.js';
|
|
437
|
+
var s = document.getElementsByTagName('script')[0];
|
|
438
|
+
s.parentNode.insertBefore(t, s);
|
|
439
|
+
})();
|
|
440
|
+
</script>
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
<!-- Google Analytics (https://www.google.com/analytics) -->
|
|
445
|
+
<script>
|
|
446
|
+
!function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){
|
|
447
|
+
(j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k),
|
|
448
|
+
L=e.getElementsByTagName(k)[0],l.src='//www.google-analytics.com/analytics.js',
|
|
449
|
+
L.parentNode.insertBefore(l,L)}(window,document,'script','ga');
|
|
450
|
+
|
|
451
|
+
ga('create', 'UA-50755011-1', 'jekyllrb.com');
|
|
452
|
+
ga('send', 'pageview');
|
|
453
|
+
|
|
454
|
+
</script>
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
</body>
|
|
459
|
+
</html>
|