在貼文列表頁面增設搜尋欄

不知不覺，這個極短（？）文 blog 網站已經累積了超過 300 篇（！）發文了。

因此，我開始心想：「這麼多發文，如果讀者只想找某個特定文章的話，要他們自己在貼文列表頁面一個一個去查找不是很麻煩？而且即使用上比較聰明的 Ctrl + F 一招，也只能以幫助不大的貼文標題作爲依循。如果有一個可以透過查詢標題還有內文的關鍵字取得特定發文的搜尋功能，那該有多好。」

所以我就在貼文列表頁面的開頭增設了一個搜尋欄。會選擇放在那邊是想模仿 Bear Blog 的預設版面配置。

我是照着此網站所使用的 SSG——Hugo 官方網站上的搜尋功能工具推薦頁面，選擇了 pagefind 這個設定過程非常直接簡單的工具。

因爲我就想要一個可以用的搜尋欄就好，所以我只需要照着 Quick Start 頁面的指示，在此網站貼文列表頁面所對應的原始碼檔案——也就是 list.html——加上這幾行 HTML 程式碼：

1<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
2<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
3
4<pagefind-modal-trigger></pagefind-modal-trigger>
5<pagefind-modal></pagefind-modal>

（上述程式碼的最後兩行對應的是會另外開啟「覆蓋整個原頁面的全螢幕搜尋頁」的版本。若想改成將搜尋結果以下拉選單樣式顯示的版本，請將該兩行程式碼改成 <pagefind-searchbox></pagefind-searchbox>。）

然後在我所使用的網站部署服務——Vercel 的設定頁面中，將建構網站的指令由普通的 hugo --gc 改成以下指令：

hugo --gc && npx -y pagefind --site public

這樣就搞定了。直白明瞭！

希望這個搜尋功能可以有所幫助。