SharePoint 2016 Search 定制開發簡介系列三-定制Search Result Webpart樣式

定制Search Result Webpart樣式

上一系列介紹了Search Navigation部分的樣式開發以及配置，本系列介紹Search Result Webpart的樣式定制

Search Result Webpart對應的顯示模闆在SharePoint中位于：

_catalogs/masterpage/Display Templates/Search/Control_SearchResults.html

同樣需要定制search results webpart樣式的時候就需要修改control_searchresults.html頁面，這裡介紹的樣式隻限定于該webpart的整體架構部分

SharePoint預設給出了很多設定控制該webpart的樣式，比如webpart 屬性中的show sort dropdown

選中該設定之後，webpart上會顯示預設的排序功能，包含按照relevance, date, views排序，在sharepoint屬性中是以json字元串的方式配置的，可以很友善的删除不需要的排序方式，該樣式的html加載代碼如下

<!--#_
                }
                if(showSortOptions){
                    var resultHeaderClassNoEncode = "ms-metadata";
                    var availableSorts = ctx.DataProvider.get_availableSorts();
_#-->
                    <div id="ResultHeader" class="_#= resultHeaderClassNoEncode =#_">
                        <ul id="Actions">                    
                                <li id="Sortby">
                                    <select title="_#= $htmlEncode(Srch.Res.rs_SortDescription) =#_" id="SortbySel" onchange="$getClientControl(this).sortOrRank(this.value);">
<!--#_ 
                                    for (var i = 0; i < availableSorts.length; i++) {
                                        var cplxsort = availableSorts[i];
                                        if(!$isNull(cplxsort)){
                                            if(ctx.DataProvider.getSortRankName() == cplxsort.name) {
_#-->
                                                <option selected="selected" value="_#= $htmlEncode(cplxsort.name) =#_">
                                                    _#= $htmlEncode(cplxsort.name) =#_
                                                </option>
<!--#_ 
                                            } else {
_#-->
                                                <option value="_#= $htmlEncode(cplxsort.name) =#_">
                                                    _#= $htmlEncode(cplxsort.name) =#_
                                                </option>
<!--#_ 
                                            }
                                        }
                                    } 
_#-->
           

想要修改這塊的邏輯可以修改該部分的js代碼，同理該webpart中的其他部分定制方法類似，當然該改動隻限定于搜尋結果item之外的内容，如果希望改動搜尋結果的Item顯示方式，就需要用到SharePoint中名為Item_{Type}.html的顯示模闆，我們再下個系列中介紹