建立程式化搜尋引擎後,您就可以將程式化搜尋元素新增到網站中。方法是複製一些程式碼並貼到網站的 HTML 程式碼 (要顯示搜尋引擎的位置)。
<div class="gcse-search"></div>
元素是預留位置,這會是搜尋元素 (搜尋框和搜尋結果) 的顯示位置。
<!-- 在這裡插入您自己的程式化搜尋引擎 ID -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<div class="gcse-search"></div>
嘗試各種版面配置
許多情況下,讓搜尋框與搜尋結果分開顯示是很適當的做法。雙欄版面配置可讓您在網頁中的單一區域 (例如側欄) 顯示搜尋框,並在不同區域 (例如網頁的主要區域) 顯示搜尋結果。
如要變更引擎的版面配置,請前往控制台中「外觀和風格」頁面的「版面配置」部分。在控制台中選取並儲存 2 欄的版面配置後,您也必須變更搜尋元素的 HTML 程式碼。
<!-- 在這裡插入您自己的程式化搜尋引擎 ID -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<div style="border: 1px solid blue;">
Area 1 (for example a sidebar)
<div class="gcse-searchbox"></div>
</div>
<div style="border: 1px solid red;">
Area 2 (for example main area of the page)
<div class="gcse-searchresults"></div>
</div>
另一種有趣的版面配置是雙頁選項。它可以讓您在一個網頁上執行自己的搜尋框,並使用網址列中的參數,在另一個網頁上顯示標準搜尋結果。
選取並儲存控制台中的雙頁版面配置。在同一個網頁上導入獨立搜尋框,將 resultsUrl
屬性變更為指向要顯示結果的網址。
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>
若要導入獨立的搜尋結果網頁,請將結果程式碼片段貼到搜尋結果網頁中:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
現在,只要傳送 "q",即可觸發本頁的搜尋結果引數:
https://my-results-page-url.com/?q=myQuery
請注意網址列中的 q=myQuery 參數,這是 <div class="gcse-searchresults-only"></div>
元素知道要顯示哪些查詢結果的方式。
下一步...
繼續啟用自動完成功能。