Ghost 官方已经在 Ghost 0.6.0 版本中支持了此功能,增加了 {{#next_post}} 和 {{#prev_post}} 两个助手函数。请大家尽快升级到最新版本吧: http://www.ghostchina.com/download/
有图有真相,先上图:
现在,Ghost中文网上的所有文章底部都添加了“前一篇“和”后一篇“导航,增加了页面之间的连接,方便用户继续浏览后续的文章。
其实这个功能在新发布的 0.5.9 版本中已经实现了,只是官方并没有把这个功能释放出来,下面我们就来说说如何实现开启这个功能吧!
注意:使用 Ghost 中文版的同学请直接下载最新的Ghost中文版本直接使用!升级之后直接看后面的修改主题并添加导航即可。
让Ghost输出文章导航
打开 Ghost 源码文件:core/server/controllers/frontpage.js
,定位到 326 行,在字符串末尾添加字符串 ,next,previous
,修改后如下图:
这样就开启了为每篇文章输出前后篇的导航功能了。
修改主题并添加前后篇导航
我们以Ghost的默认主题 Casper 为例。
打开 Casper 文件夹中的 post.hbs
文件,找到 </article>
标签,在其后添加如下示例代码:
<nav>
<div>
{{#if next}}
前一篇:<a href="{{next.url}}">{{{next.title}}}</a>
{{/if}}
</div>
<div>
{{#if previous}}
后一篇:<a href="{{previous.url}}">{{{previous.title}}}</a>
{{/if}}
</div>
</nav>
这样就可以输出了,自己动手试试吧。后面根据你自己的需求修改样式就行了!