本頁說明如何使用內容檔案 (也就是搜尋引擎的 XML 規格) 自訂搜尋引擎的外觀。
總覽
除了使用程式化搜尋引擎控制台之外,您也可以編輯內容 XML 檔案,藉此控制搜尋引擎的外觀和風格。(如要進一步瞭解各種格式的優缺點,請參閱基本概念頁面)。如果您不熟悉結構定義檔案,請參閱背景資訊:定義搜尋引擎。
如要更靈活地顯示搜尋引擎的顯示方式,請使用程式化搜尋元素,將程式化搜尋引擎嵌入您的網頁和其他運用 JavaScript 的應用程式。
如果您的網頁也包含結構化資料,您可以建立更豐富的呈現方式和自訂內容來建立網頁摘要。進一步瞭解如何自訂搜尋結果摘要。
開始設計程式化搜尋引擎的外觀和風格前,請先參閱程式化搜尋引擎實作指南。這份簡短文件說明瞭如何處理 Google 的品牌和資訊。
LookAndFeel
元素
在結構定義檔案中,所有外觀和風格規格都是由 CustomSearchEngine
下的 LookAndFeel
元素定義。這個元素可決定廣告是否顯示、搜尋結果區段的顯示方式,以及個別搜尋結果的顯示方式。以下範例顯示 LookAndFeel
元素的所有屬性和子項元素。
<CustomSearchEngine ... > <Title>...</Title> <Description>...</Description> <Context> ... </Context> <LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/> <Logo /> <Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/> <Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" show_image="true" show_snippet="true" snippet_color="#330000" title_hover_color="#0000CC" title_active_color="#0000CC" /> <SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" /> <Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" /> </LookAndFeel> <AdSense /> <EnterpriseAccount /> </CustomSearchEngine>
並非所有 LookAndFeel
屬性和元素都與各類型的搜尋引擎相關。舉例來說,googlebranding
屬性僅適用於 Google 代管的搜尋引擎,而且如果你的搜尋引擎使用「Search Element」(搜尋元素) 代管選項,系統就會忽略該屬性。
當您從控制台的「總覽」頁面下載搜尋引擎的內容檔案時,會看到完整定義的 LookAndFeel
部分。即使是與所選搜尋引擎類型無關的屬性和元素,都會有定義值。這些只是預設值,請忽略。請只注意會影響搜尋引擎類型的元素和屬性。
下列各節將討論下列主題:
LookAndFeel
元素的屬性
所有的 LookAndFeel
屬性皆為選用屬性;如未指定,程式化搜尋引擎會使用預設值。舉例來說,如果您未定義 LookAndFeel
元素的 element_layout
屬性,程式化搜尋引擎解讀時會解讀為 element_layout
值為 "1"
。並非所有屬性都與所有類型的搜尋引擎相關。
程式化搜尋引擎會根據您定義屬性值的方式,為搜尋框和搜尋結果產生一組程式碼。您可以在搜尋引擎「總覽」頁面的「取得程式碼」部分,預覽產生的程式碼。您可以複製產生的程式碼片段並插入網頁中。
以下是含有完整定義屬性的 LookAndFeel
元素範例:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
下表列出 CustomSearchEngine
的屬性及其值。
注意:請只定義與所選代管選項相關的屬性值。「代管選項」欄會指出這些屬性適用的代管選項。
屬性 | 託管選項 | 說明 | 值 |
---|---|---|---|
googlebranding |
Google 代管 | 設定搜尋引擎的搜尋框。 | 請使用下列其中一個值:
|
element_layout |
搜尋元素 | 決定搜尋框和搜尋結果在網頁中的顯示方式。如要進一步瞭解不同的版面配置選項,請參閱「搜尋元素版面配置」。 |
請使用下列其中一個值:
|
theme |
搜尋元素 | 決定搜尋框和搜尋結果的樣式。 | 請使用下列其中一個值:
|
custom_theme |
搜尋元素 | 如要自訂主題來顯示標準不同的顏色和字型系列,請將值設為 true 。否則,程式化搜尋引擎會忽略您在色彩和字型上自訂 (定義於 LookAndFeel 的子元素中)。 |
請指定下列其中一項:
|
text_font |
全部 | 設定搜尋結果中文字的字型系列。 |
雖然控制台只能選取五個字型系列,但您可以在內容檔案中選擇更廣泛的字型系列。您可以列出以半形逗號分隔的字型系列清單做為這項屬性的值,如以下範例所示: text_font="Arial, sans-serif" 如果您提供了多個字型系列,瀏覽器會使用第一個字型。如果瀏覽器不支援第一個字型,系統會嘗試使用下一個字型。一開始,請先使用所需字型,結尾則是一般系列,例如 Serif 或 san-Serif。一般系列可讓瀏覽器在列出的字型都無法使用時,從一般系列中選取類似的字型。 如果您使用的字型系列名稱超過一個字詞,必須在引號實體 ( |
LookAndFeel
的子元素
LookAndFeel
的所有子項元素 (Promotions
元素除外) 僅適用於搜尋元素。Promotions
元素的多數屬性都適用於所有類型的搜尋引擎。通常,子元素控制搜尋引擎中不同元件的顏色。顏色值是標準的 HTML 十六進位標記法。如果您未定義元素的屬性,程式化搜尋引擎會使用預設值。
注意:如要自訂搜尋元素,請先將 LookAndFeel
元素的 custom_theme
屬性設為 true
,再定義子元素中的值。如果您未將 custom_theme
屬性設為 true
,程式化搜尋引擎會忽略您在子元素 (Promotions
除外) 中定義的所有值。
LookAndFeel
包含下列子元素。
Colors
- 設定搜尋元素的顏色。Promotions
- 決定促銷活動的外觀和風格。這些設定會套用到所有類型的搜尋引擎。SearchControls
- 設定搜尋元素搜尋框的顏色。Results
:決定 Search Element 結果區段的顏色。
Colors
子元素
Colors
元素會決定 Search 元素的顏色。如要變更 Search 元素的子元件顏色 (例如個別搜尋結果或置頂查詢),您必須設定其他同層元素的值。
以下是含有完整定義屬性的 Colors
元素範例:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
下表列出 Colors
的選用屬性及其值。
屬性 | 元件顏色 |
---|---|
url |
每個搜尋結果摘要底部的網址。 |
background |
整個結果部分的背景。 |
border |
搜尋元素周圍的邊框。 |
title |
結果摘要的標題。每個結果的第一行標題都是標題。 |
text |
結果摘要的內文。 |
visited |
使用者點按連結後開啟的連結。 |
title_hover |
使用者將滑鼠遊標停在連結上時的標題顏色。 |
title_active |
使用者點擊連結後的標題顏色。 |
Promotions
子元素
Promotions
元素可控制促銷活動的顏色,並決定是否顯示圖片和說明。雖然促銷活動的外觀和風格是在結構定義檔案中定義,但促銷活動的內容本身是在促銷活動 XML 檔案中定義。詳情請參閱「促銷活動」一文。
以下是含有完整定義屬性的 Promotions
元素範例:
<Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" snippet_color="#330000" show_image="true" show_snippet="true" title_hover_color="#0000CC" title_active_color="#0000CC" />
下表列出 Promotions
的選用屬性及其值。
屬性 | 元件顏色 |
---|---|
title_color |
每項促銷活動的標題。 |
title_visited_color |
使用者點選標題後的標題。 |
url_color |
每筆促銷活動底部的網址。 |
background_color |
整個促銷活動區段的背景顏色。 |
border_color |
整個促銷區段周圍的邊框。 |
snippet_color |
促銷活動的說明。如果促銷活動沒有說明,設定不會變更。 |
show_image |
如要在促銷活動中顯示圖片,請將這項屬性設為 要顯示的圖片是在促銷活動檔案中設定。 |
show_snippet |
如要在促銷活動中顯示說明,請將這項屬性設為 說明內容定義於促銷活動檔案中。 |
title_hover_color |
使用者將滑鼠遊標停在連結上時顯示的標題。 |
title_active_color |
使用者點擊連結時的標題。 |
SearchControls
子元素
SearchControls
元素可控制搜尋框的顏色,以及 Search 元素中修正選項的分頁。如果您在搜尋引擎中建立限制條件標籤,標籤會在搜尋元素中顯示為分頁標籤。如果沒有限制條件標籤,標籤就不會顯示,程式化搜尋引擎會忽略屬性值。
如果想透過程式化搜尋引擎自動完成查詢,請參閱相關章節,瞭解內容檔案中 CustomSearchEngine
元素的 autocompletions
屬性。
以下是含有完整定義屬性的 SearchControls
元素範例:
<SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" />
下表列出 SearchControls
的選用屬性及其值。
屬性 | 元件顏色 |
---|---|
input_border_color |
搜尋查詢輸入欄位的邊框。 |
button_border_color |
搜尋按鈕的邊框。 |
button_background_color |
搜尋按鈕。 |
tab_border_color |
目前未聚焦的分頁邊框 (使用者未選取)。 |
tab_background_color |
未對焦的分頁。 |
tab_selected_border_color |
使用者剛點選的分頁。使用者最近點選的分頁會採用所選狀態。 |
tab_selected_background_color |
目前選取分頁的顏色。 |
Results
子元素
Results
元素可控制 Search 元素中個別結果的顏色。每筆結果都會構成一個單位,分別是標題、結果摘要和連結。定義這個子元素後,您就能以視覺化的方式呈現個別結果,或是醒目顯示使用者選取的結果。如果不想凸顯個別結果或醒目顯示某個結果,可以設定邊框和背景,以符合整個結果部分的背景顏色。
圖 1:具有說明樣式的個別結果,並在滑鼠遊標懸停時醒目顯示個別結果。
結果有兩種狀態:
- 一般狀態 - 滑鼠未懸停在個別結果上時,個別結果的外觀。
- 懸停狀態 - 滑鼠遊標懸停在個別結果時的外觀。
此元素可控制個別結果的顏色。如要變更所有結果的背景,請參閱「色彩子項元素」一節。
以下是含有完整定義屬性的 Results
元素範例:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
下表列出 Results
的選用屬性及其值。
屬性 | 元件顏色 |
---|---|
border_color |
每個個別結果的邊框都會正常狀態。 |
border_hover_color |
滑鼠遊標懸停時結果的邊框。 |
background_color |
個人的背景顏色會產生正常狀態。 |
background_hover_color |
滑鼠遊標懸停時結果的背景。 |
在 Google 代管的結果網頁中加入標誌
如果您允許 Google 代管搜尋結果網頁,您可以在搜尋結果網頁中的搜尋框旁邊加入標誌或小型圖片。圖片必須是網站上的 .jpg、.png 或 .gif 檔案 (可能是您擁有的檔案,或是不是版權限制的網站)。您可將網址與圖片建立關聯,設為可點擊的圖片。
注意:如果您使用程式化搜尋元素代管搜尋結果,就無法透過控制台或內容檔案新增圖片。
以下為包含標誌的結果網頁範例。
圖 3:顯示圖片的搜尋框
圖片和網址是由 LookAndFeel
元素下方 Logo
元素的屬性所定義。以下範例說明如何將標誌新增到 Google 代管的結果網頁。
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
下表列出 Logo
元素的屬性。
屬性 | 說明和值 |
---|---|
url |
圖片的網址。檔案格式可以是 .gif、.png 或 .jpg。 |
destination |
如要讓圖片成為連結,請定義到達網頁網址。 |
height |
圖片的高度 (以像素為單位)。高度上限為 100 像素。程式化搜尋引擎會保留顯示比例,因此不需要提供寬度。 除非圖片太大,而您希望程式化搜尋引擎縮小圖片,否則請勿同時提供高度。 |