跳至内容

Umbraco/示例和文章/实施搜索

来自 Wikibooks,开放世界的开放书籍
[编辑 | 编辑源代码]

本文介绍如何在 Umbraco 中实现基本的內容搜索。

请将任何意见或更正发送至 df at darren hyphen ferguson dot com。

先决条件

[编辑 | 编辑源代码]

您应该具备创建 Umbraco 模板和文档类型的一些经验。

您需要下载以下文件

Umbraco 实用程序:http://old.umbraco.org/frontpage/download/extensions/umbracoutilities.aspx [文件不再存在]

Umbraco XSLT 搜索:http://www.learningmill.org/bonus/umbraco/SearchResults%201.0%20with%20XSLT.zip [文件不再存在 - 请访问 http://old.umbraco.org/frontpage/download/extensions/umbracoutilities/umbsearchresult.aspx 获取说明] [文件不再存在]

最后,您需要一些 Umbraco 页面。显然,如果您没有要搜索的内容,您将不会得到任何结果!

安装 Umbraco 实用程序

[编辑 | 编辑源代码]

重命名您下载的 Umbraco 实用程序 zip 文件,并将其重命名为 umbracoUtilities.umb(Windows 有时会自动添加 .zip 扩展名)

以具有 Developer 选项卡访问权限的用户身份登录到您的 Umbraco 安装。

右键单击 'Macros' 图标,在 'Developer' 窗格中,然后单击 'Import package'



在弹出的窗口中,使用 'Browse' 按钮找到 umbracoUtilities.umb,然后单击 'Load Package' 按钮。



在接下来的屏幕上,您需要选中 'Accept License' 复选框,然后单击 'Install Package' 按钮。



假设一切顺利,您将看到一个确认屏幕,告知您 Umbraco 实用程序已成功安装。

系统将提示您填充搜索索引,您应该执行此操作。

创建搜索表单文档类型和模板

[编辑 | 编辑源代码]

为了搜索 Umbraco 内容,您需要一个表单,该表单对搜索词进行 HTTP POST 操作。包含此搜索词的表单输入应命名为 'search',通常是类型设置为文本的 HTML 输入元素。

您可以在主模板或导航 XSLT 文件中包含您的表单,但为了本教程的目的,我们将假设搜索表单位于其自己的模板内。

单击 Umbraco 仪表板中的 'Settings'。在左侧的 'Settings' 窗格中,右键单击 'Document Types',然后单击 'Create'



在弹出的窗口中,在 'Name' 文本框中输入 'Search Form'(或您喜欢的任何名称),然后选中 'Create matching template' 复选框。单击 'Create' 按钮。



如果您熟悉 Umbraco,您可能希望在此时向新的文档类型添加一些选项卡和属性。如果您是新手,别担心,您可以稍后再做。

在 Umbraco GUI 左侧的 'Settings' 窗格中,单击 'Templates' 文件夹左侧的加号图标以展开模板列表。找到并单击您在上一步示例中创建的 'Search Form' 模板。



将以下内容粘贴到 'Template' 文本区域

<html>
	<head>
		<title>Search Umbraco</title>
	</head>
	<body>
		<form method="get" action="/result.aspx">
			<input type="text" name="search"/>
			<input type="submit" value="Submit"/>
		</form>
	</body>
</html>

单击 'Save' 图标(看起来像软盘)。

这确实是基本的 Web 开发,没有花招。如果您觉得需要在这里添加 CSS 类、Javascript 验证或其他任何东西,请随意添加。您可能需要修改的唯一东西是表单操作。上面指定的 action /result.aspx 假设您可以在 umbraco 内容树的根目录创建页面。如果您不能,不要惊慌。我将在稍后介绍如何替换此 URL。

创建搜索页面

[编辑 | 编辑源代码]

单击 Umbraco 仪表板中的 'Content' 图标。右键单击 Umbraco GUI 左侧的 'Content' 窗格中的顶级内容节点。单击 'Create'



在弹出的 'Create Page' 窗口中,使用 'Choose Document Type' 下拉菜单选择您在上一步中创建的 'Search Form' 文档类型。在名称文本框中输入 'Search',然后单击创建按钮。



注意:如果您在选项列表中没有看到您的文档类型,那么很明显您在 Umbraco 中设置文档类型结构的方式有问题。解决此问题不在本教程的范围之内,但它很容易解决,Yahoo 邮件列表中的优秀人员无疑会在几分钟内帮您解决。

我们现在开始步入正轨。您将看到搜索节点已出现在 Umbraco GUI 左侧的 'Content' 窗格中。您会看到它是灰色的,因此单击 'Save and publish' 图标(一个地球仪和一个软盘的组合)。



注意:这是一个外观问题,但您可能不希望您的搜索页面图标是文件夹。您可能知道如何更改它,但如果您不知道,就必须再次回到邮件列表了。

我们几乎完成了这一部分,但让我们检查一下我们的搜索页面是否正常工作。由于 Umbraco 中的一个小错误,您会注意到 GUI 右侧框架中的 'Link to document' 仍然显示为 'This item is not published'。要解决此问题,请在左侧的 'Content' 窗格中单击您的搜索页面,'Link to document' 应该变为 '/search.aspx'。

单击 'Link to document' URL,您应该看到类似以下内容

文件:Searchform.jpg

好的,它不太漂亮,但我们已经走在了正确的道路上。

创建搜索结果文档类型和模板

[编辑 | 编辑源代码]

我们为搜索表单创建了文档类型和模板,创建结果文档类型和模板的基本步骤完全相同。我不会在这里重复所有图表,因此如果您遇到困难,只需使用上一节中的逐步图表和说明即可。

在 Umbraco 的设置部分,创建名为 'Search Result' 的文档类型,并包含匹配的模板。

在 Umbraco 的“内容”部分创建一个名为“Result”的“搜索结果”类型页面。保存并发布页面。点击左侧“内容”窗格中的页面,以便查看其 URL,从而确认页面已发布(还记得我之前提到过你可能想更改表单操作吗?好吧,这就是你需要更改的 URL)。

现在我们有一个搜索表单,它提交到一个将显示搜索结果的页面。现在是最后一步了,添加搜索功能。

添加搜索功能

[编辑 | 编辑源代码]

创建搜索 XSLT

[编辑 | 编辑源代码]

在 Umbraco 的“部分”窗格中,点击“开发者”。在 GUI 左侧的“开发者”窗格中,右键点击“XSLT 文件”并点击“创建”。



在弹出的窗口中,选中“创建宏”复选框,并在“文件名”文本框中输入“SearchResult”。点击“创建”按钮。注意:你可以保留“选择模板”下拉菜单,因为我们将在下一步更新新创建的文件。

将“SearchResults 1.0 with XSLT.zip”解压到你的本地电脑上。使用你最喜欢的文本编辑器将“SearchResults.xslt”的内容复制到剪贴板。

在 Umbraco 中,点击你刚刚在 GUI 左侧的“开发者”窗格中创建的 SearchResult.xslt 文件。将剪贴板的内容粘贴到“源代码”文本区域,替换现有内容。


文件:Pastexsl.jpg


点击保存图标(看起来像一个软盘)。

注意:以后有足够的时间来定制这个 XSL,本教程只关注让基本的搜索工作。

设置搜索宏

[编辑 | 编辑源代码]

在 Umbraco GUI 左侧的“开发者”窗格中,通过点击“”文件夹旁边的加号图标展开宏列表。找到你在上一步中创建的宏(X S L T 搜索结果),并点击它。


文件:Selectmacro.jpg


注意:我不确定为什么 Umbraco 在“X S L T 搜索结果”中添加了空格,但它并不重要。

点击“参数”选项卡,并为你的宏输入以下参数。

ALIAS          NAME                           TYPE
------------   ----------------------------   ------------
source         Source                         contentTree
search         Search String                  text
maxPerPage     Results to display per page    number
searchFields   Umbraco fieldnames to search   text
page           Page Number                    text 

你应该会看到一个类似这样的屏幕



确保通过点击保存图标(看起来像一个软盘)保存更改。

将宏插入搜索结果模板

[编辑 | 编辑源代码]

让我们返回并编辑我们的“搜索结果”模板。如果你忘记了,你可以点击 Umbraco 的“部分”窗格中的“设置”,它位于模板文件夹中。

现在,它应该是空的,所以让我们添加一些基本的 HTML 代码。只需将以下内容粘贴到“模板”文本区域中

<html>
        <head>
                <title>Search Umbraco</title>
        </head>
        <body>
               
        </body>
</html>

将光标放在文本区域中,位于打开和关闭的body HTML 标签之间。点击“插入宏”按钮(图标看起来像两个倾斜的 HTML 标签括号,当你将鼠标悬停在按钮上时,你会得到一个工具提示来确认它是正确的按钮)。


文件:Beforemacro.jpg


在弹出的窗口中,从下拉列表中选择“X S L T 搜索结果”,然后点击“确定”。



以下屏幕要求为宏参数提供一些值。这些需要一些解释。


文件:Macroparamsb.jpg


通过点击“选择项目”(位于“源代码”参数旁边),你可以浏览 Umbraco 的内容树,并指定一个搜索应该在其下执行的节点。我已经尝试过,但我似乎无法从根节点执行此操作。也许有人知道怎么做?

搜索字符串”字段中的“[@search]”值告诉我们搜索词将作为 HTTP 请求的一部分提供(还记得我们在教程开头创建的名为“search”的文本输入吗?)。

每页显示的结果”就是它的意思。只需确保你指定一个数字。在本例中,我使用了 10。

要搜索的 Umbraco 字段名”也相当容易理解,但你必须提供与你自己的 Umbraco 安装相关的字段名。你可以使用逗号分隔列表指定任意数量的字段。

页码”的值为“[@page]”,这意味着它将是 http 请求的一部分。我们之前安装的 XSLT 文件负责对结果进行分页,所以你不需要做任何特殊的事情。

点击“确定”按钮,你会注意到 Umbraco 如何将一个宏标签插入到我们的模板中。

最后一步非常重要,你需要用 Umbraco 的“ASPNET_FORM”标签包围宏标签,使其看起来像这样

<?ASPNET_FORM>
<?UMBRACO_MACRO macroAlias="XSLTSearchResult" source="-1" search="[@search]" maxPerPage ="10" searchFields="Keywords,Description" page="[@page]"></?UMBRACO_MACRO>
</?ASPNET_FORM>

就是这样!确保通过点击保存(软盘)图标保存对模板的更改。

[编辑 | 编辑源代码]

浏览回你创建的搜索页面,试一试。如果它没有工作,请告诉我我在文章中遗漏了什么。

希望你发现这篇文章有用。

像这样的文章只有在读者向我发送更新、错误、bug 修复等信息时才会不断改进,或者像维基百科一样,你可以根据需要进行更新。

华夏公益教科书