Ghost 开源博客平台

Ghost 是一个简洁、强大的写作平台。你只须专注于用文字表达你的想法就好,其余的事情就让 Ghost 来帮你处理吧。

为博客增加“标签云”

从 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

王赛
关于作者 王赛