Octopressにtag cloudを表示させる。

記事が少しずつ増えてきたので、Octopressのサイドバーにtag cloud風のカテゴリリストを表示してみました。

tag cloud とは

タグ・クラウド (tag cloud) はウェブサイト上で使用されるタグの視覚的記述を指す。直訳すると「タグの雲」を意味し、雲のように表示されるタグ文字列が大小さまざまに浮かんでいるように見えることからこの名前が付けられた。概してタグはアルファベット順にリスト化され、タグの頻出度はフォント・サイズや色によって表示される。したがって、アルファベットと人気度数の両方でタグを見つけることが可能となる。 タグクラウド - Wikipedia

要するに、ただのリストではなくて、そのタグが使われていればいるほど、フォントが大きくなったり、色が濃くなったりして強調されるタグリストのこと。

octopress-category-list を git clone

まず ctdk/octopress-category-list を git clone。

octopress-category-list/plugins/category_list.rb/plugins/ にコピーしておく。

tagcloud.html を作成

<section class="well">
  <ul id="tag-cloud" class="nav nav-list">
    <li class="nav-header">Category</li>
    {% raw %}{% category_cloud counter:true %}{% endraw %}
  </ul>
</section>

/source/_includes/custom/asides/tagcloud.html を作成。

今回は、RECENT POSTS とデザインを同じにするため、ctdk/octopress-category-list に書いてあるものと構造を変えてみました。

_config.yml の編集

default_asides: [custom/asides/amazon.html, asides/recent_posts.html, custom/asides/tagcloud.html, custom/asides/twitter.html]

category_dir: categories

_config.ymldefault_asides: に先ほど作成した tagcloud.html を追加。

さらに、カテゴリーページのデフォルトURL http://blog.yug1224.com/blog/categories/hogehttp://blog.yug1224.com/categories/hoge としたかったので、category_dir: も修正。

以上でカテゴリリストがサイドバーに表示されるはず。

tag cloudなのかcategory listなのかごっちゃになってるのがもやもやするけどまぁいいか。

Octopress