Add Search to Hugo with Pagefind

2024-09-23

[00:00.00]谁能明白我 - 刘德华 (Andy Lau)[00:03.80]词：郑国江[00:04.49]曲：林子祥[00:05.17]编曲：温浩昊[00:06.03]监制：陈德建[00:22.21]昂然踏着前路去 追赶理想旅途上[00:30.17]前行步步怀自信 风吹雨打不退让[00:38.18]无论我去到那方 心里梦想不变样[00:45.94]是新生 是醒觉 梦想永远在世上[00:54.24]前路那怕远只要自强[00:58.12]我继续独自寻路向[01:02.17]常为以往梦想发狂[01:06.15]耐心摸索路途上[01:10.09]怀自信我永不怕夜航[01:14.10]到困倦我自弹自唱[01:18.07]掌声我向梦想里寻[01:22.07]尽管一切是狂想[01:26.21]途人路上回望我 只因我的怪模样[01:34.12]途人谁能明白我 今天眼睛多雪亮[01:42.16]人是各有各理想 奔向目标不退让[01:50.01]用歌声 用欢笑 来博知音的赞赏[02:15.14]怀自信我永不怕夜航[02:18.86]到困倦我自弹自唱[02:23.04]掌声我向梦想里寻[02:27.01]尽管一切是狂想[02:30.99]昂然踏着前路去 追赶理想旅途上[02:38.99]前行步步怀自信[02:42.63]依照心中那正确方向[02:47.15]怀着爱与恕的心 充满梦想的笑匠[02:55.09]用歌声 用欢笑 来博知音的赞赏[03:03.04]用歌声 用欢笑 来博知音的赞

References

Install pagefind via npx (or download a precompiled release from GitHub)

Note that specialized languages are only supported in Pagefind’s extended release, which is the default when running npx pagefind. (Ref)

In the Hugo site directory (for me, ~/Desktop/blog)

hugo
npx pagefind --site "public"
hugo server -N -F

Add a search page. E.g. write a content/search.md file as follows

+++
title = "Search"
draft = false
slug = "search"
+++

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<link href="/css/pagefind.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

Customize the style of Pagefind UI (Ref). I already add

<link href="/css/pagefind.css" rel="stylesheet">

to content/search.md, what remains is to store the script in static/css/pagefind.css and tweak it to fit your theme.

body {
    --pagefind-ui-scale: .8;
    --pagefind-ui-primary: rgb(30,144,255);
    --pagefind-ui-text: rgb(240,248,255);
    --pagefind-ui-background: #181B20;
    --pagefind-ui-border: rgb(240,248,255);
    --pagefind-ui-tag: rgb(30,144,255);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 5px;
    --pagefind-ui-image-border-radius: 8px;
    --pagefind-ui-image-box-ratio: 3 / 2;
    --pagefind-ui-font: sans-serif;
}

Open a browser with the address http://localhost:1313/search/ and try Search!
For a better experience of Chinese searching, we can use the Force Language Flag (see also Ref1 and Ref2) in Step 2
```
npx pagefind --site "public" --force-language "zh"
```
If we have downloaded the precompiled release of pagefind_extended and added/linked it to the PATH, the following is faster
```
pagefind_extended --site "public" --force-language "zh"
```