#教程#Ghost博客添加文章归档页面

对于Ghost博客来说我的热度一直未曾减少过，但是作为一个教程博客来说使用的还是typecho来作为最基本的日程使用，毕竟Ghost虽然已经更新到了1.x版本，但是成熟度依旧不是很高。

开始

新建一个页面page将一下代码输入即可

<article class="archives"></article>
​
  <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&@blog.yangsail.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);
        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;
        //首篇文章与其余文章分步操作
        if (i > 0) {
          var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00").get('month')+1;
          //如果当前文章的发表月份与前篇文章发表月份相同，则在该月份ul下插入该文章
          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 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(err);
    });
  }); 
  </script>