Hugo 静态网站增加搜索功能
星期一, 1月 8, 2024 | 1分钟阅读 | 更新于 星期一, 1月 8, 2024
hugo网站文章网检索原理
其实就是在编译打包时生成一个index.json文件，里面包含了你写的所有文章：标题、内容等。
然后在页面中请求该json文件，在输入时进行文章匹配。
在hugo配置文件里设置输出字段
在hugo.yaml中或其他的配置文件里增加outputs配置
outputs:
home:
- "HTML"
- "RSS"
- "JSON"
page:
- "HTML"
- "RSS"
重新运行本地服务器，尝试打开http://localhost:1313/index.json,如果能看到json数据则证明配置成功。
完善检索功能
有了数据，有能力的人（对于前端工程师轻而易举）可以自己实现增加界面元素<input type="text"/>，然后监听输入事件，之后进行数据匹配，将匹配到的数绘制到界面中，让用户得以选择阅读就行了。
当然，也可以选择一些现成的插件：Search tools里提供了好多现成可用的插件方案。