为GHOST博客添加归档页

. 约 5 分钟读完

本归档页的功能是在Ghost 2.3.0版本和Nubia主题1.2.5版本上实现的。

确认Ghost博客时区为中国

---1

新建页面

首先你需要在后台管理页面新建一个Story,标题就叫Archives,你可以设置一个题图将来做显示,同时别忘记勾选静态页面。
WX20181026-155024@2x

编辑文件

之后你需要手动编辑一个page-archives.hbs文件,放在对应nubia文件夹下。
Jietu20181026-155331@2x

sudo nano /var/www/ghost/content/themes/nubia/page-archives.hbs

输入如下代码,跟参考链接中的原版比已按时区进行了修改

{{!< default}}

{{#post}}

{{> post-hero }}
<div class='o-wrapper'>
  <div class='o-grid'>
    <div class='o-grid__col o-grid__col--2-3-m'>
      <article class='c-{{ post_class }}'>

        <div class='c-archive' date="{{date format='YYYY'}}">
<main class="content" role="main">
<article class="archives"></article>
</main>
        </div>

        <div class='o-grid'>
          <div class='o-grid__col o-grid__col--4-4-s o-grid__col--4-4-m o-grid__col--2-4-l'>
          </div>
          <div class='o-grid__col o-grid__col--4-4-s o-grid__col--4-4-m o-grid__col--2-4-l'>
            {{> share }}
          </div>
        </div>

        <hr>


      </article>

    </div>

    {{/post}}

    <div class='o-grid__col o-grid__col--1-3-m'>
      {{> sidebar }}
    </div>
  </div>

</div>

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
<script type = "text/javascript">
/**
 * 调用ghost API,完成文章归档功能
 * 所需组件:jQuery、moment.js
 * @ldsun.com
 */
jQuery(document).ready(function() {
    //获取所有文章数据,按照发表时间排列
    $.get(ghost.url.api('posts', {
        limit: 'all',
        order: "published_at desc"
    })).done(function(data) {
        var posts = data.posts;
        var count = posts.length;
        for (var i = 0; i < count; i++) {
            //调用comentjs对时间戳进行操作
            //注意:我们上面已经修改了时区,此处应做好对应改动!!!
            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 = "{{@blog.url}}"+posts[i].url;
            //首篇文章与其余文章分步操作
            if (i > 0) {
                //注意:此处时区修改应和前处对应,否则会影响跨月份的Post
                var pre_month = moment(posts[i - 1].published_at).utcOffset("+08:00").get('month')+1;
                //如果当前文章的发表月份与前篇文章发表月份相同,则在该月份ul下插入该文章,这里消除时区差,如果不需要,把下面第二行后面8小时>$
                if (month == pre_month) {
                    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 cl$
                    $(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=$
                $(html).appendTo('.archives');
            }
        }
    }).fail(function(err) {
        console.log(err);
    });
});
</script>

插入CSS

注意,此处可以插入也可以不插,看你对美观的要求,不插也没什么问题。

Code Injection中插入如下代码:

<style>
.archives .item {
    padding: 20px 0 12px 120px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}
.archives h3 {
	font-size: 15px;
    font-weight: bold;
    margin: 4px 0 0 -120px;
    float: left;
}
.archives-list {
    list-style: none;
    font-size: 14px;
    line-height: 20px;
}
.archives-list li {
    padding: 3px 0;
    overflow: hidden;
}
.archives-list time {
    margin-right: 5px;
    color: #999;
    display: inline-block;
    width: 35px;
    font-family: InputMono;
}
</style>

如果还有其他CSS需要插入,适当调整style字段范围即可。

创建导航

最后别忘记在Design页面为归档页新建导航链接。
Jietu20181026-155821@2x

成果就和本博客归档页一样了。

最后的最后,由于上述命令使用了sudo,别忘记将权限交给ghost。

sudo chown -R ghost:ghost /var/www/ghost/content

如果你觉得Archives英文不协调也可以在实现完毕后将Story标题修改为中文。

参考链接:
Ghost 实现文章归档
https://github.com/flute/ghost-archives


一步步教你从零开始搭博客系列:

本篇已被阅读 


完美的胖达

欢迎来到胖达的竹林 / 作者是人到中年大腹便便的胖达一头 / 说我想说的,写我想写的,拍我想拍的,画我想画的 / 如无意外(偷懒 生病 休假 忙的要死 没东西写)等情况本博客定时更新,时间为GMT零点,望周知

广告

Image Alternative Text

Instagram