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
看看插件是不是不能使用了？那么如何绕过这一限制呢？方案有很多,下面提供两个：
方案一：
-
Github规定如果根目录下存在.nojekyll这个文件，则不以Jekyll方式生成_site,而是直接运行根目录的静态页面，那么首先新建一个名为.nojekyll的文件到Jekyll项目根目录下（注意是文件名为.nojekyll，无文件后缀）。
-
新建一个repo用于存放源项目，写完post或者更新其他内容后可在该repo中运行jekyll serve查看。
-
复制上一步repo中_site目录的内容到Jekyll项目的根目录中，push即可。
方案二：
-
可以把插件生成的search.json从_site文件夹中拷贝出来放到根目录下，那么github会默认以文件的方式把search.json放到_site中。
-
也可以修改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中，而是放到根目录中。
