nodejs使用RSS实现Ghost博客搜索功能
来源:互联网 发布:网络社区商业模式 编辑:程序博客网 时间:2024/04/29 11:25
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页面内可以自定义一些参数:参数说明
例如:
<div class="remodal" data-remodal-id="search" id="search" data-rss="http://qianxunclub.com/rss/"> ......</div>
- nodejs使用RSS实现Ghost博客搜索功能
- 安装nodejs搭建ghost个人博客
- 【ghost】centos使用nginx实现ghost博客系统的反向代理
- java实现RSS功能
- 使用textField实现搜索功能
- 使用jQuery的ajax功能实现的RSS Reader
- Hello World! Linux Ubuntu 搭建 Nginx + Nodejs + Ghost 博客
- RSS订阅 让你的博客集成RSS功能
- RSS订阅 让你的博客集成RSS功能
- 网络爬虫,使用NodeJs抓取RSS新闻
- php实现rss订阅功能
- Jekyll博客添加RSS feed订阅功能
- nodejs上传功能实现
- nodeJS实现路由功能
- 使用搜狐云景部署Ghost博客
- 在Ghost博客 中使用 highlight.js 实现 代码高亮
- 使用mongodb实现前缀搜索提示功能
- IOS-搜索功能实现, UIsearchController的使用
- 好雨云帮如何对接Git Server
- python爬虫——beautifulsoup4使用学习
- matplotlib
- Tomcat的性能与最大并发(1000)
- 1001. 害死人不偿命的(3n+1)猜想 (15)
- nodejs使用RSS实现Ghost博客搜索功能
- MIT自然语言处理第二讲:单词计数(第一、二部分)
- 安全科普:详解Windows Hash与破解
- Friends
- java 06
- linux生成SSH Keys
- 检测Windows操作系统是64位还是32位
- 系统延时及定时机制
- C++版循环缓冲区类