[ 目次 ]

• はじめに
• 関連投稿用のテンプレートを用意
• scssでスタイルを調整
• configに表示件数と設定
• 関連投稿のテンプレート読み込み

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

この記事は過去に運用していたブログからの移行記事になります。

今回はjekyllで作成した投稿ページに関連投稿を表示します。
投稿ページのタグに関連している投稿を指定された件数表示していきましょう。

関連投稿用のテンプレートを用意

以下のような_includes/related_posts.htmlファイルを作成します。

<!-- _includes/related_posts.html -->
{% assign max_related_count = site.related_post_count %}
{% assign related_counter = 0 %}

{% for post in site.posts %}
  {% assign same_tag_count = 0 %}
  {% for tag in post.tags %}
    {% if post.url != page.url %}
      {% if page.tags contains tag %}
        {% assign same_tag_count = same_tag_count | plus: 1 %}
      {% endif %}
    {% endif %}
  {% endfor %}

  {% if same_tag_count > 0 %}
    {% if 0 == related_counter %}
      <div class="related">
          <h2>関連情報</h2>
    {% endif %}
    <div class="related-posts">
      <h3><a href="{{ post.url | relative_url }}" title="{{ post.title | escape }}">{{ post.title | escape }}</a></h3>
      <time >{{ post.date | date: date_format }}</time>
    </div>
    {% assign related_counter = related_counter | plus: 1 %}
    {% if related_counter >= max_related_count %}
        </div>
      </div>
      {% break %}
    {% endif %}
    {% if forloop.last %}
        </div>
      </div>
    {% endif %}
  {% endif %}
{% endfor %}

scssでスタイルを調整

スタイルを調整します。assets/main.scssに以下のスタイルを設定。
（適宜スタイルの記述場所は変更してください。）

.related {
    .related-posts {
        margin-bottom: 15px;

        h3 {
            font-size: 18px;
            margin-bottom: 0;
        }

        time {
            font-size: 14px;
            color: #828282;
        }
    }
}

configに表示件数と設定

_config.ymlファイルに関連投稿のMax表示件数を設定します。

# config.yml
related_post_count: 5

関連投稿のテンプレート読み込み

ここまでできたら後はpost.htmlから読み込むだけです。
関連投稿を表示したい場所に、related_posts.htmlをincludeします

<!-- post.html -->
{% include related_posts_l.html %}

こちらの画像のように関連投稿を表示することができます。
今回は独自実装しましたが、alfanick/jekyll-related-posts というプラグインもあります。
こちらも今後試してみたいと思います。