jekyll tipue search

ジキル・ティプエの検索

Tipue Search を使用した Jekyll の全文検索。プラグインは必要ありません。 Github Pages と完全に互換性があります。

tipuesearch/tipuesearch_content.jsの検索インデックスは Liquid で生成されます。 Tipue Search jQuery プラグインは、JavaScript を使用してインデックスを検索し、結果のリストを表示します。

Github Pages で実行されているライブ デモをご覧ください。デモのコードと構成は gh-pages ブランチにあります。

インストール

1. assets/tipuesearchフォルダーとすべてのコンテンツをサイトに追加します。

2. Tipue Search のスクリプトとスタイルをテーマのヘッドに追加します。これらの行の一部はオプションです。詳細についてはドキュメントを参照してください。

 {% if page.tipue_search_active or layout.tipue_search_active %}
<link rel="stylesheet" href="{{ "/assets/tipuesearch/css/normalize.css" | relative_url }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{{ "/assets/tipuesearch/tipuesearch_content.js" | relative_url }}"></script>
<link rel="stylesheet" href="{{ "/assets/tipuesearch/css/tipuesearch.css" | relative_url }}">
<script src="{{ "/assets/tipuesearch/tipuesearch_set.js" | relative_url }}"></script>
<script src="{{ "/assets/tipuesearch/tipuesearch.min.js" | relative_url }}"></script>
{% endif %}

3. Tipue Search の検索フォーム、結果表示、およびスクリプトをサイトに追加します。検索ページの例search.html参考にしてください。検索結果を表示するすべてのページまたはレイアウトの前文で、 tipue_search_active: trueを設定します。検索フォームの設定と検索結果の表示については、Tipue Search のドキュメントを参照してください。

 <form action="{{ page.url | relative_url }}">
  <div class="tipue_search_left"><img src="{{ "/assets/tipuesearch/search.png" | relative_url }}" class="tipue_search_icon"></div>
  <div class="tipue_search_right"><input type="text" name="q" id="tipue_search_input" pattern=".{3,}" title="At least 3 characters" required></div>
  <div style="clear: both;"></div>
</form>

<div id="tipue_search_content"></div>

<script>
$(document).ready(function() {
  $('#tipue_search_input').tipuesearch();
});
</script>

使用法

Tipue Search のドキュメントを参照し、コードを参照して、Tipue Search の仕組みと、Tipue Search をサイトに最適に統合する方法を理解してください。

ページとコレクションを含む

デフォルトでは、投稿のみが検索インデックスに含まれます。ページやコレクションは含まれません。

以下を_config.ymlに追加して、ページとコレクションを含めます。 collections含めるコレクションのリストを含む配列です。

 tipue_search:
  include:
    pages: true
    collections: [apples, oranges]

検索インデックスから除外する

フロントマター変数を使用して、検索インデックスから単一のドキュメントを除外します。

 exclude_from_search: true

_config.ymlの設定を使用して、複数のファイル、タグ、またはカテゴリを除外します。 files除外するファイル パスのリストを含む配列です。 tagsとcategories除外するタグとカテゴリのリストを含む配列です。

 tipue_search:
  exclude:
    files: [search.html, _apples/gragg.md, _oranges/valencia.md]
    tags: [tag1, tag2]
    categories: [category1, category2]