手动设置谷歌自定义搜索
- 发表于
- 前端
网站所有者经常使用谷歌自定义搜索引擎 (GCSE)搜索内容,而不是通过使用内置的搜索和/或自定义搜索功能。理由很简单--工作更少,窍门更多。如果你不需要高级过滤器或自定义搜索参数,GSCE非常适合你。
在这个快速技巧中,我将向你展示如何手动呈现搜索表单(不使用特殊的GCSE标签)和一个结果对话框,可以允许更多的控制和更整洁的方式来定义搜索输入字段风格。
问题
通常添加GCSE到网站很简单,就是复制粘贴脚本文件和一个自定义的HTML标签到网站。你在哪里放置的GCSE特殊标签,哪里就会呈现输入搜索领域。输入内容然后就这个领域就会开始谷歌搜索,是基于预先配置的参数(例如只搜索sitepoint.com)
经常出现的问题是“我如何改变GCSE的占位符输入字段”不幸的是,通常给的建议是错误的,因为它使用一个不可靠的设置延时方法,等待GCSE的Ajax调用完成(确保输入已经附加到DOM)然后通过JavaScript更改属性。
我们还要查询元素并使用JS更改元素属性,但是我们将使用GCSE提供的回调来保证输入已经加载,而不是盲目的使用setTimeout()函数。
创建一个GCSE帐户
搜索引擎完全在线配置。 第一步是去GCSE网站,然后单击添加。 按照向导填写您要搜索的域(通常是您的网站网址)。 您现在可以忽略那些高级设置。
单击完成后,您将看到三个选项:
- 获取代码 它将指导您完成复制什么和在哪里复制,以便在您的网站上显示搜索
- 公开网址 将向您展示您创建的搜索的工作预览
- 控制面板 用于自定义搜索
转向Control Panel,点击 Search Engine ID ,为了以后记下这个值。
HTML Setup
为了将其实现, 我们将创建一个基本的 index.html
文件(包含所需的HTML)以及app.js
文件(此文件包含渲染以及自定义搜索的函数)。
继续创建一个基本的HTML文件,文件内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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文件并添加下面这段:
file and add this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
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放进gcseld的配置文件。把本地索引的index.html文件的URL放到resultsUrl
f字段文件中。这就是用于提供查询请求后搜索重定向的地方。此外, GCSE期望搜索结果字段能够在提供的网址上展现出来。
添加搜索表单
这项功能检查页面是否已经加载,如果已经加载,会调用函数queryAndRender(),如果还没有加载,那么会设置一个回调,以便在文档完成加载后返回这里。
queryAndRender
此函数使用配置中提供的类查询DOM元素。 如果找到了wrapper div,分别调用renderSearch()和renderResults()渲染搜索和结果字段。
renderSearch
接下来就是见证奇迹的时刻。
我们使用Google Search API(有关如何使用 google.search.cse.element 对象的更多文档在此处)创建搜索框,如果有查询处于活动状态(结果),则显示结果框。
render函数所需的参数多于此示例中提供的参数,因此如果需要进一步自定义,请务必查阅文档。 div
参数实际上使用了我们想要搜索渲染的div的ID,而tag
参数则表示我们想要渲染什么(是结果?还是搜索?或是两者同时)。
此外, renderSearch()会查找wrapper元素的数据属性,如果其存在给定的自定义函数属性,那会继续查找此函数名的作用范围,然后将给定的的属性应用到元素上,这个过程就给了我们自定义元素风格的机会。
1 2 3 4 |
window.__gcse = { parsetags: 'explicit', callback: renderSearchForms }; |
在这段代码中,我们要修改全局范围的回调变量,这就使得GCSE加载完成后内部使用和执行回调函数时都会用到。这是解决输入域占位符(或其它)问题
比 setTimeout()更好的方案的一部分。
测试运行
到目前未知,我们已经囊括了要呈现一个搜索框和结果的所有东西。如果你已经安装了node.js,转到安装文件夹找到index.html和app.js文件,然后运行http-server命令。这个命令会启动本地内容服务,默认端口号是8080。
自定义函数Styling Function
现在我们准备添加自定义函数到搜索DIV上。回到index.html文件,找到#searchForm标记的DIV,然后添加自定义函数属性
1 2 |
<div styling-function="removePlaceholder" id="searchForm" class="gcse-search-wrapper"></div> |
现在进入app.js文件,在文件头部的config变量声明下面,添加一个新函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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"; }); }; |
现在再次尝试加载测试页面,您将看到一个正确的背景提示文字(placeholder)。
结论
要快速设置简单的搜索,特别是当网站只由静态HTML页面组成时,Google自定义搜索引擎会工作得很好。 使用一些JavaScript代码,不仅可以自定义搜索表单,而且可以自定义搜索结果页面,为用户提供一个更加无缝的体验。
你使用GCSE吗,还是找到了更好的解决方案? 请在下面评论!
原文连接
的情况下转载,若非则不得使用我方内容。