原文链接： https://wmdpd.com/xin-ban-ben-ghostshi-xian-gui-dang-ye/
系统更新后由于版本变化，原来的归档页不能用了，根据原归档页技术来源页面，胖达进行了重新配置，实现了新的归档页。感谢博主静轩之别苑阁主。
在进行下一步之前，需先至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="https://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然后保存，单引号别忘了。
这时再点开归档页面，就能发现归档功能又回来啦。
本文转自： https://wmdpd.com/xin-ban-ben-ghostshi-xian-gui-dang-ye/
本站仅做收录，版权归原作者所有。