用了一个来月，总体来讲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!