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 = 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!