階段 15: 將多層面導覽的精簡器新增至 SharePoint Server 發佈網站Stage 15: Add refiners for faceted navigation to a publishing site in SharePoint Server

摘要:了解如何將多層面導覽的精簡器新增至 SharePoint Server 2016 的發佈網站。Summary: Learn how to add refiners for faceted navigation to a publishing site 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 identified and configured the refiners we want to use for faceted navigation.

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

啟動階段 15Start stage 15

如何新增精簡搜尋網頁組件至頁面How to add a Refinement Web Part to a page

瀏覽至您要新增精簡搜尋網頁組件 (RWP) 頁面。在我們的案例中,我們瀏覽至照相機Browse to the page where you want to add the Refinement Web Part (RWP). In our scenario, let's browse to Cameras .

  1. 按一下 [設定] 功能表及 [編輯頁面]Click the Settings menu, and then click Edit Page.

  2. 在您要新增網頁組件網頁組件區域,按一下 [新增網頁組件In the Web Part Zone where you want to add the Web Part, click Add a Web Part.

  3. 在 [類別] 清單中,按一下 [搜尋]。In the Categories list, click Search.

  4. 在 [組件] 清單中,按一下 [精簡搜尋並再按一下 [新增]。In the Parts list, click Refinement, and then click Add.

    在我們的案例中,我們將新增 RWP 區域 2。In our scenario, we'll add a RWP to Zone 2.

    已新增精簡搜尋 WP

當您將 RWP 新增至頁面時,就會顯示數個預設屬性,例如"Author"及"修改日期 」。我們不想要使用這些精簡器。我們想要使用我們設定中的精簡器階段 14: SharePoint Server 中設定多面向導覽的精簡器。因此,我們必須據此設定網頁組件。When you add the RWP to a page, it will display several default properties such as "Author" and "Modified date." We don't want to use these refiners. We want to use the refiners we configured in Stage 14: Configure refiners for faceted navigation in SharePoint Server. Therefore, we'll have to configure the Web Part accordingly.

如何設定精簡搜尋網頁組件使用的多層面導覽的精簡器How to configure a Refinement Web Part to use refiners for faceted navigation

  1. 在 [網頁組件中按一下 [網頁組件功能表] 和 [編輯網頁組件In the Web Part, click the Web Part Menu, and then click Edit Web Part.

  2. 在網頁組件] 工具窗格的 [精簡器] 區段中選取 [使用受管理導覽字詞組中所定義的精簡搜尋設定In the Web Part tool pane, in the Refiners section, select Use the refinement configuration defined in the Managed navigation term set.

    設定 WP

  3. 按一下 [確定]並儲存] 頁面。Click OK and save the page.

    與我們已在剛像這樣中,我們] 頁面上新增精簡器。不錯不是嗎吗?And just like that, we've added refiners to our page. Nice, don't you think?

    已新增精簡器

若要確認適用的精簡器實際運作,選取綠色橙色從色彩精簡器,然後按一下 [套用]。立即、 中只綠色和橘色照相機的頁面上顯示。To verify that our refiners actually work, select Green and Orange from the color refiner, and then click APPLY. In an instant, only green and orange cameras display on the page.

 ![Verify Refiners](../media/OTCSP_ColorRefinerApplied.png)

那麼,我們已確認適用的精簡器正常運作。但是,我們不完全沒有與 user-friendliness。當事項位居、 精簡器會顯示為REFINABLEINT01REFINABLESTRING01REFINABLESTRING03。與等等記住,這些是精簡器啟用 managed 屬性中所用的名稱階段 14: SharePoint Server 中設定多面向導覽的精簡器當我們設定精簡器。以訪客這些名稱意義不完全。因此,我們必須修復這些變更精簡器顯示名稱。So, we've verified that our refiners work. But, we're not completely there with user-friendliness. As things stand, the refiners are displayed as REFINABLEINT01, REFINABLESTRING01, REFINABLESTRING03. and so on Remember, these are the names of the refiner-enabled managed properties we used in in Stage 14: Configure refiners for faceted navigation in SharePoint Server when we configured the refiners. To visitors, these names make no sense at all. Therefore, we must fix them by changing their refiner display names.

如何變更精簡器顯示名稱How to change a refiner display name

若要變更精簡器顯示名稱,您必須變更主版頁面圖庫中的 JavaScript 檔案。因為我們對應中的我們網路磁碟機階段 6: 上傳並將新的主版頁面套用到 in SharePoint Server 發佈網站,這是個簡單的程序。To change a refiner display name, you have to change a JavaScript file in the master page gallery. Because we mapped our network drive in Stage 6: Upload and apply a new master page to a publishing site in SharePoint Server, this is a simple process.

  1. 在對應的網路磁碟機中移至顯示範本->語言檔案In your mapped network drive, go to Display Templates --> Language Files.

  2. 移至 [對應至您的網站,即我們的案例中的語言資料夾en-us-我們Go to the folder that corresponds to the language of your site, which in our scenario is en-us.

    檔案路徑自訂字串

  3. 開啟 CustomStrings.js 檔案。Open the CustomStrings.js file.

  4. 每個精簡器啟用 managed 屬性,您想要變更的顯示名稱,使用下列語法:For each refiner-enabled managed property that you want to change the display name of, use the following syntax:

    "rf_RefinementTitle_ManagedPropertyName": "Sample Refinement Title for ManagedPropertyName",

    例如,在 Contoso 案例中,啟用精簡器的 managed 的屬性RefinableInt01包含價格精簡器。若要授與此精簡器的好的顯示名稱,我們將新增至 java 指令碼檔案的下行:For example, in our Contoso scenario, the refiner-enabled managed property RefinableInt01 contains a Price refiner. To give this refiner a nice display name, we'll add the following line to the java script file:

    "rf_RefinementTitle_RefinableInt01": "Price",

    在我們 Contoso 案例中,我們已設定 「 音訊 」 及 「 相機 」 類別精簡器我們 CustomString.js 檔案會類似:In our Contoso scenario, for the refiners we have configured for the "Audio" and "Cameras" category, our CustomString.js file will be like this:

    自訂字串檔案

  5. 儲存這個檔案,並重新整理 [照相機] 頁面上,確認適用的精簡器現在有好、 易記的顯示名稱。Save this file, and refresh the Cameras page to verify that our refiners now have nice, user-friendly display names.

    精簡器顯示名稱相機

如果我們瀏覽至 [數位相機] 類別,我們可以看到會顯示特定類別的精簡器巨型像素為單位If we browse to the Digital cameras category, we can see that the category-specific refiner MEGA PIXELS is displayed.

 ![Refiner Mega Pixels](../media/OTCSP_RefinerMegaPixels.png)

如此,我們特定類別的精簡器現在顯示正確的類別和所有擁有易記的名稱。但是,沒有其他因素會讓適用的精簡器更好的小型詳細資料。現在我們不能看到精簡器值的任何數字的詳細資訊的權限。例如,我們不能看到多少照相機的色彩為銀色、 或是多少照相機有14巨型像素為單位。若要查看此資訊,我們已將計數至精簡器值。So, our category-specific refiners now display for the correct category, and they all have user-friendly names. But, there is another small detail that would make our refiners even better. Right now we can't see any numeric details for the refiner values. For example, we can't see how many cameras are of the color Silver , or how many cameras have 14 mega pixels. To see this information, we have to add counts to the refiner values.

如何新增到精簡器值的計數 (英文)How to add counts to refiner values

  1. 在對應的網路磁碟機中移至顯示範本->篩選In your mapped network drive, go to Display Templates --> Filters.

  2. 開啟 HTML 檔案Filter_DefaultOpen the HTML file Filter_Default.

  3. ShowCounts 的值變更為 trueChange the value for ShowCounts to true.

    顯示計數 True

  4. 儲存檔案並重新整理以確認精簡器計數會顯示 [照相機] 頁面。您會看見精簡器計數僅顯示精簡器在才可以同時選取一個精簡器。Save the file, and refresh the Cameras page to verify that refiner counts are displayed. You'll see that refiner counts only display for refiners where it's only possible to select one refiner at a time.

    選取單一精簡器

  5. 若要新增精簡器計數至精簡器以選取多個精簡器值可能是,開啟 HTML 檔案Filer_MultiValue,並重複步驟 3 和 4。To add refiner counts to refiners where it's possible to select multiple refiner values, open the HTML file Filer_MultiValue, and repeat steps 3 and 4.

    現在我們重新整理 [照相機] 頁面上,當精簡器值的所有有計數。Now when we refresh the Cameras page, all of the refiner values have counts.

    多重精簡器

如此,當訪客來參加我們的 Contoso 網站,他們可以使用特定類別的精簡器找到他們正在輕鬆尋找產品。但沒有仍一個更多的事遺失: 當訪客在最上層類別] 頁面上,例如照相機,他們無法輕鬆地查看哪些子類別 [照相機。幸好,是要修正此問題的我們網頁組件。我們將探討這在這一系列的最後一份文件中的詳細資料。So, when visitors come to our Contoso site, they can use category-specific refiners to find the product they're looking for easily. But there's still one more thing missing: when visitors are on a top level category page, for example Cameras , they can't easily see which subcategories are under Cameras . Luckily, there is a Web Part that will fix this for us. We'll explore this in detail in the last article of this series.

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

階段 16: 新增分類精簡搜尋面板網頁組件至 SharePoint Server 發佈網站Stage 16: Add a Taxonomy Refinement Panel Web Part to a publishing site in SharePoint Server

另請參閱See also

概念Concepts

在 SharePoint Server 中設定搜尋網頁組件Configure Search Web Parts in SharePoint Server