Table of contents

Simple-Jekyll-Search

Tags: javascript , npm , search

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

Homepage (github.com) [EN]
Document (github.com) [EN]
Demo

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

使い方

Simple-Jekyll-Searchをインストールします
```
npm install simple-jekyll-search
```

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

検索語句を入力するためのフィールドと検索結果を表示するコンテナを用意します

サンプル:

<!-- 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 を確認してください。

ブログ記事

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

Simple-Jekyll-Search

使い方

関連ページ

ブログ記事