你曾經(jīng)嘗試過構(gòu)建自定義搜索引擎嗎？如果是的話，你應(yīng)該知道這需要多少努力。首先，我們需要?jiǎng)?chuàng)建一個(gè)搜索算法，它應(yīng)該在用戶搜索時(shí)顯示最佳匹配的結(jié)果。這可能需要很長時(shí)間。
與其浪費(fèi)時(shí)間創(chuàng)建我們自己的搜索引擎，為什么不使用谷歌自定義搜索引擎呢？是的，你沒聽錯(cuò)！谷歌允許我們將搜索引擎集成到我們的網(wǎng)站上，當(dāng)用戶在我們的網(wǎng)站上搜索某些內(nèi)容時(shí)，谷歌會(huì)處理一切。
將Google自定義搜索引擎集成到網(wǎng)站中
用戶應(yīng)按照以下步驟將 Google 自定義搜索引擎集成到任何網(wǎng)站中，從創(chuàng)建帳戶到使用搜索功能。
第 1 步 – 在自定義搜索引擎上創(chuàng)建帳戶。創(chuàng)建帳戶成功后，您將看到以下界面。您可以點(diǎn)擊“創(chuàng)建您的第一個(gè)搜索引擎！”文本。
第二步 – 現(xiàn)在，填寫所需的詳細(xì)信息，并在您想要使用Google自定義搜索引擎的網(wǎng)站上添加網(wǎng)站鏈接。如果您想在任何網(wǎng)站上使用它，可以選擇“搜索整個(gè)網(wǎng)絡(luò)”單選按鈕。接下來，點(diǎn)擊創(chuàng)建按鈕。
步驟3 – 成功創(chuàng)建搜索引擎后，用戶可以看到以下界面。復(fù)制以下代碼并將其粘貼到 html 文件中。
我們已經(jīng)完全準(zhǔn)備好將Google自定義搜索引擎集成到我們的網(wǎng)站中。
語法
用戶可以按照以下語法使用Google自定義搜索引擎。
<script async src="https://cse.google.com/cse.js?cx=5085dc69f916047fa"> </script> <div class="gcse-search"></div>
登錄后復(fù)制
用戶應(yīng)將“<div class=”gcse-search”></div>”代碼放在要添加 Google 自定義搜索的任何位置。
示例
我們已經(jīng)將Google自定義搜索引擎與下面示例中的HTML代碼集成在一起。在JavaScript中，我們更改搜索引擎的占位符文本。我們使用querySelector()方法選擇searchButton和searchBox，并替換它們的標(biāo)題和占位符文本。
我們添加了一些CSS樣式，使搜索更加時(shí)尚。每當(dāng)用戶開始搜索時(shí)，它會(huì)自動(dòng)隱藏占位文本。
用戶可以嘗試在搜索框中搜索任何內(nèi)容，這將給出相關(guān)結(jié)果。
<html>
<head>
<style>
body { padding: 1rem;}
.gsc-control { font-family: arial, sans-serif; background-color: lightblue !important; width: 500px; border-radius: 3rem; padding: 7px 20px !important;}
.gsc-input-box { border: 1px solid #dfe1e5;background: #fff; border-radius: 2rem; padding: 1px 10px;}
#gsc-i-id1 { color: #000 !important; line-height: 1.2 !important; background: none !important; font-size: 1rem !important; }
.gsc-search-button-v2 { padding: 0.5rem !important; cursor: pointer; border-radius: 50%; }
</style>
</head>
<body>
<h3> Creating the custom Google search using the GCSE </h3>
<p> Search anything here </p>
<!-- script from GCSE -->
<script async src="https://cse.google.com/cse.js?cx=5085dc69f916047fa"> </script>
<div class="gcse-search"></div>
<script>
window.onload = function () {
var placeHolderText = "Search on Tutorialspoint";
var searchBox = document.querySelector("#gsc-i-id1");
var searchButton = document.querySelector
(".gsc-search-button-v2 svg title");
searchBox.placeholder = placeHolderText;
searchBox.title = placeHolderText;
searchButton.innerHTHL = placeHolderText;
}
</script>
</body>
</html>
登錄后復(fù)制
用戶學(xué)會(huì)了將Google自定義搜索集成到網(wǎng)站中。我們已經(jīng)使用原生JavaScript進(jìn)行了集成，但用戶也可以使用ReactJS和其他框架進(jìn)行集成。
此外，此搜索僅適用于TutorialPoint的網(wǎng)站，因?yàn)槲覀儍H為其創(chuàng)建了此搜索功能。如果用戶想要在自己的網(wǎng)站上使用該功能，他們應(yīng)該在Google的自定義搜索網(wǎng)站上創(chuàng)建一個(gè)帳戶，如教程的開始部分所示，并且需要更改腳本標(biāo)簽。
以上就是如何使用 CSS 手動(dòng)設(shè)置 Google 自定義搜索樣式？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
