依赖 gsearch 实现

下载

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

添加依赖

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

npm install remodal

使用示例

下载最新版的 gsearch，将dist文件夹下的libs和partials文件夹复制到当前主题的根目录下（如果遇到同名文件夹，覆盖即可），并在当前主题的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>

目录CONTENT

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

下载