使用 RSS 实现 Ghost 博客搜索功能

依赖 gsearch 实现

下载

cd /opt/tmp && git clone git@github.com:y836097668/gsearch.git  

添加依赖

在 ghost 根目录下面执行页面命令:

npm install remodal  

使用示例

下载最新版的 gsearch,将dist文件夹下的libspartials文件夹复制到当前主题的根目录下(如果遇到同名文件夹,覆盖即可),并在当前主题的default.hbs文件中添加如下代码:

添加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">  

添加JS

如果自己的主题没有使用jquery,需要引入jquery:

<!-- gsearch js -->  
<script type="text/javascript" src="/libs/remodal/remodal.min.js"></script>  
<script type="text/javascript" src="/libs/gsearch/js/jquery.gsearch.min.js"></script>  

任意位置添加模板

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

添加完成后的最终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>  

这段代码可以在default.hbs页面最后引入,或者在Ghost博客后台引入,看自己习惯。
以上示例使用了remodal弹层插件显示搜索信息,可以用其他插件代替,但是需要注意一点:请勿对同一元素重复调用插件。示例中使用jQuery.one()方法来委托事件。

添加搜索按钮

上面的工作完成后,就可以在页面任意位置添加搜索按钮了
例如 在菜单navigation.hbs页面添加如下代码:

<a class="nav-btn search-toggle" href="#search"><i class="fa fa-search"></i></a>  

大功告成!重启一下服务,就可以使用了。

gsearch 其他参数说明

名称 默认值 类型 说明
show 10 Number 每页显示条数
excerpt 120 Number 摘要的字符长度
rss "/rss" String rss源的路径
trigger "keyup" String 搜索触发方式,可选值:keyup,enter

例如:

<div class="remodal" data-remodal-id="search" id="search" data-rss="http://xxx/rss/">  
......
</div>