SharePoint 2016 Search 定制开发简介系列三-定制Search Result Webpart样式

本文是SharePoint 2016 Search定制开发系列的第三部分,主要讲解如何定制Search Result Webpart的样式。内容涵盖Control_SearchResults.html中的样式修改,包括webpart整体框架的调整,如排序功能的显示与隐藏,并提到了SharePoint属性中的json配置。文章还提及了若要改变搜索结果Item的显示方式,需要使用Item_{Type}.html显示模板,这部分将在后续系列中详述。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值