導入搜尋框

建立程式化搜尋引擎後,您就可以將程式化搜尋元素新增到網站中。方法是複製一些程式碼並貼到網站的 HTML 程式碼 (要顯示搜尋引擎的位置)。

  1. 在「控制台」中按一下您要使用的搜尋引擎。
  2. 在「總覽」頁面的「基本」部分,按一下「取得程式碼」。 複製程式碼,並貼到網頁的 HTML 原始碼中,也就是要顯示程式化搜尋元素的位置。

<div class="gcse-search"></div> 元素是預留位置,這會是搜尋元素 (搜尋框和搜尋結果) 的顯示位置。

<!-- 在這裡插入您自己的程式化搜尋引擎 ID --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt;
<div class="gcse-search"></div>

嘗試各種版面配置

許多情況下,讓搜尋框與搜尋結果分開顯示是很適當的做法。雙欄版面配置可讓您在網頁中的單一區域 (例如側欄) 顯示搜尋框,並在不同區域 (例如網頁的主要區域) 顯示搜尋結果。

如要變更引擎的版面配置,請前往控制台中「外觀和風格」頁面的「版面配置」部分。在控制台中選取並儲存 2 欄的版面配置後,您也必須變更搜尋元素的 HTML 程式碼。

<!-- 在這裡插入您自己的程式化搜尋引擎 ID --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt;
<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> 元素知道要顯示哪些查詢結果的方式。

試用

下一步...

繼續啟用自動完成功能