使用 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
文件,您的瀏覽器開發人員控制台將連結到未縮小的程式碼。