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博客添加归档页

. 5 min read

本归档页的功能是在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


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