Mono Works

チラシのすきま

Hugoで javascriptを使った全文検索(インクリメンタルサーチ)

こちらの記事を真似て、うちのサイトにも検索ページを作ってみました。

実際に使ってみると、検索結果はインクリメンタルサーチとして機能し、文字入力するごとに完全または途中まで一致する単語で絞り込まれていきます。また、A《スペース》Bの結果は、A and Bでも A or Bでもなく、スペースも含めて一つの単語としてA《スペース》Bに完全または途中まで一致する部分をピックアップしてきます。

2018-07-09-hugo-js-full-text-search01 先日オープンしたパン屋さん

導入方法は、参考ページまんまですが、少しだけハマったところがあったので、その補足説明を加えて、導入方法をまとめました。

参考:Hugo に全文検索を取り付けた | the right stuff

インデックスファイルの生成

インデックスファイルのテンプレート作成

全文検索用のインデックスファイル index.js を生成するためのテンプレートファイル(single.html)を作成して、layouts/js/single.html に配置。

single.htmlの中身がこちら

var data = [{{ range $index, $page := where .Site.Pages "Section" "post"}}
{{ if ne $index 0 }},{{ end }}{
url: "{{ $page.Permalink }}",
title: "{{ $page.Title }}",
content: "{{ .PlainWords }}"
}{{ end }}]

上記内容だと、Sectionが postの記事から、URLタイトル内容を抽出して、インデックスを生成します。content.PlainWordsを指定することで、HTMLタグを外しているんだそうです。

インデックスファイルを生成する空の投稿ファイル作成

テンプレートで設定した内容を書き出すための空の投稿ファイル(indexjs.md)を作成して、Front matterのみを記述。

+++
date = "2010-10-01T00:00:01+09:00"
type = "js"
url = "index.js"
+++

日付は適当に、typejsurlindex.jsを指定して、固定ページを置いてある content/pages/indexjs.mdに配置しました。

インデックスファイルを生成してみる

ビルドして、public/index.jsを確認すると、うちのサイトの場合、過去5年分175個の記事が抽出されて、ファイルサイズは 732KB でした。

検索ページの作成

次に、作成したインデックスファイル(index.js)を検索するユーザーインタフェイスを作ります。

検索ページのテンプレート作成

検索ページ用のテンプレートファイル(single.html)を作成して、layouts/search/single.htmlに配置。

single.htmlの中身は、参考ページのソースを真似させていただき、CSSで調整しました。具体的な中身は長いので割愛。検索ページのソースをご覧下さい。

検索ページ表示用のファイル作成

テンプレートで設定した検索ページを表示するためのファイル(search.md)を作成して、Front matterのみを記述。

+++
date = "2010-10-01T00:00:01+09:00"
type = "search"
url = "search"
title = "ブログ全文検索"
+++

日付は適当に、typesearchurlsearchを指定して、インデックスファイルと同じく固定ページを置いてある content/pages/search.mdに配置しました。

ビルドして検索してみる

ビルドして、検索ページが表示されたので、大丈夫かと思ったのですが、実際に検索してみると、何も検索結果が表示されませんでした。

あれ?と思い、いろいろと見直した結果、作成したインデックスファイル(index.js)が壊れていたことが分かりました。

2018-07-09-hugo-js-full-text-search02

具体的には、記事内の 《バックスラッシュ》uの部分に 16 進の数字が必要です。というエラーが発生していました。

参考:16 進数の数字が必要です。 - MSDN - Microsoft

直接インデックスファイル(index.js)を修正する場合、 《バックスラッシュ》u《バックスラッシュ》《バックスラッシュ》uとすれば良いのですが、ビルドの度に手動でインデックスファイル(index.js)を修正するのは面倒だったので、元記事を下記のように変更して対応しました。(対処療法なのは見逃して…)

変更前 google《バックスラッシュ》usb_driverフォルダに~

変更後 google《スラッシュ》usb_driverフォルダに~

2つの検索方法

最初に書いたように、今回導入した検索は、インクリメンタルサーチとして動作し、入力する単語は1つのキーワードとして検索をおこないます。これに対して、これまで利用してきたGoogle検索は、複数のキーワードをスペースで区切って検索してくれます。

どちらも良いところがあるので、これまで利用してきた使ってきたGoogle検索はサイドメニューに Googleブログ検索と名前だけ変えてそのまま残し、今回導入した検索は、もうひとつの検索として ページ上部メニューの右端に追加しました。用途に応じて使い分け下さいませませ。

おしまい

comments powered by Disqus
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内