Jekyllのブログでタグ機能を実装する

投稿日: 2016-03-13

Github Pages上のJekyllブログで記事へのタグ付けおよびタグ一覧ページを作成したい 公式ページなどを見てもあまりスマートなやり方が載っていなかったので、ここに書き残しておく。

設定

記事へのタグ設定は公式ページなどに書いてある通り、それぞれの記事の先頭に以下のように書くことで簡単にできる。

title: 記事のタイトル
tags: jekyll blog

または

title: 記事のタイトル
tags:
  - jekyll
  - blog

一覧ページ

Pageとして作成する。愚直に全記事ループして設定されてあるタグを抽出して並べる。


{%for post in site.posts %}
  {% if post.tags contains page.tag %}
    <li><span>{{ post.date | date:"%Y-%m-%d" }}</span>
    <a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endif %}
{% endfor %}

サイドバーへの表示

他にもっといいやり方がある気がするが、_dataディレクトリに以下のようなデータファイルを作ってループで回している。

-
  name: github-pages
  title: Github Pages
-
  name: blog
  title: Blog
-
  name: sns
  title: SNS

サイドバー


<h2>Tags</h2>
<div class="collection">
  {% for tag in site.data.tags %}
  <a href="/{{ tag.name }}.html" class="collection-item">{{ tag.title }}</a>
  {% endfor %}
</div>

参考リンク