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的显示模板，我们再下个系列中介绍