经验总结

  1. 首页 > 生活 > >

给 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 脚本一致：
【给 hugo 博客添加搜索功能】{{ 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 博客添加搜索功能

文章插图
总结经过两天时间的奋斗，终于是将搜索功能给上线了 。
不得不说，理想总是一开始美好，最初以为是一个完整、可用的教程，却没想到复制到代码之后就不可用了，最终是经过自己的魔改才得以使用 。
总结一下就是，没有实践就没有话语权，千万不要做管中窥豹的那个人 。

经验总结扩展阅读


上一篇：2023年10月1日送葬行吗 2023年10月1日适合送葬吗

下一篇：注定跟处女座是夫妻的星座 相爱一生不分离