タグフィルタ
標準のLiquid タグはすべてサポートされています。Jekyllには、サイト構築を支援するいくつかの組み込みタグがあります。プラグインを使用して独自のタグを作成することもできます。
インクルード
サイト全体で繰り返し使用するページスニペットがある場合、インクルードを使用すると、保守性が向上します。
コードスニペットの強調表示
Jekyllは、Rougeのおかげで、100以上の言語の構文強調表示を組み込みでサポートしています。Rougeは、Jekyll 3以降のデフォルトのハイライターです。
Pygmentsの使用は非推奨となり、Jekyll 4ではサポートされていません。設定`highlighter: pygments`は、Rubyで記述され、Pygmentsのスタイルシートと100%互換性のある*Rouge*を使用するように自動的にフォールバックします。
構文強調表示付きのコードブロックをレンダリングするには、コードを次のように囲みます。
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
highlight
タグの引数(上記の例ではruby
)は、言語識別子です。強調表示する言語に使用する適切な識別子を見つけるには、Rouge wikiで「略名」を探してください。
Jekyllは、コードブロック内のすべてのLiquidフィルタを処理します。
中括弧を含む言語を使用している場合は、コードの周囲に`{% raw %}`と`{% endraw %}`タグを配置する必要があります。Jekyll 4.0以降では、フロントマターに`render_with_liquid: false`を追加して、特定のドキュメントに対してLiquidを完全に無効にすることができます。
行番号
highlight
には、オプションのlinenos
という2番目の引数があります。linenos
引数を指定すると、強調表示されたコードに行番号が含まれるようになります。たとえば、次のコードブロックには、各行の横に番号が表示されます。
{% highlight ruby linenos %}
def foo
puts 'foo'
end
{% endhighlight %}
特定の行のマーク4.4.0
オプションの引数mark_lines
を使用して、コードスニペットの特定の行にマークを付けることができます。この引数は、二重引用符で囲まれた、スペースで区切られた行番号のリストを取ります。たとえば、次のコードブロックでは、1行目と2行目がマークされますが、3行目はマークされません。
{% highlight ruby mark_lines="1 2" %}
def foo
puts 'foo'
end
{% endhighlight %}
マークされた行には、hll
というデフォルトのクラス名が適用されます。
構文強調表示のスタイルシート
強調表示を表示するには、強調表示スタイルシートを含める必要があります。PygmentsまたはRougeの場合、Pygmentsのスタイルシートを使用できます。ここまたはリポジトリにサンプルギャラリーがあります。
CSSファイル(例:native.css
)をcssディレクトリにコピーし、構文ハイライターのスタイルをmain.css
にインポートします。
@import "native.css";
リンク
Jekyll 4.0以降では、link
タグとpost_url
タグにsite.baseurl
をプリペンドする必要はありません。
ページへのリンク
投稿、ページ、コレクションアイテム、またはファイルへのリンクを作成するには、link
タグを使用すると、指定したパスに対する正しいパーマリンクURLが生成されます。たとえば、link
タグを使用してmypage.html
へのリンクを作成した場合でも、パーマリンクスタイルを変更してファイル拡張子を含めたり省略したりしても、link
タグによって生成されるURLは常に有効です。
link
タグを使用する場合は、ファイルの元の拡張子を含める必要があります。いくつかの例を以下に示します。
{% link _collection/name-of-document.md %}
{% link _posts/2016-07-26-name-of-post.md %}
{% link news/index.html %}
{% link /assets/files/doc.pdf %}
Markdownでリンクを作成するには、link
タグを次のように使用することもできます。
[Link to a document]({% link _collection/name-of-document.md %})
[Link to a post]({% link _posts/2016-07-26-name-of-post.md %})
[Link to a page]({% link news/index.html %})
[Link to a file]({% link /assets/files/doc.pdf %})
投稿、ページ、またはコレクションへのパスは、既存のページから他のページへのパスではなく、ルートディレクトリ(configファイルがある場所)からファイルへの相対パスとして定義されます。
たとえば、pages/folder1/folder2
に格納されているpage_a.md
から、pages/folder1
に格納されているpage_b.md
へのリンクを作成するとします。リンク内のパスは../page_b.html
ではなく、/pages/folder1/page_b.md
になります。
パスが不明な場合は、ページに{{ page.path }}
を追加すると、パスが表示されます。
link
タグまたはpost_url
タグを使用する大きな利点の1つは、リンクの検証です。リンクが存在しない場合、Jekyllはサイトを構築しません。これは良いことです。壊れたリンクを修正できるためです(壊れたリンクのあるサイトを構築してデプロイすることを許可するのではなく)。
注意:link
タグにはフィルタを追加できません。たとえば、{% link mypage.html | append: "#section1" %}
のように、Liquidフィルタを使用して文字列を追加することはできません。ページ上のセクションへのリンクを作成するには、通常のHTMLまたはMarkdownのリンク作成テクニックを使用する必要があります。
リンクするファイルの名前は、実際のファイル名ではなく変数として指定できます。たとえば、ページのフロントマターに変数を次のように定義したとします。
---
title: My page
my_variable: footer_company_a.html
---
その変数をリンクで参照できます。
{% link {{ page.my_variable }} %}
この例では、link
タグはfooter_company_a.html
ファイルへのリンクをレンダリングします。
投稿へのリンク
サイトに投稿へのリンクを含めたい場合は、post_url
タグを使用すると、指定した投稿に対する正しいパーマリンクURLが生成されます。
{% post_url 2010-07-21-name-of-post %}
投稿をサブディレクトリに整理する場合は、投稿へのサブディレクトリパスを含める必要があります。
{% post_url /subdir/2010-07-21-name-of-post %}
post_url
タグを使用する場合は、ファイル拡張子を含める必要はありません。
Markdownで投稿へのリンクを作成するには、このタグを使用することもできます。
[Name of Link]({% post_url 2010-07-21-name-of-post %})