本頁面由 Cloud Translation API 翻譯而成。

內容檔案

本頁說明如何使用內容檔案 (也就是搜尋引擎的 XML 規格) 自訂搜尋引擎的外觀。

總覽
LookAndFeel 元素
LookAndFeel 元素的屬性
LookAndFeel 的子元素
在 Google 代管的結果頁面中加入標誌

總覽

除了使用程式化搜尋引擎控制台之外，您也可以編輯內容 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` 元素的屬性

所有的 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 代管	設定搜尋引擎的搜尋框。	請使用下列其中一個值： `watermark` - 預設。 `smnar` `smwide` `smwidg` `smnarg` `smnarb` `smwidb`
`element_layout`	搜尋元素	決定搜尋框和搜尋結果在網頁中的顯示方式。如要進一步瞭解不同的版面配置選項，請參閱「搜尋元素版面配置」。	請使用下列其中一個值： `1` - 預設。全形。 `2` - 密集。 `3` - 兩欄。 `4` - 兩頁。 `5` - Google 代管：在目前視窗中開啟。 `6` - Google 代管：在新視窗中開啟。 `7` - 僅顯示結果。
`theme`	搜尋元素	決定搜尋框和搜尋結果的樣式。	請使用下列其中一個值： `1` - 預設。模仿 Google 的搜尋結果。 `2` - 極簡風使用簡單調色盤。 `3` - 綠色天空使用 Trebuchet 字型。 `4`：Bubblegum 使用 SMTP 做為字型。 `5` - Espresso 使用 Georgia 字型 (Serif 字型)，以及暖色盤。 `6` - Shiny 使用 Verdana 字型 (Sans-Serif 字型) 搭配冷色盤。
`custom_theme`	搜尋元素	如要自訂主題來顯示標準不同的顏色和字型系列，請將值設為 `true`。否則，程式化搜尋引擎會忽略您在色彩和字型上自訂 (定義於 `LookAndFeel` 的子元素中)。	請指定下列其中一項： `false` - 預設。Google 會顯示標準主題。 `true` - 將程式化搜尋引擎設為接受您在 `LookAndFeel` 的子元素中設定的值。
`text_font`	全部	設定搜尋結果中文字的字型系列。	雖然控制台只能選取五個字型系列，但您可以在內容檔案中選擇更廣泛的字型系列。您可以列出以半形逗號分隔的字型系列清單做為這項屬性的值，如以下範例所示： text_font="Arial, sans-serif" 如果您提供了多個字型系列，瀏覽器會使用第一個字型。如果瀏覽器不支援第一個字型，系統會嘗試使用下一個字型。一開始，請先使用所需字型，結尾則是一般系列，例如 Serif 或 san-Serif。一般系列可讓瀏覽器在列出的字型都無法使用時，從一般系列中選取類似的字型。如果您使用的字型系列名稱超過一個字詞，必須在引號實體 (`"`) 之間括住名稱，例如，Trebuchet MS 應以 `"Trebuchet MS"` 寫成。

`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`	如要在促銷活動中顯示圖片，請將這項屬性設為 `true`。預設值為 `false`。要顯示的圖片是在促銷活動檔案中設定。
`show_snippet`	如要在促銷活動中顯示說明，請將這項屬性設為 `true`。預設值為 `false`。說明內容定義於促銷活動檔案中。
`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 像素。程式化搜尋引擎會保留顯示比例，因此不需要提供寬度。除非圖片太大，而您希望程式化搜尋引擎縮小圖片，否則請勿同時提供高度。

返回頁首

內容檔案

總覽

LookAndFeel 元素

LookAndFeel 元素的屬性

LookAndFeel 的子元素

Colors 子元素

Promotions 子元素

SearchControls 子元素

Results 子元素

在 Google 代管的結果網頁中加入標誌

`LookAndFeel` 元素

`LookAndFeel` 元素的屬性

`LookAndFeel` 的子元素

`Colors` 子元素

`Promotions` 子元素

`SearchControls` 子元素

`Results` 子元素