子舒的博客
·
用原生 js 给网站写个搜索功能
💡
原文中文，约3200字，阅读约需8分钟。
📝
内容提要
本文介绍了如何为Hugo网站添加搜索功能并实现热更新。首先生成文章列表的JSON文件，然后创建搜索模板，绑定输入事件，通过GET请求获取JSON数据并进行搜索，最后展示搜索结果，并提供基本样式以提升用户体验。
🎯
关键要点
-
为Hugo网站添加搜索功能并实现热更新。
-
生成文章列表的JSON文件，包含文章标题和链接。
-
在layouts文件夹下新建index.json文件，使用特定模板生成JSON数据。
-
创建search.html模板，绑定输入事件以实现搜索功能。
-
通过GET请求获取JSON数据，并根据关键词生成搜索列表。
-
展示搜索结果，并提供基本样式以提升用户体验。
❓
延伸问答
如何为Hugo网站添加搜索功能？
可以通过生成文章列表的JSON文件，创建搜索模板，并绑定输入事件来实现搜索功能。
生成JSON文件的步骤是什么？
在layouts文件夹下新建index.json文件，使用特定模板生成包含文章标题和链接的JSON数据。
如何绑定输入事件以实现搜索？
在search.html模板中，给input元素绑定oninput事件，调用initiateSearch函数进行搜索。
搜索结果是如何展示的？
通过displayResults函数将搜索结果动态添加到resultsContainer中，如果没有结果则显示提示信息。
如何实现热更新功能？
通过GET请求获取JSON数据并根据关键词生成搜索列表，从而实现热更新。
搜索功能的基本样式是怎样的？
基本样式包括搜索框的宽度、边框、阴影效果，以及搜索结果的显示样式。
➡️
