精確比對 (Exact Match):不像 PaperMod 內建的模糊搜尋(常常會搜出一堆不相關的東西),這套搜尋強制比對關鍵字,只要文章標題、摘要或是內文確切包含你打的字,就會立刻顯示。 按照時間排序:我在 Hugo 的資料索引(index.json)裡面加入並開放了日期的屬性,並在前端搜尋結果顯示時強制設定為「最新文章排在最前面」,同時也會顯示該篇文章的發布日期。 無縫整合介面:它被建立在 layouts/partials/header.html 裡面(這代表每個頁面如 post, portfolio, about 都能直接存取使用),直接懸浮顯示結果,不用跳轉到獨立的搜尋網頁。
我具體所做的變更包含:
將 hugo.yaml 中的 Home 輸出格式加入了 JSON(讓 Hugo 在建構網頁時能產生搜尋資料庫)。 用客製化的 layouts/_default/index.json 腳本,除了抓取文章標題與內容外,特別抓取了時間參數。 覆寫了主題的 layouts/partials/header.html 檔案,在結尾處寫了一個純前端的搜尋框設計(包含背景透明、邊框發光的質感設計)。 你可以直接回到你的本地預覽或者重新發布網頁測試看看搜尋效果!如果有需要調整外觀或寬度的話再隨時跟我說!