Ghost实现归档、标签云、搜索

前面说过，Ghost本身并不自带类似文章归档、标签云，搜索等（后台不知道会不会改进），虽然官方没有给出，但这也不能阻止民间高手们，通过API就能实现上述这些功能。

归档

首先得在后台的实验功能中启用API，如图:
新建自定义页面：

1.创建一个静态页面：在ghost后台新建页面，发布为独立页面，标题为Archives，网址可以设置为域名/archives-post

2.接着创建一个自定义页面模板：该模板是第一步创建的静态页面的模板，创建一个page-url.hbs模板，如果第一步设置的页面网址为域名/archives-post，那么模板即为page-archives-post.hbs。将该模板上传至主题根目录下即可，此时访问域名/archives-post，即会调用自定义的page-archives-post.hbs这个模板。

在page-archives.hbs中调用Ghost API即可：

{{!< default}}

<main class="content" role="main">  
<article class="archives"></article>  
</main>

<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
 */
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时区，所以日期会有出入，这里消除时区差,如果不需要，把下面第二行后面8小时改为-00:00!!!
            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;
            //首篇文章与其余文章分步操作
            if (i > 0) {
                var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00").get('month')+1;
                //如果当前文章的发表月份与前篇文章发表月份相同，则在该月份ul下插入该文章，这里消除时区差,如果不需要，把下面第二行后面8小时改为-00:00!!!
                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>

相应的CSS代码如下：

.archives .item {

}
.archives h3 {
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 15px 0;
}
.archives-list {
    list-style: none;
    font-size: 16px;
    line-height: 20px;
    padding-left: 25px;
}
.archives-list li {
    padding: 3px 0;
    overflow: hidden;
}
.archives-list time {
    margin-right: 5px;
    color: #999;
    display: inline-block;
    width: 35px;
    font-family: monospace;
}
.archives-list a {
    text-decoration: none;
}

标签云

介绍一下tag_cloud

这是中文版中增加的一个 handlebars 助手（helper），根据标签所关联的文章数量进行逆排序，也就是关联文章多的先输出；支持一个 limit 参数，用于限定输出的标签数量：all 表示输出所有标签；数字（例如 10）指定输出个数。调用方式如下：

//输出所有标签
{{tag_cloud limit="all"}}

或者

//输出前20个标签（标签按照对应的文章数量逆排序）
{{tag_cloud limit=20}}

使用方法

在需要输出“标签云”的地方调用tag_cloud助手即可。我们以 casper 默认主题为例。打开index.hbs文件，在</header>标签后面添加{{tag_cloud limit=10}}，保存此文件、重启 Ghost、打开首页，看看是否输出了一堆标签。我是直接放在归档里的，具体放哪又或是新增页面就看各自喜好了，相应的css代码如下：

.tag-cloud {
    padding-left: 25px;
}
.tag-cloud {
    padding-left: 1.725rem;
}
.tag-cloud a:hover {
    background: #eee;
    color: #4A4A4A;
}
.tag-cloud a {
    position: relative;
    display: inline-block;
    padding: .725rem;
    font-style: normal;
    line-height: 1.125rem;
    border-radius: .3rem;
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 3px;
}

搜索

使用jQuery.gsearch.js插件实现Ghost博客的搜索，gsearch是一款为Ghost量身打造的搜索插件，使Ghost轻松具有搜索功能。效果类似于SwifType，通过Ghost的RSS实现搜索功能，您可以点击右上角搜索图标体验效果。

下载最新版的gsearch，将dist文件夹下的libs和partials文件夹复制到当前主题的根目录下（如果遇到同名文件夹，覆盖即可），并在当前主题的default.hbs文件中添加如下代码：

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
   ……
   <!-- CSS -->
   <link rel="stylesheet" type="text/css" href="/libs/remodal/remodal.min.css">
   <link rel="stylesheet" type="text/css" href="/libs/gsearch/css/jquery.gsearch.min.css">
   ……
</head>

<body>  
   ……

   <!-- gsearch模板 -->
   {{> "gsearch"}}

   <!-- JS -->
   <script type="text/javascript" src="//cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <!-- 如果主题中未引入jQuery，请引入jQuery -->
   <script type="text/javascript" src="/libs/remodal/remodal.min.js"></script>
   <script type="text/javascript" src="/libs/gsearch/js/jquery.gsearch.min.js"></script>
</body>  
</html>

接下来，我们再通过如下代码调用插件即可使用：

<script>  
$(document).one('opening', '.remodal', function () {
    $('#search').gsearch();
});
</script>

这段代码我是直接丢在后台的插入代码里
注：以上示例使用了remodal弹层插件显示搜索信息，可以用其他插件代替，但是需要注意一点：请勿对同一元素重复调用插件。示例中使用jQuery的.one()方法来委托事件。
关于搜索功能等信息，可详见原作者博客

实现了这三个功能，暂时可以让我消停一下了，要知道菜鸟要实现这些功能可也是花了好久功夫的，这个过程还是挺享受的，这不现地又得找点可以折腾的东西来……

打赏作者

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

Ghost实现归档、标签云、搜索

归档

标签云

搜索

似乎又开始折腾了

信用卡"黑话"

Author: Feng