Ghost 搜索插件 jQuery.gsearch.js

简介:

Ghost是一款出色的开源博客平台,小巧,易用,专注于写作,而gsearch是一款为Ghost量身打造的搜索插件,使Ghost轻松具有搜索功能。效果类似于SwifType,通过Ghost的RSS实现搜索功能,您可以点击右上角搜索图标体验效果。

依赖插件:

浏览器支持:

理论上支持所有现代浏览器,包括智能手机浏览器。未全面测试,如果发现兼容问题,请提交issues

使用示例:

下载最新版的gsearch,将dist文件夹下的libspartials文件夹复制到当前主题的根目录下(如果遇到同名文件夹,覆盖即可),并在当前主题的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()方法来委托事件。

参数说明:

  • show:每页显示条数,默认值为10,Number型;
  • excerpt:摘要的字符长度,默认值120,Number型;
  • rss:rss源的路径,默认值:"/rss",String型;
  • trigger:搜索触发方式,可选值keyup或enter,默认值为keyup,String型。 您也可以通过data-api来配置插件,如data-trigger="enter"

开发:

gseach使用Gulp作为脚手架开发,如果您想对gsearch进行二次开发,参考以下操作:

// 克隆源码
git clone git://github.com/itobee/gseach.git  
cd gseach

// 安装npm
npm install

// 启动服务
gulp  

更新日志:

v0.9.0

Bug反馈:

请移步:https://github.com/itobee/gsearch/issues

开源协议:

MIT license © Tobee