階段 11： 上傳並套用至 SharePoint Server 的內容搜尋網頁組件的顯示範本

  • 發行項

 

**適用版本：**SharePoint Server 2013 Enterprise, SharePoint Server 2016

**上次修改主題的時間：**2016-12-28

**摘要：**了解如何上傳並套用至SharePoint Server 2016在內容搜尋網頁組件的顯示範本。

注意

大部分的這一系列中所述的功能是僅供SharePoint Online中的私用網站集合。

快速概觀 （英文)

清楚的這一系列的上一個階段：

雖然查詢結果中顯示之網頁組件已正確、 因沒有 Contoso 的外觀，且其顯示只有標題和怪異要找的灰色方塊。

在本文中，您將了解：

  • 顯示範本的相關

  • 如何上傳顯示範本

  • 如何將套用至內容搜尋網頁組件的顯示範本

啟動階段 11

顯示範本的相關

顯示範本用來控制如何內容應該顯示在內容搜尋網頁組件 (CSWP)。請記得 CSWP 中所顯示的內容組成搜尋結果所傳回之網頁組件中所定義的查詢為基礎。所以當您在自訂顯示範本，基本上自訂網頁組件中顯示搜尋結果應方式。

每個顯示範本是由兩個檔案所組成：

  • 您可以在您選擇的 HTML 編輯器中編輯 HTML 檔案

  • JavaScript 檔案

與主版頁面與版面配置，您可以編輯最愛的 HTML 編輯器中的顯示範本。編輯時的顯示範本，您可以專注在 HTML、 CSS 以及 JavaScript。時將其上傳，SharePoint 自動將 HTML 檔案轉換成相關聯的 JavaScript 檔案。因為這兩個檔案有相關聯，對 HTML 檔案中所做的任何變更將會自動更新相關聯的 JavaScript 檔案中。

有兩種類型的顯示範本：

  • 控制顯示範本-定義整體版面配置的搜尋結果顯示方式。例如，這可以是您選擇要顯示的 HTML 標題、 開頭和結尾] 清單中，或如何將結果的清單中的來回] 頁面上。控制顯示範本只是一次呈現網頁組件中的。

  • 項目顯示範本-定義應如何顯示搜尋結果中的每個項目。例如，這可以是您選擇要顯示圖像，以及搜尋結果的標題標題在何處顯示為超連結的圖像下方。項目顯示範本被呈現一次的搜尋結果中的每個項目。如此，作法是，如果傳回十個搜尋結果，項目顯示範本會在其] 區段中的 HTML 十個一定時間。

下圖顯示如何使用 CSWP 我們類別] 頁面上的控制項顯示範本及項目顯示範本。

網頁組件顯示範本

更多概念性資訊顯示範本，以及如何建立您自己的詳細資訊的顯示範本，請參閱SharePoint 2013 設計管理員顯示範本。

如何上傳顯示範本

我們 Contoso 網站，我們有四個顯示範本：

  • 我們類別] 頁面上的某個控制項顯示範本

  • 我們類別] 頁面上的一個項目顯示範本

  • 我們目錄項目頁面一的控制顯示範本

  • 一個項目顯示範本我們目錄項目頁面

因為我們對應我們網路磁碟機上, 傳這些顯示範本是很簡單。只要-拖到資料夾位於檔案主版頁面圖庫--> 顯示範本--> 內容網頁組件。實際的所在位置您拖放檔案不是該重要只要它是在主版頁面圖庫中。但如內容網頁組件] 資料夾是內容網頁組件的其他顯示範本的所在位置，我們將新增他們那里。

拖放 2

SharePoint 中移至網站設定--> 主版頁面與版面配置--> 顯示範本--> 內容網頁組件並檢查會新增四個檔案。也請注意關聯的.js (JavaScript) 檔案的自動為每個顯示範本建立。

顯示範本 MPG

現在我們已經準備好要套用這些如此我們內容搜尋網頁組件的顯示範本。

如何將套用至內容搜尋網頁組件的顯示範本

我們先想要套用至 CSWP 我們類別頁面上的顯示範本。那麼，我們瀏覽至 「 音訊 」。

  1. 按一下 [設定] 功能表的 [--> [編輯頁面]。

  2. 在 [網頁組件中按一下 [網頁組件功能表--> 編輯網頁組件]。

  3. 在 [網頁組件] 工具窗格的顯示範本] 區段中，要套用的控制顯示範本，從 [控制項] 功能表，選取您控制顯示範本。在 Contoso 案例中，這是分頁 Contoso 電子清單。

    套用控制項範本

  4. 要套用的項目顯示範本，從 [項目] 功能表中選取您的項目顯示範本。在我們的案例中，它是Contoso 電子產品組件庫。

    套用項目範本

  5. 按一下 [確定]，然後儲存 [] 頁面。

    音訊 3 項目

    突然，我們 「 音訊 」 頁面會尋找像是已為其中一個那些新裝顯示。而不是怪異要找的灰色方塊，會顯示每個項目、 繽紛圖像與我們也新增價格與我們目錄的網站欄中所儲存的評等資訊。但是它只會顯示三個項目。因此我們必須執行動作所需的某個項目。

  6. 按一下 [編輯網頁組件中一次。在 [顯示欄位的項目數，變更從 3 值為 9。

    要顯示的數目

  7. 按一下 [確定]，然後儲存 [] 頁面。

    Audio 2

    現在我們 「 音訊 」 頁面會尋找真好。藉由使用分頁箭號，我們可以輕鬆地瀏覽 「 音訊 」 類別中的不同項目。

    音訊分頁

現在我們類別] 頁面上有 Contoso 外觀下, 一個工作是要套用至 CSWP 在我們的目錄項目] 頁面上的顯示範本。

  1. 瀏覽至 [目錄項目] 頁面上。在我們的案例中，我們可以執行方法是按一下此項目 「 Northwind Traders 50W 汽車收音機"中的 「 音訊 」 類別。

  2. 重複步驟 1-7 中如何套用至內容搜尋網頁組件顯示的範本，但選取 [目錄項目] 頁面上的控制項和項目顯示範本。

而現在您項目詳細資料] 頁面上也有看起來非常好 Contoso。

項目藍色

使用色彩選取項目] 功能表，我們可以輕易地] 頁面上透過具有不同色彩的項目。

橘色項目

要尋找良好真正啟動我們 Contoso 網站。但是我們也務必我們訪客可以瀏覽並快速找出所要尋找的產品。下一步是啟動考慮我們想要在我們的網站上使用的精簡器。啟動我們想要在我們的網站上使用精簡器的說明。

此系列中下一篇文章

階段 12： 計劃要用於 SharePoint Server-第一部中的多層面導覽的精簡器

See also

SharePoint 2013 設計管理員顯示範本
設計管理員的概觀 in SharePoint 2013