前回、Octopress に導入したカテゴリリストのプラグインを改修して、サイドバーにタグクラウドを表示させてみます。

以下、作業記録です。

0. 前提条件

  • plugins ディレクトリに tag_cloud.rb が配置済み。
  • source/_includes/custom/asides ディレクトリに tag_cloud.html が配置済み。

1. _config.yml の編集

_config.yml にカテゴリ用ディレクトリの設定同様、タグ用ディレクトリの設定を追加する。

File: _config.yml

1 category_dir: blog/categories
2 tag_dir: blog/tags             # <- 追加

2. tag_cloud.rb の編集

tag_cloud.rbTagCloud クラス内を以下のように編集する。 参考にしたサイト同様 tag_cloudtag_dir とした。

File: tag_cloud.rb

 1 diff --git a/plugins/tag_cloud.rb b/plugins/tag_cloud.rb
 2 index aeab51b..f4d8932 100644
 3 --- a/plugins/tag_cloud.rb
 4 +++ b/plugins/tag_cloud.rb
 5 @@ -59,21 +59,21 @@ module Jekyll
 6        lists = {}
 7        max, min = 1, 1
 8        config = context.registers[:site].config
 9 -      category_dir = '/' + config['category_dir'] + '/'
10 -      categories = context.registers[:site].categories
11 -      categories.keys.sort_by{ |str| str.downcase }.each do |category|
12 -        count = categories[category].count
13 -        lists[category] = count
14 +      tag_dir = '/' + config['tag_dir'] + '/'
15 +      tags = context.registers[:site].tags
16 +      tags.keys.sort_by{ |str| str.downcase }.each do |tag|
17 +        count = tags[tag].count
18 +        lists[tag] = count
19          max = count if count > max
20        end
21  
22        html = ''
23 -      lists.each do | category, counter |
24 -        url = category_dir + category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-'
25 +      lists.each do | tag, counter |
26 +        url = tag_dir + tag.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase
27          style = "font-size: #{100 + (60 * Float(counter)/max)}%"
28 -        html << "<a href='#{url}' style='#{style}'>#{category}"
29 +        html << "<a href='#{url}' style='#{style}'>#{tag}"
30          if @opts['counter']
31 -          html << "(#{categories[category].count})"
32 +          html << "(#{tags[tag].count})"
33          end
34          html << "</a> "
35        end

3. tag_generator.rb の作成

category_generator.rb を流用して、tag_generator を作成する。
内容は、以下の変換をしただけ。

1
2
3
4
Category   -> Tag
Categories -> Tags
category   -> tag
categories -> tags

4. SCSS の編集

sass/partials/_archive.scsssass/partials/_blog.scss 内に category 同様に tag 部分を追加する。
場合によっては、値を変更する。

File: sass/partials/_archive.scss

 1 diff --git a/sass/partials/_archive.scss b/sass/partials/_archive.scss
 2 index 9ef1e82..8c492e9 100644
 3 --- a/sass/partials/_archive.scss
 4 +++ b/sass/partials/_archive.scss
 5 @@ -23,7 +23,7 @@
 6        display: inline-block;
 7      }
 8    }
 9 -  a.category, time {
10 +  a.category, a.tag, time {
11      @extend .sans;
12      color: $text-color-light;
13    }
14 @@ -58,12 +58,12 @@
15      article {
16        padding:{left: 4.5em; bottom: .7em;}
17      }
18 -  a.category {
19 +  a.category, a.tag {
20      line-height: 1.1em;
21      }
22    }
23  }
24 -#content > .category {
25 +#content > .category, .tag {
26    article {
27      margin-left: 0;
28      padding-left: 6.8em;

File: sass/partials/_blog.scss

 1 diff --git a/sass/partials/_blog.scss b/sass/partials/_blog.scss
 2 index 57fe7a8..53741ee 100644
 3 --- a/sass/partials/_blog.scss
 4 +++ b/sass/partials/_blog.scss
 5 @@ -76,7 +76,7 @@ article {
 6        clear: both;
 7        overflow: hidden;
 8      }
 9 -    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
10 +    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before, .byline ~ .tags:before {
11        @extend .separator;
12      }
13    }

5. tag_index.html の作成

source/_layouts/category_index.html を流用して source/_layouts/tag_index.html を作成する。
内容は、以下の変換をしただけ。

1
2
category   -> tag
categories -> tags

6. tags.html の作成

source/_includes/post/categories.html を流用して source/_includes/post/tags.html を作成する。
内容は、以下の変換をしただけ。

1
2
category   -> tag
categories -> tags

7. tag_feed.xml の作成

source/_includes/custom/category_feed.xml をコピーして source/_includes/custom/tag_feed.xml を作成する。
ファイルをコピーしただけ。

8. デプロイ

generatepreview で確認し deploy する。

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

これで、記事投稿時に categoris: 同様 tags: を指定すれば、タグクラウドが表示されるようになる。
(うまく行かない場合は、単語の変換ミスが考えられるのでよく確認する。特に “category” の複数形は “categories” ですから。)

以上。