9. 最新文章和标签云实现
在上一篇教程中,我们讲到过很多主题都会在 footer 里加上最新文章、标签云等内容,例如下面这些:
这篇教程我们就来讲一下最新文章和标签云是怎么实现的。
我们首先在 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
是不一样的。可以看到它的信息里是不包括作者、标签等信息的。
那么怎么去获取这些额外的信息呢?我们可以使用 include
属性,如下:
{{#get "posts" include="tags,authors" limit="3"}}
{{#foreach posts}}
<p>{{title}}</p>
<p>{{authors}}</p>
<p>{{tags}}</p>
{{/foreach}}
{{/get}}
输出的结果如下:
这里是把文章所有的作者和标签都输出了,如果我们只想输出一个呢。注意:前面我们讲的 {{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
的用法还有很多内容我们没有介绍到,后面会在对应的教程中结合具体的使用场景去讲解。到这里,我们主页基本都构建完了,最终效果如下图所示。
示例代码:https://github.com/KINGMJ/maple-test/tree/features/tutorials-9