スポンサーリンク
Date: 2021/04/21 | Author: 鈴木俊吾(すずしん) | Categories:  blog  blog/jekyll 

『Jekyll』でブログ記事に関連記事リストを表示する方法【動画解説あり】

『Jekyll』でブログ記事に関連記事リストを表示する方法【動画解説あり】

こんにちは、鈴木俊吾(すずしん)です。

このブログは、Static Site Generatorの『Jekyll』で制作しています。
『Jekyll』の仕様について学びつつ、少しずつ機能拡張をしています。

今回は、ブログの個別記事に『関連記事リスト』を表示する機能を実装してみました。
今見ている記事と、タグが一致する記事を関連記事リストとして表示するものです。
結構シンプルな実装にしたのですが…。
意外と便利に使えるような気がしていますね。

せっかく機能を実装してみましたので…。
ブログ記事として、一応シェアしておけば何かと役に立てるかも?
そう考えた私は、こうしてまとめてみることにしたのです。

この記事を読むことで、『Jekyll』製ブログに、関連記事リストを表示する機能を実装できます。
基本的には、コピペをベースにして作成可能。
プログラミングがある程度できれば、独自のカスタマイズをすることも。
所要時間としては、30分もあれば実装できるかと思います。

また、「文章を読んでいても、よく分からない!」という方のために、動画による解説もしてみました。
「文字を読むのが面倒」
「動画で、実際に様子を確認しながらやりたい」
そういった人に、動画はオススメです。

さて、それでは早速やっていきましょう!

Jekyllブログの個別記事に、関連記事リストを表示する機能の実装方法

Jekyllブログの個別記事に、関連記事リストを表示する機能の実装方法

『Jekyll』ブログの個別記事に、関連記事リストを表示する機能の実装方法について見ていきます。

動画でじっくり確認したい方は、以下の動画を視聴してみてくださいね。
ちなみに、約15分程の長さとなっています。
非常にゆっくりめのペースで解説していますので…。
プログラミング初心者でも分かりやすいかと思います。

関連記事リストを表示するまでには、以下のステップを踏んでいきます。

  1. 『_includes』ディレクトリに『related-posts.html』を作成。
  2. 『related-posts.html』に関連記事リスト表示機能を実装。
  3. 『_layouts』ディレクトリの『post.html』を編集。
  4. 『bundle exec jekyll serve』コマンドで動作確認。
  5. 『_site』ディレクトリ内のファイル群をサーバーにアップロード。

最も手間がかかる部分は、『related-posts.html』のコードを記述することですが…。
既に完成したものを載せておきますので、コピペだけで大丈夫です。
あなたは、少しのコードを編集するのみでOK。
ほとんど手間はかからないようになっていますよ。

『_includes』ディレクトリに『related-posts.html』を作成。

最初のステップは、『_includes』ディレクトリに『related-posts.html』というファイルを新規作成すること。
このファイル名は何でも良いのですが…。
ここでは分かりやすいように『related-posts.html』というようにしています。

普通に、『_includes』ディレクトリ内で、ファイルを新規作成。
ファイル名を『related-posts.html』とします。

それでは、関連記事リストを表示する機能を実装していきます。
さきほど作成した『related-posts.html』を編集します。

以下のコードをコピペしてください。
コピペしたら、ファイル保存することをお忘れなく。

{% assign related_post_count = 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 related_post_count == 0 %}
    <div class="related-posts">
    <h2 class="title">関連記事</h2>
    <div class="contents">
    {% endif %}
    <p class="related"><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></p>
    {% assign related_post_count = related_post_count | plus: 1 %}
  {% endif %}
{% endfor %}

{% if related_post_count > 0 %}
</div>
</div>
{% endif %}

このコードの解説を簡単にしてみると…。

まず、全てのブログ記事それぞれについて、今見ている記事のタグと一致しているものがあるかどうかを確認します。
もし、一致するタグが1つ以上あれば、それは関連記事と見なして表示します。
関連記事が見つからなければ、何も表示しません。

やっていることはそれだけです。
結構シンプルですよね。

『_layouts』ディレクトリの『post.html』を編集

続いて、『_layouts』ディレクトリの『post.html』を編集していきます。
お使いのテーマによっては、編集するべきファイルが異なる場合がありますのでよく確認してくださいね。

以前のステップで作成した、『related-posts.html』をincludeする処理を加えます。
あなたが関連記事リストを表示したい部分を探して、以下のコードを追記します。
コードを追記したら、ファイルを保存してくださいね。

{% include related-posts.html %}

『bundle exec jekyll serve』コマンドで動作確認

動作確認をしていきます。
おなじみの『bundle exec jekyll serve』コマンドを実行します。

ローカルホスト上でブログを表示させてみて…。
意図したように、関連記事リストが表示されていれば成功。
正しく動作しています。

もし、関連記事リストが表示されない場合は…。

  1. 各記事にタグが正しく設定されているか?
  2. 『related-posts.html』のコードは正しく記述できているか?
  3. 『post.html』で正しくincludeできているか?

などについて確認してみてください。

『_site』ディレクトリ内のファイル群をサーバーにアップロード

関連記事リストがローカルで表示できていれば、後は本番環境で動かすだけです。
『_site』ディレクトリ内のファイル群を全てサーバーにアップロードしましょう。
ちなみに、私は『rsync』コマンドでファイルを同期させていますね。

関連記事リスト機能はぜひとも欲しい!

関連記事リスト機能はぜひとも欲しい!

今回の記事では、『Jekyll』製ブログの個別記事に関連記事リストを表示する機能を実装する方法について解説してみました。

大本のファイルはコピペで大丈夫ですし、ファイルの編集もわずかで済みます。
少しの時間があれば、機能の実装が可能となっていますね。
いかがでしょうか?
うまく実装することができましたか?

今後も、私は少しずつブログの機能を追加していきます。
役に立ちそうな機能が実装できたら、またブログ記事としてシェアしたいと思っています。
ぜひお楽しみに!

【参考】
[Jekyll] 個別ブログ記事中に、関連記事リストを表示する方法。その手順やソースコードについて、やさしく丁寧に解説! by 鈴木俊吾(すずしん) - YouTube

スポンサーリンク

ブログ記事のカテゴリ一覧

blog (4)

blog/general (2)

blog/jekyll (2)

hobby (1)

hobby/illustration (1)

instruments (4)

instruments/general (2)

instruments/vocal (2)

life (1)

life/life-theory (1)

mac (1)

mac/mac-applications (1)

manager (1)

manager/introduction (1)

original (3)

original/bgm (3)

sports (1)

sports/walking (1)

work (1)

work/mind (1)

This page was last updated at 2021-05-09 05:49.