ブログの記事内にその記事と関連している他の記事を一覧として掲載したいときがあると思います。

たとえば、JavaScriptというタグをある記事に設定していたら、他の記事で同じようにJavaScriptのタグを設定している記事を表示させたいような場合です。

Jekyllの場合はテンプレートに以下のように書くことで実現可能です。

このブログの下部にある「Jekyllに関する他の記事を読む」や「最近の記事を読む」はこの方法で表示させています。

テンプレートエンジンはLiquidになるので、その文法にしたがって書いていくことになります。

いくつか繰り返しや分岐があるのでわかりにくいですが、最初のfor tag in site.tagsで設定しているタグの種類の数だけ繰り返し処理をしています。

その中でif page.tags contains tag[0] and tag[1].size > 1の条件に合致する場合のみ、リンク一覧を表示するようにします。

最初のpage.tags contains tag[0]は記事に設定しているタグがループで取得したタグと一致しているかをチェックしています。

その次のtag[1].size > 1はタグ配下の記事が二つ以上ないと、「その他のページ」は表示しても意味がないために設定しました。

そして、assign related_posts = tag[1] | sort: "date" | reverseで記事を発行日付の降順で並び替えをしています。


{% for tag in site.tags %}
  {% if page.tags contains tag[0] and tag[1].size > 1 %}
    {% assign related_posts = tag[1] | sort: "date" | reverse %}
    <h2>{{ tag[0] }}に関する他の記事を読む</h2>
    <ul>
      {% for post in related_posts limit:5 %}
        {% if post.title != page.title %}
          <li><a href="{{ post.url }}">{{ post.title }}</a></li>
        {% endif %}
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

こっちは最近の投稿を一覧として表示させるパターン。


<h2>最近の記事を読む</h2>
<ul>
  {% assign recent_posts = site.posts | where_exp:"post", "post.title != page.title" | sort: "date" | reverse %}
  {% for post in recent_posts limit:5 %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

この記事の環境情報

  • jekyll 4.3.1
  • 恵方巻きを食べてしまった