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>



<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>


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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章