美兰十三的想疗院


一个不务正业的前端狗,爱纹身、玩乐队、哥金党、专门写Bug~


另一种Ghost站内搜索不需要Lunr 和 jQuery(another way to add Search Fn to Ghost Blog, No need Lunr & jQuery )

语言 / Language

中文说明

上一篇文章中 我们使用了 GhostHunter 作为ghost博客的站内搜索引擎,
但是GhostHunter 是基于 Lunrjs, 所有的核心都是写好了的。。。不支持中文是硬伤,然而要支持中文搜索,就得修改lunr的核心代码,这就很麻烦了,如果想给Lunr升级 就又要再修改一次核心代码。。。

所以这次我们来新认识一个 搜索引擎:GhostBot

当然这也并不是我原创的搜索引擎,原作者是:Zeroling

原本的插件描述是这样的:

基于RSS的通用搜索引擎
这个插件不需要任何依赖, 加载方式类似于博客系统Ghost的开源插件GhostHunter, 但是不需要 lunr.js 和 jQuery 的支持.
通过Ajax读取并解析 rss, 在 Chrome 和 Safari 环境下支持良好, 其他环境未测试.

然而跟原版的 GhostHunter 一样,它是基于 Ghost 的RSS 作为搜索源的,所以就会产生同样的问题,当博文超过15篇后,早于最近15篇博文以前的就搜索不到了,所以我Fork了 Zeroling的 GhostBot 把 RSS改成了API

原版GhostBot缺陷:

  1. 搜索源来自Ghost的Rss
    此版本针对以上1点做了更新;

RSS为搜索源

ghost的rss只会显示最新的15条博文,于是乎 对于超过15条博文的博主来说,搜索就很尴尬了。。。无法搜索到 最近15条以前的博文。。。

于是乎此版本 就改为使用 Ghost 实验功能的开放API,原本的 LoadRSS更改为LoadAPI,在初次的时候 先使用ghost的api获取文章列表,然后在获取到的所有文章列表里进行 搜索,这样就能进行全站搜索了。。。

所以,请在Ghost后台 的实验功能里选中开放API

WX20170515-155458-2x-1


使用方法

如同原版 GhostHunter一样

  • </body>前 引入 js文件
<script src="js/ghostbot.min.js">
  • 创建搜索框的DOM
<input type="text" class="search-form-input" placeholder="Search"/>
  • 创建搜索结果的DOM
<div class="search-bar-result"></div>
``
* 使用`GhostBot`  
```javascript
var g = new GhostBot({
    inputbox: document.querySelector('.search-form-input'),
    target: document.querySelector('.search-bar-result'),
    info_template: "<h4>FindArticles.</h4>",
    result_template: "<a href='' class='searchResult'></a>",
});

详细用法 请移步 coding 或 github


English

Last article, we talked use GhostHunter as search engine to search our blog posts. But GhostHunter is based on Lunrjs, Chinese pinyin is not supported, if we wanna Chinese pinyin is supported, we have to change the core source code about Lunr. If so, it's hard to upgrade Lunr.

So, this time, lets know a new search engine: GhostBot

Of course, it's not my original plugin either, the original Author is Zeroling

the original Desc is:

A Common Search Engine based On RSS
The plugin allows front-end engineer to add Search Engine to your platform based on rss. Similar but unlike GhostHunter ,there is no need of lunr.js or jQuery.

However, it's like original GhostHunter, the source of search is RSS. So there is same problem like GhostHunter. When your posts are over then 15, you can not get the posts that earlier than latest 15 posts. So I fork Zeroling's GhostBot project, and change RSS to Ghost Public API

The Original GhostBot Defects:

  1. search from RSS
    This Version update this 1 point;

search from RSS

The Rss in Ghost only show the latest 15 posts. So if your posts are more then 15, we can not get the results out of the latest 15 posts.

So, we change RSS to API. We change 'LoadRss' to 'LoadAPI'. When init your blog, we get all posts through the API, and then we make all posts to be a list, and we search posts in this list. So we can search all of the posts

So, Please make the Public API checked

WX20170515-161908-2x-1


Usage

like original GhostHunter

  • include ghostHunter before </body>
<script src="js/ghostbot.min.js">
  • create search DOM
<input type="text" class=\"search-form-input\" placeholder=\"Search\"/>
  • create result DOM
<div class=\"search-bar-result\"></div>
  • Config the GhostBot after DOM is loaded totally;
var g = new GhostBot({
    inputbox: document.querySelector('.search-form-input'),
    target: document.querySelector('.search-bar-result'),
    info_template: "<h4>FindArticles.</h4>",
    result_template: "<a href='' class='searchResult'></a>",
});

Please turn to Coding or Github to See More Detail

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

原文链接:http://www.jianshu.com/p/2eddee561971\n\n此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $(‘body’).on(…

继续阅读
更早的文章

给Ghost加入站内搜索(Add Search Fn to Ghost Blog)

项目地址: Project Addr: * coding: https://git.coding.net/lunayj/ghostHunter.git * github: https://g…

GHOST, GhostHunter 继续阅读
comments powered by Disqus
沪ICP备15043964号-3