idea 手动导入自定义包
网站所有者通常会决定使用Google的自定义搜索引擎 （GCSE）来搜索其内容，而不是使用内置和/或自定义搜索功能。 原因很简单–它的工作量少得多，并且大多数情况下都能解决问题。 如果您不需要高级过滤器或自定义搜索参数，那么GSCE非常适合您。
在此快速提示中，我将向您展示如何手动呈现搜索表单（不使用特殊的GCSE标记）和结果框，该框可提供更多控制权和更简洁的方式来设置搜索输入字段的样式。
通常，将GCSE添加到您的网站就像将脚本和自定义HTML标签粘贴到您的网站一样简单。 在放置特殊GCSE标签的位置，将显示一个输入搜索字段。 在此字段中键入并开始搜索将基于先前配置的参数（例如，仅搜索sitepoint.com）进行Google搜索。
经常出现的一个问题是“如何更改GCSE输入字段的占位符？”。 不幸的是，通常建议的答案是错误的，因为它使用了不可靠的方法来等待来自GCSE的Ajax调用完成（确保输入已附加到DOM），然后通过Javascript更改属性。
我们还将使用JS查询元素并更改属性，但是我们将使用GCSE提供的回调来确保输入已经加载，而不是进行盲目的 。
搜索引擎完全在线配置。 第一步是转到GCSE站点 ，然后单击添加 。 按照向导的说明填写您要搜索的域（通常是您的站点URL）。 您现在可以忽略任何高级设置。
单击完成时 ，将显示三个选项：
- 获取代码 ，它将指导您完成复制的内容和位置，以便搜索显示在您的网站上
- 公开网址将向您显示您设置的搜索的有效预览
- 用于自定义搜索的控制面板
转到“ 控制面板” ，单击“ 搜索引擎ID” ，然后记下该值以备后用。
为了进行尝试，我们将创建一个包含所需HTML的基本和一个包含呈现和自定义搜索所需功能的文件。
继续并在其中创建一个基本HTML文件：
我们添加了两个带有特殊类的 ，以便被识别为应呈现搜索表单和结果的元素。
现在进入您的文件并添加以下内容：
首先，我们为配置声明一些变量。 将您之前记下的ID放入配置的字段中。 将本地index.html文件的URL放入字段。 用户提交查询后，此处将重定向搜索。 此外，GCSE将期望在提供的URL上呈现一个结果字段。
addSearchForms
此函数检查页面是否已加载 ，如果是，则调用将处理呈现的函数，或者，如果尚未加载文档，则设置回调，以便在文档加载后稍后返回此处完成加载。
queryAndRender
此函数在DOM中查询具有配置中提供的类的元素。 如果找到包装div，则调用和分别渲染搜索字段和结果字段。
renderSearch
这是真正的魔术发生的地方。
我们使用Google Search API（有关如何使用google.search.cse.element对象的更多文档，请参见 此处 ）来创建搜索框，如果有活动的查询（结果），则创建结果框。
render函数接受的参数比本例中提供的参数多，因此，如果需要进一步的自定义，请确保检查文档。 参数实际上采用我们要呈现搜索的div的ID，而参数则表示我们要呈现的确切内容（ 结果或搜索或两者）。
另外， 查找wrapper元素的数据属性，如果给定了styling-function属性，它将在范围内查找该函数名称并将其应用于元素。 这是我们可以样式化元素的机会。
在此代码段中，我们在全局范围内设置了一个回调变量，以便GCSE在内部使用此变量，并在完成加载后执行该回调函数。 这是使此方法比解决方案好得多的部分，该解决方案用于编辑输入字段的占位符（或其他任何值）。
到目前为止，我们已经包含了呈现搜索框和结果所需的一切。 如果已安装node.js，请进入放置和文件的文件夹，然后运行命令。 默认情况下，它将在本地主机上端口8080上的文件夹中的内容作为服务器。
现在我们准备将自定义样式功能添加到搜索div中。 返回并在#searchForm div上添加样式功能属性
现在进入并在文件顶部的config变量声明下添加一个新函数：
现在，尝试再次加载测试页，您将看到一个适当的占位符。
为了快速设置简单的搜索，尤其是在网站只是静态HTML的情况下，Google自定义搜索引擎可以完美地运行。 使用少量Javascript，不仅可以自定义搜索表单，还可以自定义结果页面，从而为用户提供更加无缝的体验。
您正在使用GCSE，还是找到了更好的解决方案？ 在下面发表评论！
翻译自: https://www.sitepoint.com/style-google-custom-search/