Octopressのサイドバーにタグリストやタグクラウドを表示させよう！

Octopressの記事が大量になってくると、タグによるアクセスが欲しくなってきますよね。しかし、Octopressには、デフォルトでタグリストやタグクラウドを表示させる仕組みはありません。

Octopressで、タグリストやタグクラウドを表示させるプラグイン

@tokkonopapaさんが提供しているプラグインを利用します。
このプラグインの詳細は、記事がありますのでそちらを参照してみて下さい。

プラグインを組み込む

プラグインを組み込むと言っても、単純にファイルコピーをするだけです。
まずは、GitHubからプラグインをダウンロードします。

$ git clone git://github.com/tokkonopapa/octopress-tagcloud.git
Cloning into octopress-tagcloud...
remote: Counting objects: 31, done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 31 (delta 6), reused 31 (delta 6)
Receiving objects: 100% (31/31), 4.49 KiB, done.
Resolving deltas: 100% (6/6), done.

次に、必要となるファイルをコピーします。

$ cp plugins/tag_cloud.rb ~/Projects/rails/fakestarbaby.github.com/plugins/tag_cloud.rb 
$ cp source/_includes/custom/asides/* ~/Projects/rails/fakestarbaby.github.com/source/_includes/custom/asides/

タグリストやタグクラウドに対応するHTMLを編集

必要に応じて編集をしましょう。

こちらは、タグリストに対応するHTMLです。

source/_includes/custom/asides/category_list.html

<section>
  <h1>Categories</h1>
  <ul id="category-list">{% category_list counter:true %}</ul>
</section>

こちらは、タグクラウドに対応するHTMLです。

source/_includes/custom/asides/tag_cloud.html

<section>
  <h1>Tag Cloud</h1>
  <span id="tag-cloud">{% tag_cloud counter:true %}</span>
</section>

counter:trueでタグ件数を表示し、counter:falseでタグ件数を非表示にします。

サイドバーに表示

サイドバーにタグリストやタグクラウドを表示させる為、_config.ymlに追記します。
ここでは、タグクラウドのみ表示させるように追記してみました。

_config.yml

# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
default_asides: [custom/asides/about.html, asides/recent_posts.html, custom/asides/tag_cloud.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

---

以上で、サイドバーにタグリストやタグクラウドを表示させる事が可能です。