级别： 初级 Todd Leyba (tleyba@us.ibm.com), 搜索架构师, IBM
2007 年 1 月 18 日 了解如何快速轻松地将一个可以免费下载的搜索引擎整合到您的 Web 站点。本文描述了使用 IBM® OmniFind™ Yahoo! Edition
搜索功能的四种方法。这些方法包括：直接链接到 OmniFind
搜索结果页面、使用 XSLT 将 OmniFind 搜索 API 返回的 XML 转换为 HTML 等等。
简介
IBM 和 Yahoo! 合作提供了一个可以免费下载的、易于安装和使用的搜索引擎。IBM 的 OmniFind Yahoo! Edition（本文简称为 OmniFind）能够抓取和索引高达 50 万个 Web 页面或文件系统文档，并通过易于使用的 Web 界面提供对这些内容的搜索服务。
您可能已经 下载了 OmniFind ，并已经发现它能够快速轻松地设置索引和开始搜索。
但是可能您已经超越了此阶段，现在正在研究如何将 OmniFind 的搜索功能整合到您的 Web 站点中。
我将在本文中介绍四种实现此目的的方法，这些方法是：
-
直接链接到 OmniFind 搜索页面
-
使用您自己的搜索框和搜索按钮
-
将搜索结果作为 HTML snippet 呈现
-
使用 XSLT 来将 OmniFind XML 结果转换为 HTML
这里介绍的方法可以结合使用来提高灵活性，代价是工作量增加。
场景
我将使用的场景是将 OmniFind 搜索功能添加到一个博客站点。如果您曾阅读过博客，可能已经注意到首页不会呈现博客发布的全部内容。
大多数博客托管工具会列出最近发布的内容，并提供到较早发布内容的存档链接（通常按月组织内容）。因此，如果希望查看首页未列出的发布内容，就需要单击之前的月份来查找文章。
在这个整合场景中，我将使用 OmniFind 来抓取和索引我的个人博客站点，然后允许用户搜索我的 OmniFind 博客索引来查找之前的发布内容。我使用 Google's Blogger 来托管我的实际博客 (Todd Leyba's Perspecitives on Search and Discovery)。Blogger
已经提供了类似的搜索功能，但是 Blogger 的搜索特性是不可变的。我将在本文中介绍如何使用 OmniFind 来替代 Blogger 的搜索工具，然后介绍如何定制全面的搜索体验。
第 1 种选择：直接链接到 OmniFind
最容易的整合选择是在博客中某个醒目的位置提供到 OmniFind 搜索页面的链接。我的博客站点的全部更改都是通过 Blogger 模板实现的。此模板定义了我的博客的整体结构，而且是用标准
HTML 编写的。因此我可以很容易地插入到 OmniFind 搜索页面的链接 —— 在本例中此链接位于存档部分正上方。要使用的链接类似下面的链接，但是主机和端口要改为 OmniFind 安装站点。
http://omniFindhost:8080/search/
然后，可以在 OmniFind 管理员控制台中提供的几种布局选项中进行选择，来定制 OmniFind 搜索界面的整体外观（如下所示）。无需编程即可将横幅和图像更改为您公司的内容、也可更改各种标签和按钮的文本，甚至可以选择是否显示某种特性（例如摘要、脚注等）。
图 1. OmniFind 搜索结果页面
但是上述直接链接的方法使用起来很麻烦。它迫使用户必须单击两次来执行搜索 —— 一次用于转到 OmniFind 搜索页面、一次用于执行搜索。理想情况下，您会希望搜索框始终出现在您的站点中，以便用户能够在需要时输入查询，然后只需单击一次即可看到结果。
第 2 种选择：添加您自己的搜索框
第一步是将您自己的搜索框和搜索按钮添加到 Web 页面。我将使用标准 HTML 来添加这些组件，并使用一小段 JavaScript 代码来处理按钮被按下时的 onClick 行为。
以下三行代码将搜索框和搜索按钮添加到我的博客右面板中的 "Archives" 列表的正上方。
<h2 class="sidebar-title">Search entire blog</h2>
<input type="text" name="Query" value="" size="25">
<input type="button" value="Search" onclick="runSearch()">
|
现在我们需要提供一个 JavaScript 函数来处理按钮被按下时的 onClick 行为。我将以下 JavaScript 代码插入我的 Blogger 模板中的 body 标签之前：
<SCRIPT LANGUAGE="JavaScript">
<!--Begin
function runSearch()
{
var dest = "http://OmniFindHost:8080/search?";
var params = "index=Default&start=0&results=10&query=";
var request = dest + params + escape(document.forms[0].Query.value);
window.open(request, // complete search url
"OmniFind Search Results", // Title of the window
toolbar=1, // toolbar provides back/fwd
resizable=1, // allow them to resize window
scrollbars=1, // and to scroll as well
height=500, // and I like smaller windows
width=400, // of this size and position
left=80,top=80);
}
// End -->
</SCRIPT>
|
调用搜索
此 JavaScript 函数的主要作用是收集搜索框中输入的关键字，并将这些关键字包括在 OmniFind 搜索请求中。在第一个示例中，我将直接调用 OmniFind 搜索页面，而不使用任何修饰符。会出现如上面的 图 1 所示的结果页面，此结果页面和您直接在 OmniFind 中输入搜索所得到的页面相同。惟一的区别是我们使用了自己的搜索框来接受搜索表述式。
使用的 URL 类似于上述的直接链接，但是通过几个额外参数进行进一步的限制。在 JavaScript 中，为了实现可读性，我将 URL 按其组成部分进行了分解。使用了四个参数。由我创建
并将被搜索的索引被命名为 "Default"。返回的结果数设为 10（从结果 0 开始）。如果您希望为相同的查询返回第二个结果页面，请将 “start” 参数设为 10。
“request” 变量连接各个 URL 部分，并将用户提供的查询术语附到 “query” 参数后面。请注意，我使用了转义函数来将空格和其他特殊字符转换为其转义表示。然后，包含构建完整的 OmniFind URL 的 “request” 变量被作为第一个参数传递到 window.open() 函数调用。window.open 调用将提交此请求，并打开一个显示搜索结果的新窗口。我将几个参数添加到了 window.open 调用中，来控制窗口的大小、位置和选项。以下是对我的博客的一次示例搜索。
图 2. 被添加到我的博客中的搜索框和 OmniFind 搜索结果页面
使用 OmniFind REST API
现在您已经了解如何成功地使用您自己的搜索框（而不是 OmniFind 搜索页面上出现的搜索框）来提交搜索。现在我将向您介绍如何更改搜索结果的显示，而不仅仅使用 OmniFind 布局编辑器中提供的布局。您可以在 OmniFind 搜索 API 的帮助下实现此目的。OmniFind 的 API 是基于 REST 的，这意味着您要使用标准的带有参数的 HTTP GET 请求来提交搜索。
搜索结果作为 XML 返回，然后我们使用 XSLT 将此 XML 转换为定制 HTML。以下是一个示例 OmniFind 搜索请求：
http://OmnifindHost:8080/api/search?index=Default&results=10&start=0&query=conferences
您可能已经注意到上面的 URL 和之前示例中的 URL 几乎相同，只有一个例外，即使用子域 “/api/search” 来代替 “/search”。这会指示 OmniFind 将结果作为 XML（而不是图 1 中显示的完全格式化的 HTML）返回。返回的 XML 遵从 ATOM 1.0 提要。因此，可以使用任何支持 ATOM 1.0 的传统 RSS 提要阅读器（我个人使用开源的 FeedReader 程序）来测试 API 搜索请求。提要阅读器程序会自动提交搜索并格式化结果。还可以使用标准浏览器测试 API 搜索，此类浏览器会本地显示返回的 XML，如下所示。
图 3. 显示为 XML 的搜索结果
第 3 种选择：将结果作为 HTML snippet 返回
在我们进一步讨论正常返回的 XML 之前，注意到搜索 API 的输出也可将结果作为标准 HTML 的 snippet 返回是很重要的。我将输出称为 snippet 是因为它不是完整的 HTML 页面（没有<HTML><BODY> 标签）。HTML 输出使用搜索请求中的 “output=snippet” 参数指示，其效果如下所示：
http://OmnifindHost:8080/api/search?index=Default&results=10&start=0&query=conferences&output=snippet
图 4. HTML snippet 结果页面
请注意，结果的格式有些类似 OmniFind 搜索结果页面中的格式，只是少了搜索框和页面控件。此方法在某些应用程序中有价值，但是不太灵活。如果您希望更改 HTML 格式，就需要自己解析 HTML，这可不是一件容易的事情。
第 4 种选择：使用 XSLT 来格式化搜索结果
因为结果通常作为 XML 返回，所以能够使用 XSLT 样式表将 XML 转换为所希望的 HTML 格式。由您准备好 XSLT 样式表，并使其包含合适的 XSL 和
XPath 命令来处理 XML ATOM 提要元素。在本例中，我将对结果页面使用相同的色彩设计和字体来匹配我的博客中的色彩设计和字体。以下是我使用的 XSLT 样式表，我将其存储在名为 “myStyleSheet.xsl” 的文件中。每行代码均进行了编号以便于参考。
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
|
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<xsl:output method="html"/>
<xsl:template match="/">
<style>
<xsl:comment>
.content-area {background-color: #dcedcb;}
.description {font-size: .9em; margin: 0 0 10px 0;}
// Remaining styles omitted for readability
</xsl:comment>
</style>
<xsl:apply-templates select="/atom:feed"/>
</xsl:template>
<xsl:template match="/atom:feed">
<div class="content-area">
<div class="title"><xsl:value-of select="atom:title"/></div>
<ol class="list"><xsl:apply-templates select="atom:entry"/></ol>
</div>
</xsl:template>
<xsl:template match="atom:entry">
<li>
<a href="{atom:link/@href}">
<xsl:value-of select="atom:title" disable-output-escaping="yes"/>
</a>
<div class="list-item-description">
<xsl:value-of select="atom:summary" disable-output-escaping="yes"/>
</div>
</li>
</xsl:template>
</xsl:stylesheet>
|
|
XSLT 可用于将 XML 转换为多种格式。第 6 行代码指示此转换的输出是 HTML。我使用 XSL 模板来匹配 XML 流中的各种元素。第 7 行代码是主模板，匹配 XML 文件中的全部元素。您可以在此模板中的 xsl:comment 指令之间（第 9 行到第 13 行）指定您要插入的样式。为了实现可读性，我省略了大部分样式指令。我在这个主模板中为 XSLT 遇到的每个 atom:feed 元素引用了一个子模板。在本例中，OmniFind XML 结果仅指定了一个 atom:feed 元素。
用于 atom:feed 元素的模板开始于第 17 行代码。它创建一个外部 HTML “div” 标签，其样式类是 “content-area”。请注意，用于每个指定的 “div” 类属性的样式必须在主模板之前定义。我再次故意省略大部分样式定义来实现可读性。atom:feed 模板为结果的标题创建一个内部 “div” 标签（第 19 行代码）。此标题实际上是通过使用 xsl:value-of 语句选择名为 “atom:title” 的元素的方式从 XML 获得的。如果您希望提供一个不同的硬编码标题，只需使用您自己的 HTML 语句（例如 <h2>My Title</h2>）替换第 19 行代码即可。第 20 行代码插入了一个 HTML
有序清单，并将另一个子模板应用于 XML 中找到的每个 “atom:entry” 元素。
最后一个模板定义（开始于第 23 行）提供了可应用于每个搜索结果的 HTML 转换。在此模板中，我为有序列表创建了一个 HTML 行项目标签、一个到文档的链接，以及一个对文档的简要描述。针对链接 URL，我使用 XPath 命令 (atom:link/@href) 来提取 atom:link 元素中的 href 属性值（第 25 行）。对于链接锚文本本身，我使用 xsl:value-of 命令来提取条目元素中的 atom:title 元素的内容（第 26 行）。对于结果描述也使用相同的技术。
OmniFind 能够方便地突出显示每个结果的标题和摘要中包含的任何搜索术语。它通过将遇到的搜索术语使用 HTML <SPAN> 标签括起来的方式，指示此样式用于突出显示。这些
HTML 标签嵌入在原始 XML 中，且通常被 XSLT 处理器进行转义操作。这会导致 HTML 标签在浏览器中以源代码形式显示（一种我们不希望出现的情况）。XSLT 处理器不知道它们是有效的 HTML
标签，它会负责任地对它在处理 xsl:value-of 指令时遇到的任何特殊字符进行转义操作。在此情况下，我们可以指示 XSLT 处理器不对第 26 行到第 29 行中具有 disable-output-escaping="yes" 属性的特殊字符进行转义操作。
请务必注意并不是所有的浏览器都支持 disable-output-escaping 属性。Microsoft 的 Internet Explorer
确实禁用了具有所希望效果的输出转义，但是它不符合 W3 XSLT 规范。而另一方面，Mozilla 忽略了此属性，以便遵循 XSLT 规范。对于 Mozilla 浏览器来说，可以使用不同的 XSLT 命令获得相同的效果（未在本示例中显示）。
使用样式表参数
“stylesheet” 参数在搜索请求中使用，用于指示要应用的 XSLT 样式表，如下所示。
http://OmnifindHost:8080/api/search?query=cameras&index=Default& results=10&start=0&stylesheet= http://myserver.com/myStyleSheet.xsl
使用 “stylesheet” 参数可使 OmniFind 将 xml-stylesheet 条目作为 XML 搜索结果的第二行代码插入，如下所示。
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href=" http://myserver.com/myStyleSheet.xsl"?>
<feed>...</feed>
这将使浏览器从 HREF 中指定的位置检索样式表，并使用 XSLT 应用它。结果如下所示：
图 5. 被添加到我的博客中的搜索框和使用 XSLT 转换的搜索结果页面
结束语
在本文中，我介绍了四种用于将 OmniFind 搜索功能整合到您的 Web 站点的方法。
第一种同时也是最简单的方法是直接插入到 OmniFind 搜索页面的链接。接下来是使用我自己的搜索框和搜索按钮来替换直接链接，但是不更改 OmniFind 搜索结果页面。然后我改用 OmniFind 搜索 API 来更好地控制返回的搜索结果的格式。我首先介绍了 API 如何将搜索结果作为 HTML 的 snippet 返回，然后介绍了如何将其最终转换为 XML。最后，我演示了如何将 XSLT 样式表应用于 XML 来创建完全定制的搜索结果。现在就下载 OmniFind Yahoo! Edition 并尝试使用这些技术来增强您自己的 Web 应用程序吧。
参考资料 学习
获得产品和技术
讨论
关于作者  | | | Todd Leyba 目前是 IBM 信息管理部门的内容发现和搜索分析产品宣传人员。他是一位重要的发言人，负责接触客户、合作伙伴和开发人员，来宣传 IBM 的内容发现和搜索战略。他的工作还包括将客户和开发人员反馈以及市场趋势整合到 IBM 未来的产品方向中。Leyba 先生具有全文搜索和检索系统架构及其在业务中的应用方面的专业知识。他曾经参与了多个和搜索相关的项目，其中包括 IBM 的 WebSphere
Enterprise Search 产品 (OmniFind)，此产品旨在提供具有广泛数据源支持的高级性能、范围和结果质量。 |
对本文的评价
| 
