Jekyll站内搜索：jekyll-lunr-js-search使用说明

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步中的路径)

---
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做以下修改

找到

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

在后面加入以下代码：

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|,修改代码为

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中，而是放到根目录中。