Ghost博客添加文章归档功能
首先感谢那些为止不断折腾的前人。
首先创建一个静态页面,命名为: archives-post
写入如下代码
<article class="archives"></article>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
> <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
<script type = "text/javascript">
/**
* 调用ghost API,完成文章归档功能
* 所需组件:jQuery、moment.js
* @ldsun.com&@blog.yangsail.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对时间戳进行操作`
var time = moment(posts[i].published_at);`
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 = posts[i].url;`
//首篇文章与其余文章分步操作
if (i > 0) {
var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00").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);
});
});
</script>