feat: New post - how to add search to any kind of static site using p…

…agefind

src/content/post/how-to-add-search-to-any-kind-of-static-site-using-pagefind/index.mdx

@@ -0,0 +1,102 @@
+---
+isDraft: false
+icon: { name: 'material-symbols:manage-search-rounded', title: '文章搜尋符號' }
+title: 'How to add search to any kind of static site using Pagefind'
+titleTC: '使用 Pagefind 替任何靜態網站添加搜尋功能'
+excerpt: '不到 3 步驟讓你的網站擁有以 WebAssembly 高效驅動的客製化搜尋功能。靜態網站像是部落格、文件、個人網站、公司網站……等這類閱讀體驗為主的網站通常都有搜尋內容的需求，恰逢 Pagefind 1.0 的推出我把原先自製的 fuse.js 搜尋功能換成 Pagefind，這篇文章將分享如何在任何靜態網站上加入搜尋功能。'
+category: '技術討論'
+tags: ['pagefind', '靜態網站']
+publishDate: 2024-04-13
+---
+
+## 前言
+
+![原先存在於導覽列的 Fuse.js 搜尋功能](./fuse-search.webp '原先存在於導覽列的 Fuse.js 搜尋功能')
+
+如果你是網頁東東較早期的讀者可能會發現導覽列原先的搜尋功能不見了，這是因為近期把使用 [Fuse.js](https://www.fusejs.io/)（模糊搜尋套件）製作的搜尋功能改為使用 [pagefind](https://pagefind.app/) 來實現網站的搜尋功能。
+
+Fuse.js 其實已經足夠當前網站的搜尋需求，但可以預期網站大一點就會遇上瓶頸，又碰巧遇上 pagefind 1.0 的推出，就決定把原先的搜尋功能換成 pagefind，當然背後還有一些額外的原因，像是我想移除原先製作 UI 所用到的 [preact](https://preactjs.com/)。
+
+## 關於 pagefind
+
+pagefind 是一個以 Rust 編寫並且透過執行 WebAssembly 來實現的搜尋套件，它的誕生原因從一開始就非常明確：替任何靜態網頁提供現成可用的搜尋方案。
+
+- 搜尋快速
+- 提供現成 UI
+- 支援任何靜態文件搜尋
+- 支援 [分類](https://pagefind.app/docs/filtering/)、[排序](https://pagefind.app/docs/sorts/)、[自定義搜尋資料](https://pagefind.app/docs/metadata/)、[索引重要程度標註](https://pagefind.app/docs/weighting/)
+
+讓我感覺到這是一個足夠成熟可即用的解決方案，因此決定採納 pagefind 來實現這個 Astro 靜態網站的搜尋功能。
+
+## 第一步：[建立索引](https://pagefind.app/docs/running-pagefind/)
+
+pagefind 的運作原理十分簡單，只需要[對生成好的靜態網站建立索引](https://pagefind.app/docs/running-pagefind/)即可，索引其實就是一個 `pagefind` 資料夾裡面裝滿了 pagefind 所需要用到的檔案，
+過程無須安裝相關套件，只需要執行 `npx -y pagefind --site public --serve` 就可以及時下載 pagefind 並且建立索引，我將這個流程放置在[建構完成網站之後](https://github.com/riceball-tw/web-dong-blog/blob/e599c15cb93ce08cb5cbbc1a51291ea39b1d35f1/package.json#L9)。
+
+建構完成會得到類似以下的結果，並且多出一個 `pagefind` 資料夾：
+
+```bash
+Running Pagefind v1.1.0 (Extended)
+Running from: "D:\\USER\\Desktop\\astro-blog"
+Source:       "dist"
+Output:       "dist\\pagefind"
+
+[Walking source directory]
+Found 221 files matching **/*.{html}
+
+[Parsing files]
+Found a data-pagefind-body element on the site.
+↳ Ignoring pages without this tag.
+
+[Reading languages]
+Discovered 1 language: zh-hant-tw
+
+[Building search indexes]
+Total:
+  Indexed 1 language
+  Indexed 123 pages
+  Indexed 5640 words
+  Indexed 2 filters
+  Indexed 1 sort
+
+Finished in 1.503 seconds
+```
+
+這裡使用 `Extended` 版本，意味著這個版本針對中文與日文這樣[特殊語言](https://pagefind.app/docs/multilingual/#specialized-languages)有特別支援，如果部落格使用這類語言可以特別留意使用該版本。
+
+## 第二步：[添加搜尋功能](https://pagefind.app/docs/)
+
+Pagefind 很貼心的自帶現成的搜尋 UI，並且包含了點擊加載的功能，只需要在想要添加搜尋的頁面中添加以下代碼即可創建搜尋功能：
+
+```html
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
+<script src="/pagefind/pagefind-ui.js"></script>
+<div id="search"></div>
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    // 替換 #search 為你想要放置搜尋的元素
+    new PagefindUI({ element: '#search', showSubResults: true });
+  });
+</script>
+```
+
+也可以不使用現成 UI，而是單純的使用 pagefind 的搜尋功能，並取得搜尋結果：
+
+```javascript
+const pagefind = await import('/pagefind/pagefind.js');
+const search = await pagefind.search('static');
+```
+
+## 總結
+
+不到 3 步驟你的網站就立刻有以 WebAssembly 高效驅動的客製化搜尋功能了 🙌🏻！你可能會想要根據自己的需求進行一些客製化設定，像是這個部落格有對 pagefind 做一些額外的設定：
+
+- [修改預設 UI 樣式以匹配網站風格](https://pagefind.app/docs/ui-usage/#customising-the-styles)
+- [依照時間分類搜索結果](https://pagefind.app/docs/sorts/)
+- [根據現有分類系統進行搜索分類](https://pagefind.app/docs/filtering/)
+
+![網頁東東首頁搜尋範例](./webdong-homepage.webp)
+
+## 延伸閱讀
+
+- 細節如何在靜態網站加入 Fuse.js 搜尋功能可以參考：[Astro 系列文第二十日：實作搜尋功能](http://localhost:4321/post/astro-search-functionality/)