jekyll-lunr-js-search是一款适用于Jekyll的站内搜索插件,相关介绍和使用方法在github中已经有简单说明,不过我却在使用这个插件上耽误了很多时间,现在整理一番:

【安装】

1.clone “jekyll-lunr-js-search”到本地

2.将clone后的jekyll-lunr-js-search项目中的

build/jekyll_lunr_js_search.rb

复制到自己的Jekyll项目中的“_plugins”文件夹中(如果没有则新建该文件夹)

3.将clone后的jekyll-lunr-js-search项目中的

js/jquery.lunr.search.js

复制到自己的Jekyll项目中存放js的文件夹(例如/js/jquery.lunr.search.js)

4.添加以下js引用到Jekyll项目中存放js的文件夹(例如/js/)

  • jQuery
  • lunr.js
  • Mustache.js
  • date.format.js
  • URI.js

下载地址

5.新建搜索页search.md(js路径填写第3,4步中的路径)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
---
layout: page
permalink: /search/
---
<script src="/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/lunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/URI.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>
<div id="search">
<form action="/search" method="get">
<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>
</div>
<section id="search-results" style="display: none;">
<p>Search results</p>
<div class="entries">
</div>
</section>
{% raw %}
<script id="search-results-template" type="text/mustache">
{{#entries}}
<article>
<h3>
{{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
<a href="{{url}}">{{title}}</a>
</h3>
</article>
{{/entries}}
</script>
{% endraw %}
<script type="text/javascript">
$(function() {
$('#search-query').lunrSearch({
indexUrl: '/search.json', // URL of the `search.json` index data for your site
results: '#search-results', // jQuery selector for the search results container
entries: '.entries', // jQuery selector for the element to contain the results list, must be a child of the results element above.
template: '#search-results-template' // jQuery selector for the Mustache.js template
});
});
</script>

6.在_config.yml中添加配置

lunr_search:

 excludes: [atom.xml]

也可以针对每个post做设置,规定其是否可以被检索到

exclude_from_search: true

7.在主页中添加指向搜索页

/search/

的超链接

【修改】

需要注意的是jekyll-lunr-js-search用到了Mustache.js,而Mustache已经更新到0.8.1版本,jekyll-lunr-js-search这个项目却没有针对新版的Mustache作更新,所以直接运行会报错,这是由于Mustache在0.8版本之后取消了原有的compile方法,改为了render方法,所以需要对jquery.lunr.search.js做以下修改

找到

1
2
3
4
//compile search results template
LunrSearch.prototype.compileTemplate = function($template) {
return Mustache.compile($template.text());
};

在后面加入以下代码:

1
2
3
4
5
6
7
8
9
Mustache.compile = function (template) {
// This operation parses the template and caches
// the resulting token tree. All future calls to
// mustache.render can now skip the parsing step.
Mustache.parse(template);
return function (view, partials) {
return Mustache.render(template, view, partials);
};
};

【使用】

完成以上步骤,在本地Jekyll serve后进入localhost:4000,如果不出意外是可以正常使用的,这时候push到github上却发现插件不能使用了。这是因为github出于安全考虑,凡是在github上运行的Jekyll都是以safe模式运行的,你也可在在本地运行

Jekyll serve –safe

看看插件是不是不能使用了?那么如何绕过这一限制呢?方案有很多,下面提供两个:

方案一:

  1. Github规定如果根目录下存在.nojekyll这个文件,则不以Jekyll方式生成_site,而是直接运行根目录的静态页面,那么首先新建一个名为.nojekyll的文件到Jekyll项目根目录下(注意是文件名为.nojekyll,无文件后缀)。

  2. 新建一个repo用于存放源项目,写完post或者更新其他内容后可在该repo中运行jekyll serve查看。

  3. 复制上一步repo中_site目录的内容到Jekyll项目的根目录中,push即可。

方案二:

  1. 可以把插件生成的search.json_site文件夹中拷贝出来放到根目录下,那么github会默认以文件的方式把search.json放到_site中。

  2. 也可以修改jekyll_lunr_js_search.rb文件,找到File.open(File.join(site.dest, filename), "w") do |file|,修改代码为

1
2
3
4
5
6
File.open(File.join(site.dest,"../", filename), "w") do |file|
file.write(json)
end
# Keep the search.json file from being cleaned by Jekyll
site.static_files << Jekyll::SearchIndexFile.new(site, site.dest, "../", filename)
end

那么search.json这个文件就不会被生成在_site中,而是放到根目录中。