Hugo に全文検索機能を追加する

Hitoshi Arakawa | 2024/05/18 Sat 04:00

Hugo で公開されているテーマは全文検索機能が付いていないテーマも多い。

Complete List | Hugo Themes
https://themes.gohugo.io/

僕が使っている Hugo のサイトの一つは Blonde というテーマだが、これも検索機能がないのだ。2300 ページを超えるブログなので検索機能は欠かせない。

Blonde | Hugo Themes
https://themes.gohugo.io/themes/blonde/

そこで検索機能をつけることにした。

環境:
・macOS Ventura 13.5(英語環境)
・Hugo v0.119.0
・Hugo テーマ:Blonde

Google カスタム検索も候補の一つだったが、Google Search Console で申請してもうまくインデックスができていないサイトだ。Google でウェブ検索できないサイトは Google カスタム検索を導入できないので諦めた。

そこで以下のサイトに従い、Javascript を使った全文検索を付けた。

Hugo に全文検索(インクリメンタルサーチ)の機能を付ける - まくまく Hugo ノート
https://maku77.github.io/p/p4n5m3i/

「(応用)URL のハッシュフラグメントに検索ワードを入れる」の項目のコードは、<input id="query" onkeyup=~ の部分は layouts/_default/search.html の該当部分を差し替え、// ハッシュフラグメントの値で検索を実行 以降のコードは同ファイルの末尾の </script> 直前に追記すればい。

これであっさり検索機能を追加することができた。

バスカヴィル家の犬 【新訳版】 シャーロック・ホームズ・シリーズ (創元推理文庫) | アーサー・コナン・ドイル, 深町 眞理子 | 英米の小説・文芸 | Kindleストア | Amazon
https://amzn.to/4bsGeVU