flexibleSearchをJekyll（Github Pages）で使う

Github Pagesだと動的なことができないから、flexibleSearchをJekyllで使ってみる方法で検索部分を実装してみた

tinybeans/jq-plugin-flexibleSearch
https://github.com/tinybeans/jq-plugin-flexibleSearch

flexibleSearchはJSONベースの検索システム。

JSONの生成

JSONをどうやってだすんだろう？？というところでかなり時間がかかった。

{% gist 7033839 %}

こんなかんじで、一応エラーが出ないJSONを生成することが出来た。
flexibleSearchの次期バージョンからitemではなくitemsになってるので要注意。

最新版はGithubのdevelopブランチに入っている。

js部分はこんな感じで。

{% gist 7035259 %}

最新版ではjQueryの他に mustache.jsも必須になってます。

mustache
http://mustache.github.io/

JavaScriptのをおとしておきます。

janl/mustache.js
https://github.com/janl/mustache.js

検索結果のページは

<div id="fs-result"></div>

を埋め込むだけ。

{% gist 7049726 %}

結果表示部分はこんな感じでflexibleSearch.jsを書き換えておいた。

{% gist 7049773 %}

ここは近いうちにオプション側で指定出来るようになるとのこと。

検索フォーム部分も同様にflexibleSearch.jsを書き換え。

{% gist 7049781 %}

カテゴリアーカイブをflexibleSearchで作成した

JSONにcategoriesとしてcategoryを出すように修正。

{% gist 7056249 %}

サイドバーのカテゴリリスト部分は以下の様な感じで修正。

{% gist 7056240 %}