the Code is in the Details

Octopress, a blogging framework for hackers.

octopressにタグクラウドを追加する

[ octopress ]

octopressにタグクラウドを追加しようとして、octopress-tagcloudを導入しても
実はこのプラグインで表示されるのはただ単にカテゴリーのクラウドです。

以下にこのプラグインを改造してカテゴリーとは別にタグクラウドを表示する手順を説明します。

1. octopressにoctopress-tagcloudを追加 (未ダウンロードの場合のみ)

octopress-tagcloudのzipをダウンロード

1
2
3
ダウンロードしたファイルをoctopressにコピーする
  $ cp /octopress-tagcloud-master/plugins/tag_cloud.rb /octopress/plugins/
  $ cp /octopress-tagcloud-master/source/includes/custom/assides/* octopress/source/_includes/custom/asides/

2. _config.ymlにtagcloudの設定を追加

_config.ymlに追記してtagcloudを有効にする

1
2
3
4
5
6
7
8
 code_dir: downloads/code
 category_dir: blog/categories
#36行目
+tag_dir: blog/tags

#54行目
-default_asides: [asides/recent_posts.html, custom/asides/category_list.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]
+default_asides: [asides/recent_posts.html, custom/asides/category_list.html, custom/asides/tag_cloud.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

3. tag_generator.rbを作成

  1. plugins/category_generator.rbをコピーして plugins/tag_generator.rbを作成する
  2. plugins/tag_generator.rbを以下のように編集する

Category –> Tag
Categories –> Tags
category –> tag
categories –> tags

4. tag_cloud.rbを編集

plugins/tag_cloud.rbのTagCloudクラスの中身を以下のように編集する
category –> tag
categories –> tags
(category_dir となっているところなども tag_dir に変更する)

5. tag_index.htmlを作成

  1. source/layouts/category_index.htmlをコピーして source/layouts/tag_index.htmlを作成する
  2. source/_layouts/tag_index.htmlを以下のように編集する

category –> tag
categories –> tags

6. tags.htmlを作成

  1. source/includes/post/categories.htmlをコピーして source/includes/post/tags.htmlを作成する
  2. source/_includes/post/tags.htmlを以下のように編集する

category –> tag
categories –> tags

7. tag_feed.xmlを作成

source/includes/custom/category_feed.xmlをコピーして source/includes/custom/tag_feed.xmlを作成する

8. CSS(SCSS)を編集

タグクラウド用のCSSを追加します。

sass/partials/_archive.scssを以下のように編集

1
2
3
4
5
6
7
8
9
10
11
#27行目
-a.category, time {
+a.category, a.tag, time {

#63行目
-a.category {
+a.category, a.tags {

#68行目
-#content > .category {
+#content > .category, .tag {

sass/partials/_blog.scssを以下のように編集

1
2
3
#111行目
-.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
+.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before, .byline ~ .tags:before {

9. デプロイ

上記変更後に$ rake gen_deployすると
各記事に以下のようにタグを追加出来るようになります。

tags: 好きなタグ1 好きなタグ2

サイドバー内のタグクラウドの表示場所は、
_config.ymlのdefault_asidesの配列で、custom/asides/tag_cloud.htmlの挿入場所をいじれば変更出来ます。

Comments