GhostブログにghostHunterの検索機能を付けた

Ghostは極めてシンプルで無駄がなく,美しいブログプラットフォームだ.記事をMarkdownで執筆でき,執筆時に変に動作が重くなるようなこともない.一般の方が作成し,公開してくださっているテーマファイルを適用することで簡単にブログの見た目を変えることができる.
だが,Ghostには記事の検索機能がない.ニーズはそこまで高くないかもしれないが,あって困るものでもない.

さて,Ghostでこの検索機能を付ける為にはghostHunterを利用するのが手っ取り早い.これを本ブログに導入した際のログを書き残しておく.

ghostHunterのダウンロード

何をするにもまずはghostHunter本体を,Ghostを動かしているサーバにダウンロードしなければならない.以下のコマンドを実行して,ghostHunterをダウンロードし,解凍する.

$ curl -L -o ghostHunter.zip https://github.com/jamalneufeld/ghostHunter/archive/master.zip && unzip ghostHunter.zip

ghostHunterのインストール

jquery.ghostHunter.min.jsのコピー

ghostHunter.zipを解凍してできたディレクトリ,おそらくghostHunter-masterというディレクトリの中にあるjquery.ghostHunter.min.jsが,今回の記事検索機能を実装するにあたって必要となるファイルとなる.これをGhostブログの現在使用しているテーマディレクトリのassets/js/以下にコピーする.テーマディレクトリは,Ghostブログ本体のcontent/themes/の中にある.

jquery.ghostHunter.min.jsの読み込み

テーマディレクトリの中のdefault.hbsを編集し,jquery.ghostHunter.min.jsを読み込ませる.以下のコードをjQueryを読み込むタグの後に書く.特にこだわりがなければ,</body>の直前に書けばいいと思う.

<script type="text/javascript" src="{{asset "js/jquery.ghostHunter.min.js"}}"></script>  
<script>  
  $("#search-field").ghostHunter({
    results   : "#results",
    onKeyUp   : true
  });
</script>  

検索フォーム,検索結果表示エリアの作成

検索フォーム及び検索結果表示エリアを作成する.僕は各ページのフッタの上にこれらを置きたかったので,default.hbs{{{body}}}の下,<footer class="site-footer">の上に以下のコードを挿入した.

<form>  
    <input id="search-field" placeholder="Search posts" />
</form>  
<section id="results"></section>  

Ghost Public APIの有効化

ghostHunterはアップデートによりGhost Public APIを用いて動くようになっている.Ghost Public APIはβ版の機能ではあるが,ghostHunterを動かす為に必要なので有効にする.Ghostブログの管理画面にアクセスし,Labsの下の方にあるEnable Beta FeaturesPublic APIにチェックを入れる.

Public APIを有効にしたら,今まで行ってきた変更を反映させる為にGhostを再起動する.起動したらブログページに移動し,検索フォームで正常に機能するか試してほしい.

Appendix

Inputフォームの見栄えを良くする

デフォルトのInputフォームでは見栄えが悪い.少しでもマシにする為に,テーマディレクトリの中のassets/css/screen.cssに以下のコードを追加した.

#search-field {
  text-align: center;
  width: 60%;
  height: 40px;
  border-radius: 3px;
  border: 1px solid rgb(204, 204, 204);
  color: rgb(75, 75, 75);
  font-size: 1.3em;
}
#search-field:focus {
  border: solid 1px #3498DB;
}
#results {
  text-align: center;
  margin: 20px auto;
  width: 90%;
}

検索結果で表示される内容を変更する

デフォルトでは記事のタイトルと公開日時が表示されるようだが,僕の環境では公開日時の部分が{{prettyPubDate}}と出てきてしまっていた.このままでは不格好なので,jquery.ghostHunter.min.jsresult_templateの部分を以下のように変更し,記事の説明文が表示されるように変更した(default.hbsのghostHunter設定で以下を設定しようとしたが,ページを表示した際に{{link}}{{title}}などが全て抜けてしまう現象に遭遇した為,jquery.ghostHunter.min.jsを直接編集した).

result_template:"<a href='{{link}}'><p><h2>{{title}}</h2><h4>{{description}}</h4></p></a>",