• 首页
  • 搜索
  • 夜间模式
    ©2012-2025  Feng's Blog Theme by OneBlog
    搜索
    标签
    # 随笔 # 维修 # Wordpress # 阿里云 # 服务器 # typecho # Ghost # iphone # 网站 # word
  • 首页>
  • 生活随笔>
  • 正文
  • Ghost实现归档、标签云、搜索

    2017年07月26日 221 阅读 10 评论 4369 字

    前面说过,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}}
    /**

  • 调用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 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 = ""+date+"日"+title+""; $(html).appendTo(".archives .list-"+year+"-"+month); } //当月份不同时,插入新的月份 else{ var html = " "+year+"-"+month+""+date+"日"+title+""; $(html).appendTo('.archives'); } }else{ var html = " "+year+"-"+month+""+date+"日"+title+""; $(html).appendTo('.archives'); } } }).fail(function(err) { console.log(err); }); });

    相应的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 文件,在 标签后面添加 {{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 文件中添加如下代码:
    
    ……
    ……
    ……
    {{> "gsearch"}}
    
    • 接下来,我们再通过如下代码调用插件即可使用:
    
    $(document).one('opening', '.remodal', function () {
    $('#search').gsearch();
    });
    

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


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

    本文著作权归作者 [ Feng ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    Ghost随笔
    — END —

    读者留言10

    1. Bige Lv.2
      2017-08-17 07:15

      归档页面好好看

      1. Feng 博主
        2017-08-17 08:34
        @Bige

        都是从各大佬那捞来的233

    2. Deserts Lv.2
      2017-08-16 08:13

      不太信你这是Ghost博客?

      1. Feng 博主
        2017-08-16 08:30
        @Deserts

        的确不是,目前是Typecho,看你的是Ghost,羡慕呀,最近折腾了几次都没成功,郁闷了

        1. Deserts Lv.2
          2017-08-16 08:38
          @Feng

          直接官方教程跟着撸,没啥难度。不过你竟然用华为云,第一次听说呢。

          1. Feng 博主
            2017-08-16 08:53
            @Deserts

            你的Ghost1.0 是在什么系统版本上运行的,我按烧饼的教程试了几次没成功,不过我用的是Debian 8.8,没升9.0,Ubuntu没怎么用过,还有一台阿里云的机子

            1. Feng 博主
              2017-08-16 09:00
              @Feng

              晚上有空再去试一下,那台阿里云是香港的机子,应该不会有影响吧,官网的教程就要翻看一下了

            2. Deserts Lv.2
              2017-08-16 08:55
              @Feng

              应该与系统版本无关的,依赖的是nodejs。你可能是用国内的VPS获取不到ghost资源,需要VPS番、墙安装。

    3. 1900 Lv.1
      2017-08-08 02:04

      这个插件当时我用过,好像有些问题就弃用了。他是通过rss来搜索的,但是默认的rss只会输出前一部分文章...,所以无法全站搜索。

      1. Feng 博主
        2017-08-08 04:06
        @1900

        是的,只能搜索RSS里的内容

    加载更多评论
    加载中...
    — 已加载全部评论 —
    首页
    Copyright©2012-2025  All Rights Reserved.  Load:0.024 s
    Theme by OneBlog V3.6.3
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。