階段 11: 上傳並套用至 SharePoint Server 的內容搜尋網頁組件的顯示範本Stage 11: Upload and apply display templates to the Content Search Web Part in SharePoint Server

摘要:了解如何上傳並套用至 SharePoint Server 2016 在內容搜尋網頁組件的顯示範本。Summary: Learn how to upload and apply display templates to the Content Search Web Part in SharePoint Server 2016.

注意

大部分的這一系列中所述的功能是僅適用於 SharePoint Online 中的私人每個網站集合。Most of the features described in this series are available only for private sites collections in SharePoint Online.

快速概觀Quick overview

清楚的這一系列的上一個階段:Previous stages of this series explained:

雖然查詢結果中顯示之網頁組件已正確、 因沒有 Contoso 的外觀,且其顯示只有標題和怪異要找的灰色方塊。Although the query results displayed in the Web Parts were correct, they did not have a Contoso look, and they displayed only a title and a strange looking gray box.

在本文中,您將了解:In this article, you'll learn:

啟動階段 11Start stage 11

顯示範本的相關About display templates

顯示範本用來控制如何內容應該顯示在內容搜尋網頁組件 (CSWP)。請記得 CSWP 中所顯示的內容組成搜尋結果所傳回之網頁組件中所定義的查詢為基礎。所以當您在自訂顯示範本,基本上自訂網頁組件中顯示搜尋結果應方式。Display templates are used to control how content should be displayed in a Content Search Web Part (CSWP). Remember that the content that is displayed in a CSWP is composed of search results that are returned based on the query that is defined in the Web Part. So, when you customize a display template, you are basically customizing how search results should be displayed in the Web Part.

每個顯示範本是由兩個檔案所組成:Each display template consists of two files:

  • 您可以在您選擇的 HTML 編輯器中編輯 HTML 檔案An HTML file that you can edit in an HTML editor of your choice

  • JavaScript 檔案A JavaScript file

與主版頁面與版面配置,您可以編輯最愛的 HTML 編輯器中的顯示範本。編輯時的顯示範本,您可以專注在 HTML、 CSS 以及 JavaScript。時將其上傳,SharePoint 自動將 HTML 檔案轉換成相關聯的 JavaScript 檔案。因為這兩個檔案有相關聯,對 HTML 檔案中所做的任何變更將會自動更新相關聯的 JavaScript 檔案中。As with master pages and page layouts, you can edit the display template in your favorite HTML editor. When editing the display template, you can focus on HTML, CSS and JavaScript. SharePoint automatically transforms the HTML file into an associated JavaScript file when you upload it. Because the two files are associated, any changes that you make to the HTML file will be automatically updated in the associated JavaScript file.

有兩種類型的顯示範本:There are two types of display templates:

  • 控制顯示範本-定義整體版面配置的搜尋結果顯示方式。例如,這可以是您選擇要顯示的 HTML 標題、 開頭和結尾] 清單中,或如何將結果的清單中的來回] 頁面上。控制顯示範本只是一次呈現網頁組件中的。Control display template - defines the overall layout for how search results should be displayed. For example, this can be how you choose to display the HTML for a heading, the beginning and end of a list, or how to page back and forth in a list of results. The control display template is only rendered once in the Web Part.

  • 項目顯示範本-定義應如何顯示搜尋結果中的每個項目。例如,這可以是您選擇要顯示圖像,以及搜尋結果的標題標題在何處顯示為超連結的圖像下方。項目顯示範本被呈現一次的搜尋結果中的每個項目。如此,作法是,如果傳回十個搜尋結果,項目顯示範本會在其] 區段中的 HTML 十個一定時間。Item display template - defines how each item in the search results should be displayed. For example, this can be how you choose to display an image, and the title of a search result, where the title is displayed as a hyperlink below the image. The item display template is rendered one time for each item in the search result. So, in practice, if ten search results are returned, the item display template creates its section of HTML ten times.

下圖顯示如何使用 CSWP 我們類別] 頁面上的控制項顯示範本及項目顯示範本。The image below shows how the control display template and item display templates are used on the CSWP of our category page.

網頁組件顯示範本

更多概念性資訊顯示範本,以及如何建立您自己的詳細資訊的顯示範本,請參閱SharePoint 2013 設計管理員顯示範本For more conceptual information about display templates, and for more information about how to create your own display templates, see SharePoint 2013 Design Manager display templates.

如何上傳顯示範本How to upload display templates

我們 Contoso 網站,我們有四個顯示範本:For our Contoso site, we have four display templates:

  • 我們類別] 頁面上的某個控制項顯示範本One control display template for our category page

  • 我們類別] 頁面上的一個項目顯示範本One item display template for our category page

  • 我們目錄項目頁面一的控制顯示範本One control display template for our catalog item page

  • 一個項目顯示範本我們目錄項目頁面One item display template for our catalog item page

因為我們如何對應網路磁碟機上, 傳這些顯示範本是很簡單。只要-拖到資料夾位於檔案主版頁面圖庫->顯示範本->內容網頁組件。實際的所在位置您拖放檔案不是該重要只要它是在主版頁面圖庫中。但如內容網頁組件] 資料夾是內容網頁組件的其他顯示範本的所在位置,我們將新增他們那里。Because we have How to map your network drive, uploading these display templates is very easy. Simply drag-and-drop the files into the folder that is located in Master Page Gallery --> Display Templates --> Content Web Parts. The exact location of where you drag-and-drop the files isn't that important as long as it is in the Master Page Gallery. But, as the Content Web Parts folder is where the other display templates for Content Web Parts are located, we'll add them there.

拖放 2

在 [SharePoint],移至網站設定->主版頁面與版面配置->顯示範本->內容網頁組件並檢查會新增四個檔案。也請注意關聯的.js (JavaScript) 檔案的自動為每個顯示範本建立。In SharePoint, go to Site settings --> Master pages and page layouts --> Display Templates --> Content Web Parts and check that the four files are added. Also notice that an associated .js (JavaScript) file has automatically been created for each display template.

顯示範本 MPG

現在我們已經準備好要套用這些如此我們內容搜尋網頁組件的顯示範本。So now we're ready to apply these display templates to our Content Search Web Parts.

如何將套用至內容搜尋網頁組件的顯示範本How to apply display templates to a Content Search Web Part

我們先想要套用至 CSWP 我們類別頁面上的顯示範本。那麼,我們瀏覽至 「 音訊 」。We first want to apply display templates to the CSWP on our category page. So, let's browse to "Audio."

  1. 按一下 [設定] 功能表的 [--> [編輯頁面]Click the Settings menu --> Edit Page.

  2. 在 [網頁組件中按一下 [網頁組件功能表->編輯網頁組件In the Web Part, click the Web Part Menu --> Edit Web Part.

  3. 在 [網頁組件] 工具窗格的顯示範本] 區段中,要套用的控制顯示範本,從 [控制項] 功能表,選取您控制顯示範本。在 Contoso 案例中,這是分頁 Contoso 電子清單In the Web Part tool pane, in the Display Templates section, to apply the control display template, from the Control menu, select your control display template. In our Contoso scenario, this is Contoso Electronics List with Paging.

    套用控制項範本

  4. 要套用的項目顯示範本,從 [項目] 功能表中選取您的項目顯示範本。在我們的案例中,它是Contoso 電子產品組件庫To apply the item display template, from the Item menu select your item display template. In our scenario, it's Contoso Electronics Product gallery.

    套用項目範本

  5. 按一下 [確定],然後儲存 [] 頁面。Click OK, and then save the page.

    音訊 3 項目

突然,我們 「 音訊 」 頁面會尋找像是已為其中一個那些新裝顯示。而不是怪異要找的灰色方塊,會顯示每個項目、 繽紛圖像與我們也新增價格與我們目錄的網站欄中所儲存的評等資訊。但是它只會顯示三個項目。因此我們必須執行動作所需的某個項目。Suddenly, our "Audio" page is looking like it has been to one of those makeover shows. Instead of the strange looking gray box, there's a colorful image that displays for each item, and we've also added the price and rating information that was stored in the site columns of our catalog. But it is only displaying three items. So we'll have to do something about that.

  1. 按一下 [編輯網頁組件中一次。在 [顯示欄位的項目數,變更從 3 值為 9。Click to edit the Web Part again. In the Number of items to show field, change the value from 3 to 9.

    要顯示的數目

  2. 按一下 [確定],然後儲存 [] 頁面。Click OK, and then save the page.

    音訊 2

現在我們 「 音訊 」 頁面會尋找真好。藉由使用分頁箭號,我們可以輕鬆地瀏覽 「 音訊 」 類別中的不同項目。Now our "Audio" page is looking really good. By using the paging arrows, we can easily browse through the different items in the "Audio" category.

 ![Audio Paging](../media/OTCSP_AudioPaging.png)

現在我們類別] 頁面上有 Contoso 外觀下, 一個工作是要套用至 CSWP 在我們的目錄項目] 頁面上的顯示範本。Now that our category page has a Contoso look, the next task is to apply display templates to the CSWP on our catalog item page.

  1. 瀏覽至 [目錄項目] 頁面上。在我們的案例中,我們可以執行方法是按一下此項目 「 Northwind Traders 50W 汽車收音機"中的 「 音訊 」 類別。Browse to the catalog item page. In our scenario, we can do this by clicking the item "Northwind Traders 50W Car Radio" in the "Audio" category.

  2. 重複步驟 1-7 中如何套用至內容搜尋網頁組件的顯示範本,但選取 [目錄項目] 頁面上的控制項和項目顯示範本。Repeat steps 1 - 7 in How to apply display templates to a Content Search Web Part, but select the control and item display templates for the catalog item page.

而現在您項目詳細資料] 頁面上也有看起來非常好 Contoso。And now your item details page also has a very nice Contoso look.

項目藍色

使用色彩選取項目] 功能表,我們可以輕易地] 頁面上透過具有不同色彩的項目。By using the Color selection menu, we can easily page through the items with different colors.

橘色項目

要尋找良好真正啟動我們 Contoso 網站。但是我們也務必我們訪客可以瀏覽並快速找出所要尋找的產品。下一步是啟動考慮我們想要在我們的網站上使用的精簡器。啟動我們想要在我們的網站上使用精簡器的說明。Our Contoso site is really starting to look good. But we must also make sure our visitors can browse and quickly find the product they are looking for. The next step is to start considering which refiners we want to use on our site. starts the explanation of which refiners we want to use on our site.

本系列中的下一篇文章Next article in this series

階段 12: 計劃要用於 SharePoint Server-第一部中的多層面導覽的精簡器Stage 12: Plan to use refiners for faceted navigation in SharePoint Server - Part I

另請參閱See also

其他資源Other Resources

SharePoint 2013 設計管理員顯示範本SharePoint 2013 Design Manager display templates

SharePoint 2013 中的設計管理員概觀Overview of Design Manager in SharePoint 2013