给 hugo 博客添加搜索功能( 二 ) _生活百科

最后，需要将 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 博客添加搜索功能( 二 )

推荐阅读

教你如何使用迅雷离线下载[新发布]

天麻能泡白酒吗天麻可以和虫草花一起煲汤吗

皮蛋是生的还是熟的怎么判断皮蛋是生的还是熟的

我们好像在哪见过歌词我们好像在哪见过歌词歌谱

煤炭公司起名大全免费煤炭行业起名大全

如何通过女人面相看婚姻哪些面相的女人婚姻好

孕妇梦见和别人吵架孕妇梦见别人挣了很多钱

瑜伽入门动作图解瑜伽入门动作图解上

etc不抬杆可以倒回吗 etc不抬杆可以倒回会被扣分吗

一斤几克重，一斤等于多少千克

节日由来英语节日由来

忙碌了多少天辛苦了多少年是啥歌快去听一下吧

五岳奇险天下第一山是哪座山天下第一山是哪座山

“八岐之术”是什么？

关于洛阳昊远机械设备有限公司简述洛阳昊远机械设备有限公司

梦见和当官的同学在一起商人梦见当官的同学

梦见水里有黑鱼在游

在“再见阿郎”中的刘金虎怎么又是金鹏？

喝番茄汁有什么好处番茄汁的好处有哪些

商业承兑汇票是什么意思商业承兑汇票的理解