給 hugo 博客添加搜索功能( 二 )

2026-05-10 生活百科

最后，需要將 search.js 依賴引入，如下是引入的代碼：
{{ $search := resources.Get "js/search.js" | minify | fingerprint }}<script type="text/javascript" src="https://www.huyubaike.com/biancheng/{{ $search.RelPermalink }}"></script>添加 HTML 代碼HTML 頁面的代碼分為兩個部分：搜索的按鈕、搜索框和結果展示。
我這里將搜索的按鈕放到的菜單欄，主要是一個可點擊的按鈕：
{{ if .Site.Params.fastSearch -}}<li id="search-click" class="menu-item"><a class="menu-item-link" href="javascript:void(0)">搜索</a></li>{{- end }}對于搜索框，我選擇的是彈出式的窗口，這里比較重要的是標簽的 ID 需要和 search.js 腳本一致：
{{ if .Site.Params.fastSearch -}}<div id="fastSearch"><input id="searchInput"><ul id="searchResults"></ul></div>{{- end }}添加 CSS 樣式頁面樣式這部分，主要是看個人的喜好，這里只放出自己的樣式：
#fastSearch {display: none;position: fixed;left: 50%;top: calc(5vw + 40px);transform: translateX(-50%);z-index: 4;width: 650px;background-color: #fff;box-shadow: 0 1px 2px #3c40434d, 0 2px 6px 2px #3c404326;border-radius: 4px;overflow: hidden;input {padding: 10px;width: 100%;height: 30px;font-size: 18px;line-height: 30px;border: none;outline: none;font-family: inherit;}#searchResults {display: none;overflow-y: auto;max-height: 60vh;padding-left: 0;margin: 0;border-top: 1px dashed #ddd;.search-highlight {color: red;}li {list-style: none;margin: 0;a {text-decoration: none;color: inherit;padding: 6px 10px;display: block;font-size: 14px;letter-spacing: .04em;}a:hover,a:focus {filter: brightness(93%);outline: 0;background-color: rgb(240, 240, 240);}.title {font-weight: 600;}}li.noSearchResult {text-align: center;margin: 8px 0;color: #888;}}}樣例展示

給 hugo 博客添加搜索功能

文章插圖
總結經過兩天時間的奮斗，終于是將搜索功能給上線了。
不得不說，理想總是一開始美好，最初以為是一個完整、可用的教程，卻沒想到復制到代碼之后就不可用了，最終是經過自己的魔改才得以使用。
總結一下就是，沒有實踐就沒有話語權，千萬不要做管中窺豹的那個人。
【給 hugo 博客添加搜索功能】

推薦閱讀

上一篇：小小蟻國兵種怎么搭配

下一篇：沒有了