Jekyllサイトにシンプルなタグ・カテゴリのリストを実装 #CSS

経緯

自分のJekyllサイトのブログにタグをつけたい。
Github Pagesにデプロイするため、プラグインは使用せずシンプルな実装にしたい。

実装目標

投稿メタ（日時とタグ）の部分テンプレートを作る。
簡単なタグクラウドの部分テンプレートを作る。
タグでソートされた投稿リスト専用のページを作る。

実装方法

1. 各投稿のYAML Front Matterにタグを追加

これで、Jekyllの変数、site.tagsとpage.tagsにより
タグを取得できるようになる。

_posts/2016-05-07-implementing-tags-in-jekyll-site.md

---
layout: post
title: Implementing tags in Jekyll site
tags:
- jekyll
---

...

2. 投稿メタ（日時とタグ）の部分テンプレートを作成

再利用性を考慮して、部分テンプレート_include/post_meta.htmlを作った。
例えば、僕のサイトの場合、各投稿タイトルの下に置いている。

_include/post_meta.html

{% comment %}
<!--
Obtain time and tags that are associated with current page/post.
-->
{% endcomment %}

{% if post %}
  {% assign date = post.date %}
  {% assign tags = post.tags %}
{% else %}
  {% assign date = page.date %}
  {% assign tags = page.tags %}
{% endif %}

<span class="post-meta">
  <time
    datetime="{{ date | date_to_xmlschema }}"
    class="post-date">
    {{ date | date_to_string }}
  </time>

  {% comment %}
  <!--
  Display all the tag names that link to a corresponding section of the Tags page.
  -->
  {% endcomment %}
  <div
    class="post-tags">
    {% for tag in tags %}
      <a href="{{ site.baseurl }}/tags#{{ tag | slugize }}">
        {{ tag }}
      </a>
    {% endfor %}
  </div>
</span>

3. 簡単なタグクラウドの部分テンプレートを作成

単純に全てのタグをインラインでリスト化した。オプションとしてタグのリストを渡すことができるが、
何も渡さなければsite.tagsからタグ名の取得する仕様にした。タグクラウドのタグをクリックすることにより
投稿リストページ（後述のtags.html）の該当するリストへ移動することができる。

_include/tag_cloud.html

{% comment %}
<!--
- If tag_names array is not passed in as argument,
  - Create an empty array,
  - Obtain a tag name and push it to the array, and
  - Sort the tag names.
- List tags as a tag cloud.
-->
{% endcomment %}

{% if include.tag_names %}
  {% assign tag_names = include.tag_names %}

{% else %}
  {% assign tag_names = "" | split: "|"  %}

  {% for posts_by_tag in site.tags %}
    {% assign tag_names = tag_names | push: posts_by_tag.first %}
  {% endfor %}

  {% assign tag_names = tag_names | sort %}
{% endif %}

<ul class="tag-cloud">
  {% for tag_name in tag_names %}
    <li>
      <a href="{{ baseurl }}/tags#{{ tag_name | slugize }}">
        {{ tag_name }}
      </a>
    </li>
  {% endfor %}
</ul>

4. タグでソートされた投稿リスト専用のページを作る。

ルートディレクトリにtags.htmlを作成。本ページ上部にはタグクラウドを置き、
その下に各タグごとに投稿エントリーのリストを表示する。

tags.html

---
layout: page
title: Posts By Tags
permalink: /tags
---

{% comment %}
<!--
- Create an empty array.
- Obtain a tag name and push it to the array.
- Sort the tag names.
- List tags as a tag cloud.
-->
{% endcomment %}

{% assign tag_names = "" | split: "|"  %}

{% for posts_by_tag in site.tags %}
  {% assign tag_names = tag_names | push: posts_by_tag.first %}
{% endfor %}

{% assign tag_names = tag_names | sort %}

{% include tag_cloud.html tag_names=tag_names %}

<hr>

<section class="posts-by-tags">
  {% for tag_name in tag_names %}
    <div>
      <h3 id="{{ tag_name }}">
        {{ tag_name | capitalize | replace: "_", " " }}
      </h3>

      {% for post in site.tags[tag_name] %}
        <a href="{{ post.url | prepend: baseurl }}">
          {{ post.title }}
        </a>
      {% endfor %}
    </div>
  {% endfor %}
</section>

5. 適当にスタイリング

@mixin post-tag {
  padding: 0 .3rem;
  margin: 0 .1rem;
  background: $link-color;
  color: white;
  &:hover {
    text-decoration: none;
  }
}

/**
 *  Meta data line below post title
 */
.post-meta {
  display: block;
  margin-top: -.3rem;
  margin-bottom: 1rem;
  color: #9a9a9a;
  time {
    margin-right: .5rem;
  }
  .post-tags {
    display: inline-block;
    a {
      @include post-tag;
      font-size: .8rem;
    }
  }
}

/**
 * Styles for _pages/tags.html
 */
.tag-cloud {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: inline-block;
    a {
      @include post-tag;
    }
  }
}