Ghost 开源博客平台

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

为博文增加“前一篇”和“后一篇”导航

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>  

这样就可以输出了,自己动手试试吧。后面根据你自己的需求修改样式就行了!

王赛
关于作者 王赛