Simple Jekyll Search
vements
一個 JavaScript 庫，用於向任何 Jekyll 部落格添加搜尋功能。
您有一個用 Jekyll 建立的博客，並且希望在您的博客上提供輕量級搜尋功能（純客戶端）？
無需維護伺服器配置或資料庫。
只需5 分鐘即可擁有一個完全可用的可搜尋部落格。
npm install simple-jekyll-searchsearch.json將以下程式碼放入 Jekyll 部落格根目錄中名為search.json的檔案中。 （您也可以從這裡取得副本）
該文件將用作小型資料來源以在客戶端執行搜尋：
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] SimpleJekyllSearch 需要兩個DOM元素才能運作：
以下是您可以在預設配置下使用的程式碼：
您需要將以下程式碼放置在要顯示搜尋的佈局中。 （請參閱下面的配置部分進行自訂）
例如在_layouts/default.html中：
<!-- HTML elements for search -->
< input type =" text " id =" search-input " placeholder =" Search blog posts.. " >
< ul id =" results-container " > </ ul >
<!-- or without installing anything -->
< script src =" https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js " > </ script > 透過傳入您的設定選項來自訂 SimpleJekyllSearch：
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) SimpleJekyllSearch 的新實例傳回一個對象，具有唯一的屬性search 。
search是用於模擬使用者輸入並顯示匹配結果的函數。
例如：
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )它可用於按標籤或類別過濾帖子！
以下是可用選項、使用問題、故障排除和指南的清單。
插件應偵聽鍵盤事件並觸發文章搜尋和呈現的輸入元素。
應在其中呈現搜尋結果的容器元素 通常為<ul> 。
您可以將 URL 傳遞到search.json文件，也可以直接將結果以 JSON 形式傳遞，以節省獲取資料的一次往返。
單一呈現的搜尋結果的範本。
模板語法非常簡單：只需用花括號將要替換的屬性括起來即可。
例如
範本
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json' ,
searchResultTemplate : '<li><a href="{{ site.url }}{url}">{title}</a></li>'
} )將呈現為以下內容
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li >如果search.json包含此數據
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]每當在模板中找到匹配項時就會呼叫的函數。
它會取得目前屬性名稱、屬性值和範本。
如果函數傳回一個非未定義的值，它將在模板中被替換。
這對於操作 URL 等可能很有用。
例子：
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )請參閱測試以取得深入的程式碼範例
將用於對過濾結果進行排序的函數。
例如，它可用於將各個部分分組在一起。
例子：
SimpleJekyllSearch ( {
...
sortMiddleware : function ( a , b ) {
var astr = String ( a . section ) + "-" + String ( a . caption ) ;
var bstr = String ( b . section ) + "-" + String ( b . caption ) ;
return astr . localeCompare ( bstr )
}
. . .
} )如果查詢沒有符合任何內容，則會顯示 HTML。
您可以限制頁面上呈現的貼文數量。
啟用模糊搜尋以允許較少限制的匹配。
傳入要排除的術語清單（術語將與正規表示式匹配，因此允許 URL、單字）。
載入資料後呼叫的函數。
限制在給定時間視窗內可以執行搜尋功能的次數。這對於在大型資料集（無論是使用罕見術語還是因為要顯示的帖子數量很大）進行搜尋時改善用戶體驗特別有用。如果未提供debounceTime （毫秒），則每次按鍵都會觸發搜尋。
remove_chars作為過濾器。例如：在search.json中，替換
"content" : " {{ page.content | strip_html | strip_newlines }} "和
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} "如果在使用 Github 頁面時這不起作用，您可以嘗試jsonify以確保內容與 json 相容：
"content" : { { page . content | jsonify } }注意：您不需要在其中使用引號" ，因為jsonify會自動插入它們。
將search.json替換為以下程式碼：
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}",
" content " : "{{ post.content | strip_html | strip_newlines }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
,
{% for page in site.pages %}
{
{% if page.title != nil %}
" title " : "{{ page.title | escape }}",
" category " : "{{ page.category }}",
" tags " : "{{ page.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ page.url }}",
" date " : "{{ page.date }}",
" content " : "{{ page.content | strip_html | strip_newlines }}"
{% endif %}
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] npm installnpm test cd example ; jekyll serve
# in another tab
npm run cypress -- run感謝多年來所有的貢獻者！你是最棒的:)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber 等等！
