Octopress 新增標籤雲邊欄

一直想在”影化身部落格”的首頁加個標籤雲邊欄，昨天終於利用了一點時間把它做好了。離想要的還有點差距，有時間再來改善。山姆鍋使用的標籤雲插件是這個 octopress-tagcloud ⎘，它也支援分類列表，但我目前只使用了標簽雲功能。

安裝 octopress-tagcloud

首先要先安裝插件，在’<octopress 目錄>/plugins/‘目錄中，新增 tag_cloud.rb 檔案，內容拷貝這個：

插件原始碼 ⎘

# encoding: utf-8

# Tag Cloud for Octopress
# =======================
#
# Description:
# ------------
# Easy output tag cloud and category list.
#
# Syntax:
# -------
#     {% tag_cloud [counter:true] %}
#     {% category_list [counter:true] %}
#
# Example:
# --------
# In some template files, you can add the following markups.
#
# ### source/_includes/custom/asides/tag_cloud.html ###
#
#     <section>
#       <h1>Tag Cloud</h1>
#         <span id="tag-cloud">{% tag_cloud %}</span>
#     </section>
#
# ### source/_includes/custom/asides/category_list.html ###
#
#     <section>
#       <h1>Categories</h1>
#         <ul id="category-list">{% category_list counter:true %}</ul>
#     </section>
#
# Notes:
# ------
# Be sure to insert above template files into `default_asides` array in `_config.yml`.
# And also you can define styles for 'tag-cloud' or 'category-list' in a `.scss` file.
# (ex: `sass/custom/_styles.scss`)
#
# Licence:
# --------
# Distributed under the [MIT License][MIT].
#
# [MIT]: http://www.opensource.org/licenses/mit-license.php
#
require 'stringex'

module Jekyll

  class TagCloud < Liquid::Tag

    def initialize(tag_name, markup, tokens)
      @opts = {}
      if markup.strip =~ /\s*counter:(\w+)/i
        @opts['counter'] = ($1 == 'true')
        markup = markup.strip.sub(/counter:\w+/i,'')
      end
      super
    end

    def render(context)
      lists = {}
      max, min = 1, 1
      config = context.registers[:site].config
      category_dir = config['root'] + config['category_dir'] + '/'
      categories = context.registers[:site].categories
      categories.keys.sort_by{ |str| str.downcase }.each do |category|
        count = categories[category].count
        lists[category] = count
        max = count if count > max
      end

      html = ''
      lists.each do | category, counter |
        url = category_dir + category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase
        style = "font-size: #{100 + (60 * Float(counter)/max)}%"
        html << "<a href='#{url}' style='#{style}'>#{category}"
        if @opts['counter']
          html << "(#{categories[category].count})"
        end
        html << "</a> "
      end
      html
    end
  end

  class CategoryList < Liquid::Tag

    def initialize(tag_name, markup, tokens)
      @opts = {}
      if markup.strip =~ /\s*counter:(\w+)/i
        @opts['counter'] = ($1 == 'true')
        markup = markup.strip.sub(/counter:\w+/i,'')
      end
      super
    end

    def render(context)
      html = ""
      config = context.registers[:site].config
      category_dir = config['category_dir']
      categories = context.registers[:site].categories
      categories.keys.sort_by{ |str| str.downcase }.each do |category|
        html << "<li><a href='/#{category_dir}/#{category.to_url}/'>#{category}"
        if @opts['counter']
          html << " (#{categories[category].count})"
        end
        html << "</a></li>"
      end
      html
    end
  end

end

Liquid::Template.register_tag('tag_cloud', Jekyll::TagCloud)
Liquid::Template.register_tag('category_list', Jekyll::CategoryList)

設定邊欄樣版

在 ‘<octopress 目錄>/_source/includes/custom/asides/‘目錄中新增一個名為 tag_cloud.html 的檔案，原始的範例內容：

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

以下是影化身部落格使用的內容：

<section id="crum_tags_subtitle-2" class="widget-3 widget-last widget tags-widget">
  <div class="widget-inner"><h3>文章標籤</h3>
  {% tag_cloud  %}
  </div>
</section>

網頁插入標籤雲邊欄

在想要出現標籤雲邊欄的頁面樣板，在希望出現的地方插入下面指令：

{% include custom/asides/tag_cloud.html %}

小結

Octopress 中，標籤(tag)跟分類(category)好像是同一件事情，但是山姆鍋想要將它們分開。如果有哪位高手知道如何做的話，請不吝指教！