最后，需要将 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 博客添加搜索功能】
推荐阅读
- 如何向报社投稿 厦门日报发稿
- Codeforces 1684 E. MEX vs DIFF
- P 算法与 K 算法
- 文字的力量盲盒把最贵的东西给他怎么过
- 怎么把别人的微信转发给别人（微信怎么转发别人的朋友圈)
- 再有人说synchronized是重量级锁，就把这篇文章扔给他看
- 微信怎么把一条消息或链接转发给自己（微信消息怎么全部转发)
- 手机六种截屏方法（手机怎么截图发给别人)
- 丝塔芙可以长期给婴儿用吗_丝塔芙适合多大的宝宝
- 原神3.1献给某人的蔷薇任务怎么完成