- 💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】
- 🤟 基于Web端打造的：👉轻量化工具创作平台
- 💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
静态页面通常由HTML、CSS 和 Javascript 等静态文件组成，这些文件在服务器上不会动态生成或修改，所以加载速度通常比较快。也利于搜索引擎的抓取，适合用于展示固定内容的网站，如企业官方网站、产品介绍页、博客文章等。
为网页添加搜索模块的第三方网站有不少，首先我尝试了一下谷歌的站内搜索，让人比较痛苦的一个是前几行都是谷歌广告，而且还去不掉，还有一点就是搜索结果只能展示谷歌收录的页面，比如我网站加上小语种至少有几千个页面了，但是谷歌实际收录的页面只有几百，也就是说百分之80-90的结果都展示不出来，这两点就让人很绝望了，不得不另谋他路。
从网上摸索了一圈，终于找到了一种比较简单的使用 js 实现的搜索功能，经过几番倒腾终于可以成功复现。
效果如下：
首先我们将这些链接+标题都放入一个xml中，格式如下：
页面较多的可以用工具生成xml，我这保存了一个可以免费生成网站站点地图的工具：https://sitemap.zhetao.com/
该工具有一点较好的是它生成的格式有多种供选择，缺点就是一个站点180天只能生成一次，挺难受的。
到这里我们把之前的代码修改一下，
改完之后我发现搜索结果出不来了，看了下控制台的报错，原来是浏览器的同源策略导致的，该策略要求网页中使用的所有脚本（包括 Javascript、CSS、图片等）都必须来自同一源（协议、域名和端口）。
在这种情况下，我的页面是通过 file:/// 协议打开的，而 XML 文件路径是绝对路径 C:/Users/18363/documents/HBuilderProjects/demo/your links.xml。这导致了跨源请求，因为 file:/// 协议和 C: 协议不同。
解决方法：将文件上传至服务器中运行。试了一下果然好了
在加入我们网站时我们需要将搜索结果置于页面顶层（指的是里外的最外层），所以还需要再加一段CSS，最终完整代码如下：
最终实现效果：
样式还有点奇怪，还需要再调整一下，其他没什么问题了，如果大家有需要帮助，可以在下方评论区告诉我，有什么其他添加搜索功能的好办法也可以分享出来给大家参考。