jekyll-docs 3.3.1 → 3.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (125) hide show
  1. checksums.yaml +4 -4
  2. data/site/404.html +3 -3
  3. data/site/community/index.html +5 -5
  4. data/site/css/screen.css +7 -6
  5. data/site/docs/assets/index.html +13 -5
  6. data/site/docs/collections/index.html +132 -29
  7. data/site/docs/conduct/index.html +16 -5
  8. data/site/docs/configuration/index.html +26 -8
  9. data/site/docs/continuous-integration/circleci/index.html +761 -0
  10. data/site/docs/continuous-integration/index.html +25 -245
  11. data/site/docs/continuous-integration/travis-ci/index.html +916 -0
  12. data/site/docs/contributing/index.html +41 -5
  13. data/site/docs/datafiles/index.html +14 -6
  14. data/site/docs/deployment-methods/index.html +17 -7
  15. data/site/docs/drafts/index.html +13 -5
  16. data/site/docs/extras/index.html +17 -6
  17. data/site/docs/frontmatter/index.html +13 -5
  18. data/site/docs/github-pages/index.html +68 -47
  19. data/site/docs/history/index.html +132 -9
  20. data/site/docs/home/index.html +13 -5
  21. data/site/docs/includes/index.html +824 -0
  22. data/site/docs/installation/index.html +16 -6
  23. data/site/docs/maintaining/affinity-team-captain/index.html +16 -5
  24. data/site/docs/maintaining/avoiding-burnout/index.html +16 -5
  25. data/site/docs/maintaining/becoming-a-maintainer/index.html +17 -6
  26. data/site/docs/maintaining/index.html +16 -5
  27. data/site/docs/maintaining/merging-a-pull-request/index.html +21 -6
  28. data/site/docs/maintaining/reviewing-a-pull-request/index.html +16 -5
  29. data/site/docs/maintaining/special-labels/index.html +16 -5
  30. data/site/docs/maintaining/triaging-an-issue/index.html +16 -5
  31. data/site/docs/migrations/index.html +13 -5
  32. data/site/docs/pages/index.html +33 -50
  33. data/site/docs/pagination/index.html +16 -5
  34. data/site/docs/permalinks/index.html +148 -66
  35. data/site/docs/plugins/index.html +39 -14
  36. data/site/docs/posts/index.html +32 -5
  37. data/site/docs/quickstart/index.html +57 -18
  38. data/site/docs/resources/index.html +21 -10
  39. data/site/docs/sites/index.html +18 -7
  40. data/site/docs/static-files/index.html +15 -7
  41. data/site/docs/structure/index.html +47 -32
  42. data/site/docs/templates/index.html +85 -89
  43. data/site/docs/themes/index.html +214 -63
  44. data/site/docs/troubleshooting/index.html +16 -5
  45. data/site/docs/upgrading/0-to-2/index.html +16 -5
  46. data/site/docs/upgrading/2-to-3/index.html +17 -6
  47. data/site/docs/upgrading/index.html +16 -5
  48. data/site/docs/usage/index.html +21 -6
  49. data/site/docs/variables/index.html +14 -6
  50. data/site/docs/windows/index.html +35 -10
  51. data/site/feed.xml +41 -22
  52. data/site/fonts/FontAwesome.eot +0 -0
  53. data/site/fonts/FontAwesome.svg +12 -0
  54. data/site/fonts/FontAwesome.ttf +0 -0
  55. data/site/fonts/FontAwesome.woff +0 -0
  56. data/site/help/index.html +3 -3
  57. data/site/icomoon-selection.json +96 -0
  58. data/site/index.html +3 -3
  59. data/site/latest_version.txt +1 -1
  60. data/site/news/2013/05/05/jekyll-1-0-0-released/index.html +12 -8
  61. data/site/news/2013/05/08/jekyll-1-0-1-released/index.html +11 -7
  62. data/site/news/2013/05/12/jekyll-1-0-2-released/index.html +11 -7
  63. data/site/news/2013/06/07/jekyll-1-0-3-released/index.html +11 -7
  64. data/site/news/2013/07/14/jekyll-1-1-0-released/index.html +11 -7
  65. data/site/news/2013/07/24/jekyll-1-1-1-released/index.html +12 -8
  66. data/site/news/2013/07/25/jekyll-1-0-4-released/index.html +11 -7
  67. data/site/news/2013/07/25/jekyll-1-1-2-released/index.html +11 -7
  68. data/site/news/2013/09/06/jekyll-1-2-0-released/index.html +11 -7
  69. data/site/news/2013/09/14/jekyll-1-2-1-released/index.html +11 -7
  70. data/site/news/2013/10/28/jekyll-1-3-0-rc1-released/index.html +11 -7
  71. data/site/news/2013/11/04/jekyll-1-3-0-released/index.html +11 -7
  72. data/site/news/2013/11/26/jekyll-1-3-1-released/index.html +11 -7
  73. data/site/news/2013/12/07/jekyll-1-4-0-released/index.html +11 -7
  74. data/site/news/2013/12/09/jekyll-1-4-1-released/index.html +11 -7
  75. data/site/news/2013/12/16/jekyll-1-4-2-released/index.html +11 -7
  76. data/site/news/2014/01/13/jekyll-1-4-3-released/index.html +11 -7
  77. data/site/news/2014/03/24/jekyll-1-5-0-released/index.html +11 -7
  78. data/site/news/2014/03/27/jekyll-1-5-1-released/index.html +11 -7
  79. data/site/news/2014/05/06/jekyll-turns-2-0-0/index.html +11 -7
  80. data/site/news/2014/05/08/jekyll-2-0-3-released/index.html +11 -7
  81. data/site/news/2014/06/04/jekyll-stickers-1-dollar-stickermule/index.html +12 -8
  82. data/site/news/2014/06/28/jekyll-turns-21-i-mean-2-1-0/index.html +12 -8
  83. data/site/news/2014/07/01/jekyll-2-1-1-released/index.html +11 -7
  84. data/site/news/2014/07/29/jekyll-2-2-0-released/index.html +11 -7
  85. data/site/news/2014/08/10/jekyll-2-3-0-released/index.html +11 -7
  86. data/site/news/2014/09/09/jekyll-2-4-0-released/index.html +11 -7
  87. data/site/news/2014/11/05/jekylls-midlife-crisis-jekyll-turns-2-5-0/index.html +11 -7
  88. data/site/news/2014/11/09/jekyll-2-5-1-released/index.html +11 -7
  89. data/site/news/2014/11/12/jekyll-2-5-2-released/index.html +11 -7
  90. data/site/news/2014/12/17/alfredxing-welcome-to-jekyll-core/index.html +12 -8
  91. data/site/news/2014/12/22/jekyll-2-5-3-released/index.html +11 -7
  92. data/site/news/2015/01/20/jekyll-meet-and-greet/index.html +11 -7
  93. data/site/news/2015/01/24/jekyll-3-0-0-beta1-released/index.html +11 -7
  94. data/site/news/2015/02/26/introducing-jekyll-talk/index.html +11 -7
  95. data/site/news/2015/10/26/jekyll-3-0-released/index.html +11 -7
  96. data/site/news/2015/11/17/jekyll-3-0-1-released/index.html +11 -7
  97. data/site/news/2016/01/20/jekyll-3-0-2-released/index.html +11 -7
  98. data/site/news/2016/01/24/jekyll-3-1-0-released/index.html +11 -7
  99. data/site/news/2016/01/28/jekyll-3-1-1-released/index.html +11 -7
  100. data/site/news/2016/02/08/jekyll-3-0-3-released/index.html +11 -7
  101. data/site/news/2016/02/19/jekyll-3-1-2-released/index.html +11 -7
  102. data/site/news/2016/03/10/making-it-easier-to-contribute-to-jekyll/index.html +11 -7
  103. data/site/news/2016/04/19/jekyll-3-0-4-released/index.html +11 -7
  104. data/site/news/2016/04/19/jekyll-3-1-3-released/index.html +11 -8
  105. data/site/news/2016/04/26/jekyll-3-0-5-released/index.html +11 -7
  106. data/site/news/2016/05/18/jekyll-3-1-4-released/index.html +11 -7
  107. data/site/news/2016/05/18/jekyll-3-1-5-released/index.html +11 -7
  108. data/site/news/2016/05/19/jekyll-3-1-6-released/index.html +11 -7
  109. data/site/news/2016/06/03/update-on-jekyll-s-google-summer-of-code-projects/index.html +11 -7
  110. data/site/news/2016/07/26/jekyll-3-2-0-released/index.html +11 -7
  111. data/site/news/2016/08/02/jekyll-3-2-1-released/index.html +11 -7
  112. data/site/news/2016/08/24/jekyll-admin-initial-release/index.html +12 -8
  113. data/site/news/2016/10/06/jekyll-3-3-is-here/index.html +12 -8
  114. data/site/news/2016/11/14/jekyll-3-3-1-released/index.html +11 -7
  115. data/site/news/2017/01/18/jekyll-3-4-0-released/index.html +570 -0
  116. data/site/news/index.html +81 -15
  117. data/site/news/releases/index.html +78 -12
  118. data/site/readme.md +9 -2
  119. data/site/sitemap.xml +59 -43
  120. metadata +14 -10
  121. data/site/fonts/fontawesome-webfont.eot +0 -0
  122. data/site/fonts/fontawesome-webfont.svg +0 -640
  123. data/site/fonts/fontawesome-webfont.ttf +0 -0
  124. data/site/fonts/fontawesome-webfont.woff +0 -0
  125. data/site/fonts/fontawesome-webfont.woff2 +0 -0
data/site/docs/includes/index.html ADDED
@@ -0,0 +1,824 @@
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.4.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.1.0 -->
14
+ <title>Includes - Jekyll • Simple, blog-aware, static sites</title>
15
+ <meta property="og:title" content="Includes">
16
+ <meta name="description" content="The include tag allows you to include the content from another file stored in the _includes folder:">
17
+ <meta property="og:description" content="The include tag allows you to include the content from another file stored in the _includes folder:">
18
+ <link rel="canonical" href="https://jekyllrb.com/docs/includes/">
19
+ <meta property="og:url" content="https://jekyllrb.com/docs/includes/">
20
+ <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
21
+ <meta property="og:type" content="article">
22
+ <meta property="article:published_time" content="2017-03-22T08:06:48-07:00">
23
+ <meta name="twitter:card" content="summary">
24
+ <meta name="twitter:site" content="@jekyllrb">
25
+ <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
26
+ <script type="application/ld+json">
27
+ {"@context": "http://schema.org",
28
+ "@type": "BlogPosting",
29
+ "headline": "Includes",
30
+ "datePublished": "2017-03-22T08:06:48-07:00",
31
+ "description": "The include tag allows you to include the content from another file stored in the _includes folder:",
32
+ "publisher": {"@type": "Organization",
33
+ "logo": {"@type": "ImageObject",
34
+ "url": "https://jekyllrb.com/img/logo-2x.png"}},
35
+ "url": "https://jekyllrb.com/docs/includes/"}</script>
36
+ <!-- End Jekyll SEO tag -->
37
+
38
+ <!--[if lt IE 9]>
39
+ <script src="/js/html5shiv.min.js"></script>
40
+ <script src="/js/respond.min.js"></script>
41
+ <![endif]-->
42
+ </head>
43
+
44
+
45
+ <body class="wrap">
46
+ <header>
47
+ <nav class="mobile-nav show-on-mobiles">
48
+ <ul>
49
+ <li class="">
50
+ <a href="/">Home</a>
51
+ </li>
52
+ <li class="current">
53
+ <a href="/docs/home/">Docs</a>
54
+ </li>
55
+ <li class="">
56
+ <a href="/news/">News</a>
57
+ </li>
58
+ <li class="">
59
+ <a href="/community/">Community</a>
60
+ </li>
61
+ <li class="">
62
+ <a href="/help/">Help</a>
63
+ </li>
64
+ <li>
65
+ <a href="https://github.com/jekyll/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
66
+ </li>
67
+ </ul>
68
+
69
+ </nav>
70
+ <div class="grid">
71
+ <div class="unit one-third center-on-mobiles">
72
+ <h1>
73
+ <a href="/">
74
+ <span class="sr-only">Jekyll</span>
75
+ <img src="/img/logo-2x.png" width="249" height="115" alt="Jekyll Logo">
76
+ </a>
77
+ </h1>
78
+ </div>
79
+ <nav class="main-nav unit two-thirds hide-on-mobiles">
80
+ <ul>
81
+ <li class="">
82
+ <a href="/">Home</a>
83
+ </li>
84
+ <li class="current">
85
+ <a href="/docs/home/">Docs</a>
86
+ </li>
87
+ <li class="">
88
+ <a href="/news/">News</a>
89
+ </li>
90
+ <li class="">
91
+ <a href="/community/">Community</a>
92
+ </li>
93
+ <li class="">
94
+ <a href="/help/">Help</a>
95
+ </li>
96
+ <li>
97
+ <a href="https://github.com/jekyll/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
98
+ </li>
99
+ </ul>
100
+
101
+ </nav>
102
+ </div>
103
+ </header>
104
+
105
+
106
+ <section class="docs">
107
+ <div class="grid">
108
+
109
+ <div class="docs-nav-mobile unit whole show-on-mobiles">
110
+ <select onchange="if (this.value) window.location.href=this.value">
111
+ <option value="">Navigate the docs…</option>
112
+
113
+ <optgroup label="Getting Started">
114
+
115
+
116
+
117
+ <option value="/docs/home/">Welcome</option>
118
+
119
+
120
+
121
+ <option value="/docs/quickstart/">Quick-start guide</option>
122
+
123
+
124
+
125
+ <option value="/docs/installation/">Installation</option>
126
+
127
+
128
+
129
+ <option value="/docs/usage/">Basic Usage</option>
130
+
131
+
132
+
133
+ <option value="/docs/structure/">Directory structure</option>
134
+
135
+
136
+
137
+ <option value="/docs/configuration/">Configuration</option>
138
+
139
+
140
+ </optgroup>
141
+
142
+ <optgroup label="Your Content">
143
+
144
+
145
+
146
+ <option value="/docs/frontmatter/">Front Matter</option>
147
+
148
+
149
+
150
+ <option value="/docs/posts/">Writing posts</option>
151
+
152
+
153
+
154
+ <option value="/docs/drafts/">Working with drafts</option>
155
+
156
+
157
+
158
+ <option value="/docs/pages/">Creating pages</option>
159
+
160
+
161
+
162
+ <option value="/docs/static-files/">Static Files</option>
163
+
164
+
165
+
166
+ <option value="/docs/variables/">Variables</option>
167
+
168
+
169
+
170
+ <option value="/docs/collections/">Collections</option>
171
+
172
+
173
+
174
+ <option value="/docs/datafiles/">Data Files</option>
175
+
176
+
177
+
178
+ <option value="/docs/assets/">Assets</option>
179
+
180
+
181
+
182
+ <option value="/docs/migrations/">Blog migrations</option>
183
+
184
+
185
+ </optgroup>
186
+
187
+ <optgroup label="Customization">
188
+
189
+
190
+
191
+ <option value="/docs/templates/">Templates</option>
192
+
193
+
194
+
195
+ <option value="/docs/includes/">Includes</option>
196
+
197
+
198
+
199
+ <option value="/docs/permalinks/">Permalinks</option>
200
+
201
+
202
+
203
+ <option value="/docs/pagination/">Pagination</option>
204
+
205
+
206
+
207
+ <option value="/docs/plugins/">Plugins</option>
208
+
209
+
210
+
211
+ <option value="/docs/themes/">Themes</option>
212
+
213
+
214
+
215
+ <option value="/docs/extras/">Extras</option>
216
+
217
+
218
+ </optgroup>
219
+
220
+ <optgroup label="Deployment">
221
+
222
+
223
+
224
+ <option value="/docs/github-pages/">GitHub Pages</option>
225
+
226
+
227
+
228
+ <option value="/docs/deployment-methods/">Deployment methods</option>
229
+
230
+
231
+
232
+ <option value="/docs/continuous-integration/">Continuous Integration</option>
233
+
234
+
235
+ </optgroup>
236
+
237
+ <optgroup label="Miscellaneous">
238
+
239
+
240
+
241
+ <option value="/docs/troubleshooting/">Troubleshooting</option>
242
+
243
+
244
+
245
+ <option value="/docs/sites/">Sites using Jekyll</option>
246
+
247
+
248
+
249
+ <option value="/docs/resources/">Resources</option>
250
+
251
+
252
+
253
+ <option value="/docs/upgrading/0-to-2/">Upgrading from 0.x to 2.x</option>
254
+
255
+
256
+
257
+ <option value="/docs/upgrading/2-to-3/">Upgrading from 2.x to 3.x</option>
258
+
259
+
260
+ </optgroup>
261
+
262
+ <optgroup label="Meta">
263
+
264
+
265
+
266
+ <option value="/docs/contributing/">Contributing</option>
267
+
268
+
269
+
270
+ <option value="/docs/maintaining/">Maintaining Jekyll</option>
271
+
272
+
273
+
274
+ <option value="/docs/conduct/">Code of Conduct</option>
275
+
276
+
277
+
278
+ <option value="/docs/history/">History</option>
279
+
280
+
281
+ </optgroup>
282
+
283
+ </select>
284
+ </div>
285
+
286
+
287
+ <div class="unit four-fifths">
288
+ <article>
289
+ <div class="improve right hide-on-mobiles">
290
+ <a href="https://github.com/jekyll/jekyll/edit/master/docs/_docs/includes.md"><i class="fa fa-pencil"></i>  Improve this page</a>
291
+ </div>
292
+ <h1>Includes</h1>
293
+ <p>The <code class="highlighter-rouge">include</code> tag allows you to include the content from another file stored in the <code class="highlighter-rouge">_includes</code> folder:</p>
294
+
295
+ <div class="language-liquid highlighter-rouge">
296
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">footer</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="p">%}</span>
297
+ </code></pre>
298
+ </div>
299
+
300
+ <p>Jekyll will look for the referenced file (in this case, <code class="highlighter-rouge">footer.html</code>) in the <code class="highlighter-rouge">_includes</code> directory at the root of your source directory and insert its contents.</p>
301
+
302
+ <h3 id="including-files-relative-to-another-file">Including files relative to another file</h3>
303
+
304
+ <p>You can choose to include file fragments relative to the current file by using the <code class="highlighter-rouge">include_relative</code> tag:</p>
305
+
306
+ <div class="language-liquid highlighter-rouge">
307
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="na">_relative somedir/footer</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="p">%}</span>
308
+ </code></pre>
309
+ </div>
310
+
311
+ <p>You won’t need to place your included content within the <code class="highlighter-rouge">_includes</code> directory. Instead,
312
+ the inclusion is specifically relative to the file where the tag is being used. For example,
313
+ if <code class="highlighter-rouge">_posts/2014-09-03-my-file.markdown</code> uses the <code class="highlighter-rouge">include_relative</code> tag, the included file
314
+ must be within the <code class="highlighter-rouge">_posts</code> directory or one of its subdirectories.</p>
315
+
316
+ <p>Note that you cannot use the <code class="highlighter-rouge">../</code> syntax to specify an include location that refers to a higher-level directory.</p>
317
+
318
+ <p>All the other capabilities of the <code class="highlighter-rouge">include</code> tag are available to the <code class="highlighter-rouge">include_relative</code> tag,
319
+ such as variables.</p>
320
+
321
+ <h3 id="using-variables-names-for-the-include-file">Using variables names for the include file</h3>
322
+
323
+ <p>The name of the file you want to embed can be specified as a variable instead of an actual file name. For example, suppose you defined a variable in your page’s front matter like this:</p>
324
+
325
+ <div class="language-yaml highlighter-rouge">
326
+ <pre class="highlight"><code><span class="nn">---</span>
327
+ <span class="s">title</span><span class="pi">:</span> <span class="s">My page</span>
328
+ <span class="s">my_variable</span><span class="pi">:</span> <span class="s">footer_company_a.html</span>
329
+ <span class="nn">---</span>
330
+ </code></pre>
331
+ </div>
332
+
333
+ <p>You could then reference that variable in your include:</p>
334
+
335
+ <div class="language-liquid highlighter-rouge">
336
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>{{<span class="w"> </span><span class="nv">page</span><span class="p">.</span><span class="nv">my_variable</span><span class="w"> </span>}}<span class="w"> </span><span class="p">%}</span>
337
+ </code></pre>
338
+ </div>
339
+
340
+ <p>In this example, the include would insert the file <code class="highlighter-rouge">footer_company_a.html</code> from the <code class="highlighter-rouge">_includes/footer_company_a.html</code> directory.</p>
341
+
342
+ <h3 id="passing-parameters-to-includes">Passing parameters to includes</h3>
343
+
344
+ <p>You can also pass parameters to an include. For example, suppose you have a file called <code class="highlighter-rouge">note.html</code> in your <code class="highlighter-rouge">_includes</code> folder that contains this formatting:</p>
345
+
346
+ <div class="language-liquid highlighter-rouge">
347
+ <pre class="highlight"><code>&lt;div markdown="span" class="alert alert-info" role="alert"&gt;
348
+ &lt;i class="fa fa-info-circle"&gt;&lt;/i&gt; &lt;b&gt;Note:&lt;/b&gt;
349
+ <span class="p">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">content</span><span class="w"> </span><span class="p">}}</span>
350
+ &lt;/div&gt;
351
+ </code></pre>
352
+ </div>
353
+
354
+ <p>The <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">include.content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> is a parameter that gets populated when you call the include and specify a value for that parameter, like this:</p>
355
+
356
+ <div class="language-liquid highlighter-rouge">
357
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">note</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="na">content</span><span class="o">=</span><span class="s2">"This is my sample note."</span><span class="w"> </span><span class="p">%}</span>
358
+ </code></pre>
359
+ </div>
360
+
361
+ <p>The value of <code class="highlighter-rouge">content</code> (which is <code class="highlighter-rouge">This is my sample note</code>) will be inserted into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">include.content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> parameter.</p>
362
+
363
+ <p>Passing parameters to includes is especially helpful when you want to hide away complex formatting from your Markdown content.</p>
364
+
365
+ <p>For example, suppose you have a special image syntax with complex formatting, and you don’t want your authors to remember the complex formatting. As a result, you decide to simplify the formatting by using an include with parameters. Here’s an example of the special image syntax you might want to populate with an include:</p>
366
+
367
+ <div class="language-html highlighter-rouge">
368
+ <pre class="highlight"><code><span class="nt">&lt;figure&gt;</span>
369
+ <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"http://jekyllrb.com"</span><span class="nt">&gt;</span>
370
+ <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"logo.png"</span> <span class="na">style=</span><span class="s">"max-width: 200px;"</span>
371
+ <span class="na">alt=</span><span class="s">"Jekyll logo"</span> <span class="nt">/&gt;</span>
372
+ <span class="nt">&lt;figcaption&gt;</span>This is the Jekyll logo<span class="nt">&lt;/figcaption&gt;</span>
373
+ <span class="nt">&lt;/figure&gt;</span>
374
+ </code></pre>
375
+ </div>
376
+
377
+ <p>You could templatize this content in your include and make each value available as a parameter, like this:</p>
378
+
379
+ <div class="language-liquid highlighter-rouge">
380
+ <pre class="highlight"><code>&lt;figure&gt;
381
+ &lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"&gt;
382
+ &lt;img src="<span class="p">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">file</span><span class="w"> </span><span class="p">}}</span>" style="max-width: <span class="p">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">max</span><span class="err">-</span><span class="nv">width</span><span class="w"> </span><span class="p">}}</span>;"
383
+ alt="<span class="p">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">alt</span><span class="w"> </span><span class="p">}}</span>"/&gt;
384
+ &lt;figcaption&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">caption</span><span class="w"> </span><span class="p">}}</span>&lt;/figcaption&gt;
385
+ &lt;/figure&gt;
386
+ </code></pre>
387
+ </div>
388
+
389
+ <p>This include contains 5 parameters:</p>
390
+
391
+ <ul>
392
+ <li><code class="highlighter-rouge">url</code></li>
393
+ <li><code class="highlighter-rouge">max-width</code></li>
394
+ <li><code class="highlighter-rouge">file</code></li>
395
+ <li><code class="highlighter-rouge">alt</code></li>
396
+ <li><code class="highlighter-rouge">caption</code></li>
397
+ </ul>
398
+
399
+ <p>Here’s an example that passes all the parameters to this include (the include file is named <code class="highlighter-rouge">image.html</code>):</p>
400
+
401
+ <div class="language-liquid highlighter-rouge">
402
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">image</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="na">url</span><span class="o">=</span><span class="s2">"http://jekyllrb.com"</span><span class="err">
403
+ </span><span class="na">max-width</span><span class="o">=</span><span class="s2">"200px"</span><span class="w"> </span><span class="na">file</span><span class="o">=</span><span class="s2">"logo.png"</span><span class="w"> </span><span class="na">alt</span><span class="o">=</span><span class="s2">"Jekyll logo"</span><span class="err">
404
+ </span><span class="na">caption</span><span class="o">=</span><span class="s2">"This is the Jekyll logo."</span><span class="w"> </span><span class="p">%}</span>
405
+ </code></pre>
406
+ </div>
407
+
408
+ <p>The result is the original HTML code shown earlier.</p>
409
+
410
+ <p>To safeguard situations where users don’t supply a value for the parameter, you can use <a href="https://help.shopify.com/themes/liquid/filters/additional-filters#default">Liquid’s default filter</a>.</p>
411
+
412
+ <p>Overall, you can create includes that act as templates for a variety of uses — inserting audio or video clips, alerts, special formatting, and more. However, note that you should avoid using too many includes, as this will slow down the build time of your site. For example, don’t use includes every time you insert an image. (The above technique shows a use case for special images.)</p>
413
+
414
+ <h3 id="passing-parameter-variables-to-includes">Passing parameter variables to includes</h3>
415
+
416
+ <p>Suppose the parameter you want to pass to the include is a variable rather than a string. For example, you might be using <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">site.product_name</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> to refer to every instance of your product rather than the actual hard-coded name. (In this case, your <code class="highlighter-rouge">_config.yml</code> file would have a key called <code class="highlighter-rouge">product_name</code> with a value of your product’s name.)</p>
417
+
418
+ <p>The string you pass to your include parameter can’t contain curly braces. For example, you can’t pass a parameter that contains this: <code class="highlighter-rouge">"The latest version of {{ site.product_name }} is now available."</code></p>
419
+
420
+ <p>If you want to include this variable in your parameter that you pass to an include, you need to store the entire parameter as a variable before passing it to the include. You can use <code class="highlighter-rouge">capture</code> tags to create the variable:</p>
421
+
422
+ <div class="language-liquid highlighter-rouge">
423
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">capture</span><span class="w"> </span><span class="na">download_note</span><span class="w"> </span><span class="p">%}</span>The latest version of
424
+ <span class="p">{{</span><span class="w"> </span><span class="nv">site</span><span class="p">.</span><span class="nv">product_name</span><span class="w"> </span><span class="p">}}</span> is now available.<span class="p">{%</span><span class="w"> </span><span class="nt">endcapture</span><span class="w"> </span><span class="p">%}</span>
425
+ </code></pre>
426
+ </div>
427
+
428
+ <p>Then pass this captured variable into the parameter for the include. Omit the quotation marks around the parameter content because it’s no longer a string (it’s a variable):</p>
429
+
430
+ <div class="language-liquid highlighter-rouge">
431
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">note</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="na">content</span><span class="o">=</span><span class="nv">download_note</span><span class="w"> </span><span class="p">%}</span>
432
+ </code></pre>
433
+ </div>
434
+
435
+ <h3 id="passing-references-to-yaml-files-as-parameter-values">Passing references to YAML files as parameter values</h3>
436
+
437
+ <p>Instead of passing string variables to the include, you can pass a reference to a YAML data file stored in the <code class="highlighter-rouge">_data</code> folder.</p>
438
+
439
+ <p>Here’s an example. In the <code class="highlighter-rouge">_data</code> folder, suppose you have a YAML file called <code class="highlighter-rouge">profiles.yml</code>. Its content looks like this:</p>
440
+
441
+ <div class="language-yaml highlighter-rouge">
442
+ <pre class="highlight"><code><span class="pi">-</span> <span class="s">name</span><span class="pi">:</span> <span class="s">John Doe</span>
443
+ <span class="s">login_age</span><span class="pi">:</span> <span class="s">old</span>
444
+ <span class="s">image</span><span class="pi">:</span> <span class="s">johndoe.jpg</span>
445
+
446
+ <span class="pi">-</span> <span class="s">name</span><span class="pi">:</span> <span class="s">Jane Doe</span>
447
+ <span class="s">login_age</span><span class="pi">:</span> <span class="s">new</span>
448
+ <span class="s">image</span><span class="pi">:</span> <span class="s">janedoe.jpg</span>
449
+ </code></pre>
450
+ </div>
451
+
452
+ <p>In the <code class="highlighter-rouge">_includes</code> folder, assume you have a file called <code class="highlighter-rouge">spotlight.html</code> with this code:</p>
453
+
454
+ <div class="language-liquid highlighter-rouge">
455
+ <pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>person<span class="w"> </span>in<span class="w"> </span>{{<span class="w"> </span>include.participants<span class="w"> </span>}}<span class="w"> </span><span class="p">%}</span>
456
+ <span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">person</span><span class="p">.</span><span class="nv">login_age</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">"new"</span><span class="w"> </span><span class="p">%}</span>
457
+ <span class="p">{{</span><span class="w"> </span><span class="nv">person</span><span class="p">.</span><span class="nv">name</span><span class="w"> </span><span class="p">}}</span>
458
+ <span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span>
459
+ <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
460
+ </code></pre>
461
+ </div>
462
+
463
+ <p>Now when you insert the <code class="highlighter-rouge">spotlight.html</code> include file, you can submit the YAML file as a parameter:</p>
464
+
465
+ <div class="highlighter-rouge">
466
+ <pre class="highlight"><code><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">include</span><span class="w"> </span><span class="err">spotlight.html</span><span class="w"> </span><span class="err">participants=site.data.profiles</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
467
+ </span></code></pre>
468
+ </div>
469
+
470
+ <p>In this instance, <code class="highlighter-rouge">site.data.profiles</code> gets inserted in place of <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">include.participants</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> in the include file, and the Liquid logic processes. The result will be <code class="highlighter-rouge">Jane Doe</code>.</p>
471
+
472
+
473
+
474
+
475
+
476
+
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+
486
+
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
497
+
498
+
499
+
500
+
501
+
502
+
503
+
504
+
505
+
506
+
507
+
508
+
509
+
510
+
511
+
512
+
513
+
514
+
515
+
516
+
517
+
518
+
519
+
520
+
521
+
522
+
523
+
524
+
525
+
526
+
527
+
528
+
529
+
530
+
531
+ <div class="section-nav">
532
+ <div class="left align-right">
533
+
534
+
535
+
536
+ <a href="/docs/templates/" class="prev">Back</a>
537
+
538
+ </div>
539
+ <div class="right align-left">
540
+
541
+
542
+
543
+ <a href="/docs/permalinks/" class="next">Next</a>
544
+
545
+ </div>
546
+ </div>
547
+ <div class="clear"></div>
548
+
549
+ </article>
550
+ </div>
551
+
552
+ <div class="unit one-fifth hide-on-mobiles">
553
+ <aside>
554
+
555
+ <h4>Getting Started</h4>
556
+ <ul>
557
+
558
+
559
+
560
+ <li class=""><a href="/docs/home/">Welcome</a></li>
561
+
562
+
563
+
564
+ <li class=""><a href="/docs/quickstart/">Quick-start guide</a></li>
565
+
566
+
567
+
568
+ <li class=""><a href="/docs/installation/">Installation</a></li>
569
+
570
+
571
+
572
+ <li class=""><a href="/docs/usage/">Basic Usage</a></li>
573
+
574
+
575
+
576
+ <li class=""><a href="/docs/structure/">Directory structure</a></li>
577
+
578
+
579
+
580
+ <li class=""><a href="/docs/configuration/">Configuration</a></li>
581
+
582
+ </ul>
583
+
584
+
585
+ <h4>Your Content</h4>
586
+ <ul>
587
+
588
+
589
+
590
+ <li class=""><a href="/docs/frontmatter/">Front Matter</a></li>
591
+
592
+
593
+
594
+ <li class=""><a href="/docs/posts/">Writing posts</a></li>
595
+
596
+
597
+
598
+ <li class=""><a href="/docs/drafts/">Working with drafts</a></li>
599
+
600
+
601
+
602
+ <li class=""><a href="/docs/pages/">Creating pages</a></li>
603
+
604
+
605
+
606
+ <li class=""><a href="/docs/static-files/">Static Files</a></li>
607
+
608
+
609
+
610
+ <li class=""><a href="/docs/variables/">Variables</a></li>
611
+
612
+
613
+
614
+ <li class=""><a href="/docs/collections/">Collections</a></li>
615
+
616
+
617
+
618
+ <li class=""><a href="/docs/datafiles/">Data Files</a></li>
619
+
620
+
621
+
622
+ <li class=""><a href="/docs/assets/">Assets</a></li>
623
+
624
+
625
+
626
+ <li class=""><a href="/docs/migrations/">Blog migrations</a></li>
627
+
628
+ </ul>
629
+
630
+
631
+ <h4>Customization</h4>
632
+ <ul>
633
+
634
+
635
+
636
+ <li class=""><a href="/docs/templates/">Templates</a></li>
637
+
638
+
639
+
640
+ <li class="current"><a href="/docs/includes/">Includes</a></li>
641
+
642
+
643
+
644
+ <li class=""><a href="/docs/permalinks/">Permalinks</a></li>
645
+
646
+
647
+
648
+ <li class=""><a href="/docs/pagination/">Pagination</a></li>
649
+
650
+
651
+
652
+ <li class=""><a href="/docs/plugins/">Plugins</a></li>
653
+
654
+
655
+
656
+ <li class=""><a href="/docs/themes/">Themes</a></li>
657
+
658
+
659
+
660
+ <li class=""><a href="/docs/extras/">Extras</a></li>
661
+
662
+ </ul>
663
+
664
+
665
+ <h4>Deployment</h4>
666
+ <ul>
667
+
668
+
669
+
670
+ <li class=""><a href="/docs/github-pages/">GitHub Pages</a></li>
671
+
672
+
673
+
674
+ <li class=""><a href="/docs/deployment-methods/">Deployment methods</a></li>
675
+
676
+
677
+
678
+ <li class=""><a href="/docs/continuous-integration/">Continuous Integration</a></li>
679
+
680
+ </ul>
681
+
682
+
683
+ <h4>Miscellaneous</h4>
684
+ <ul>
685
+
686
+
687
+
688
+ <li class=""><a href="/docs/troubleshooting/">Troubleshooting</a></li>
689
+
690
+
691
+
692
+ <li class=""><a href="/docs/sites/">Sites using Jekyll</a></li>
693
+
694
+
695
+
696
+ <li class=""><a href="/docs/resources/">Resources</a></li>
697
+
698
+
699
+
700
+ <li class=""><a href="/docs/upgrading/0-to-2/">Upgrading from 0.x to 2.x</a></li>
701
+
702
+
703
+
704
+ <li class=""><a href="/docs/upgrading/2-to-3/">Upgrading from 2.x to 3.x</a></li>
705
+
706
+ </ul>
707
+
708
+
709
+ <h4>Meta</h4>
710
+ <ul>
711
+
712
+
713
+
714
+ <li class=""><a href="/docs/contributing/">Contributing</a></li>
715
+
716
+
717
+
718
+ <li class=""><a href="/docs/maintaining/">Maintaining Jekyll</a></li>
719
+
720
+
721
+
722
+ <li class=""><a href="/docs/conduct/">Code of Conduct</a></li>
723
+
724
+
725
+
726
+ <li class=""><a href="/docs/history/">History</a></li>
727
+
728
+ </ul>
729
+
730
+
731
+ </aside>
732
+ </div>
733
+
734
+
735
+ <div class="clear"></div>
736
+
737
+ </div>
738
+ </section>
739
+
740
+
741
+ <footer>
742
+ <div class="grid">
743
+ <div class="unit one-third center-on-mobiles">
744
+ <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>
745
+ </div>
746
+ <div class="unit two-thirds align-right center-on-mobiles">
747
+ <p>
748
+ Proudly hosted by
749
+ <a href="https://github.com">
750
+ <img src="/img/footer-logo.png" width="100" height="30" alt="GitHub • Social coding">
751
+ </a>
752
+ </p>
753
+ </div>
754
+ </div>
755
+ </footer>
756
+
757
+ <script>
758
+ var anchorForId = function (id) {
759
+ var anchor = document.createElement("a");
760
+ anchor.className = "header-link";
761
+ anchor.href = "#" + id;
762
+ anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
763
+ anchor.title = "Permalink";
764
+ return anchor;
765
+ };
766
+
767
+ var linkifyAnchors = function (level, containingElement) {
768
+ var headers = containingElement.getElementsByTagName("h" + level);
769
+ for (var h = 0; h < headers.length; h++) {
770
+ var header = headers[h];
771
+
772
+ if (typeof header.id !== "undefined" && header.id !== "") {
773
+ header.appendChild(anchorForId(header.id));
774
+ }
775
+ }
776
+ };
777
+
778
+ document.onreadystatechange = function () {
779
+ if (this.readyState === "complete") {
780
+ var contentBlock = document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
781
+ if (!contentBlock) {
782
+ return;
783
+ }
784
+ for (var level = 1; level <= 6; level++) {
785
+ linkifyAnchors(level, contentBlock);
786
+ }
787
+ }
788
+ };
789
+ </script>
790
+
791
+
792
+ <!-- Gauges (http://get.gaug.es/) -->
793
+ <script>
794
+ var _gauges = _gauges || [];
795
+ (function() {
796
+ var t = document.createElement('script');
797
+ t.type = 'text/javascript';
798
+ t.async = true;
799
+ t.id = 'gauges-tracker';
800
+ t.setAttribute('data-site-id', '503c5af6613f5d0f19000027');
801
+ t.src = '//secure.gaug.es/track.js';
802
+ var s = document.getElementsByTagName('script')[0];
803
+ s.parentNode.insertBefore(t, s);
804
+ })();
805
+ </script>
806
+
807
+
808
+
809
+ <!-- Google Analytics (https://www.google.com/analytics) -->
810
+ <script>
811
+ !function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){
812
+ (j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k),
813
+ L=e.getElementsByTagName(k)[0],l.src='//www.google-analytics.com/analytics.js',
814
+ L.parentNode.insertBefore(l,L)}(window,document,'script','ga');
815
+
816
+ ga('create', 'UA-50755011-1', 'jekyllrb.com');
817
+ ga('send', 'pageview');
818
+
819
+ </script>
820
+
821
+
822
+
823
+ </body>
824
+ </html>