このページを改善する

解釈の順序

2017年1月29日 tomjoht

Jekyllの主な仕事は、生のテキストファイルを静的Webサイトに変換することです。これは、静的なHTML出力を生成する際に、Liquid、Markdown、およびその他の変換をレンダリングすることによって行われます。

この変換プロセスでは、Jekyllの解釈の順序を理解することが重要です。「解釈の順序」とは、何がレンダリングされるか、どのような順序でレンダリングされるか、コンテンツの変換にどのようなルールが適用されるかを意味します。

要素が変換されない場合は、解釈の順序を分析することで問題のトラブルシューティングを行うことができます。

解釈の順序

Jekyllは次の順序でサイトを変換します

1. サイト変数。Jekyllはファイル全体を調べて、site、page、post、コレクションオブジェクトなどのサイト変数を設定します。（これらのオブジェクトから、Jekyllはパーマリンク、タグ、カテゴリ、その他の詳細の値を決定します。）

2. Liquid。Jekyllは、フロントマターを含むページ内のLiquidフォーマットを処理します。Liquidは次のように識別できます
   • Liquidタグは{%で始まり、%}で終わります。例：{% highlight %}または{% seo %}。タグはブロックを定義することも、インラインにすることもできます。ブロック定義タグには、対応する終了タグ（例：{% endhighlight %}）も付属します。
   • Liquid変数は二重中括弧で始まり、終わります。例：{{ site.myvariable }}または{{ content }}。
   • Liquidフィルタはパイプ文字（|）で始まり、変数文字列の後の**Liquid変数**内でのみ使用できます。例：{{ "css/main.css" | relative_url }}のrelative_urlフィルタ。

3. Markdown。Jekyllは、設定ファイルで指定されたMarkdownフィルタを使用して、MarkdownをHTMLに変換します。Jekyllが変換するには、ファイルにMarkdownファイル拡張子とフロントマターが必要です。

4. レイアウト。Jekyllは、ページのフロントマターで指定された（または設定ファイルで指定された）レイアウトにコンテンツをプッシュします。各ページのコンテンツは、レイアウト内の{{ content }}タグにプッシュされます。

5. ファイル。Jekyllは、生成されたコンテンツを_siteのディレクトリ構造内のファイルに書き込みます。ページ、投稿、コレクションは、パーマリンク設定に基づいて構造化されます。_で始まるディレクトリ（_includesや_dataなど）は、通常、出力では非表示になります。

誤った設定が問題を引き起こすシナリオ

ほとんどの場合、Jekyllサイトを構築する際に解釈の順序について考える必要はありません。これらの詳細は、何かがレンダリングされない場合にのみ知ることが重要になります。

次のシナリオは、発生する可能性のある問題を強調しています。これらの問題は、解釈の順序の誤解から生じるものであり、簡単に修正できます。

変数がレイアウトで割り当てられているため、ページの変数がレンダリングされない

レイアウトファイル（_layouts/default.html）に変数が割り当てられているとします

{% assign myvar = "joe" %}

レイアウトを使用するページで、その変数を参照します

{{ myvar }}

ページの解釈の順序は、最初にLiquidをレンダリングし、後でレイアウトを処理することであるため、変数はレンダリングされません。Liquidレンダリングが発生したとき、変数割り当ては使用できません。

コードを機能させるには、変数割り当てをページのフロントマターに配置します。

インクルードファイル内のMarkdownが処理されない

_includes/mycontent.mdにMarkdownファイルがあるとします。Markdownファイルには、Markdownフォーマットがあります

This is a list:
* first item
* second item

次のようにHTMLファイルにファイルを含めます

{% include mycontent.md %}

最初にLiquid（includeタグ）が処理され、mycontent.mdがHTMLファイルに挿入されるため、Markdownは処理されません。*その後*、Markdownが処理されます。

しかし、コンテンツは*HTML*ページに含まれているため、Markdownはレンダリングされません。Markdownフィルタは、Markdownファイル内のコンテンツのみを処理します。

コードを機能させるには、HTMLファイルに挿入されるインクルードでHTMLフォーマットを使用します。

highlightタグはMarkdownを処理する必要がないことに注意してください。インクルードに次が含まれているとします

{% highlight javascript %}
console.log('alert');
{% endhighlight %}

highlightタグは*Liquid*です。（Liquidは構文の強調表示のためにコンテンツをRougeに渡します。）その結果、このコードは実際に構文の強調表示されたHTMLに変換されます。Jekyllは、highlightタグを処理するためにMarkdownフィルタを必要としません。

JavaScriptと混合されたLiquidはレンダリングされない

LiquidのassignタグとJavaScriptを次のように混在させたとします

<button onclick="someFunction()">Click me</button>

<p id="intro"></p>

<script>
{% assign someContent = "This is some content" %}
function someFunction() {
    document.getElementById("intro").innerHTML = someContent;
}
</script>

assignタグはサイトのLiquidレンダリングフェーズでのみ使用できるため、これは機能しません。このJavaScriptの例では、ユーザーがHTMLページのボタン（「クリックしてください」）をクリックすると、スクリプトが実行されます。その時点で、Liquidロジックは使用できなくなるため、assignタグは何も返しません。

ただし、Jekyllのサイト変数またはLiquidを使用して、後で実行されるスクリプトに値を*設定*できます。たとえば、フロントマターにsomeContent: "これはコンテンツです"というプロパティがあるとします。次のようにすることができます

<button onclick="someFunction()">Click me</button>

<p id="intro"></p>

<script>

function someFunction() {
    document.getElementById("intro").innerHTML = "{{ page.someContent }}";
}
</script>

Jekyllがサイトを構築すると、このsomeContentプロパティがスクリプトの値を設定し、{{ page.someContent }}を"これはコンテンツです"に変換します。

覚えておくべき重要なことは、LiquidはJekyllがサイトを構築するときにレンダリングされるということです。ユーザーがブラウザでイベントを実行する実行時には、Liquidは使用できません。

YAMLでLiquidを使用する場合の注意

もう1つ覚えておくべき詳細があります。YAMLファイルまたはフロントマターに埋め込まれている場合、Liquidはレンダリングされません。（これは解釈の順序とは関係ありませんが、要素のレンダリングに関するよくある質問であるため、言及する価値があります。）

たとえば、_data/mydata.ymlファイルにhighlightタグがあるとします

myvalue: >
  {% highlight javascript %}
  console.log('alert');
  {% endhighlight %}

ページで、値を挿入しようとします

{{ site.data.mydata.myvalue }}

これは、構文が強調表示されたコードサンプルではなく、文字列としてのみレンダリングされます。コードをレンダリングするには、代わりにインクルードを使用することを検討してください。

戻る

次へ