首页
9. 最新文章和标签云实现

在上一篇教程中,我们讲到过很多主题都会在 footer 里加上最新文章、标签云等内容,例如下面这些:

image_1eido6ekd91u1i719okuer13q81g.png-90.2kB

image_1eido4un4ri0o0evm71vfe16cim.png-153.6kB

image_1eido5idr4j21dc9uvc1uao172k13.png-92.8kB

这篇教程我们就来讲一下最新文章和标签云是怎么实现的。

我们首先在 partials 目录中新建一个 recent-post.hbs 文件,然后在 footer 中使用 {{> recent-post}} 来引用。

前面我们用 foreach 输出了所有文章。foreach 助手支持 limit 属性,我们这样就可以输出最新的三篇文章了:

{{#foreach posts limit="3"}}
    <p><a href="{{url}}">{{title}}</a></p>
{{/foreach}}

是不是很简单,但是这样做会有问题。因为我们之前说过,footer 可能作为整个网站的一个通用区域,那么我们就不能依赖 posts 的上下文了。因为它只有在 index.hbs 中才生效。

如果我们想让它在所有的页面中都可以生效那么应该怎么去做呢?我们可以借助 Ghost Content API 来实现。在新的版本里,我们可以用 get 助手来调用 API 接口。

Get

get 助手是直接从服务端去获取数据的,所以它不依赖于上下文环境。它是一个十分强大的助手,用法比较灵活,我们可以借助它来实现很多自定义的效果。先看一下最简单的例子吧,比如我们想实现最新的三篇文章:

{{#get "posts" limit="3"}}
    {{#foreach posts}}
        <p>{{title}}</p>
    {{/foreach}}
{{/get}}

需要注意的是,这里的 posts 拿到的是 /content/posts 这个 API 的数据,跟上下文里的 posts 是不一样的。可以看到它的信息里是不包括作者、标签等信息的。

image_1eifm3og51v081urj29e1inhok12d.png-138.3kB

那么怎么去获取这些额外的信息呢?我们可以使用 include 属性,如下:

{{#get "posts" include="tags,authors" limit="3"}}
    {{#foreach posts}}
        <p>{{title}}</p>
        <p>{{authors}}</p>
        <p>{{tags}}</p>
    {{/foreach}}
{{/get}}

输出的结果如下:

image_1eift3tis4fi1r1r1rlm1ncu1tft2q.png-26kB

这里是把文章所有的作者和标签都输出了,如果我们只想输出一个呢。注意:前面我们讲的 {{primary_author}}{{primary_tag}} 在这里都不能用了,因为它们对应的是自己的上下文环境。比如:我们把这段代码放到 post.hbs 中,{{primary_author}} 指的就是这篇文章的首个作者,而不是我们从 API 中获取的这三篇文章的首个作者。

我们可以这样来实现:

{{#get "posts" include="tags,authors" limit="3"}}
    {{#foreach posts}}
        <p>{{title}}</p>
        <p>
          <small>{{authors.[0].name}}</small>
          <small>{{tags.[0].name}}</small>
        </p>
    {{/foreach}}
{{/get}}

标签云

通过前面对 get 的了解,标签云实现起来也很简单了。

{{#get "tags" limit="21"}}
    {{#foreach tags}}
        <a href="{{url}}">{{name}}</a>
    {{/foreach}}
{{/get}}

好了,通过这篇教程我们学会了怎么去用 get 助手去实现最新文章和标签云的功能。get 的用法还有很多内容我们没有介绍到,后面会在对应的教程中结合具体的使用场景去讲解。到这里,我们主页基本都构建完了,最终效果如下图所示。

杰瑞·梅的独立博客 (1).png-3312.5kB

示例代码:https://github.com/KINGMJ/maple-test/tree/features/tutorials-9