用原生 js 给网站写个搜索功能

📝

内容提要

本文介绍了如何为Hugo网站添加搜索功能并实现热更新。首先生成文章列表的JSON文件，然后创建搜索模板，绑定输入事件，通过GET请求获取JSON数据并进行搜索，最后展示搜索结果，并提供基本样式以提升用户体验。

🎯

关键要点

• 为Hugo网站添加搜索功能并实现热更新。

• 生成文章列表的JSON文件，包含文章标题和链接。

• 在layouts文件夹下新建index.json文件，使用特定模板生成JSON数据。

• 创建search.html模板，绑定输入事件以实现搜索功能。

• 通过GET请求获取JSON数据，并根据关键词生成搜索列表。

• 展示搜索结果，并提供基本样式以提升用户体验。

🔎

延伸解读

搜索功能的实现步骤

为Hugo网站添加搜索功能的过程包括几个关键步骤：首先生成包含文章标题和链接的JSON文件，然后创建搜索模板并绑定输入事件，最后通过GET请求获取JSON数据进行搜索。这一流程确保了用户能够快速找到所需内容，提升了网站的可用性。

热更新的优势

实现热更新功能后，用户在输入搜索关键词时，搜索结果会实时更新。这种动态反馈不仅提高了用户体验，还能有效减少用户等待时间，增强网站的互动性。对于内容频繁更新的网站来说，热更新尤为重要。

注意事项

在实现搜索功能时，需要确保JSON文件的路径和格式正确，以避免搜索失败。此外，绑定事件时要注意性能，避免在每次输入时都进行复杂的计算，建议使用防抖技术来优化搜索体验。

❓

延伸问答

如何为Hugo网站添加搜索功能？

可以通过生成文章列表的JSON文件，创建搜索模板，并绑定输入事件来实现搜索功能。

生成JSON文件的步骤是什么？

在layouts文件夹下新建index.json文件，使用特定模板生成包含文章标题和链接的JSON数据。

如何绑定输入事件以实现搜索？

在search.html模板中，给input元素绑定oninput事件，调用initiateSearch函数进行搜索。

搜索结果是如何展示的？

通过displayResults函数将搜索结果动态添加到resultsContainer中，如果没有结果则显示提示信息。

如何实现热更新功能？

通过GET请求获取JSON数据并根据关键词生成搜索列表，从而实现热更新。

搜索功能的基本样式是怎样的？

基本样式包括搜索框的宽度、边框、阴影效果，以及搜索结果的显示样式。

🏷️

标签

Hugo JSON js 搜索功能 热更新 用户体验