用了一个来月,总体来讲Ghost是令人满意的。虽然界面可配置化程度不如WordPress,但一些小的功能定制起来也非常容易。

例如添加一个归档页面。

添加静态页面

在ghost博客中,每一个发表的文章都会有一个对应的URL地址。如果你不想让它出现在首页的文章列表中,仅希望使用自定义的链接去访问它,那么就需要用到Ghost的静态页面功能。如下图所示:

Turn this post into a page选中,这篇文章将不会出现在文章列表中。

添加页面模板

点击发布归档以后,使用指定的URL在浏览器中去访问,会出现404的错误。因为博客系统找不到对应的模板去显示页面内容。

这个时候,需要手动在ghost目录下创建该页面的文件。以本文为例,为归档页面指定了访问URL为xxx/archives,所以在ghost/content/themes/casper下,要创建一个page-archives.hbs文件。

在ghost/content/themes/casper目录下,创建page-archives.hbs文件

{{!< default}}

<header class="site-header outer">
    <div class="inner">
        {{> "site-nav"}}
    </div>
</header>


<main id="site-main" class="site-main outer">
    <div class="inner">
        <article class="archives"></article>
    </div>
</main>

关于生成页面元素的脚本,网络上大部分帖子都是在这个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;
                        console.log(img);
                        //首篇文章与其余文章分步操作
                        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>"+month+"/"+date+"</time><div style='background-image: url(" + img + ")' /><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!