jekyll lunr js searchダウンロード - jekyll lunr js searchソースコードのダウンロード

jekyll lunr js search

その他のソースコード

1.0.0

ダウンロード

Jekyll + lunr.js = JavaScript を使用した強力な全文検索を備えた静的 Web サイト

lunr.js を使用すると、ブラウザーの JavaScript を使用して、Jekyll 静的 Web サイトに簡単な全文検索を提供できます。

Pascal Widdershoven の Jekyll + Indextank と Michael Levin の Sitemap.xml Generator プラグインからインスピレーションを受けています。

この Jekyll プラグインは、lunr.js 互換の.jsonインデックスファイルの生成を処理します。ランタイム検索構成は、単純な jQuery プラグインによって提供されます。

すべての Jekyll ページと投稿の全文検索が可能になります。サーバー側の処理を行わずに (静的ファイルの提供以外に) クライアントによって実行されます。

使用方法

1. プラグインをインストールする

Ruby Gem としてインストールするか、事前に構築されたプラグインファイルを Jekyll サイトにコピーしてインストールするかを選択します。

1a. Ruby Gem としてインストールする

jekyll-lunr-js-search Ruby Gem をインストールします。
```
 gem install jekyll-lunr-js-search
```
Jekyll _config.ymlファイルを変更して Gem を含めます。
```
 gems: ['jekyll-lunr-js-search']
```

1b.プラグインを Jekyll サイトにコピーしてインストールします。

build/jekyll_lunr_js_search.rb Jekyll サイトのルートの_pluginsフォルダー内に配置します。

すべての Jekyll の投稿とページのコンテンツは、lunr.js が使用できるようにjs/index.jsonファイルにインデックス付けされます。これはサイトが生成されるたびに発生します。

jQuery プラグインはjs/jquery.lunr.search.jsで提供され、このプラグインによって生成された検索インデックス JSON データを使用して lunr.js の構成を処理します。

jQueryプラグインの依存関係は以下のとおりです。

jQuery
lunr.js
Mustache.js
date.format.js
URI.js

上記のすべての依存関係とともに、連結および縮小された jQuery プラグインのビルド済みバージョンは、build/search.min.js から入手できます。

2. jQuery プラグインをコピーし、スクリプト参照を追加します。

2a. gem から事前に構築され、縮小されたプラグインを使用します。

プラグインは、縮小された JavaScript ファイルjs/search.min.jsを_siteに自動的に追加します。

これを使用するには、指定した検索ページの下部にスクリプト参照を追加する必要があります。

    <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

2b. jQuery プラグインを使用し、その依存関係を自分で管理します。

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 を使用してこれら 6 つの.jsファイルを連結、縮小、最適化して、参照する単一のsearch.min.jsファイルを生成します (または、上記の 2a で説明したように事前に構築されたスクリプトを使用します)。

 <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

4. 図に示すように、クエリ入力を含む検索フォームを追加します。

 <form action="/search" method="get">
  <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>

少なくとも 3 文字が入力されると、入力と同時に検索が行われます。

フォームアクションを提供し、get メソッドを指定すると、ユーザーは return/enter キーを押して検索を送信することもできます。必要に応じて、フォームのアクション URL を自分のサイトの検索ページに修正します。

5. 検索結果エントリのリストを含む要素を追加します。

 <section id="search-results" style="display: none;"> </section>

プラグインは検索時に要素を表示するため、これは最初は非表示になっている可能性があります。

6. 検索結果を表示するための Mustache テンプレートを作成します。

 {% 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 %}

Mustache タグが Jekyll によって削除されないように、 {% raw %}と{% endraw %}を使用していることに注意してください。

表示できるフィールドは以下のとおりです。

エントリ

検索結果エントリのリスト (必須)。

日付

投稿の場合は生の公開日、ページの場合は null。テンプレート内の次の日付の表示を切り替えるために使用できます{{#date}}has a date{{/date}} {{#!date}}no date{{/date}} 。

出版

「yyyy-mm-dd」形式の投稿公開日。html5 <time datetime="{{pubdate}}">要素で使用されます (投稿のみ)。

表示日

投稿の公開日。「mmm dd, yyyy」の形式 (2012 年 10 月 12 日など) (投稿のみ)

タイトル

Jekyll ページまたは投稿のタイトル。

URL

ハイパーリンク<a href="{{url}}">{{title}}</a>の作成に使用できる Jekyll ページまたは投稿の URL。

カテゴリ

Jekyll ページまたは投稿のカテゴリ (配列) をループ{{#categories}}{{.}} {{/categories}}で使用してリストできます。

is_post

ブール値。現在の結果要素が投稿の場合は true。テンプレート内の特定の要素の表示を切り替えるために使用できます{{#is_post}}is a post{{/is_post}}

7. 検索入力フィールドの jQuery プラグインを構成します。

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

8. 検索インデックスからページを除外します。

次のexclude_from_search設定を任意のページの YAML 構成に追加します。

 exclude_from_search: true

または、サイトの_config.ymlファイルに除外の配列を (個別の正規表現として) 追加します。

 lunr_search:
  excludes: [rss.xml, atom.xml]

9. ストップワード

ストップワードファイルや、インデックスファイルに含める単語の最小長を設定することもできます。これは、検索ブロックを_config.ymlに追加することで実行できます。デフォルト値は次のとおりです。

 lunr_search:
  stopwords: "stopwords.txt"
  min_length: 3

ストップワードファイルは、句読点のない、小文字で 1 行につき 1 つの単語で構成されている必要があります。

10. 代替データディレクトリ

次のように、 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ファイルを含めると、ブラウザの開発者コンソールが縮小されていないコードにリンクします。

拡大する

追加情報

バージョン 1.0.0
タイプその他のソースコード
更新時間 2024-12-25
サイズ 168.87KB
から Github