內容檔案

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

  1. 總覽
  2. LookAndFeel 元素
  3. LookAndFeel 元素的屬性
  4. LookAndFeel 的子元素
  5. 在 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 代管的搜尋引擎,且如果您的搜尋引擎使用的是「搜尋元素」,系統就會忽略這個屬性代管選項。

從 ControlPanel 的「總覽」頁面下載搜尋引擎的內容檔案後,您會看到完整的定義的 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 - Green Sky 使用 Trebuchet 字型。

    名為「綠天」的樣式

  • 4:Bubblegum 使用程式碼做為字型。

    「泡泡糖」樣式

  • 5 - Espresso 使用喬治亞州的 Serif 字型搭配暖色盤。

    名為「Espresso」的樣式

  • 6 - Shiny 會在冷色調中使用 Verdana 字型 (Sans-Serif 字型),

    「閃亮」風格

custom_theme 搜尋元素 如要自訂主題以顯示標準中的不同顏色和字型系列,請將值設為 true。否則,程式化搜尋引擎會忽略你針對顏色和字型所做的自訂 (也就是 LookAndFeel 的子元素中定義的顏色和字型)。

請指定下列其中一項:

  • false - 預設。Google 會顯示標準主題。
  • true:設定程式化搜尋引擎,使其接受您在 LookAndFeel 子元素中設定的值。
text_font 全部

設定搜尋結果中的文字的字型系列。

雖然控制台只讓您選取 5 個字型系列,但您還是可以在內容檔案中選取較多的字型系列。您可以使用逗號分隔的字型系列清單做為這個屬性的值,如下例所示:

text_font="Arial, sans-serif"

如果您列出多個字型系列,瀏覽器會使用第一個字型。如果瀏覽器不支援第一個字型,便會嘗試下一個字型。因此請從所需字型開始,並使用一般系列 (例如 Serif 或 san-Serif 等) 做為結尾。當列出的字型無法使用時,一般系列可讓瀏覽器在一般系列中選取類似的字型。

如果使用的字型系列名稱超過一個字詞,您必須以引號括住實體 (&quot;),例如將 Trebuchet MS 寫成 &quot;Trebuchet MS&quot;

LookAndFeel 的子元素

LookAndFeel 的所有子項元素 (Promotions 元素除外),僅適用於搜尋元素。Promotions 元素的大多數屬性適用於所有類型的搜尋引擎。大多數情況下,子元素控制了搜尋引擎中不同元件的顏色。顏色值是標準的 HTML 十六進位標記法。如果您不定義元素的屬性,程式化搜尋引擎會使用預設值。

注意:如要自訂搜尋元素,您必須先將 LookAndFeel 元素的 custom_theme 屬性設為 true,然後定義子項元素中的值。如果您未將 custom_theme 屬性設為 true,程式化搜尋引擎會忽略您在子元素中定義的所有值 (Promotions 除外)。

LookAndFeel 包含下列子元素。

  • Colors - 決定搜尋元素的顏色。
  • Promotions - 決定促銷活動的外觀和風格。這些設定適用於所有類型的搜尋引擎。
  • SearchControls:決定搜尋元素搜尋框的顏色。
  • Results:決定搜尋元素結果部分元件的顏色。

返回頁首

Colors 子元素

Colors 元素可決定 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 元素可控制搜尋元素中個別結果的顏色。每項結果都會產生一個單元的標題、結果摘要和連結。定義這個子元素後,即可透過視覺化方式呈現個別結果,或是醒目顯示使用者選取的結果。如果您不想為個別結果列出,或不想強調某個結果,可以將邊框和背景設定為與整個結果區段的背景顏色一致。

圖 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 像素。您不需要提供寬度,因為程式化搜尋引擎會保留長寬比。 除非圖片太大,並您想要程式化搜尋引擎縮小圖片的高度,否則請勿輕易提供高度。

返回頁首