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

概要

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

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

設定(config.yml)を変更します。config.tomlの場合は、tomlファイルの形式で読み替えてください。

outputs:
  home:
    - HTML
    - RSS
    - JSON # この行のみ追加、もしoutputsがない場合は他の部分も追加

search.mdをcontentディレクトリ内に配置する

---
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"
---

検索機能を実現するために利用しているFuse.jsの設定(config.yml)を追加する。

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のライブラリで、高速な検索を実現できるようです。今回初めて知りました。便利なライブラリのようなので、もしも機会があったら自分で作成したサービスでも使ってみたいです。

概要#

環境#

やりたいこと#

方法#

さいごに#

概要

環境

やりたいこと

方法

さいごに