idea 手动导入自定义包
马克·布朗 ( Mark Brown )对本文进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态!
网站所有者通常会决定使用Google的自定义搜索引擎 (GCSE)来搜索其内容,而不是使用内置和/或自定义搜索功能。 原因很简单–它的工作量少得多,并且大多数情况下都能解决问题。 如果您不需要高级过滤器或自定义搜索参数,那么GSCE非常适合您。
在此快速提示中,我将向您展示如何手动呈现搜索表单(不使用特殊的GCSE标记)和结果框,该框可提供更多控制权和更简洁的方式来设置搜索输入字段的样式。
问题
通常,将GCSE添加到您的网站就像将脚本和自定义HTML标签粘贴到您的网站一样简单。 在放置特殊GCSE标签的位置,将显示一个输入搜索字段。 在此字段中键入并开始搜索将基于先前配置的参数(例如,仅搜索sitepoint.com)进行Google搜索。
经常出现的一个问题是“如何更改GCSE输入字段的占位符?”。 不幸的是,通常建议的答案是错误的,因为它使用了不可靠的setTimeout
方法来等待来自GCSE的Ajax调用完成(确保输入已附加到DOM),然后通过JavaScript更改属性。
我们还将使用JS查询元素并更改属性,但是我们将使用GCSE提供的回调来确保输入已经加载,而不是进行盲目的setTimeout()
。
创建一个GCSE帐户
搜索引擎完全在线配置。 第一步是转到GCSE站点 ,然后单击添加 。 按照向导的说明填写您要搜索的域(通常是您的站点URL)。 您现在可以忽略任何高级设置。
单击完成时 ,将显示三个选项:
- 获取代码 ,它将指导您完成复制的内容和位置,以便搜索显示在您的网站上
- 公开网址将向您显示您设置的搜索的有效预览
- 用于自定义搜索的控制面板
转到“ 控制面板” ,单击“ 搜索引擎ID” ,然后记下该值以备后用。
HTML设置
为了进行尝试,我们将创建一个包含所需HTML的基本index.html
和一个包含呈现和自定义搜索所需功能的app.js
文件。
继续并在其中创建一个基本HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>GCSE test</h1>
<div class="gcse-search-wrapper"></div>
<div class="gcse-results-wrapper"></div>
<script src="app.js"></script>
</body>
</html>
我们添加了两个带有特殊类的<div>
,以便被识别为应呈现搜索表单和结果的元素。
手动渲染功能
现在进入您的app.js
文件并添加以下内容:
var config = {
gcseId: '006267341911716099344:r_iziouh0nw',
resultsUrl: 'http://localhost:8080',
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](form);
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
首先,我们为配置声明一些变量。 将您之前记下的ID放入配置的gcseId
字段中。 将本地index.html文件的URL放入resultsUrl
字段。 用户提交查询后,此处将重定向搜索。 此外,GCSE将期望在提供的URL上呈现一个结果字段。
addSearchForms
此函数检查页面是否已加载 ,如果是,则调用将处理呈现queryAndRender()
的函数,或者,如果尚未加载文档,则设置回调,以便在文档加载后稍后返回此处完成加载。
queryAndRender
此函数在DOM中查询具有配置中提供的类的元素。 如果找到包装div,则调用renderSearch()
和renderResults()
分别渲染搜索字段和结果字段。
renderSearch
这是真正的魔术发生的地方。
我们使用Google Search API(有关如何使用google.search.cse.element对象的更多文档,请参见 此处 )来创建搜索框,如果有活动的查询(结果),则创建结果框。
render函数接受的参数比本例中提供的参数多,因此,如果需要进一步的自定义,请确保检查文档。 div
参数实际上采用我们要呈现搜索的div的ID,而tag
参数则表示我们要呈现的确切内容( 结果或搜索或两者)。
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
另外, renderSearch()
查找wrapper元素的数据属性,如果给定了styling-function属性,它将在范围内查找该函数名称并将其应用于元素。 这是我们可以样式化元素的机会。
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
在此代码段中,我们在全局范围内设置了一个回调变量,以便GCSE在内部使用此变量,并在完成加载后执行该回调函数。 这是使此方法比setTimeout()
解决方案好得多的部分,该解决方案用于编辑输入字段的占位符(或其他任何值)。
测试运行
到目前为止,我们已经包含了呈现搜索框和结果所需的一切。 如果已安装node.js,请进入放置index.html
和app.js
文件的文件夹,然后运行http-server
命令。 默认情况下,它将在本地主机上端口8080上的文件夹中的内容作为服务器。
样式功能
现在我们准备将自定义样式功能添加到搜索div中。 返回index.html
并在#searchForm div上添加样式功能属性
<div styling-function="removePlaceholder"
id="searchForm" class="gcse-search-wrapper"></div>
现在进入app.js
并在文件顶部的config变量声明下添加一个新函数:
var removePlaceholder = function(div) {
var inputField = div.querySelector("input.gsc-input");
// Change the placeholder
inputField.placeholder = "Search SitePoint";
// Remove the background
inputField.style.background = "none";
// The background will get re-attached on blur, so add an event that will also remove it on blur
// Another way to do this would be to de-attach the element from the DOM and then re-attach again, hence wiping the listeners
inputField.addEventListener("blur", function() {
inputField.style.background = "none";
});
};
现在,尝试再次加载测试页,您将看到一个适当的占位符。
结论
为了快速设置简单的搜索,尤其是在网站只是静态HTML的情况下,Google自定义搜索引擎可以完美地运行。 使用少量JavaScript,不仅可以自定义搜索表单,还可以自定义结果页面,从而为用户提供更加无缝的体验。
您正在使用GCSE,还是找到了更好的解决方案? 在下面发表评论!
idea 手动导入自定义包