ブログに全文検索機能を付けました。 /search から利用できます。
ソースコードは、ほぼ「まくまく Hugo ノート」からいただきました。ありがとうございます。
ここでは JavaScript を使ってサイト内の全文検索を実現する方法を示します。全文検索を実現する方法としては、Google カスタム検索を利用する方法もありますが、Google カスタム検索は、インターネット上に公開する Web サイトにしか適用できません。ここで紹介する JavaScript を利用した全文検索は、ローカルで運用する Web サイトでも利用できますし、インクリメンタルサーチも実現することができます。
加えた変更は、以下の通り。
- ナビゲーションリンクへの追加
- content/search.md
- layouts/_default/search.html （利用しているテーマに馴染ませるために細部を変更）
独自の改良としては、テキストフラグメント（#:~:text=）に対応させました。これで検索結果のリンクをクリックすると、リンク先にジャンプして、検索ワードがハイライト＆出現箇所までスクロールされます。iOS では動かなかったのですが（未対応？）、デスクトップであれば Edge/Chrome などで動作するようです。
めっちゃ便利になった、プッシュしよう pic.twitter.com/swrpT0JQ0O
— 終末だるやなぎどこへいく？ (@daruyanagi) May 18, 2024
これはなかなか便利なのではないでしょうか！
今後の課題 見出しへのリンク
- モダンな Javascript でリファクタリングしたい。フォーマット書式とか使えるはず
- 前のブログ で思ったんだけど、記事本数が多くなると
/searchのファイルサイズが大きくなる。いずれは対策が必要になるかもしれない