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

安裝 octopress-tagcloud

首先要先安裝插件 , 在 '/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)

設定邊欄樣版

在 '/_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) 好像是同一件事情 , 但是山姆鍋想要將它們分開 。 如果有哪位高手知道如何做的話 , 請不吝指教 !