LinkSearchMenuExpandDocument
Table of contents

Simple-Jekyll-Search

Tags: , ,

Jekyllブログに検索機能を追加するためのJavaScriptライブラリ

使い方

  1. Simple-Jekyll-Searchをインストールします

    npm install simple-jekyll-search
    
  2. search.jsonを用意します

    Simple-Jekyll-Searchのリポジトリから ダウンロード できます。

    ---
    # 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 %}
    ]
    
  3. 検索語句を入力するためのフィールドと検索結果を表示するコンテナを用意します

    サンプル:

    <!-- 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="/simple-jekyll-search.min.js"></script>
    <script type="text/javascript">
      SimpleJekyllSearch({
        searchInput: document.getElementById('search-input'),
        resultsContainer: document.getElementById('results-container'),
        json: '/Simple-Jekyll-Search/search.json',
        searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
        noResultsText: 'No results found',
        limit: 10,
        fuzzy: false,
        exclude: ['Welcome']
      })
    </script>
    

    SimpleJekyllSearch()に渡せるオプションについては Wiki を確認してください。

ブログ記事

下記に掲載を希望される方はご連絡ください (詳細)

Back to top


Back to top

Copyright © 2021 Otti

Page last modified: