搜索界面组件

本页介绍了如何自定义搜索框和搜索结果的外观和风格。如果您想使用上下文描述文件来实现搜索引擎的设计，请参阅“使用 XML 设计外观和风格”页面。

  1. 概览
  2. 设计搜索界面的各个组件
  3. 使用搜索元素托管结果
  4. 设置搜索元素布局
  5. 设计搜索框
  6. 设计结果
  7. 在网站中实现设计

概览

您可以在控制台或 XML 上下文文件中更改可编程搜索引擎的搜索框和搜索结果。如果您只有少数几个搜索引擎，则可以使用控制面板轻松管理和自定义这些搜索引擎。只需前往外观页面，选择一种样式，设计组件，然后点击保存即可。此页面会告诉您如何完成所有这些操作。不过，如果您要创建和管理大量搜索引擎，即使是这种简单的程序，在多个搜索引擎中重复执行也会变得非常繁琐。在这种情况下，使用 XML 会更好。如果您决定使用 XML，请先阅读本页，了解一般的工作方式；然后阅读使用 XML 设计外观和风格页面，了解 XML 元素和属性。

如果您不确定是应该只使用控制面板还是使用 XML 格式，请参阅基础知识页面，其中讨论了每种格式的优势和挑战。

注意： 在开始设计自定义搜索引擎的外观和风格之前，请先阅读 可编程搜索引擎实施指南 。 这是一份简短的文档，其中介绍了您应如何处理 Google 品牌宣传和署名。

返回页首

使用搜索元素托管结果

搜索元素是一种可以嵌入到网页中的对象，可进行广泛的自定义。它可以同时在读者正在查看的同一网页中显示搜索框和搜索结果，也可以在不同的网页中显示。

搜索元素示例

注意： 搜索元素与紧凑型布局搭配使用时，可在移动设备上顺畅运行。

您还可以利用可编程搜索元素控制 API 进一步自定义搜索界面。许多自定义设置都可通过 HTML 属性实现。 例如，您可以从六种布局中为结果页选择一种，也可以设置要返回的搜索结果数量。

可编程搜索引擎不再支持 iframe 托管选项。我们建议您在搜索元素中使用“双页”或“仅显示结果”布局作为新选项。如需了解详情，请参阅我们的 博文 。

返回页首

设计搜索界面的各个组件

可自定义的组件

您可以自定义的组件取决于搜索引擎的所选元素布局。例如，您只能为由 Google 托管的搜索引擎添加徽标；无法为使用其他托管选项的搜索引擎添加徽标。

您可以使用控制面板定义以下组件：

设置搜索元素布局

您可以选择自定义网页上的搜索界面布局。您可以将搜索框和结果部分放在同一列中，也可以将它们分别显示在不同的列中，甚至显示在不同的页面中。

布局选项包括（点击链接可查看演示）：

选项 说明
OverLay 以叠加的形式显示搜索结果。
双页
简单
多个搜索框/结果部分 		搜索框和搜索结果部分放置在两个不同的网页中。

注意：搜索结果部分还包含一个搜索框。用户可以直接在搜索结果页中提交查询。

全宽度 搜索框和搜索结果部分会占据整个页面或插入搜索元素的列的宽度。
两栏 搜索框和搜索结果部分位于网页的不同列或部分中。如需关闭搜索结果部分，用户可以点击搜索框旁边的 X 图标。
紧凑 与全宽选项类似，此选项会占据整个页面或列的宽度，但结果部分显示的结果较少，因此在网页中展开时占用的垂直空间较少。

提示：此选项针对智能手机和移动设备进行了优化。

仅显示结果
通过网址搜索
通过搜索框搜索 		搜索结果放置在您的某个网页中，并且搜索结果页不包含搜索框。使用您自己的搜索框提交搜索查询。

注意：不展示广告的可编程搜索引擎没有停用品牌宣传的选项。

演示：如何自定义品牌推广选项

Google 托管
当前窗口
新窗口 		搜索框放置在您的某个网页上。搜索结果会显示在由 Google 托管的网页上，该网页可以在同一窗口中打开，也可以在新窗口中打开。

返回页首

您可以将搜索框插入到网页 HTML 正文中的任何位置，不过按照惯例，搜索框会放置在网页顶部（或靠近顶部）的位置，如以下示例所示：

图 1： 网页，搜索框位于顶部。

包含搜索框的网页示例

启用自动补全功能

当用户在您的搜索框中输入搜索查询时，自动补全功能会向他们提供查询选项。它类似于您在 Google 搜索中看到的选填查询。

图 2： 在搜索框中输入几个字符后，系统会显示一个下拉列表，其中包含不同搜索查询的选项。

在可编程搜索引擎中为旅游网站输入“p-u-e-r”，系统会显示一个下拉列表，其中包含“波多黎各”“巴亚尔塔港酒店”“巴亚尔塔港度假”等选项。

可编程搜索引擎会专门针对您的搜索引擎量身定制自动补全功能。它使用一种不同的算法，该算法会从多个来源提取信息，包括向您的搜索引擎发出的查询，以及从您的搜索引擎涵盖的网站内容中提取的关键字和短语。

自动补全功能位于“搜索功能”页面的自动补全部分。

如需启用自动补全功能，请执行以下操作：

  1. 前往“搜索功能”页面的自动补全部分。
  2. 开启启用自动补全功能控件。

    注意： 由于系统会为每个搜索引擎生成自动补全的查询，因此自动补全功能需要几个小时才能开始在您的搜索引擎中显示。

  3. 如果您是首次在现有搜索引擎中启用自动补全功能，则必须移除之前在网页中插入的搜索框代码段。将其替换为“获取代码”标签页中生成的新代码。如需了解更详细的说明，请参阅在网站中实现设计部分。

返回页首

设计结果

您可以更改搜索结果页面的以下组成部分：

个人结果

如果您想直观地划分各个结果，或突出显示用户正在选择的结果，可以为各个结果定义边框和背景。

图 3：结果，其中各个结果已明确划分，并且鼠标悬停时会突出显示单个结果。

结果中包含单独的结果 突出显示的结果

返回页首

优化标签页

如果您已在搜索引擎中创建优化标签，这些标签会以标签页的形式显示在“搜索”元素中。您可以使用控制面板更改细化标签页的颜色。

促销活动

如果您已在搜索引擎中创建促销信息，则可以更改其外观风格。置顶结果是您创建的一种特殊类型的搜索结果。

徽标（仅限 Google 托管）

如果您允许 Google 托管您的结果页，则可以选择在搜索结果页中的搜索框旁边添加徽标或小图片。图片必须是托管在网站上的 .jpg、.png 或 .gif 文件（您自己的网站或没有版权限制的网站）。您可以选择将网址与图片相关联， 从而将图片变成可点击的图片。

以下是带有徽标的搜索结果页面的示例。

图 4： 带有图片的搜索框

返回页首

在网站中实现设计

设计好搜索引擎的外观和风格后，您可以通过执行以下操作在网页中实现该设计：

  1. 在外观页面中，点击您修改的部分中的保存。
  2. 在外观页面的“布局”部分，点击获取代码。
  3. 复制在代码弹出式窗口中生成的代码段。

    如果您选择了双列布局，请复制两段代码：一段用于搜索框，另一段用于搜索结果。
    如果您选择了双页布局，请输入将显示搜索引擎结果的网页的网址。输入嵌入在网址中且由搜索结果页解析的查询参数名称。最后，复制这两段代码。
    仅显示搜索结果的布局的代码段适用于搜索结果显示在新网页中的情况。输入嵌入在网址中的查询参数名称，该名称由搜索结果页进行解析。最后，复制搜索结果代码段。

  4. 在要显示可编程搜索引擎框的每个网页中插入代码。您可以将代码粘贴到网页的 <body></body> 标记内的任意位置。

    注意： 为了获得最佳的跨浏览器兼容性，建议您的 HTML 网页使用受支持的 doctype，例如<!DOCTYPE html>。

    如果您为搜索元素使用悬停效果，则 HTML 网页必须使用受支持的 doctype，例如 <!DOCTYPE html>。
    如果您选择了双列布局，请将搜索框的代码插入一列，并将结果的代码插入另一列。
    如果您选择了双页布局，请将搜索框的代码插入到您希望显示搜索框的网页中，并将搜索结果的代码插入到您希望显示搜索结果的网页中。
    如果您选择了仅显示结果的布局，请将代码段插入到您希望显示搜索结果的网页中。