系统更新后由于版本变化,原来的归档页不能用了,根据原归档页技术来源页面,胖达进行了重新配置,实现了新的归档页。感谢博主静轩之别苑阁主。
在进行下一步之前,需先至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
然后保存,单引号别忘了。
这时再点开归档页面,就能发现归档功能又回来啦。