Octopress - 関連記事の表示！

[ ブログ ] [ Octopress, Ruby ]

Octopress の各記事にその記事に関連する記事の一覧を表示させる方法についての記録です。

以下、作業記録です。

1. プラグインの導入

大変ありがたいことに、 LawrenceWoodman/related_posts-jekyll_plugin · GitHub にプラグインがある。
適当な場所に clone して、必要な Ruby スクリプトを plugins ディレクトリに配置する。

1
2
3

$ cd ~/tmp
$ git clone https://github.com/LawrenceWoodman/related_posts-jekyll_plugin.git
$ cp related_posts-jekyll_plugin/_plugins/related_posts.rb ~/octopress/plugins/

2. 表示用 HTML の作成

表示させるための HTML ソース octopress/source/includes/post/related_posts.html を以下のような内容で作成する。
表示件数を指定しないと、全ての関連記事が表示されるようだ。

File: octopress/source/includes/post/related_posts.html

1 <div class="related_posts">
2 <h1>Related Posts</h1>
3 <ul>
4 ｛% for post in site.related_posts limit:5 %｝
5   <li><a href="｛｛ post.url ｝｝">｛｛ post.title ｝｝</a></li>
6 ｛% endfor %｝
7 </ul>
8 </div>
  • 上記の全角 ｛, ｝ は半角に置き換えて考えること。

3. 表示元 HTML の編集

表示用 HTML を表示させるため、呼び出し元の HTML octopress/source/_layout/post.html を以下のように編集する。
当方は、「ツイート」ボタンや「いいね」ボタンの下に配置した。

File: octopress/source/_layout/post.html

 1 diff --git a/source/_layouts/post.html b/source/_layouts/post.html
 2 index a834653..c7f174e 100644
 3 --- a/source/_layouts/post.html
 4 +++ b/source/_layouts/post.html
 5 @@ -16,6 +16,9 @@ single: true
 6      ｛% unless page.sharing == false %｝
 7        ｛% include post/sharing.html %｝
 8      ｛% endunless %｝
 9 +    ｛% unless page.related_posts == false %｝
10 +      ｛% include post/related_posts.html %｝
11 +    ｛% endunless %｝
12      <p class="meta">
13        ｛% if page.previous.url %｝
14          <a class="basic-alignment left" href="｛｛page.previous.url｝｝" title="Pre
  • 上記の全角 ｛, ｝ は半角に置き換えて考えること。

4. デプロイ

generate 後 preview で確認し deploy する。

1
2
3

$ rake generate
$ rake preview
$ rake deploy

5. 参考サイト

これで、各記事に関連記事の一覧が表示されるようになりました。

以上。