本页介绍了如何使用上下文文件(搜索引擎的 XML 规范)自定义搜索引擎的外观。
概览
除使用可编程搜索引擎控制面板外,您还可以通过编辑上下文 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 托管 | 确定搜索引擎的搜索框。 | 请使用以下某个值:
|
element_layout |
搜索元素 | 确定搜索框和搜索结果在网页中的布局。如需详细了解不同的布局选项,请参阅搜索元素布局。 |
请使用以下某个值:
|
theme |
搜索元素 | 确定搜索框和搜索结果的样式。 | 请使用以下某个值:
|
custom_theme |
搜索元素 | 如需自定义主题以显示不同于标准的颜色和字体系列,请将该值设置为 true 。否则,可编程搜索引擎会忽略您对颜色和字体(在 LookAndFeel 的子元素中定义)的自定义设置。 |
请指定以下任一项:
|
text_font |
All | 设置搜索结果中文字的字体系列。 |
虽然控制台只允许您选择五个字体系列,但您可以在上下文文件中选择更多字体系列。您可使用以英文逗号分隔的字体系列列表作为此属性的值,如以下示例所示: text_font="Arial, sans-serif" 如果您列出了多个字体系列,浏览器会使用第一个字体。如果浏览器不支持第一种字体,则会尝试另一种字体。因此,请从您想要的字体开始,以通用字体系列(例如 serif 或 san-serif)结尾。当您列出的字体均不可用时,常规系列可让浏览器从常规系列中选择相似字体。 如果您使用的是名称包含多个字词的字体系列,则必须将其用引号实体 ( |
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 |
如需在促销活动中显示图片,请将此属性设置为 在促销信息文件中设置要显示的图片。 |
show_snippet |
如需在促销活动中显示说明,请将此属性设置为 说明的内容在促销文件中定义。 |
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 像素。您无需提供宽度,因为可编程搜索引擎会保留相应的宽高比。 无需提供高度,除非图片过大,而您希望可编程搜索引擎将其缩小。 |