为 Octopress 侧边栏添加 Tag Cloud

/

为 Octopress 侧边栏添加 Tag Cloud 的步骤大致如下:

增加 tag_generator 插件

修改 plugins/category_generator.rb 另存到 plugins/tag_generator.rb

#  encoding: utf-8
#
#  Jekyll tag page generator.
#  http://recursive-design.com/projects/jekyll-plugins/
#
#  Version: 0.1.4 (201101061053)
#
#  Copyright (c) 2010 Dave Perrett, http://recursive-design.com/
#  Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
#
#  A generator that creates tag pages for jekyll sites.
#
#  Included filters :
#  - tag_links:      Outputs the list of tags as comma-separated <a> links.
#  - date_to_html_string: Outputs the post.date as formatted html, with hooks for CSS styling.
#
#  Available _config.yml settings :
#  - tag_dir:          The subfolder to build tag pages in (default is 'tags').
#  - tag_title_prefix: The string used before the tag name in the page title (default is
#                           'Tag: ').

require 'stringex'

module Jekyll

  # The TagIndex class creates a single tag page for the specified tag.
  class TagIndex < Page

    # Initializes a new TagIndex.
    #
    #  +base+         is the String path to the <source>.
    #  +tag_dir+ is the String path between <source> and the tag folder.
    #  +tag+     is the tag currently being processed.
    def initialize(site, base, tag_dir, tag)
      @site = site
      @base = base
      @dir  = tag_dir
      @name = 'index.html'
      self.process(@name)
      # Read the YAML data from the layout page.
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag']    = tag
      # Set the title for this page.
      title_prefix             = site.config['tag_title_prefix'] || 'Tag: '
      # self.data['title']       = "#{title_prefix}#{tag}"
      att = tag.split('|')
      self.data['title']       = "#{title_prefix}#{att[1].nil? ? att[0] : att[1]}"
      # Set the meta-description for this page.
      meta_description_prefix  = site.config['tag_meta_description_prefix'] || 'Tag: '
      # self.data['description'] = "#{meta_description_prefix}#{tag}"
      self.data['description'] = "#{meta_description_prefix}#{att[1].nil? ? att[0] : att[1]}"
    end

  end

  # The Site class is a built-in Jekyll class with access to global site config information.
  class Site

    # Creates an instance of TagIndex for each tag page, renders it, and
    # writes the output to a file.
    #
    #  +tag_dir+ is the String path to the tag folder.
    #  +tag+     is the tag currently being processed.
    def write_tag_index(tag_dir, tag)
      index = TagIndex.new(self, self.source, tag_dir, tag)
      index.render(self.layouts, site_payload)
      index.write(self.dest)
      # Record the fact that this page has been added, otherwise Site::cleanup will remove it.
      self.pages << index
    end

    # Loops through the list of tag pages and processes each one.
    def write_tag_indexes
      if self.layouts.key? 'tag_index'
        dir = self.config['tag_dir'] || 'tags'
        self.tags.keys.each do |tag|
          # self.write_tag_index(File.join(dir, tag.to_url), tag)
          self.write_tag_index(File.join(dir, tag.split('|')[0].to_url), tag)
        end

      # Throw an exception if the layout couldn't be found.
      else
        raise <<-ERR


===============================================
 Error for tag_generator.rb plugin
-----------------------------------------------
 No 'tag_index.html' in source/_layouts/
 Perhaps you haven't installed a theme yet.
===============================================

ERR
      end
    end

  end


  # Jekyll hook - the generate method is called by jekyll, and generates all of the tag pages.
  class GenerateTags < Generator
    safe true
    priority :low

    def generate(site)
      site.write_tag_indexes
    end

  end


  # Adds some extra filters used during the tag creation process.
  module Filters

    # Outputs a list of tags as comma-separated <a> links. This is used
    # to output the tag list for each post on a tag page.
    #
    #  +tags+ is the list of tags to format.
    #
    # Returns string
    #
    def tag_links(tags)
      tags.sort.map { |c| tag_link c }.join(', ')
    end

    # Outputs a single tag as an <a> link.
    #
    #  +tag+ is a tag string to format as an <a> link
    #
    # Returns string
    #
    def tag_link(tag)
      dir = @context.registers[:site].config['tag_dir']
      # "<a class='tag' href='/#{dir}/#{tag.to_url}/'>#{tag}</a>"
      att = tag.split('|')
      "<a class='tag' href='/#{dir}/#{att[0].to_url}/'>#{att[1].nil? ? att[0] : att[1]}</a>"
    end

    # Outputs the post.date as formatted html, with hooks for CSS styling.
    #
    #  +date+ is the date object to format as HTML.
    #
    # Returns string
    def date_to_html_string(date)
      result = '<span class="month">' + date.strftime('%b').upcase + '</span> '
      result << date.strftime('<span class="day">%d</span> ')
      result << date.strftime('<span class="year">%Y</span> ')
      result
    end

  end

end

Tag 的 Url 和名称进行分离设置类似于在 Octopress 中对分类的 Url 和名称进行分离设置,只不过更加简单。

增加 tag_index 布局

修改 source/_layout/category_index.html 另存到 source/_layout/tag_index.html

---
layout: page
footer: false
---

<div id="blog-archives" class="category">
{% for post in site.tags[page.tag] %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %}
  {% assign year = this_year %}
  <h2></h2>
{% endunless %}
<article>
  {% include archive_post.html %}
</article>
{% endfor %}
</div>

增加 tag_cloud 插件

保存以下代码到 plugins/tag_cloud.rb

#  Copyright (C) 2011 Anurag Priyam - MIT License

module Jekyll

  # Jekyll plugin to generate tag clouds.
  #
  # The plugin defines a `tag_cloud` tag that is rendered by Liquid into a tag
  # cloud:
  #
  #     <div class='cloud'>
  #         {% tag_cloud %}
  #     </div>
  #
  # The tag cloud itself is a collection of anchor tags, styled dynamically
  # with the `font-size` CSS property. The range of values, and unit to use for
  # `font-size` can be specified with a very simple syntax:
  #
  #     {% tag_cloud font-size: 16 - 28px %}
  #
  # The output is automatically formatted to use the same number of decimal
  # places as used in the argument:
  #
  #     {% tag_cloud font-size: 0.8  - 1.8em  %}  # => 1
  #     {% tag_cloud font-size: 0.80 - 1.80em %}  # => 2
  #
  # Tags that have been used less than a certain number of times can be
  # filtered out from the tag cloud with the optional `threshold` parameter:
  #
  #     {% tag_cloud threshold: 2%}
  #
  # Both the parameters can be easily clubbed together:
  #
  #     {% tag_cloud font-size: 50 - 150%, threshold: 2%}
  #
  # The plugin randomizes the order of tags every time the cloud is generated.
  class TagCloud < Liquid::Tag
    safe = true

    # tag cloud variables - these are setup in `initialize`
    attr_reader :size_min, :size_max, :precision, :unit, :threshold

    def initialize(name, params, tokens)
      # initialize default values
      @size_min, @size_max, @precision, @unit = 70, 170, 0, '%'
      @threshold                              = 1

      # process parameters
      @params = Hash[*params.split(/(?:: *)|(?:, *)/)]
      process_font_size(@params['font-size'])
      process_threshold(@params['threshold'])

      super
    end

    def render(context)
      # get an Array of [tag name, tag count] pairs
      count = context.registers[:site].tags.map do |name, posts|
        [name, posts.count] if posts.count >= threshold
      end

      # clear nils if any
      count.compact!

      # get the minimum, and maximum tag count
      min, max = count.map(&:last).minmax

      # map: [[tag name, tag count]] -> [[tag name, tag weight]]
      weight = count.map do |name, count|
        # logarithmic distribution
        weight = (Math.log(count) - Math.log(min))/(Math.log(max) - Math.log(min))
        [name, weight]
      end

      # shuffle the [tag name, tag weight] pairs
      weight.sort_by! { rand }
      # weight.sort_by! { |m| m.first.downcase }

      # reduce the Array of [tag name, tag weight] pairs to HTML
      weight.reduce("") do |html, tag|
        name, weight = tag
        size = size_min + ((size_max - size_min) * weight).to_f
        size = sprintf("%.#{@precision}f", size)
        att = name.split('|')
        html << "<a style='font-size: #{size}#{unit}' href='/tags/#{att[0].to_url}/'>#{att[1].nil? ? att[0] : att[1]}</a>\n"
      end
    end

    private

    def process_font_size(param)
      /(\d*\.{0,1}(\d*)) *- *(\d*\.{0,1}(\d*)) *(%|em|px)/.match(param) do |m|
        @size_min  = m[1].to_f
        @size_max  = m[3].to_f
        @precision = [m[2].size, m[4].size].max
        @unit      = m[5]
      end
    end

    def process_threshold(param)
      /\d*/.match(param) do |m|
        @threshold = m[0].to_i
      end
    end
  end
end

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

参考:https://gist.github.com/2290195

增加 aside

保存以下代码到 source/_includes/custom/asides/tag_cloud.html

<section>
    <h1>Tag Cloud</h1>
    <div id="tagcloud">
        {% tag_cloud font-size: 0.8-1.8em, threshold: 2 %}
    </div>
</section>

在 _config.yml 中修改 default_asides 项:

default_asides: [asides/recent_posts.html, custom/asides/category_list.html, custom/asides/tag_cloud.html]

Comments