導入搜尋框

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

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

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

<div class="gcse-search"></div>

嘗試各種版面配置

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

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

<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> 元素知道要顯示哪些查詢結果的方式。

試用

下一步...

繼續啟用自動完成功能。