上下文文件

本页介绍了如何使用上下文文件(搜索引擎的 XML 规范)自定义搜索引擎的外观。

  1. 概览
  2. LookAndFeel 元素
  3. LookAndFeel 元素的属性
  4. LookAndFeel 的子元素
  5. 向 Google 托管的结果页添加徽标

概览

除使用可编程搜索引擎控制面板外,您还可以通过编辑上下文 XML 文件来控制搜索引擎的外观和风格。(如需详细了解每种格式的优缺点,请参阅基础知识页面。)如果您不熟悉上下文文件,请参阅上下文:定义搜索引擎

若要以更灵活的方式显示搜索引擎,您可以使用 Programmable Search Element,以在使用 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 托管的搜索引擎,如果您的搜索引擎使用的是“搜索元素”托管选项,该属性会被忽略。

当您从控制台的概览页下载搜索引擎的上下文文件时,您会看到一个完全定义的 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 使用 Crashlytics 作为字体。

    名为“泡泡糖”的样式

  • 5 - Espresso 采用暖色调色板使用 Serif 字体(格鲁吉亚)。

    名为“Espresso ”的样式

  • 6 - Shiny 使用 Sans Serif 字体,并采用很酷的调色板。

    名为“Shiny”的样式

custom_theme 搜索元素 如需自定义主题以显示不同于标准的颜色和字体系列,请将该值设置为 true。否则,可编程搜索引擎会忽略您对颜色和字体(在 LookAndFeel 的子元素中定义)的自定义设置。

请指定以下任一项:

  • false - 默认。Google 会显示标准主题。
  • true - 将可编程搜索引擎设置为接受您在 LookAndFeel 的子元素中设置的值。
text_font All

设置搜索结果中文字的字体系列。

虽然控制台只允许您选择五个字体系列,但您可以在上下文文件中选择更多字体系列。您可使用以英文逗号分隔的字体系列列表作为此属性的值,如以下示例所示:

text_font="Arial, sans-serif"

如果您列出了多个字体系列,浏览器会使用第一个字体。如果浏览器不支持第一种字体,则会尝试另一种字体。因此,请从您想要的字体开始,以通用字体系列(例如 serif 或 san-serif)结尾。当您列出的字体均不可用时,常规系列可让浏览器从常规系列中选择相似字体。

如果您使用的是名称包含多个字词的字体系列,则必须将其用引号实体 (&quot;) 括起来。例如,Trebuchet MS 应写为 &quot;Trebuchet MS&quot;

LookAndFeel 的子元素

除了 Promotions 元素之外,LookAndFeel 的所有子元素都只与 Search 元素有关。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 元素用于控制搜索框和搜索元素中优化标签页的颜色。如果您已在搜索引擎中创建了优化标签,这些标签便会以标签的形式显示在搜索元素中。如果您没有优化标签,则这些标签不会显示,并且可编程搜索引擎会忽略属性的值。

如果您希望可编程搜索引擎自动填充查询,请参阅部分,了解上下文文件中 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 像素。您无需提供宽度,因为可编程搜索引擎会保留相应的宽高比。 无需提供高度,除非图片过大,而您希望可编程搜索引擎将其缩小。

返回页首