SharePoint 2013 定制搜索显示模板(二)_html/css_WEB-ITnose
前言
之前一篇博客,简单的介绍了如何定制搜索显示模板,这一次,我们介绍一下如何定制搜索显示时,弹出来的那个页面,相信这个大家也都会遇到的。
1、第一部分就是搜索显示模板的部分,第二部分就是搜索项目详情的部分,如下图:
2、按照之前一篇博客介绍的过程,找到下面红框的html,下载一份副本到本地修改,如下图:
3、改个名字上传回去,之后也会自动生成一个JavaScript文件,具体信息对比一下,不要选择错了(一般默认就是对的,如果有问题了记得校对一下),如下图:
4、首先修改一下上一篇介绍的显示模板定义,里面有关联的详细信息模板定义,如下图:
注:可能有人会问,我们下载的副本是html的,为嘛关联一个js的呢?!这个我在做的时候也有点疑惑,不过JavaScript会在上传html模板的时候自动生成,也就不迷惑了;
5、尝试在spd里修改详情显示模板,加一个标题带上样式测试一下,如下图:
6、测试结果,说明我们改的地方是对的,虽然很少这么改,如下图:
7、简单介绍一下搜索详细显示模板的结构,主要是Header、Body、Footer三个部分,具体每个部分是干什么的,相信大家一看便知,如下图:
8、我们尝试在中间的缩略图(画外音:什么缩略图,明明就是一个iframe在模板里,你当我傻啊!确实是这样的,呵呵)后面,加上一个描述字段,算是一个“大改”吧,看看情况,如下图:
9、可以看到我们的描述字段,显示在了我们想要让他出现的地方,里面的内容也是我们想要显示的内容,如下图:
注:修改任何搜索项目的属性,都要爬网才生效,别傻傻的修改了属性,怎么改模板都不管用。。你不增量爬网一下,搜索项目属性的修改是不生效的。
总结
以上,便是搜索详细显示模板的定义,其实很简单,只要找对了需要修改的位置,修改起来非常容易的。其实一开始我也这么认为的,但是如果你想大概,还是需要花费一番心思的,比如修改Footer里面的操作,好吧。。休息。。休息一下。。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。
