使用 lunr.js 在浏览器中使用 JavaScript 为 Jekyll 静态网站提供简单的全文搜索。
受到 Pascal Widdershoven 的 Jekyll + indextank 和 Michael Levin 的 Sitemap.xml Generator 插件的启发。
这个 Jekyll 插件处理 lunr.js 兼容的.json
索引文件的生成。运行时搜索配置由一个简单的 jQuery 插件提供。
它允许对所有 Jekyll 页面和帖子进行全文搜索。由客户端执行,无需任何服务器端处理(除了提供静态文件之外)。
选择安装为 Ruby Gem,或者将预构建的插件文件复制到 Jekyll 站点。
安装 jekyll-lunr-js-search Ruby Gem。
gem install jekyll-lunr-js-search
修改 Jekyll _config.yml
文件以包含 Gem。
gems: ['jekyll-lunr-js-search']
build/jekyll_lunr_js_search.rb
放入 Jekyll 站点根目录的_plugins
文件夹中。所有 Jekyll 帖子和页面的内容都将被索引到js/index.json
文件,以供 lunr.js 使用。每次生成站点时都会发生这种情况。
js/jquery.lunr.search.js
中提供了一个 jQuery 插件,用于使用该插件生成的搜索索引 JSON 数据来处理 lunr.js 的配置。
jQuery 插件的依赖关系如下。
jQuery 插件的预构建版本以及所有上述依赖项(串联和缩小)可从 build/search.min.js 获取。
该插件会自动将缩小的 JavaScript 文件js/search.min.js
添加到您的_site
。
要使用它,您必须将脚本引用添加到指定搜索页面的底部。
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
将js/jquery.lunr.search.js
复制到 Jekyll 站点的 JavaScript 目录。
将脚本引用添加到jquery.lunr.search.js
的指定搜索页面底部以及上面列出的每个依赖项。
<script src="/js/jquery-1.9.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>
确保您使用与 gem 相同版本的 lunr.js。 Jekyll 日志输出包括所使用的版本。
理想情况下,您可以使用 uglify/Google Closure/etc 连接、缩小和优化这六个.js
文件,以生成单个search.min.js
文件以供参考(或使用上面 2a 中所述的预构建脚本)。
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
<form action="/search" method="get">
<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>
一旦输入至少三个字符,搜索就会在您键入时进行。
提供表单操作并指定 get 方法允许用户点击 return/enter 来提交搜索。根据您自己网站上搜索页面的需要修改表单的操作 URL。
<section id="search-results" style="display: none;"> </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>
{{#is_post}}
<ul>
{{#tags}}<li>{{.}} </li>{{/tags}}
</ul>
{{/is_post}}
</article>
{{/entries}}
</script>
{% endraw %}
请注意使用{% raw %}
和{% endraw %}
以确保 Mustache 标签不会被 Jekyll 删除。
可显示的字段如下。
搜索结果条目列表(必填)。
帖子的原始发布日期,或页面的空日期。可用于切换模板中以下日期的显示{{#date}}has a date{{/date}} {{#!date}}no date{{/date}}
。
发布日期,格式为“yyyy-mm-dd”,用于 html5 <time datetime="{{pubdate}}">
元素(仅限帖子)。
帖子发布日期,格式为“mmm dd, yyyy”,例如 Oct 12, 2012(仅限帖子)
Jekyll 页面或帖子的标题。
可用于创建超链接<a href="{{url}}">{{title}}</a>
的 Jekyll 页面或帖子的 URL。
Jekyll 页面或帖子的类别(数组)可以在循环{{#categories}}{{.}} {{/categories}}
中使用来列出它们。
Jekyll 页面或帖子的标签(数组)可以在循环{{#tags}}{{.}} {{/tags}}
中使用来列出它们。
Booelan 值,如果当前结果元素是帖子,则为 true。可用于切换模板中特定元素的显示{{#is_post}}is a post{{/is_post}}
<script type="text/javascript">
$(function() {
$('#search-query').lunrSearch({
indexUrl : '/js/index.json', // url for the .json file containing search index data
results : '#search-results', // selector for containing search results element
template : '#search-results-template', // selector for Mustache.js template
titleMsg : '<h1>Search results<h1>', // message attached in front of results (can be empty)
emptyMsg : '<p>Nothing found.</p>' // shown message if search returns no results
});
});
</script>
将以下exclude_from_search
设置添加到任何页面的 YAML 配置中。
exclude_from_search: true
或者将排除数组(作为单独的正则表达式)添加到站点的_config.yml
文件中。
lunr_search:
excludes: [rss.xml, atom.xml]
您还可以配置停用词文件以及要包含在索引文件中的单词的最小长度。这可以通过向_config.yml
添加搜索块来完成。默认值为:
lunr_search:
stopwords: "stopwords.txt"
min_length: 3
停用词文件必须每行包含一个单词,小写,不带标点符号。
您可以选择将index.json
、 search.min.js
和lunr.min.js
存储在不同的目录中,如下所示:
lunr_search:
js_dir: "javascript"
搜索插件部署到 10consulting.com/search。一些示例搜索查询包括 /search/?q=git、/search/?q=cqrs。
当关注主页上的搜索字段时,它还具有按需加载搜索插件.js
的功能。查看点击搜索输入的浏览器网络请求。
构建单个jekyll_lunr_js_search.rb
插件文件。
安装 Bundler,然后运行以下命令。
bundle install
安装鲍尔。
构建插件。
rake build
然后将build/jekyll_lunr_js_search.rb
复制到 Jekyll 站点的_plugins
文件夹,并将build/*.min.js
文件复制到站点的js
文件夹。
如果您包含.js
和.js.map
文件,您的浏览器开发人员控制台将链接到未缩小的代码。