Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

Octopressにカテゴリーリストとタグクラウドの設定

| Comments

ブログを作ってみて、サイドバーに何もなく寂しいので、カテゴリーとタグを表示しようとoctopress-tagcloudを導入しました。

octopress-tagcloudの導入方法

https://github.com/tokkonopapa/octopress-tagcloud
octopress-tagcloudのzipをダウンロードする。
または、以下のコマンドを入力し、Githubからクローンしましょう。

1
git clone git://github.com/tokkonopapa/octopress-tagcloud.git

その後、octopress-tagcloud内のファイルをoctopressの中にコピーします。

1
2
cp /octopress-tagcloud/plugins/tag_cloud.rb YOUR_OCTOPRESS_DIRECTORY/plugins/
cp /octopress-tagcloud/source/includes/custom/assides/* YOUR_OCTOPRESS_DIRECTORY/source/_includes/custom/asides/

_config.ymlを編集して、サイドバーにカテゴリーリストやタグクラウドを表示させましょう。

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

# 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/category_list.html,  custom/asides/tag_cloud.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

カテゴリーリストはこれで大丈夫b
タグクラウドも一緒に表示できるのですが、このタグクラウドはただのカテゴリーのクラウドです。ちゃんとタグのクラウドになるようには、カスタマイズが必要です。

タグクラウドをカスタマイズ

plugins/category_generator.rbをコピーして、plugins/tag_generator.rbを作成します。

1
cp YOUR_OCTOPRESS_DIRECTORY/plugins/category_generator.rb YOUR_OCTOPRESS_DIRECTORY/plugins/tag_generator.rb

このplugins/tag_generator.rbの中を置換します。

  • Category を Tag へ
  • Categories を Tags へ
  • category を tag へ
  • categories を tags へ

次に、plugins/tag_cloud.rbの中のTagCloudクラスの中だけを置換します。

  • category を tag へ
  • categories を tags へ

その後、source/_layouts/category_index.htmlをコピーして、source/_layouts/tag_index.htmlを作成します。

1
cp YOUR_OCTOPRESS_DIRECTORY/source/_layouts/category_index.html YOUR_OCTOPRESS_DIRECTORY/source/_layouts/tag_index.html

source/_layouts/tag_index.htmlを置換します。

  • category を tag へ
  • categories を tags へ

source/_includes/post/categories.htmlをコピーして、source/_includes/post/tags.htmlを作成します。

1
cp YOUR_OCTOPRESS_DIRECTORY/source/_includes/post/categories.html YOUR_OCTOPRESS_DIRECTORY/source/_includes/post/tags.html

source/_includes/post/tags.htmlを置換します。

  • category を tag へ
  • categories を tags へ

source/_includes/custom/category_feed.xmlをコピーして、source/_includes/custom/tag_feed.xmlを作成します。

1
cp YOUR_OCTOPRESS_DIRECTORY/source/_includes/custom/category_feed.xml YOUR_OCTOPRESS_DIRECTORY/source/_includes/custom/tag_feed.xml

最後に、CSSを編集します。
まず、sass/partials/_archive.scssを編集します。

1
2
3
4
5
6
7
8
9
#26行目
-a.category, time {
+a.category, a.tag, time {
#61行目
-a.category {
+a.category, a.tag {
#66行目
-#content > .category {
+#content > .category, .tag {

次に、sass/partials/_blog.scssを編集します。

1
2
3
#77行目
-.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 {

これらを編集した後にrake gen_deployまたは、bundle exec rake gen_deployすると、各記事にタグを追加できます。

tags: [tagname1, tagname2, …]

記事数の表示

カテゴリーリストとタグクラウドに記事数を表示する方法です。 source/_includes/custom/asides/category_list.htmlを作成し、以下のコードを書きます。

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

タグクラウドは、source/_includes/custom/asides/tag_cloud.htmlを作成します。

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

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

参考先:

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

Comments