mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

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 を以下のような内容で作成する。
表示件数を指定しないと、全ての関連記事が表示されるようだ。

octopress/source/includes/post/related_posts.html
1
2
3
4
5
6
7
8
<div class="related_posts">
<h1>Related Posts</h1>
<ul>
%}
  <li><a href="}}">}}</a></li>
%}
</ul>
</div>

3. 表示元 HTML の編集

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

octopress/source/_layout/post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
diff --git a/source/_layouts/post.html b/source/_layouts/post.html
index a834653..c7f174e 100644
--- a/source/_layouts/post.html
+++ b/source/_layouts/post.html
@@ -16,6 +16,9 @@ single: true
     %}
       %}
     %}
+    %}
+      %}
+    %}
     <p class="meta">
       %}
         <a class="basic-alignment left" href="}}" title="Pre

4. デプロイ

generatepreview で確認し deploy する。

1
2
3
$ rake generate
$ rake preview
$ rake deploy

5. 参考サイト


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

以上。

Comments