Original link: https://wmdpd.com/xin-ban-ben-ghostshi-xian-gui-dang-ye/
After the system was updated, due to the version change, the original archive page could not be used. According to the technical source page of the original archive page , Panda reconfigured and realized a new archive page. Thanks to the blogger Jingxuan’s Bieyuan Pavilion Master.
Before proceeding to the next step, you need to go to the Integrations page in the Advanced option in the Ghost settings page, and add custom integration . I will not give the specific screenshots. After naming and saving the new custom integration , the system will automatically generate the corresponding key and record the Content API key for future use.
The next step is to create an archive page in the Pages settings, but because of the version difference, the original static page configuration is gone, and the corresponding original page-archives.hbs file is also invalid.
First click to add the html code in the body of the archive page as follows:
<div class="archives"></div>
Then click on Post settings to find the Code Injection configuration in the lower right corner and click on it.
Fill in the following code in the Post header , which can be changed according to everyone’s aesthetics.
<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>
Fill in the following code in the Post footer :
// <!-- 注入到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>
Note that replace the above xxxxxxxxxxxxxxxxxx key with the Content API key you just recorded and save it, don’t forget the single quotes.
At this time, click on the archive page again, and you can find that the archive function is back.
This article is reprinted from: https://wmdpd.com/xin-ban-ben-ghostshi-xian-gui-dang-ye/
This site is for inclusion only, and the copyright belongs to the original author.