跳至內容

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 修復等資訊時才會不斷改進,或者像維基百科一樣,你可以根據需要進行更新。

華夏公益教科書