教程：构建自定义搜索网页

项目
2019-03-05

警告

2020 年 10 月 30 日，必应搜索 API 从 Azure AI 服务迁移到必应搜索服务。本文档仅供参考。有关更新的文档，请参阅必应搜索 API 文档。关于为必应搜索创建新的 Azure 资源的说明，请参阅通过 Azure 市场创建必应搜索资源。

借助必应自定义搜索，可以为关注的主题创建定制的搜索体验。例如，如果拥有提供搜索体验的武术网站，则可指定供必应搜索的域、子网站和网页。用户会看到根据他们关注的内容定制的搜索结果，而不必浏览可能会包含不相关内容的常规搜索结果。

本教程演示如何配置自定义搜索实例并将其集成到新网页中。

涵盖的任务包括：

创建自定义搜索实例
添加活动条目
添加阻止条目
添加固定条目
将自定义搜索集成到网页中

先决条件

要继续学习本教程，需要 Bing 自定义搜索 API 的订阅密钥。若要获取密钥，请在 Azure 门户中创建必应自定义搜索资源。
如果尚未安装 Visual Studio 2017 或更高版本，可以下载并使用免费的 Visual Studio 2019 Community Edition。

创建自定义搜索实例

要创建必应自定义搜索实例：

打开 Internet 浏览器。
导航到自定义搜索门户。
使用 Microsoft 帐户 (MSA) 登录门户。如果没有 MSA，请单击“创建 Microsoft 帐户”。如果是首次使用门户，门户将请求数据访问权限。单击 “是” 。
登录后，单击“新建自定义搜索”。在“新建自定义搜索实例”窗口中，输入有意义的名称并说明搜索返回的内容类型。可随时更改名称。
单击“确定”，指定 URL 及是否包括该 URL 的子页。

添加活动条目

要包含来自特定网站或 URL 的结果，可将其添加到“活动”选项卡。

在“配置”页上，单击“活动”选项卡，输入要纳入搜索范围的一个或多个网站的 URL。
若要确保实例会返回结果，请在右侧的预览窗格中输入查询。必应仅返回已编入索引的公共网站的结果。

添加阻止条目

要排除来自特定网站或 URL 的结果，可将其添加到“阻止”选项卡。

在“配置”页上，单击“阻止”选项卡，输入要从搜索排除的一个或多个网站的 URL。
若要确认实例未从已阻止的网站返回结果，请在右侧的预览窗格中输入查询。

添加固定条目

若要将特定网页固定到搜索结果顶部，可将该网页和查询术语添加到“固定”选项卡。“固定”选项卡包含网页和查询术语的配对列表，用于指定显示为特定查询最匹配结果的网页。仅当用户的查询字符串根据固定项的匹配条件与固定项查询字符串匹配时，才会固定网页。只有编制索引的网页才会显示在搜索中。有关详细信息，请参阅定义自定义视图。

在“配置”页上，单击“固定”选项卡，输入希望作为最匹配结果返回的网页及查询术语。
默认情况下，用户的查询字符串必须完全匹配 pin 的查询字符串，必应才会将该网页作为最匹配结果返回。若要更改匹配条件，请编辑 pin （单击铅笔图标），单击“查询匹配条件”列中的“完全匹配”，并选择最适合应用程序的匹配条件。
若要确认实例是否将指定网页作为最匹配结果返回，请在右侧预览窗格中输入固定的查询术语。

配置托管 UI

自定义搜索提供托管 UI，用于呈现自定义搜索实例的 JSON 响应。要定义 UI 体验：

单击“托管 UI”选项卡。
选择布局。
选择颜色主题。

如果需要微调颜色主题以更好地与 Web 应用集成，请单击“自定义主题”。并非所有颜色配置都适用于所有布局主题。若要更改颜色，请在相应的文本框中输入颜色的 RGB HEX 值（例如，#366eb8）。或者，单击颜色按钮，然后单击适合你的阴影。选择颜色时，请始终考虑辅助功能。
指定其他配置选项。

要进行高级配置，请单击“显示高级配置”。这会将诸如“链接目标”的配置添加到 Web 搜索选项，将“启用筛选器”添加到“图像”和“视频”选项，将“搜索框文本占位符”添加到“杂项”选项。
从下拉列表中选择订阅密钥。或者，可以手动输入订阅密钥。

发布或还原

对自定义搜索实例所做的更改是在“配置”选项卡中进行的，因此你可以对更改进行验证。完成更改并准备好进行发布时，单击“发布”。在发布之前，更改不会反映在生产终结点上。

在发布之前，如果决定不保留所做的更改，请单击“还原”。还原更改时，实时状态配置保持不变，并且“配置”选项卡将还原以匹配实时状态。

使用托管 UI

有两种使用托管 UI 的方法。

选项 1：将提供的 JavaScript 代码片段集成到应用程序。
选项 2：使用提供的 HTML 终结点。

本教程的其余部分演示“选项 1：Javascript 代码片段”。

设置 Visual Studio 解决方案

在计算机上打开 Visual Studio。
在“文件”菜单中，选择“新建”，并选择“项目”。
在“新建项目”窗口中，选择“Visual C#/Web/ASP.NET Core Web 应用程序”，为项目命名，然后单击“确定” 。
在“新建 ASP.NET Core Web 应用程序”窗口中，选择“Web 应用程序”，单击“确定” 。

编辑 index.cshtml

在解决方案资源管理器中，展开“页面”，双击“index.cshtml”打开该文件。

在 index.cshtml 中，删除自 7 行以下的所有内容。

@page
@model IndexModel
@{
   ViewData["Title"] = "Home page";
}

添加换行元素和 div，充当容器。

@page
@model IndexModel
@{
   ViewData["Title"] = "Home page";
}
<br />
<div id="customSearch"></div>

在“托管 UI”页中，向下滚动到名为“使用 UI”的部分。单击“终结点”以访问 JavaScript 代码片段。另外，你还可以通过单击“生产”，然后单击“托管 UI”选项卡，获取该代码片段。

将脚本元素粘贴到添加的容器中。

@page
@model IndexModel
@{
   ViewData["Title"] = "Home page";
}
<br />
<div id="customSearch">
   <script type="text/javascript" 
       id="bcs_js_snippet"
       src="https://ui.customsearch.ai /api/ux/rendering-js?customConfig=<YOUR-CUSTOM-CONFIG-ID>&market=en-US&safeSearch=Moderate&version=latest&q=">
   </script>
</div>