新版本Ghost实现归档页

系统更新后由于版本变化，原来的归档页不能用了，根据原归档页技术来源页面，胖达进行了重新配置，实现了新的归档页。感谢博主静轩之别苑阁主。

在进行下一步之前，需先至Ghost设置页面中Advanced选项中的Integrations页面，添加custom integration，具体截图我就不给出了。在为新的custom integration取名并保存后，系统会自动生产对应的key，将Content API key记录下来备用。

接下来依然是在Pages设置中建立归档页面，但是因为版本区别，原来的静态页面配置没有了，相应的原本设置的page-archives.hbs文件也就无效了。

先在归档页面正文中点击添加html代码如下：

<div class="archives"></div>

然后点开Post settings在右下角找到Code Injection配置，点开。

在Post header处填入如下code，这里可以根据各人审美随意更改。

<script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
<!-- CSS 样式定义 -->
<style type="text/css">
.archives .blog-count {
	text-align: center;
}
ul.archives-list li {
  display: flex;
  margin-bottom: 8px;
  background-color: #f4f6f8;
  padding: 8px;
  transition: all 0.3s;
}
ul.archives-list li:hover  {
  filter: drop-shadow(0px 0px 20px lightgrey);
}
@media (prefers-color-scheme: dark) {
    .post-full-content .archives .archives-list time,
    .post-full-content .archives .archives-list a {
        color: #15171a;
    }
}

ul.archives-list li time {
  margin-right: 16px
}

ul.archives-list li a {
  flex: 1;
}

ul.archives-list li div {
  margin-right: 16px;
  width: 60px;
  height: 40px;
  background-size: cover;
  background-position: center;
}
</style>

在Post footer处填入如下code：

// <!-- 注入到Post Footer中 -->
<script type = "text/javascript">
jQuery(document).ready(function() {
    // 获取所有文章数据，按照发表时间排列
    $.get('/ghost/api/v3/content/posts/', {
        limit: 'all',
        key: 'xxxxxxxxxxxxxxxxxx',
        order: "published_at desc"
    }).done(function(data) {
        var posts = data.posts;
        var count = posts.length;
        // 展示总共有写的博文篇数；
        var blogHtmlCount = `<p class="blog-count">截止目前，共有博文 ${count} 篇（含转发和翻译）</p>`;
        $(blogHtmlCount).appendTo(".archives");
        for (var i = 0; i < count; i++) {
            // 由于 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 = posts[i].url;
            var img = posts[i].feature_image;
            // 首篇文章与其余文章分步操作;
            if (i > 0) {
                var preMonth = moment(posts[i - 1].published_at).utcOffset("+08:00").get('month') + 1;
                // 如果当前文章的发表月份与前篇文章发表月份相同，则在该月份 ul 下插入该文章
                if (month == preMonth) {
                    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('Something Error: ' + err);
    });
});
</script>

注意将上述xxxxxxxxxxxxxxxxxx的key替换为刚才记录下来的Content API key然后保存，单引号别忘了。

这时再点开归档页面，就能发现归档功能又回来啦。