You've successfully subscribed to 完美的胖达
Great! Next, complete checkout for full access to 完美的胖达
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
新版本Ghost实现归档页

新版本Ghost实现归档页

. 约 4 分钟读完

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


在进行下一步之前,需先至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然后保存,单引号别忘了。

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

本篇已被阅读