導入搜尋框

建立好程式化搜尋引擎後，即可將程式化搜尋元素新增到您的網站。進行這項作業時，您必須複製一些程式碼，並將程式碼貼到網站的 HTML 中，讓搜尋引擎出現在網站上。

  1. 在「控制台」中按一下您要使用的搜尋引擎。
  2. 在「總覽」頁面的「基本」部分，按一下「取得程式碼」。 複製程式碼，然後貼到要顯示程式化搜尋元素的網頁 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> 元素如何判斷要顯示哪些查詢結果。

試用

下一步...

請繼續啟用自動完成功能。