index.html in jekyll-docs-3.6.0

- old
+ new

@@ -2,32 +2,32 @@
 <html lang="en-US">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="generator" content="Jekyll v3.5.2">
+  <meta name="generator" content="Jekyll v3.6.0">
   <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
   <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <!-- Begin Jekyll SEO tag v2.2.3 -->
+  <!-- Begin Jekyll SEO tag v2.3.0 -->
 <title>Order of interpretation | Jekyll • Simple, blog-aware, static sites</title>
 <meta property="og:title" content="Order of interpretation">
 <meta property="og:locale" content="en_US">
 <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.">
 <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.">
 <link rel="canonical" href="https://jekyllrb.com/tutorials/orderofinterpretation/">
 <meta property="og:url" content="https://jekyllrb.com/tutorials/orderofinterpretation/">
 <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
 <meta property="og:type" content="article">
-<meta property="article:published_time" content="2017-08-12T13:36:54-07:00">
+<meta property="article:published_time" content="2017-10-24T08:07:43-07:00">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:site" content="@jekyllrb">
 <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
 <script type="application/ld+json">
-{"@context":"http://schema.org","@type":"BlogPosting","headline":"Order of interpretation","datePublished":"2017-08-12T13:36:54-07:00","dateModified":"2017-08-12T13:36:54-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>
+{"name":null,"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.","url":"https://jekyllrb.com/tutorials/orderofinterpretation/","headline":"Order of interpretation","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/orderofinterpretation/"},"@context":"http://schema.org"}</script>
 <!-- End Jekyll SEO tag -->
 
   <!--[if lt IE 9]>
   <script src="/js/html5shiv.min.js"></script>
   <script src="/js/respond.min.js"></script>
@@ -154,22 +154,22 @@
   </li>
   <li>
 <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:
     <ul>
       <li>
-<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>
+<strong>Liquid tags</strong> start with <code class="highlighter-rouge">{%</code> and end with a <code class="highlighter-rouge">%}</code>. For example: <code class="highlighter-rouge">{% highlight %}</code> or <code class="highlighter-rouge">{% seo %}</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">{% endhighlight %}</code>.</li>
       <li>
-<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>
+<strong>Liquid variables</strong> start and end with double curly braces. For example: <code class="highlighter-rouge">{{ site.myvariable }}</code> or <code class="highlighter-rouge">{{ content }}</code>.</li>
       <li>
-<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>
+<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">{{ "css/main.css" | relative_url }}</code>.</li>
     </ul>
   </li>
   <li>
     <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>
   </li>
   <li>
-    <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>
+    <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">{{ content }}</code> tags within the layouts.</p>
   </li>
   <li>
 <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>
 </ol>
 
@@ -181,120 +181,102 @@
 
 <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>
 
 <p>In your layout file (<code class="highlighter-rouge">_layouts/default.html</code>), suppose you have a variable assigned:</p>
 
-<div class="highlighter-rouge">
-<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">
-</span></code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% assign myvar = "joe" %}
+</code></pre></div></div>
 
 <p>On a page that uses the layout, you reference that variable:</p>
 
-<div class="highlighter-rouge">
-<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">
-</span></code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{{ myvar }}
+</code></pre></div></div>
 
 <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>
 
 <p>To make the code work, you could put the variable assignment into the page’s front matter.</p>
 
 <h3 id="markdown-in-include-file-not-processed">Markdown in include file not processed</h3>
 
 <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>
 
-<div class="language-markdown highlighter-rouge">
-<pre class="highlight"><code>This is a list:
+<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>This is a list:
 <span class="p">*</span> first item
 <span class="p">*</span> second item
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>You include the file into an HTML file as follows:</p>
 
-<div class="language-liquid highlighter-rouge">
-<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>
-</code></pre>
-</div>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="nv">mycontent</span><span class="p">.</span><span class="nv">md</span><span class="w"> </span><span class="p">%}</span>
+</code></pre></div></div>
 
 <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>
 
 <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>
 
 <p>To make the code work, use HTML formatting in includes that are inserted into HTML files.</p>
 
 <p>Note that <code class="highlighter-rouge">highlight</code> tags don’t require Markdown to process. Suppose your include contains the following:</p>
 
-<div class="language-liquid highlighter-rouge">
-<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>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><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>
 console.log('alert');
 <span class="p">{%</span><span class="w"> </span><span class="nt">endhighlight</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <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>
 
 <h3 id="liquid-mixed-with-javascript-isnt-rendered">Liquid mixed with JavaScript isn’t rendered</h3>
 
 <p>Suppose you try to mix Liquid’s <code class="highlighter-rouge">assign</code> tag with JavaScript, like this:</p>
 
-<div class="language-javascript highlighter-rouge">
-<pre class="highlight"><code><span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">"someFunction()"</span><span class="o">&gt;</span><span class="nx">Click</span> <span class="nx">me</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
+<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">"someFunction()"</span><span class="o">&gt;</span><span class="nx">Click</span> <span class="nx">me</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
 </span>
 <span class="o">&lt;</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"intro"</span><span class="o">&gt;&lt;</span><span class="sr">/p</span><span class="err">&gt;
 </span>
 <span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
 <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>
 <span class="kd">function</span> <span class="nx">someFunction</span><span class="p">()</span> <span class="p">{</span>
     <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>
 <span class="p">}</span>
 <span class="o">&lt;</span><span class="sr">/script</span><span class="err">&gt;
-</span></code></pre>
-</div>
+</span></code></pre></div></div>
 
 <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>
 
 <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>
 
-<div class="language-js highlighter-rouge">
-<pre class="highlight"><code><span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">"someFunction()"</span><span class="o">&gt;</span><span class="nx">Click</span> <span class="nx">me</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
+<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="s2">"someFunction()"</span><span class="o">&gt;</span><span class="nx">Click</span> <span class="nx">me</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
 </span>
 <span class="o">&lt;</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"intro"</span><span class="o">&gt;&lt;</span><span class="sr">/p</span><span class="err">&gt;
 </span>
 <span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
 
 <span class="kd">function</span> <span class="nx">someFunction</span><span class="p">()</span> <span class="p">{</span>
     <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>
 <span class="p">}</span>
 <span class="o">&lt;</span><span class="sr">/script</span><span class="err">&gt;
-</span></code></pre>
-</div>
+</span></code></pre></div></div>
 
-<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>
+<p>When Jekyll builds the site, this <code class="highlighter-rouge">someContent</code> property populates the script’s values, converting <code class="highlighter-rouge">{{ page.someContent }}</code> to <code class="highlighter-rouge">"This is some content"</code>.</p>
 
 <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>
 
 <h2 id="note-about-using-liquid-in-yaml">Note about using Liquid in YAML</h2>
 
 <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>
 
 <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>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>myvalue: &gt;
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>myvalue: &gt;
   {% highlight javascript %}
   console.log('alert');
   {% endhighlight %}
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>On a page, you try to insert the value:</p>
 
-<div class="highlighter-rouge">
-<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">
-</span></code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{{ site.data.mydata.myvalue }}
+</code></pre></div></div>
 
 <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>
 
           
 