为博客增加“标签云”

从 0.5.7 中文版开始我们就为 Ghost 增加了输出“标签云”的功能。下面就来看看如何使用。

介绍一下 tag_cloud

这是中文版中增加的一个 handlebars 助手（helper），根据标签所关联的文章数量进行逆排序，也就是关联文章多的先输出；支持一个 limit 参数，用于限定输出的标签数量：all 表示输出所有标签；数字（例如 10）指定输出个数。调用方式如下：

//输出所有标签
{{tag_cloud limit="all"}}

或者

//输出前10个标签（标签按照对应的文章数量逆排序）
{{tag_cloud limit=10}}

使用方法

在需要输出“标签云”的地方调用 tag_cloud 助手即可。我们以 casper 默认主题为例。打开 index.hbs 文件，在 </header> 标签后面添加 {{tag_cloud limit=10}} ，保存此文件、重启 Ghost、打开首页，看看是否输出了一堆标签。

定制 tag_cloud 模板

tag_cloud 默认加载的模板位于 core/server/helpers/tpl/tag_cloud.hbs ，找到并打开此文件，内容如下：

<ul class="tag-cloud">  
    {{#foreach tags}}
    <a href="{{url}}" class="tag-item">{{name}}<span class="post-count">{{post_count}}</span></a>
    {{/foreach}}
</ul>  

变量说明：

• tags 是自动传入模板的、包含所有标签对象的数组
• url 标签对应页面的地址
• name 标签名
• post_count 标签所关联的文章数量

将 core/server/helpers/tpl/tag_cloud.hbs 文件复制一份到你的主题目录下面的 partials 目录下，然后根据你自己的页面风格修改 html 标签和 css 样式即可。

有图有真相

Ghost 中文网首页右侧的标签列表就是很好的实例：

为英文版 Ghost 添加“标签云”输出

对于使用英文版 Ghgost 的同学（必须升级到 0.5.9 版本以上）只需从我们发布的中文版中复制如下两个文件：

1. core/server/helpers/tpl/tag_cloud.hbs
2. core/server/helpers/tag_cloud.js

2015.9.6 补充 tag_cloud 助手的注册方法。

然后用编辑器打开你的 core/server/helpers/index.js 文件，分别为 coreHelpers 增加 tag_cloud 属性，已经通过 registerAsyncThemeHelper 注册 tag_cloud 助手即可。可以参考下面给出的文件照着改（提示：搜索 tag_cloud 字串，然后逐个复制／粘贴代码）：

https://github.com/ghostchina/Ghost-zh/blob/master/core/server/helpers/index.js