给Ghostblog再加内嵌网站内部检索作用

好长时间以前就想把Ghost配备内嵌检索模块的方式小结出去了,Ghost过度轻量,精减了许多作用,连内嵌的检索也没有,那样针对原本就沒有归类设定的Ghost来讲是一个致命性伤。

Ghost Hunter检索软件

blog是亲身经历和学习培训的小结,沒有查找作用,显而易见不是太好的。历经Sven的找寻,总算還是寻找了那么一款jquery软件,姓名称为Ghost Hunter。

Ghost Hunter详细介绍

Ghost Hunter软件创作者是Jamal Neufeld。它是一个根据Lunr.js的检索模块软件,它能够出示给大伙儿全篇检索作用。实际上不但仅是Ghost,从基本原理上讲,一切一个有RSS定阅网页页面的服务平台都可以以适配这个检索软件。

Ghost Hunter的应用方式 载入需要的js文档

最先必须在blog中放载jquery(一般状况下如今的主题风格都是自身携带jquery库的),沒有都没有关联,大家再加就可以:

 script src="libs/jquery/1.11.1/jquery.min.js" /script 

载入好jquery以后,大家便可以载入Ghost Hunter这一js文档,免费下载Ghost Hunter

随后把它提交到自身的服务器上,便可以启用了。在src中键入js所属的详细地址,比如这儿大家立即应用了缩小版的min.js文档:

 script src="js/jquery.ghostHunter.min.js" /script 
建立HTML构造

接下去大家必须建立一个HTML器皿来仿造检索框。必须应用一个 input 标识来做为键入框,这一标识必须被置放在 form 标识中。那样,无论就是你点一下递交按键還是应用JavaScript的submit()涵数都可以以进行递交实际操作。

 form 
 input id="search-field" / 
 input type="submit" value="search" 
 /form 

除开递交的HTML构造,大家还必须一个器皿来存储检索結果,这儿应用以下的section:

 section id="results" /section 

OK,最终一步,大家再加以下的js编码,来起动大家的检索作用:

$("#search-field").ghostHunter({
 results : "#results"

大家能看出这一检索的实际效果還是非常好的,检索框能够自身依据要求添加CSS款式。其輸出的結果是ajax显示信息的。我将这一检索框放到了折叠莱单里,看上去实际效果还非常好!

给Ghost博客加上内置站内搜索功能

给Ghost博客加上内置站内搜索功能

即时DEMO,中查询,检索框在Menu莱单里边。

假如你要必须Ghost的别的扩展何不看一下:用Prismjs完成Ghostblog的编码高亮度。或是能够立即应用Sven的这个主题风格,早已内嵌检索和高亮度编码作用:Ghost响应式主题风格「mint」完全免费免费下载,Enjoy it!

好文章!共享朋友,或是点个赞吧~

归类:建网站資源 标识:ghost 著作权:文中能够引入,但请保存连接: 给Ghostblog再加内嵌网站内部检索作用

假如有侵害著作权的資源请尽早联络网站站长,大家会在24h内删掉有异议的資源。


有关远方的海

远方的海网站站长为Sven。本网站关心互连网网络热点,各种各样建网站資源,完全免费資源和WordPress建网站技术性及其前端开发设计方案;同时还出示一些给国外中国人的小Tips。假如您也是个IT喜好者,对WordPress和有关建网站实例教程很感兴趣,热烈欢迎个人收藏或根据RSS、电子邮箱定阅本网站!


远方的海 · 2014 - 2018 · 保存一切支配权 · 雅致地应用Wildfire主题风格 · 此次载入同用 0.334 秒 · 进行了 60 次恳求

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://wxddxcx.cn/ziyuan/3912.html