本文為機器翻譯文章。如需檢視英文版,請選取 [原文] 核取方塊。您也可以將滑鼠指標移到文字上,即可在快顯視窗顯示英文原文。
譯文
原文

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

 

適用版本:SharePoint Server 2013 Enterprise

上次修改主題的時間:2016-12-16

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

注意事項 附註:
大部分的這一系列中所述的功能是僅供SharePoint Online中的私用網站集合。

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

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

在本文中,您將了解:

顯示範本用來控制如何內容應該顯示在內容搜尋網頁組件 (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. 按一下 [確定],然後儲存 [頁面。

    音訊 2


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

    音訊分頁


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

  1. 瀏覽至 [目錄項目] 頁面上。我們的案例,我們可以這麼做按一下此項目 「 Northwind Traders 50W 汽車收音機"中的 「 音訊 」 類別。

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

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

項目藍色


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

橘色項目


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

https://technet.microsoft.com/zh-tw/library/dn794198.aspx
顯示: