Ghost配置5——添加歸檔頁面

用了一個來月，總體來講Ghost是令人滿意的。雖然界面可配置化程度不如WordPress，但一些小的功能定製起來也非常容易。
例如添加一個歸檔頁面。

添加靜態頁面

在ghost博客中，每一個發表的文章都會有一個對應的URL地址。如果你不想讓它出現在首頁的文章列表中，僅希望使用自定義的鏈接去訪問它，那麼就需要用到Ghost的靜態頁面功能。如下圖所示：

將Turn this post into a page選中，這篇文章將不會出現在文章列表中。

添加頁面模板

點擊發布歸檔以後，使用指定的URL在瀏覽器中去訪問，會出現404的錯誤。因爲博客系統找不到對應的模板去顯示頁面內容。

這個時候，需要手動在ghost目錄下創建該頁面的文件。以本文爲例，爲歸檔頁面指定了訪問URL爲xxx/archives，所以在ghost/content/themes/casper下，要創建一個page-archives.hbs文件。

關於生成頁面元素的腳本，網絡上大部分帖子都是在這個hbs中加入了相關jquery的處理。但這有一個不便之處：修改的是頁面文件，所以每次修改都需要重啓ghost。
所以筆者決定使用code injection的功能，將相關腳本注入到頁面中。

添加元素腳本

腳本分兩部分：1.生成對應的HTML元素，2.元素CSS樣式

生成HTML

這部分主要是參考了這篇帖子，使用Ghost的API取得對應文章的相關屬性進行顯示。這部分的腳本，要注入到歸檔這篇文章的code injection中（不是全局！）

<!-- 注入到Post Footer中 -->
<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對時間戳進行操作
      //由於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 = "{{@blog.url}}"+posts[i].url;
      var img = posts[i].feature_image;
      //首篇文章與其餘文章分步操作
      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>"+ month + "/" + date +"</time><div style='background-image: url(" + img + ")' /><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>"+month+"/"+date+"</time><div style='background-image: url(" + img + ")' /><a href='"+url+"'>"+title+"</a></li></ul></div>";
        $(html).appendTo('.archives');
      }
    }
  }).fail(function(err) {
    console.log(err);
  });
});
</script>

創建CSS樣式

以下內容注入到Post Header中

<!-- 腳本需要用到moment.js依賴 -->
<script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>

<!-- CSS樣式定義 -->
<style type="text/css">
ul.archives-list li {
  display: flex;
  margin-bottom: 8px;
  background-color: #FFEFEF;
  padding: 8px;
  border-radius: 4px;
}

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>

添加導航

在Ghost後臺的Design中，可以添加一條導航路徑，點擊保存即可看到在網站的導航中出現了對應的鏈接。

重啓Ghost

以上簡單4步完成後，重啓Ghost即可查看效果。
如果對CSS效果有自己的想法，可以隨時修改注入的js和css代碼。重新發布即可，無需重啓Ghost!