如何在网站集成Google搜索框并替换原有自定义搜索代码

1. 基础代码替换 #

• 保留现有代码中的Font Awesome资源引入代码、汉堡菜单<a>标签代码，这两部分与搜索功能无关，无需修改
• 完全删除原有<form class="search-box">...</form>段的自定义搜索框代码
• 在原有搜索框的部署位置，粘贴Google搜索专用代码：

<script async src="https://cse.google.com/cse.js?cx=da0913cf3d0f12b51"></script>
<div class="gcse-search"></div>

2. 功能适配调整 #

• 提前确认Google自定义搜索引擎（CSE）后台已配置仅搜索你的站点域名，避免返回站外无关结果
• 若需要搜索结果在本站页面展示、不跳转至Google官方页面：将<div class="gcse-search"></div>同时部署到你原有的搜索结果页（即原form表单action属性指向的search.htm）的结果展示区域，CSE会自动将搜索结果加载到该容器中
• 若要保留原有搜索框的视觉风格，可在Google CSE后台的「外观」板块自定义搜索框、结果页样式，也可以通过自定义CSS覆盖.gcse-search相关类的默认样式完成适配

3. 上线前测试 #

替换完成后需做两项基础验证：

• 输入站点内存在的关键词搜索，确认返回结果均为本站相关内容
• 点击搜索结果跳转正常，无访问异常问题

内容的提问来源于stack exchange，提问作者sexy18