核心要點(diǎn)
- 通過(guò)手動(dòng)渲染搜索表單（無(wú)需使用特殊的GCSE標(biāo)簽），可以手動(dòng)設(shè)置Google自定義搜索引擎(GCSE)的樣式，從而更好地控制搜索輸入字段并使其外觀(guān)更簡(jiǎn)潔。
- GCSE回調(diào)函數(shù)可以確保在更改輸入屬性之前已加載輸入。此方法比使用
setTimeout方法更可靠。 - Google搜索API可用于創(chuàng)建搜索框和結(jié)果框。如果存在活動(dòng)查詢(xún)，則還會(huì)創(chuàng)建結(jié)果框。通過(guò)查閱文檔可以實(shí)現(xiàn)其他自定義。
- 可以向搜索div添加自定義樣式函數(shù)以進(jìn)行進(jìn)一步自定義。此函數(shù)可用于更改占位符、刪除背景以及添加在失焦時(shí)刪除背景的事件。
本文由Mark Brown審核。感謝所有SitePoint的同行評(píng)審員，他們使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！
網(wǎng)站所有者經(jīng)常選擇使用Google自定義搜索引擎(GCSE)來(lái)搜索其內(nèi)容，而不是使用內(nèi)置和/或自定義搜索功能。原因很簡(jiǎn)單——工作量少得多，而且大多數(shù)情況下都能達(dá)到目的。如果您不需要高級(jí)篩選器或自定義搜索參數(shù)，那么GCSE適合您。
在本快速提示中，我將向您展示如何手動(dòng)渲染搜索表單（無(wú)需使用特殊的GCSE標(biāo)簽）和結(jié)果框，這允許更精細(xì)的控制和更簡(jiǎn)潔的搜索輸入字段樣式設(shè)置方法。
問(wèn)題
通常，將GCSE添加到您的網(wǎng)站就像將腳本和自定義HTML標(biāo)簽復(fù)制粘貼到您的網(wǎng)站一樣簡(jiǎn)單。在您放置特殊GCSE標(biāo)簽的位置，將呈現(xiàn)一個(gè)輸入搜索字段。從此字段鍵入并啟動(dòng)搜索將根據(jù)先前配置的參數(shù)執(zhí)行Google搜索（例如，僅搜索sitepoint.com）。
經(jīng)常出現(xiàn)的一個(gè)問(wèn)題是“如何更改GCSE輸入字段的占位符？”。不幸的是，建議的答案通常是錯(cuò)誤的，因?yàn)樗褂貌豢煽康?code>setTimeout方法來(lái)等待GCSE的Ajax調(diào)用完成（確保輸入已附加到DOM），然后通過(guò)JavaScript更改屬性。
我們也將查詢(xún)?cè)夭⑹褂肑S更改屬性，但我們將使用GCSE提供的回調(diào)函數(shù)，而不是盲目地使用setTimeout()，這將保證輸入已加載。
創(chuàng)建GCSE帳戶(hù)
搜索引擎完全在線(xiàn)配置。第一步是轉(zhuǎn)到GCSE網(wǎng)站并單擊“添加”。按照向?qū)Р僮?，填?xiě)您要搜索的域名（通常是您的網(wǎng)站URL）?，F(xiàn)在您可以忽略任何高級(jí)設(shè)置。
單擊“完成”后，您將看到三個(gè)選項(xiàng)：
- “獲取代碼”，這將指導(dǎo)您完成必須復(fù)制的內(nèi)容以及放置位置，以便搜索顯示在您的網(wǎng)站上
- “公共URL”將向您顯示已設(shè)置搜索的工作預(yù)覽
- “控制面板”用于自定義搜索
轉(zhuǎn)到“控制面板”，單擊“搜索引擎ID”，并記下此值以備后用。
HTML設(shè)置
為了嘗試一下，我們將創(chuàng)建一個(gè)基本的index.html，其中包含所需的HTML，以及一個(gè)包含渲染和自定義搜索所需函數(shù)的app.js文件。
繼續(xù)創(chuàng)建一個(gè)包含以下內(nèi)容的基本HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1>GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<??>
</body>
</html>
我們添加了兩個(gè)<div>，并使用特殊的類(lèi)來(lái)識(shí)別應(yīng)在其中呈現(xiàn)搜索表單和結(jié)果的元素。
手動(dòng)渲染函數(shù)
現(xiàn)在進(jìn)入您的app.js文件并添加以下內(nèi)容：
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
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.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
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](div); // 傳遞div而不是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放入config的gcseId字段中。將本地index.html文件的URL放入resultsUrl字段中。這是用戶(hù)提交查詢(xún)后搜索將重定向到的位置。此外，GCSE將期望在提供的URL上呈現(xiàn)結(jié)果字段。
renderSearchForms函數(shù)檢查頁(yè)面是否已加載，如果已加載，則調(diào)用將負(fù)責(zé)渲染queryAndRender()的函數(shù)；或者，如果文檔尚未加載，則設(shè)置回調(diào)函數(shù)，以便稍后在文檔加載完成后返回此處。
queryAndRender函數(shù)查詢(xún)具有在config中提供的類(lèi)的元素的DOM。如果找到包裝器div，則分別調(diào)用renderSearch()和renderResults()來(lái)呈現(xiàn)搜索和結(jié)果字段。
renderSearch函數(shù)是實(shí)際的魔法發(fā)生的地方。
我們使用Google搜索API（此處有關(guān)如何使用google.search.cse.element對(duì)象的更多文檔）來(lái)創(chuàng)建搜索框，如果存在活動(dòng)查詢(xún)（結(jié)果），則創(chuàng)建結(jié)果框。
render函數(shù)接受比此示例中提供的更多參數(shù)，因此如果需要進(jìn)一步自定義，請(qǐng)務(wù)必檢查文檔。div參數(shù)實(shí)際上接受我們要渲染搜索的div的ID，tag參數(shù)表示我們究竟要渲染什么（results或search或兩者）。
此外，renderSearch()查找包裝器元素的數(shù)據(jù)屬性，如果給出了styling-function屬性，它將查找作用域中的函數(shù)名稱(chēng)并將其應(yīng)用于元素。這是我們可以設(shè)置元素樣式的機(jī)會(huì)。
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
在此代碼片段中，我們?cè)谌肿饔糜蛑性O(shè)置了一個(gè)回調(diào)變量，以便GCSE在內(nèi)部使用此變量并在加載完成后執(zhí)行回調(diào)函數(shù)。這使得此方法比使用setTimeout()解決方案來(lái)編輯輸入字段的占位符（或任何其他內(nèi)容）好得多。
測(cè)試運(yùn)行
到目前為止，我們已經(jīng)包含了渲染搜索框和結(jié)果所需的一切。如果您已安裝node.js，請(qǐng)進(jìn)入放置index.html和app.js文件的文件夾，然后運(yùn)行http-server命令。默認(rèn)情況下，這將在localhost上的端口8080上提供文件夾中的內(nèi)容。
樣式函數(shù)
現(xiàn)在我們準(zhǔn)備向搜索div添加自定義樣式函數(shù)。返回index.html，并在#searchForm div上添加一個(gè)styling-function屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1>GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<??>
</body>
</html>
現(xiàn)在進(jìn)入app.js，在文件的頂部，在config變量聲明下，添加一個(gè)新函數(shù)：
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
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.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
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](div); // 傳遞div而不是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);
})();
現(xiàn)在嘗試再次加載測(cè)試頁(yè)面，您將看到正確的占位符。
結(jié)論
對(duì)于快速設(shè)置簡(jiǎn)單的搜索，尤其是在網(wǎng)站只是靜態(tài)HTML的情況下，Google自定義搜索引擎非常有效。只需少量JavaScript代碼，就可以自定義搜索表單和結(jié)果頁(yè)面，為用戶(hù)提供更無(wú)縫的體驗(yàn)。
您是否正在使用GCSE，或者您是否找到了更好的解決方案？請(qǐng)?jiān)谙路皆u(píng)論！
關(guān)于設(shè)置Google自定義搜索樣式的常見(jiàn)問(wèn)題解答(FAQ)
如何自定義Google自定義搜索引擎的外觀(guān)？
自定義Google自定義搜索引擎的外觀(guān)涉及使用CSS（層疊樣式表）。CSS是一種樣式表語(yǔ)言，用于描述以HTML編寫(xiě)的文檔的外觀(guān)和格式。您可以更改搜索引擎的顏色、字體、大小和其他元素。為此，您需要訪(fǎng)問(wèn)可編程搜索元素控制API，該API允許您自定義搜索元素。然后，您可以將CSS添加到正確的部分以更改搜索引擎的外觀(guān)。
我可以將Google自定義搜索添加到我的網(wǎng)站嗎？
是的，您可以將Google自定義搜索添加到您的網(wǎng)站。Google提供了一個(gè)自定義搜索JSON API，您可以使用它來(lái)發(fā)送GET請(qǐng)求。此API以JSON格式返回搜索結(jié)果。然后，您可以使用這些結(jié)果在您的網(wǎng)站上創(chuàng)建自定義搜索引擎。這允許您的用戶(hù)搜索您的網(wǎng)站或您指定的其他網(wǎng)站。
如何使用Google自定義搜索實(shí)現(xiàn)搜索框？
使用Google自定義搜索實(shí)現(xiàn)搜索框涉及創(chuàng)建搜索引擎ID，您可以在可編程搜索引擎網(wǎng)站上執(zhí)行此操作。獲得ID后，您可以使用自定義搜索元素控制API來(lái)創(chuàng)建搜索框。然后，您可以使用CSS自定義此搜索框。
什么是可編程搜索元素控制API？
可編程搜索元素控制API是由Google提供的一組函數(shù)，允許您自定義可編程搜索引擎。這包括創(chuàng)建搜索框、自定義搜索引擎的外觀(guān)以及控制搜索結(jié)果。
如何控制Google自定義搜索中的搜索結(jié)果？
您可以使用可編程搜索元素控制API控制Google自定義搜索中的搜索結(jié)果。此API提供允許您指定搜索的網(wǎng)站、返回的結(jié)果數(shù)量以及顯示結(jié)果的順序的函數(shù)。
我可以將Google自定義搜索用于商業(yè)用途嗎？
是的，您可以將Google自定義搜索用于商業(yè)用途。但是，您需要了解服務(wù)條款。例如，您不能使用搜索引擎來(lái)顯示成人內(nèi)容或宣傳非法活動(dòng)。
如何更改Google自定義搜索中搜索結(jié)果的顏色？
您可以使用CSS更改Google自定義搜索中搜索結(jié)果的顏色。您需要訪(fǎng)問(wèn)可編程搜索元素控制API并將CSS添加到正確的部分。您可以更改文本、背景和其他搜索結(jié)果元素的顏色。
我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎？
是的，您可以在移動(dòng)設(shè)備上使用Google自定義搜索。可編程搜索引擎設(shè)計(jì)為響應(yīng)式，這意味著它將調(diào)整以適應(yīng)其正在查看的設(shè)備的屏幕尺寸。您還可以使用CSS自定義搜索引擎的外觀(guān)，使其更適合移動(dòng)設(shè)備。
如何在我的Google自定義搜索引擎中添加徽標(biāo)？
您可以使用CSS在我的Google自定義搜索引擎中添加徽標(biāo)。您需要訪(fǎng)問(wèn)可編程搜索元素控制API并將CSS添加到正確的部分。然后，您可以添加一個(gè)圖像URL以顯示為您的徽標(biāo)。
我可以在沒(méi)有編碼知識(shí)的情況下使用Google自定義搜索嗎？
雖然可以在沒(méi)有編碼知識(shí)的情況下使用Google自定義搜索，但建議您對(duì)HTML和CSS有一定的了解，以便充分自定義搜索引擎。但是，Google提供了詳細(xì)的文檔和教程來(lái)幫助您入門(mén)。
以上是快速提示：如何手動(dòng)設(shè)計(jì)Google自定義搜索的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線(xiàn)人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何在node.js中提出HTTP請(qǐng)求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請(qǐng)求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。1.使用內(nèi)置的http/https模塊無(wú)需依賴(lài)，適合基礎(chǔ)場(chǎng)景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽(tīng)，例如用https.get()獲取數(shù)據(jù)或通過(guò).write()發(fā)送POST請(qǐng)求；2.axios是基于Promise的第三方庫(kù)，語(yǔ)法簡(jiǎn)潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用于簡(jiǎn)化異步請(qǐng)求操作；3.node-fetch提供類(lèi)似瀏覽器fetch的風(fēng)格，基于Promise且語(yǔ)法簡(jiǎn)單
JavaScript數(shù)據(jù)類(lèi)型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類(lèi)型分為原始類(lèi)型和引用類(lèi)型。原始類(lèi)型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時(shí)復(fù)制副本，因此互不影響；引用類(lèi)型如對(duì)象、數(shù)組和函數(shù)存儲(chǔ)的是內(nèi)存地址，指向同一對(duì)象的變量會(huì)相互影響。判斷類(lèi)型可用typeof和instanceof，但需注意typeofnull的歷史問(wèn)題。理解這兩類(lèi)差異有助于編寫(xiě)更穩(wěn)定可靠的代碼。
React與Angular vs Vue：哪個(gè)JS框架最好？
Jul 05, 2025 am 02:24 AM
選哪個(gè)JavaScript框架最好？答案是根據(jù)需求選擇最適合的。1.React靈活自由，適合需要高度定制、團(tuán)隊(duì)有架構(gòu)能力的中大型項(xiàng)目；2.Angular提供完整解決方案，適合企業(yè)級(jí)應(yīng)用和長(zhǎng)期維護(hù)的大項(xiàng)目；3.Vue上手簡(jiǎn)單，適合中小型項(xiàng)目或快速開(kāi)發(fā)。此外，是否已有技術(shù)棧、團(tuán)隊(duì)規(guī)模、項(xiàng)目生命周期及是否需要SSR也都是選擇框架的重要因素?？傊?，沒(méi)有絕對(duì)最好的框架，適合自己需求的就是最佳選擇。
JavaScript時(shí)間對(duì)象，某人構(gòu)建了一個(gè)eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開(kāi)發(fā)者們，大家好！歡迎閱讀本周的JavaScript新聞！本周我們將重點(diǎn)關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時(shí)間對(duì)象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開(kāi)發(fā)者工具。讓我們開(kāi)始吧！Oracle與Deno的商標(biāo)之爭(zhēng)Oracle試圖注冊(cè)“JavaScript”商標(biāo)的舉動(dòng)引發(fā)爭(zhēng)議。Node.js和Deno的創(chuàng)建者RyanDahl已提交請(qǐng)?jiān)笗?shū)，要求取消該商標(biāo)，他認(rèn)為JavaScript是一個(gè)開(kāi)放標(biāo)準(zhǔn)，不應(yīng)由Oracle
處理諾言：鏈接，錯(cuò)誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機(jī)制，理解鏈?zhǔn)秸{(diào)用、錯(cuò)誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。1.鏈?zhǔn)秸{(diào)用通過(guò).then()返回新Promise實(shí)現(xiàn)異步流程串聯(lián)，每個(gè).then()接收上一步結(jié)果并可返回值或Promise；2.錯(cuò)誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，并可在catch中返回默認(rèn)值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個(gè)完成即返回）和Promise.allSettled()（等待所有完成）
什么是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請(qǐng)求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線(xiàn)體驗(yàn)。1.它允許開(kāi)發(fā)者手動(dòng)存儲(chǔ)如腳本、樣式表、圖片等資源；2.可根據(jù)請(qǐng)求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個(gè)緩存；4.通過(guò)ServiceWorker監(jiān)聽(tīng)fetch事件實(shí)現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用于離線(xiàn)支持、加快重復(fù)訪(fǎng)問(wèn)速度、預(yù)加載關(guān)鍵資源及后臺(tái)更新內(nèi)容；6.使用時(shí)需注意緩存版本控制、存儲(chǔ)限制及與HTTP緩存機(jī)制的區(qū)別。
利用Array.Prototype方法用于JavaScript中的數(shù)據(jù)操作
Jul 06, 2025 am 02:36 AM
JavaScript數(shù)組內(nèi)置方法如.map()、.filter()和.reduce()可簡(jiǎn)化數(shù)據(jù)處理；1）.map()用于一對(duì)一轉(zhuǎn)換元素生成新數(shù)組；2）.filter()按條件篩選元素；3）.reduce()用于聚合數(shù)據(jù)為單一值；使用時(shí)應(yīng)避免誤用導(dǎo)致副作用或性能問(wèn)題。
JS綜述：深入研究JavaScript事件循環(huán)
Jul 08, 2025 am 02:24 AM
JavaScript的事件循環(huán)通過(guò)協(xié)調(diào)調(diào)用棧、WebAPI和任務(wù)隊(duì)列來(lái)管理異步操作。1.調(diào)用棧執(zhí)行同步代碼，遇到異步任務(wù)時(shí)交由WebAPI處理；2.WebAPI在后臺(tái)完成任務(wù)后將回調(diào)放入相應(yīng)的隊(duì)列（宏任務(wù)或微任務(wù)）；3.事件循環(huán)檢查調(diào)用棧是否為空，若為空則從隊(duì)列中取出回調(diào)推入調(diào)用棧執(zhí)行；4.微任務(wù)（如Promise.then）優(yōu)先于宏任務(wù)（如setTimeout）執(zhí)行；5.理解事件循環(huán)有助于避免阻塞主線(xiàn)程并優(yōu)化代碼執(zhí)行順序。
