diff --git a/docs/_tutorials/orderofinterpretation.md b/docs/_tutorials/orderofinterpretation.md index e4e003be..bf3614a1 100644 --- a/docs/_tutorials/orderofinterpretation.md +++ b/docs/_tutorials/orderofinterpretation.md @@ -20,11 +20,11 @@ Jekyll converts your site in the following order: 3. **Markdown**. 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. -4. **Layout**. 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 `{% raw %}{{content}}{% endraw %}` tags within the layouts. +4. **Layout**. 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 `{% raw %}{{ content }}{% endraw %}` tags within the layouts. 5. **Files**. Jekyll writes the generated content into files in the [directory structure]({% link _docs/structure.md %}) in `_site`. Pages, posts, and collections get structured based on their [permalink]({% link _docs/permalinks.md %}) setting. Directories that begin with `_` (such as `_includes` and `_data`) are usually hidden in the output. -## Scenarios where incorrect configurations yield problems +## Scenarios where incorrect configurations create problems 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. @@ -41,7 +41,7 @@ In your layout file (`_layouts/default.html`), suppose you have a variable assig On a page that uses the layout, you reference that variable: ``` -{% raw %}{{myvar}}{% endraw %} +{% raw %}{{ myvar }}{% endraw %} ``` 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. @@ -53,15 +53,16 @@ To make the code work, you could put the variable assignment into the page's fro In `_data/mydata.yml`, suppose you have this mapping: ``` -{% raw %}somevalue: {{myvar}}{% endraw %} +{% raw %}somevalue: {{ myvar }}{% endraw %} ``` On a page, you try to insert this value: ``` -{% raw %}{{site.data.mydata.somevalue}}{% endraw %} +{% raw %}{{ site.data.mydata.somevalue }}{% endraw %} ``` -Nothing renders because first the site variables populate, and then Liquid renders. When the site variables populate, the value for `{% raw %}{{site.data.mydata.somevalue}}{% endraw %}` is simply `{% raw %}{{myvar}}{% endraw %}`, which registers as a string and gets printed as a string. You can't use Liquid in data files. + +This renders as a string (`{% raw %}"{{ site.data.mydata.somevalue }}{% endraw %}"` rather than the variable's value. This is because first the site variables populate, and then Liquid renders. When the site variables populate, the value for `{% raw %}{{ site.data.mydata.somevalue }}{% endraw %}` is simply `{% raw %}{{ myvar }}{% endraw %}`, which registers as a string. You can't use Liquid in data files. Similarly, suppose you have a `highlight` tag in your `_data/mydata.yml` file: @@ -75,7 +76,7 @@ Similarly, suppose you have a `highlight` tag in your `_data/mydata.yml` file: On a page, you try to insert the value: ``` -{% raw %}{{site.data.mydata.myvalue}}{% endraw %} +{% raw %}{{ site.data.mydata.myvalue }}{% endraw %} ``` This renders as a string for the same reasons described above. When the `site.data.mydata.myvalue` tag populates, the value gets stored as a string and printed to the page as a string. @@ -102,9 +103,9 @@ The Markdown is not processed because first the Liquid (`include` tag) gets proc But because the content is included into an *HTML* page, the Markdown isn't rendered. The Markdown filter processes content only in Markdown files. -To make the code work, use HMTL formatting in includes inserted into HTML files. +To make the code work, use HMTL formatting in includes that are inserted into HTML files. -However, note that `highlight` tags don't require Markdown to process. Suppose your include contains the following: +Note that `highlight` tags don't require Markdown to process. Suppose your include contains the following: ```liquid {% raw %}{% highlight javascript %} @@ -116,18 +117,38 @@ The `highlight` tag *is* Liquid. (Liquid passes the content to Rouge or Pygments ### Liquid mixed with JavaScript isn't rendered -Suppose you try to mix Liquid with JavaScript, like this: +Suppose you try to mix Liquid's `assign` tag with JavaScript, like this: -```liquid -{% raw %}if page.type == "home" { - $("intro").addClass("bright"); -elsif page.type == "normal" { - $("intro").addClass("muted"); - }{% endraw %} +```javascript +{% raw %} + +
+ +{% endraw %} ``` -The Liquid renders long before the page gets converted to HTML. So when JavaScript executes in the browser, the Liquid is no longer present. +This won't work because the `assign` 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 page. At that time, the Liquid logic is no longer available, so the `assign` tag wouldn't return anything. -You can never mix Liquid with JavaScript because Liquid processes when the site builds. In contrast, JavaScript processes in the browser when a user interacts with your site. +However, you can use Jekyll's site variables or Liquid to *populate* a script that is executed at a later time. For example, suppose you have the following property in your front matter: `someContent: "This is some content"`. You could do this: -To make the code work, don't mix Liquid with JavaScript. If you need the code to execute in real-time in the browser, use JavaScript. +```js +{% raw %} + + + +{% endraw %} +``` + +When Jekyll builds the site, this `someContent` property populates the script's values, converting `{% raw %}{{ page.someContent }}{% endraw %}` to `"This is some content"`. + +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.