Ghost 实现文章归档

Ghost系统目前暂不支持文章归档,遂手动实现。
方法:通过调用Ghost API实现

启用ghost测试功能

进入ghost后台,在实验功能->启用测试功能能中开启测试功能,这样就可以使用Ghost API获取数据。

新建自定义页面

  1. 首先创建一个静态页面:在ghost后台新建页面,发布为 独立页面 ,标题为archives,网址可以设置为域名/archives
  2. 接着创建一个自定义页面模板:该模板是第一步创建的静态页面的模板,创建一个page-url.hbs模板,如果第一步设置的页面网址为域名/archives,那么模板即为page-archives.hbs。将该模板上传至主题根目录下即可,此时访问域名/archives,即会调用自定义的page-archives.hbs这个模板。(由于新建的模板没有任何内容,所以页面会显示为空,可以赋值page.hbs中的内容测试查看)

    调用Ghost API实现文章归档

    所需工具:

    jQuery、momentjs
    文档:

    Ghost API文档:http://api.ghost.org/v0.1/docs
    Momentjs文档:http://momentjs.cn/docs/
    世界时区差计算:http://www.12sign.cn/htmls/help/worldtimezone.htm

在page-archives.hbs中调用Ghost API即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
* 调用ghost API,完成文章归档功能
* 所需组件:jQuery、moment.js
* @ldsun.com
*/
jQuery(document).ready(function() {
//获取所有文章数据,按照发表时间排列
$.get(ghost.url.api('posts', {
limit: 'all',
order: "published_at desc"
})).done(function(data) {
var posts = data.posts;
var count = posts.length;
for (var i = 0; i < count; i++) {
//调用comentjs对时间戳进行操作
//由于ghost默认是CST时区,所以日期会有出入,这里消除时区差
var time = moment(posts[i].published_at).utcOffset("-08:00");
var year = time.get('y');
var month = time.get('M')+1;
var date = time.get('D');
if( date<10 ) date = "0"+date;
var title = posts[i].title;
var url = "http://www.ldsun.com"+posts[i].url;
//首篇文章与其余文章分步操作
if (i > 0) {
var pre_month = moment(posts[i - 1].published_at).get('month')+1;
//如果当前文章的发表月份与前篇文章发表月份相同,则在该月份ul下插入该文章
if (month == pre_month) {
var html = "<li><time>"+date+"日</time><a href='"+url+"'>"+title+"</a></li>";
$(html).appendTo(".archives .list-"+year+"-"+month);
}
//当月份不同时,插入新的月份
else{
var html = "<div class='item'><h3><i class='fa fa-calendar fa-fw' aria-hidden='true'></i> "+year+"-"+month+"</h3><ul class='archives-list list-"+year+"-"+month+"'><li><time>"+date+"日</time><a href='"+url+"'>"+title+"</a></li></ul></div>";
$(html).appendTo('.archives');
}
}else{
var html = "<div class='item'><h3><i class='fa fa-calendar fa-fw' aria-hidden='true'></i> "+year+"-"+month+"</h3><ul class='archives-list list-"+year+"-"+month+"'><li><time>"+date+"日</time><a href='"+url+"'>"+title+"</a></li></ul></div>";
$(html).appendTo('.archives');
}
}
}).fail(function(err) {
console.log(err);
});
});

效果可以进入archives页面查看:Archives

完整代码已上传至Git:

Author

Ludis

Posted on

2016-07-23

Updated on

2016-08-03

Licensed under

Comments