码匠笔记

用心雕琢

Octopress 添加标签云

访问

本文内容概要如下:

1, 如何为Octopress博客添加标签云
2, 如何自己为Octopress博客编写标签云

前言

随着文章数量越来越多,分类也越来越多,不是很方便归类和查找,于是就有了标签云这个概念。简单明了的展示了标签和每一个标签下面的文章数量。这个功能可以自己编写,也非常简单。不过反正已经有轮子了,如果不喜欢重新造轮子,直接使用一个网上已经写好的就行了。下面直接进入正题:

使用轮子

直接clone轮子https://github.com/tokkonopapa/octopress-tagcloud.git到本地,如果不想clone直接点击下载,然后把对应的资源拷贝到相应的目录:

1
2
3
4
5
6
7
8
9
.
├─ plugins/
│  └── tag_cloud.rb
└─ source/
   └─ _includes/
      └─ custom/
         └─ asides/
            ├─ category_list.html
            └─ tag_cloud.html

然后修改 _config.yml,添加 tag_cloud.htmldefault_asides 数组,重新rake preview即可。

造轮子

造轮子原理也是很简单,遍历所有的category和每一个category下面的posts,然后编写好样式做输出就可以了。plugins这个目录用户存放一些Rubyplugins文件,所以我们直接写一个脚本到这个目录:

plugins/tag_cloud.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# plugins/tag_cloud.rb
module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('tag_cloud', Jekyll::CategoryListTag)
source/_includes/custom/asides/tag_cloud.html
1
2
3
4
5
6
7
<!-- source/_includes/custom/asides/tag_cloud.html-->
<section>
  <h1>Categories</h1>
  <ul id="categories">
    {% tag_cloud %}
  </ul>
</section>
_.config.yml
1
2
#_config.yml
default_asides: [...,custom/asides/tag_cloud.html]

下面我们逐行解释:
context会传递传递静态博客需要的上下文,categoryposts都可以在里面获取。
Liquid::Template.register_tag 最后生成tag_cloud标签,以便在html里面可以直接使用。
tag_cloud.html 直接在html里面使用tag_cloud标签
_config.yml 最后再里面配置就可以了

笔者前端不是很好,如果想把轮子造的好看一点,直接自定义tag_cloud.rb里面的html样式即可。

扩展阅读

  1. 修复 Octopress Table 样式
  2. Commenthub —— 多说、网易云跟帖的替代品
  3. 给博客添加目录
  4. Octopress 添加 扩展相关阅读
  5. Octopress 首页添加‘更多’功能
  6. Octopress 博客搜索优化

作者

本文作者麻酱,欢迎讨论,指正和转载,转载请注明出处。
原文地址:Octopress 添加标签云
如果兴趣可以关注作者微信订阅号:码匠笔记
majiangbiji

评论