如何给Ghost博客添加“归档”功能

网上已经有人给出了教程：

这里我做一下搬运工，主要的步骤就是：

注意：首先要勾选“实验室”里面的“开放api”

步骤一、新建一个页面，发布成“独立页面”

把如下图所示的地方，勾选，就能够发布成“独立页面”了。

设置独立页面

步骤二、设置刚刚那个页面的“博文网址”

如下图所示，把博文网址设置成/archives-post

设置url

步骤三、在你的主题里面（一般默认是casper主题），新建一个自定义模板，名字叫page-archives-post.hbs

步骤四、在page-archives-post.hbs里面加入如下代码

{{!< default}}
<main class="content" role="main">
<article class="archives"></article>
</main>


<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet”>
<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>

<style type="text/css"></style>

<script type = "text/javascript"> 
/**
 * 调用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时区，所以日期会有出入，这里消除时区差,如果不需要，把下面第二行后面8小时改为-00:00!!!
            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 = "{{@blog.url}}"+posts[i].url;
            //首篇文章与其余文章分步操作
            if (i > 0) {
                var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00").get('month')+1;
                //如果当前文章的发表月份与前篇文章发表月份相同，则在该月份ul下插入该文章，这里消除时区差,如果不需要，把下面第二行后面8小时改为-00:00!!!
                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>

上面写到，ghost使用的默认时间是CTS时间。假如说你在国内的话，还是建议把两个-08:00全都改成-00:00。

（
2017-12-01 新增：
我12月份更新了一篇文章，发现归档里面只有10月和12月的，并没有11月的。原来是我只把上面一个-08:00改成-00:00，并没有把下面那个也相应地改过来）

步骤五、在<style type="text/css"> </style>里面加入你自己喜欢的css。我使用的css如下：

.archives .item {
    padding: 20px 0 20px 100px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}
.archives h3 {
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 15px 0;
}
.archives-list {
    list-style: none;
    font-size: 14px;
    line-height: 20px;
    padding-left: 25px;
}
.archives-list li {
    padding: 3px 0;
    overflow: hidden;
}
.archives-list time {
    margin-right: 5px;
    color: #999;
    display: inline-block;
    width: 45px;
    font-family: monospace;
}
.archives-list a {
    text-decoration: none;
}

步骤六、在Ghost后台，添加归档导航，导航链接为xxxx/archives-post。这样就完成了Ghost的归档。

给Ghost博客添加“归档”功能

Nemo

如何给Ghost博客添加“归档”功能

Topics