Simple Jekyll Search
vements
Jekyll ブログに検索機能を追加する JavaScript ライブラリ。
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 が機能するには、次の 2 つの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 形式で直接渡すことで、データを取得するための 1 往復を節約できます。
単一のレンダリングされた検索結果のテンプレート。
テンプレート構文は非常に単純です。置換するプロパティを中括弧で囲むだけです。
例えば
テンプレート
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 など多数！
