HugoのPaperModテーマで検索機能を有効化する方法

Tips
2025年04月29日 10:00

概要

HugoのPaperModテーマを利用して制作しているブログサイトについて、検索機能を有効にしました。

その方法を紹介します。

環境

• Hugo v0.147.0+extended
• PaperMod 7cf752f8644fea1fc3dc7299352718d492c55182

やりたいこと

Hugoを利用してブログを作成しています。

そのブログでは、テーマとしてPaperModを利用しています。

https://github.com/adityatelange/hugo-PaperMod

このPaperModテーマでは、初期設定では検索機能がありません。できるのであれば、記事の内容を検索できるようにし、過去の記事を有効活用できるようにしたいです。

そこで調べたところ、PaperModでは設定を変更することで検索できると分かりました。

方法

具体的な方法については、ここに記載されていました。

https://github.com/adityatelange/hugo-PaperMod/wiki/Features#search-page

次のようにして、検索機能を有効にできます。

1. 設定(config.yml)を変更します。config.tomlの場合は、tomlファイルの形式で読み替えてください。 yaml outputs: home: - HTML - RSS - JSON # この行のみ追加、もしoutputsがない場合は他の部分も追加
2. search.mdをcontentディレクトリ内に配置する markdown --- title: "Search" # in any language you want layout: "search" # necessary for search url: "/search" # description: "Description for Search" summary: "search" placeholder: "placeholder text in search input box" ---
3. 検索機能を実現するために利用しているFuse.jsの設定(config.yml)を追加する。 yaml params: # for search # https://fusejs.io/api/options.html fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 limit: 10 # refer: https://www.fusejs.io/api/methods.html#search keys: [ "title", "permalink", "summary", "content" ]

これで検索ページが用意できました。/searchのようなパスでアクセスすると検索ページが表示されます。

もし、検索結果に満足いかない場合はfuseOptsの設定を変更します。私はデフォルトの設定で満足しているので、変更していません。

さいごに

オプションですが、簡単な設定変更のみで実現できたのでよかったです。

検索機能の実現にはFuse.jsを利用しているようです。JavaScriptのライブラリで、高速な検索を実現できるようです。今回初めて知りました。 便利なライブラリのようなので、もしも機会があったら自分で作成したサービスでも使ってみたいです。