您的位置：首页 > Web前端 > Node.js

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

2017-04-07 10:03 776 查看

Ghost博客大家都知道，是木有搜索功能的，想找自己写的文章要一页一页的往下翻，好特么的累的，一不小心看到群里面朋友发出来一个nodejs使用RSS实现搜索功能，Ghost也有RSS功能的，貌似作者也是针对Ghost写的，就用上拉

效果预览

下面是我自己使用实现的效果：http://qianxunclub.com/#search

现贡献出来坐着的git：https://github.com/itobee/gsearch

我自己上传的：http://git.oschina.net/itzhangbin/gsearch

下载

因为作者的git是github的，我特么的下载了好半天下载不下来啊，如果大家也木有翻墙的话，可以使用下面的地址，是我自己上传的：http://git.oschina.net/itzhangbin/gsearch

git clone https://git.oschina.net/itzhangbin/gsearch.git

添加依赖

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

npm install remodal

引用文件

其实使用方法作者已经写了，貌似不是很详细，再补充一些。正确下载下来目录结构应该是这样的：

将dist文件夹下的libs和partials文件夹复制到当前主题的根目录下（如果遇到同名文件夹，覆盖即可）,最终ghost目录结构应该是这样的（红色部分是新加进来的文件）：

修改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：

<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博客后台引入，看自己习惯

添加搜索按钮

上面的工作完成后，就可以在页面任意位置添加搜索按钮了，用我自己的作为例子，我是在菜单最左侧添加的搜索图标：

在菜单navigation.hbs页面添加如下代码：

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

大功告成！重启一下服务，是不是已经能用了哇。哈哈哈哈！！！

其他说明

在gsearch.hbs页面内可以自定义一些参数：

参数说明


名称	默认值	类型	说明
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://qianxunclub.com/rss/">
......
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航