使用lunr.js为Wiki系统增加全文搜索支持
搜索 Wiki 知识库的问题
今年早些时候我捣鼓了一个基于 Wikitten 和 MDwiki 的个人知识库系统，我一般使用基于 PHP Wikitten 的动态 Wiki 知识库，本地预览或者测试时可以用基于 MDwiki 的静态 Wiki 知识库，两个配合使用并通过 BitTorrent Sync 与 VPS 进行数据同步，这样需要更新时也是很方便的。
我在实际使用中还是发现 Wikitten 的搜索功能比较薄弱，只支持通过文档或目录名称进行搜索（Wikitten 显示时是直接遍历 Wiki 文档的，出于效率考虑也不好直接进行目录遍历全文搜索）；MDwiki 则由于是纯静态实现，根本没有搜索功能，通过我写的生成 Wiki 目录索引的脚本也只能一层层目录定位到 Wiki 文档，要想快速的搜索知识库内容暂时只能通过在本地运行 grep 等命令的方式。
关于 lunr.js
最近我在看到 lunr.js 这个轻量级 JavaScript 全文搜索引擎之后，搜索 Wiki 知识库的问题也迎来了曙光。目前有一些基于 Hexo 之类静态博客框架的站点就是使用 lunr.js 实现了站内搜索功能。因为我考虑将 lunr.js 加入到 Wikitten 和 MDwiki系统中以支持直接在线全文搜索。
lunr.js 的官方版本目前仍然不支持中文的分词器，其目前支持的语言列表在 这里 。开始我考虑过使用 wei song 博主写的基于 lunr.js 的改进版 Elasticlunr.js ，作者介绍的 Elasticlunr.js 相比 lunr.js 可以实现更快的搜索速度和更小的索引文件，只是 Elasticlunr.js 同样也不支持中文搜索，还是暂且作罢。
最终我使用的是国内网友 codepaino 分享的支持中文的修改版 lunr.js，项目地址为：https://github.com/codepiano/lunr.js
在 VPS 上安装修改版的 lunr.js 也还是比较简单的，首先 VPS 上需要有 node.js 环境（这里只介绍 Linux 版本的），下载修改版的 lunr.js：
1root@zoserver:~# wget https://github.com/codepiano/lunr.js/raw/master/lunr.min.js
然后 npm 安装依赖的 nodejieba 库：
1root@zoserver:~# npm install -g nodejieba
2|
3> [email protected] install /usr/lib/node_modules/nodejieba
4> node-gyp rebuild
5gyp WARN EACCES user "root" does not have permission to access the dev dir "/root/.node-gyp/4.6.1"
6gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/lib/node_modules/nodejieba/.node-gyp"
7make: Entering directory `/usr/lib/node_modules/nodejieba/build'
8 CXX(target) Release/obj.target/nodejieba/lib/index.o
9 CXX(target) Release/obj.target/nodejieba/lib/nodejieba.o
10 SOLINK_MODULE(target) Release/obj.target/nodejieba.node
11 COPY Release/nodejieba.node
12make: Leaving directory `/usr/lib/node_modules/nodejieba/build'
13[email protected] /usr/lib/node_modules/nodejieba
14└── [email protected]
生成 Wiki 搜索索引文件
在线的 Wiki 系统在实际使用搜索功能时需要在浏览器前端加载 lunr.js 的搜索索引文件，为了方便生成整个 Wiki 知识库目录的所有 Markdown 文档的索引，我写了一个生成 Wiki 搜索索引文件的 node.js 程序。
search.js程序的功能非常简单，遍历 Wikitten 和 MDwiki 共用的 Wiki 文档目录（默认为library），获取遍历到的 Wiki 文档的标题、关键字标签和文档内容（这三者搜索权重依次降低），然后使用 lunr.js 最终生成 JSON 格式的索引文件：
1var fs = require('fs'), removeMd = require('remove-markdown'), lunr = require('./static/js/lunr.min.js');
2var md_index = lunr(function () {
3this.field('title');
4this.field('tags');
5this.field('body');
6this.ref('url');
7});
8function walk_dir(wdir, path, callback) {
9var dirList = fs.readdirSync(wdir + path);
10dirList.forEach(function(item) {
11if(fs.statSync(wdir + path + '/' + item).isDirectory())
12walk_dir(wdir, path + '/' + item, callback);
13else
14callback(wdir, path + '/' + item);
15});
16}
17function process_markdown(wdir, path) {
18var pos = path.lastIndexOf(".");
19if (pos < 0) return;
20if (path.substr(pos) != ".md" && path.substr(pos) != ".markdown") return;
21var fpos = path.lastIndexOf("/");
22var title = (fpos >= 0 ? path.substring(fpos + 1, pos) : path.substr(0, pos));
23// ignore navigation menu document
24if (path == "/navigation.md") return;
25var has_front = false;
26var md_doc = {
27"url": path,
28"title": title,
29"tags": ""
30};
31var data = fs.readFileSync(wdir + path, "utf-8");
32// ignore auto generated index.md
33if (title == "index" && data.indexOf("Auto-index of") >= 0) return;
34// process front matter
35if (data.substr(0, 3) == "```") {
36pos = data.substr(3).indexOf("```");
37if (pos >= 0) {
38var front = JSON.parse("{" + data.substr(3, pos) + "}");
39has_front = true;
40if ("title" in front) md_doc.title = front.title;
41if ("tags" in front) md_doc.tags = front.tags.join(' ');
42md_doc.body = removeMd(data.substr(pos + 6));
43}
44}
45if (!has_front) md_doc.body = removeMd(data);
46md_index.add(md_doc);
47}
48if (process.argv.length < 4) {
49console.log("Usage:\n");
50console.log(process.argv[0] + " " + process.argv[1] + " Wiki-document-directory Search-index-file");
51console.log(process.argv[0] + " " + process.argv[1] + " Search-index-file Keyword");
52process.exit(1);
53} else if (!fs.existsSync(process.argv[2])) {
54console.log("Invalid Wiki-document-directory or Search-index-file: " + process.argv[2]);
55process.exit(1);
56}
57if (fs.statSync(process.argv[2]).isDirectory()) {
58walk_dir(process.argv[2], "", process_markdown);
59fs.writeFileSync(process.argv[3], JSON.stringify(md_index.toJSON()));
60} else {
61md_index = lunr.Index.load(JSON.parse(fs.readFileSync(process.argv[2])));
62console.log(JSON.stringify(md_index.search(process.argv[3])));
63}
提示
为了方便 Wikitten 和 MDwiki 能同时使用 lunr.js，我把 search.js 程序引用的修改版lunr.min.js文件放到了 Wiki 程序主目录下的static/js文件夹，如需要的话可以自行修改。
上面的程序在遍历 Markdown 文档时忽略了我之前写的自动生成子目录索引文档脚本generate-index.sh产生的index.md文档，另外也忽略了 MDwiki 专用的navigation.mdWiki 系统菜单文档。
search.js程序使用了remove-markdown这个去掉 Markdown 格式的 npm 包，同样用 npm 安装即可：
1root@zoserver:~# npm install -g remove-markdown
一般情况下直接在 Wiki 程序目录下运行 search.js 程序生成索引文件即可：
1root@zoserver:/home/wiki# node search.js library search_index.json
最后上面的命令生成出来的search_index.json就是 lunr.js 格式的索引文件，我们可以直接放到 Wiki 程序主目录下。
经过实际测试目前我的 Wiki 目录一共包含 44 篇有效的 Markdown 文档，文件夹占用不到 500 KB，不过生成出来的search_index.json索引文件就已经接近 1.5 MB 了，浏览器访问索引文件时通过 gzip 压缩传输之后差不多 160 KB，还在我能接受的范围内。
另外你也可以使用 search.js 程序通过索引文件直接在本地进行关键字搜索：
1root@zoserver:/home/wiki# node search.js search_index.json shell
2[{"ref":"/技术/Android/Android Shell控制手机.md","score":0.21389728235059557},{"ref":"/技术/Linux/Shell/Shell进行TCP和UDP网络编程.md","score":0.2134705596450158},{"ref":"/技术/Linux/Shell/sed命令相关技巧.md","score":0.13650355812409723},{"ref":"/技术/Linux/Shell/vim操作技巧.md","score":0.1060635524797807},{"ref":"/技术/Windows/rundll32运行命令列表.md","score":0.035704080604386734},{"ref":"/技术/Windows/Windows注册表记录.md","score":0.0019103777768910307}]
将 lunr.js 整合到 Wiki 系统
有了正确的搜索索引文件之后，我们就可以修改 Wikitten 和 MDwiki 程序将 lunr.js 搜索功能整合进来了。
下面 Wikitten 和 MDwiki 支持全文搜索的修改我已经提交到 wikitten-and-mdwiki 项目，提交记录可以参考 这里 。
Wikitten 修改
由于 Wikitten 自带了按文档和目录名搜索的功能，我们只要给 Wikitten 增加 AJAX 加载 lunr.js 搜索索引文件并按关键字搜索的功能，最后使用 lunr.js 的搜索结果替换原来的即可。
Wikitten 默认只允许直接访问static子目录中的文件，我们需要修改对应的 Web 目录转发规则，这里只贴出 Nginx 服务器的配置（Apache 用户请自行修改.htaccess文件）：
1server
2{
3gzip on;
4gzip_min_length 1000;
5gzip_buffers 4 8k;
6gzip_types text/plain application/x-javascript text/css application/json application/xml text/javascript;
7location ~* ^/(robots.txt|search_index.json|static/(css|js|img|fonts)/.+.(jpg|jpeg|gif|css|png|js|ico|html|xml|txt|swf|pdf|txt|bmp|eot|svg|ttf|woff|woff2))$ {
8access_log off;
9expires max;
10}
11}
ocation 规则指定对 Wiki 主目录下的robots.txt和search_index.json索引文件以及static子目录中的文件不经过 Wikitten 处理；另外为了提高索引文件的加载速度上面的配置中还开启了 gzip 压缩，MDwiki 也可以做同样的修改。
MDwiki 修改
MDwiki 原本没有搜索功能，为了方便页面上使用，我在其专用的navigation.mdWiki 系统菜单文档里增加了一个搜索菜单，这样所有 Wiki 文档页面就都能使用了：
1[]()
2* # Search file name or content.
3* [<input id="search_input" type="text"/>](#)
然后在 MDwiki 对应的index.html中增加搜索处理代码：
1<script type="text/javascript" src="static/js/lunr.min.js"></script>
2<script type="text/javascript">
3var search_indexes = null;
4function doSearch(query) {
5if (search_indexes == null) return;
6var s_res = search_indexes.search(query);
7var t_html = '<ul>';
8for (var i = 0; i < s_res.length; i++) {
9var t_pos = s_res[i].ref.lastIndexOf('/');
10t_html += '<li><a href="#!' + s_res[i].ref + '">' + (t_pos >= 0 ? s_res[i].ref.substr(t_pos + 1) : s_res[i].ref) + '</a></li>';
11}
12t_html += '</ul>';
13$('#search-result-body').html(t_html);
14$('#search-result-label').html('Search result for: ' + query);
15$('#search-result').modal('show');
16}
17function search_content(query) {
18if (search_indexes == null) {
19$.getJSON("search_index.json", function(data){
20if (data != null) search_indexes = lunr.Index.load(data);
21doSearch(query);
22});
23} else
24doSearch(query);
25}
26$(document).bind('DOMNodeInserted', function(e) {
27if ($('#search_input').length <= 0) return;
28$(document).unbind('DOMNodeInserted');
29$('#search_input').bind('click', function(event) {
30event.stopPropagation();
31return false;
32});
33$('#search_input').bind('keypress', function(event){
34if (event.keyCode == '13')
35search_content($(this).val());
36});
37});
38</script>
39<div class="modal fade" id="search-result" tabindex="-1" role="dialog" aria-labelledby="search-result-label" aria-hidden="true">
40<div class="modal-dialog">
41<div class="modal-content">
42<div class="modal-header">
43<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
44<h4 class="modal-title" id="search-result-label"></h4>
45</div>
46<div class="modal-body" id="search-result-body"></div>
47</div>
48</div>
49</div>
上面对搜索输入框的点击事件增加了处理，防止点击时 Bootstrap 的搜索菜单项丢失，在输入框中输入关键字回车才加载索引文件并使用 lunr.js 进行搜索。
MDwiki 的搜索效果如下图所示：
点击搜索结果中的文档名称就会跳转显示对应 Wiki 文档内容。
总结
经过对 Wikitten 和 MDwiki 进行修改，目前 Wiki 知识库的显示和查询效果基本都能满足我的需求了。虽然还存在搜索索引文件体积稍大的隐患，后续也可以考虑使用 Elasticlunr.js 或者其它方式进行改进咯。
注：原文来自zohead.com ，由于近期该网站打开有问题，通过浏览器收录的快照重新整理了一份备存。
捐赠本站(Donate)
如您感觉文章有用，可扫码捐赠本站！(If the article useful, you can scan the QR code to donate))
- Author: shisekong
- Link: https://blog.361way.com/lunrjs-wiki-search/5636.html
- License: This work is under a 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. Kindly fulfill the requirements of the aforementioned License when adapting or creating a derivative of this work.