意想不到的简单：修改Ghost主题，为博客添加标签云

“标签云”是博客中非常常用的组件，可以展示博客中经常出现的标签以及频率，同时能让访客很方便的按照标签浏览文章。

老版本的Ghost不支持标签云的功能，所以往往需要修改Ghost的源代码，才能实现。但是当升级到v2/v3版本之后，就可以通过调用Ghost本身的api获取标签列表了。所以本文适用的范围是v2版本以上的Ghost。

Ghost模板中支持Handlebar语法，并且有一个非常好用的{{#get}}模板语法，通过这个强大的工具，我们现在可以实现仅通过对主题模板的少量修改，实现标签云的功能。同时，通过{{#get}}调用的请求是在后台完成，渲染后发给前端，因此也更适用于需要SEO的场景。

话不多说，就让我们开始吧！

1. 下载你的blog主题

在Ghost博客管理后台中，找到你当前使用的主题，下载下来。

2. 确定页面

找到你想要现实标签云的页面，编辑对应的hbs文件：

• 如果你在blog的主页上开辟一块地方显示标签云，你需要编辑index.hbs
• 如果你想要单独设立一个页面，比如：/archive/，就需要新建一个hbs文件，命名为“page-页面地址.hbs”，如：page-archive.hbs。

在这一步，我选择将主题中已有的page.hbs，复制为page-archive.hbs再稍作修改，这样可以保持网站整体风格一致。

3. 添加代码

<h2>标签云</h2>
{{#get "tags" include="count.posts" order="count.posts desc"}}
    <div>
    	{{#foreach tags}}
        <div style="margin:0.5em;display:inline-block">
            <a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}">{{name}}({{count.posts}})</a>
        </div>
        {{/foreach}}
    </div>
{{/get}}

注意事项：

根据Ghost官方文档的说明，如果把{{#get}}部分嵌套在其他的handlebar中，可能会有问题，所以尽量不要把上面的代码放到{{#post}}和{{/post}}、{{#author}}和{{author}}的中间。

4. 在blog后台设置主题与页面

将改好的主题打包为zip，再通过Ghost后台上传，新的主题就已经启用了。如果你的标签云添加在博客主页上，应该已经能够看到了。

如果要通过单独的页面来显示标签云，我们还需要创建对应的页面。在Ghost后台创建一个新页面，将页面的url设置为/archive/，保存即可。当我们访问/archive/这个链接时，Ghost就会自动套用我们新写的模板文件，帮我们请求数据，渲染出来再发送到浏览器。

5. 完成！

最终效果展示：归档

页面最上方的“标签云”就是这样实现的。

ps. 这个页面的文章列表部分还在完善中，本想用与标签云类似的方式实现归档，但是Ghost内置的Handlebar Helper功能不是很完善，不能进行日期的比较和计算，同时api中也没有按照文章发布月份分组查询的功能。目前没有什么太好的想法，还在研究中~