远方的海
远方的海,WordPress,免费
2015 Nov 11 03 : 33

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

您当前的位置: 首页 > 建站资源 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

很久之前就想把Ghost配置内置搜索引擎的方法总结出来了,Ghost过于轻量,精简了好多功能,连内置的搜索都没有,这样对于本来就没有分类设置的Ghost来说是一个致命伤。

Ghost Hunter搜索插件

博客是经历和学习的总结,没有检索功能,可想而知是不太好的。经过Sven的寻找,终于还是找到了这么一款jquery插件,名字叫做Ghost Hunter

Ghost Hunter介绍

Ghost Hunter插件作者是Jamal Neufeld。这是一个基于Lunr.js的搜索引擎插件,它可以提供给大家全文搜索功能。其实不仅仅是Ghost,从原理上讲,任何一个有RSS订阅页面的平台都可以兼容这款搜索插件。

Ghost Hunter的使用方法

加载所需的js文件

首先需要在博客里加载jquery(一般情况下现在的主题都会自己带上jquery库的),没有也没有关系,我们加上即可:

<script src="http://apps.bdimg.com/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博客加上内置站内搜索功能

实时DEMO,可以前往我的小博客railgun.cn中查看,搜索框在Menu菜单里面。

如果你还需要Ghost的其他拓展不妨看看:用Prismjs实现Ghost博客的代码高亮。或者可以直接使用Sven的这款主题,已经内置搜索和高亮代码功能:Ghost自适应主题「mint」免费下载,Enjoy it!

好文!分享给朋友,或者点个赞吧~

文章信息

分类:建站资源

您可能也会喜欢

发表回复

Post Comment


  1. Hao :

    博主,你这是wordpress吗

    2016-11-30
  2. MILK :

    文字多了,速度也会明显减慢吧

    2016-3-26