1 添加Controller
將controller文件放在com.jeecms.cms.action.front包中,
圖1.1
然后在jeecms-servlet-front-action.xml文件中配置bean,如下所示:
<bean id="OnlineConsultationAct" class="com.jeecms.cms.action.front.OnlineConsultationAct"/>
圖1.2
圖1.3
注意:Controller中的@RequestMapping的值需要符合web.xml中配置的url-pattern;
圖1.4
2 圖片懸浮效果
圖片懸浮效果如圖2.1和2.2所示,
圖2.1
圖2.2
實現方法:
<!-- 微影空間縮略圖懸浮div --> <div id="tooltip" class="tip"></div> <!-- 微影空間ul列表 --> <ul class=""> <li> <span class="createtable" tpath='/img/20180909.jpg'> <a href="www.baidu.com" target="_blank"> 這個殺手不太冷 </a> </span> </li> </ul> <!-- 微影空間相關CSS --> .tip{ display:none; padding:5px; } <!-- 設置最大寬高后,系統會自動分配圖片的比例(以高/寬為准,算出比例) --> .tip img { max-width: 320px; max-height: 250px; }
<!-- 微影空間相關JS --> <script type="text/javascript"> $(function () { //獲取鼠標坐標 function mousePosition(ev){ ev = ev || window.event; if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //hover某處顯示懸浮框 $(".createtable").mouseover(function(e){ //獲取鼠標位置函數 var mousePos = mousePosition(e); var xOffset = 20; var yOffset = 25; $("#tooltip").css("display","block").css("position","absolute").css("top",(mousePos.y - yOffset) + "px").css("left",(mousePos.x + xOffset) + "px"); $("#tooltip").append('<img src="'+$(this).attr("tpath")+'" />'); }); //鼠標離開表格隱藏懸浮框 $(".createtable").mouseout(function(){ $("#tooltip").empty(); $("#tooltip").css("display","none"); }); }); </script>
3 EChart間歇性加載失敗
參考博客后,發現這是因為ECharts 沒有獲取到div的高寬而導致初始化失敗,這時候可以:
- 明確指定div的style.width和style.height(不能設置百分比);
參考博客:
1、關於echarts在默認隱藏的div中不顯示的問題;
https://blog.csdn.net/chenxueshanblog/article/details/72461113
2、關於echart在隱藏與顯示輪替中的div加載顯示為空的原因分析
http://www.wufangbo.com/103077/
4 CSS控制背景圖片
① background:url(../images/gallery.gif)0 -37PX no-repeat; 通過偏移量截取一張大圖里的小圖標
② background-position: 17px 0px;
調整背景圖片的位置--就是上面設置的偏移量
以上參數皆為X軸與Y軸的偏移量,分先后順序
下面是設置背景圖片左右居中,上下居中,寬度80px,高度80px
③ background:url("..//images/huo.jpg")center center/
80px 80px no-repeat;
==>center可以替換成X 、Y軸的具體偏移量
5 Freemarker過濾HTML標簽
使用以下標簽即可過濾html標簽,
[@text_cut s=content.txt?replace('<.*?>',"","ri") ?replace(' ',"","ri")?replace(" ","") len='28' /]
過濾的步驟分三步:
1、replace('<.*?>',"","ri"),過濾所有的html箭頭標記
2、replace(' ',"","ri"),過濾所有的
3、replace(" ",""),過濾所有的“手動空格”
注意:
1、freemarker中正則表達式寫法與JS略有不同
1.1 freemarker默認為全局匹配,而JS默認為單次匹配。
1.2 JS的正則表達式格式為“/內容/”,而freemarker不需要單斜杠。
1.3 “\d”這種符號在freemarker中需要寫成“\\d”
2、正則表達式的貪婪模式與非貪婪模式
replace('<.*?>',"","ri") 里面的“.*”是貪婪模式,假設沒有“?”,那么程序會搜索到右邊最后一個“>”然后將中間的字符串全部替換;
“.*?”是非貪婪模式(因為?是匹配0次或1次),如此,程序會搜索右邊最靠近的“>”,然后將匹配結果替換。
參考博客:
1、Freemaker Replace函數的正則表達式運用
https://www.jb51.net/article/76560.htm
2、正則表達式貪婪與非貪婪模式
https://www.cnblogs.com/xudong-bupt/p/3586889.html
6 上傳圖片后預覽問題
圖片預覽分上傳前預覽和上傳后預覽,此處為上傳后圖片預覽。
經核實,圖片確實已經上傳成功,並且當f12將圖片地址按原值重新替換后,圖片就可以預覽了。
多次研究后,發現可能是動態資源加載延遲的問題,所以我們采用了由tomcat指定靜態資源目錄的方法,如下所示:
圖6.1
第一個配置是項目WebContent目錄的絕對路徑,第二個配置是上傳文件的存儲地址的絕對路徑,第三個配置是二次上傳文件的存儲地址的絕對路徑。
采用這種方式,有2個關鍵點需要注意:
1、將編譯文件classes文件夾放在WEB-INF目錄下面,如果該項未配置,啟動Tomcat時會報錯。
圖6.2
2、如果以上三個配置都落實了,那么Tomcat的webapps下面允許存在同名項目,因為Tomcat找的項目是我們第一個配置的絕對路徑。如果只配置了二、三,那么Tomcat找的項目會是webapps下面的,由於圖片上傳時配置的是一段字符串--非訪問路徑,所以圖片會上傳到webapps下面,所以會導致圖片預覽失敗。
7 網頁的圖標替換
圖標替換分為全局替換和局部替換,采取就近原則,
1、全局替換,替換tomcat中webapps下ROOT文件夾下的favicon.ico圖片;注意圖片的名稱+后綴名一定要完全符合。
圖7.1
2、局部替換,在網頁的head標簽中加上以下代碼,圖片后綴名隨意。
<link rel="shortcut icon " type="images/x-icon" href="/${res}/images/0045.jpg">
注意:全局替換不穩定,如果是上線項目,建議使用局部替換。
8 搜索功能出現異常
出現這個問題的原因是lucene索引文件沒有更新,內容不完整。需要在后台重新生成索引,
圖8.1
9 首頁靜態化
首先在“配置”欄目中開啟靜態頁選項(第1個選項是必須勾選的,第2個選項非必填,且看后面分析);然后再生成靜態頁,
圖9.1
圖9.2
注意:
1、勾選第二個選項“使用根首頁”,那么程序會將靜態頁生成到WebContent根目錄下,
圖9.3
如此配置,輸入項目首頁路徑(http://localhost:8090/cms/)后,可以正常訪問。
2、不勾選第二個選項“使用根首頁,程序會將靜態頁生成到你填寫的靜態頁目錄下,
圖9.4
如此配置,也能正常運行。但是要將WebContent根目錄下的index.html文件刪掉,因為web.xml中是如此配置的,
圖9.5
10 hibernate的懶加載
我現在需要得到該對象的id,經debug后發現他的id為null,
圖10.1
調用getId()方法,發現id為6,
圖10.2
發現該對象的handler的id屬性值也為6,
圖10.3
仔細看下handler,發現帶有lazy,是懶加載(圖10.4);
圖10.4
11 js跳轉到空白頁
window.open(URL);
12 瀏覽器兼容性問題
由於我們的項目是在谷歌瀏覽器上面開發,而谷歌瀏覽器使用的是谷歌內核(屬於webkit內核),而國內的瀏覽器大部分都是采用雙核模式,於是瀏覽器就有極速模式、兼容模式之分。
解決兼容性問題有以下兩種辦法:
1、在訪問網站時,將瀏覽器設置為谷歌內核;也就是默認切換到極速模式。
2、編寫兼容IE瀏覽器的代碼,首先需要設置瀏覽器默認采用IE9或更高內核(如果小於IE9,強烈建議客戶端升級IE瀏覽器,因為IE9在2011年就發行了,程序沒必要兼容太老的IE瀏覽器),瀏覽器一般默認采用IE7內核,然后找到出現樣式兼容的地方,手動修改兼容性代碼。
注意:
國內瀏覽器有以下幾點需要注意,以360瀏覽器為例,
1、客戶端瀏覽器版本過低,沒有極速模式和兼容模式。如360的5.0版本,
圖12.1 V5.0版本
圖12.2 V7.0版本
所以遇到這種情況就無法通過代碼控制瀏覽器默認選擇極速模式了,因此可以提示用戶更新瀏覽器,如下圖所示:
圖12.3
2、瀏覽器各版本差異性比較大,
360的7.0版本:用戶如果手動/代碼切換了兼容/極速模式,那么后續的訪問都會是該模式。但是如果代碼里面設置了默認使用某種模式,那么該配置可以生效,模式會根據代碼發生改變。
360的9.1版本:用戶如果手動/代碼切換了兼容/極速模式,那么后續的訪問都會是該模式。代碼里面的配置只在用戶手動切換前有效,一旦手動切換過模式,以后都是這種模式,代碼配置將起不到任何作用。控制webkit內核的meta標簽無效,但是控制IE內核版本的代碼是有效的。
代碼控制極速/兼容模式:
只要你在自己的網站里增加一個meta標簽,那么360瀏覽器就會在讀取到這個標簽后,立即切換對應的內核,並將這個行為應用於這個二級域名下所有網址。
<meta name="renderer" content="webkit" />
頁面默認采用極速模式,即谷歌內核;
<meta name="renderer" content="ie-comp" />
頁面默認采用兼容模式,為IE兼容內核(IE7);
<meta name="renderer" content="ie-stand" />
頁面默認采用兼容模式,為IE標准內核(電腦中最高內核);
圖12.4
需要注意這些標簽在9.1版本中可以不帶斜杠,而在7.0中必須帶斜杠,否則配置不會生效。偶爾瀏覽器使用的內核是谷歌,但是那個標志卻是兼容模式。
其他常用配置:
1、IE8及其更低的版本是不支持HTML5標簽的,添加以下配置可以解決該問題。(這種方法叫條件注釋,這是IE專門提供的一種語法,如果使用非IE內核,則會將其作為注釋而忽略這些語句)
<!--[if lt IE 9]> <script src="/u/cms/www/html5shiv.js"></script> <script src="/u/cms/www/respond.js"></script> <script src="/u/cms/www/excanvas.js"></script> <![endif]-->
2、如果IE瀏覽器版本過低,提示更新瀏覽器
<!--[if lte IE 8]> <script > window.location.href="/browserUpgrade.html"; </script> <![endif]-->
3、
<meta http-equiv="X-UA-Compatible" content="IE=edge">
告訴IE使用最新的引擎渲染網頁,會使用客戶端最高的IE內核
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9;">
選擇該標簽配置的內核,如果客戶端IE7和IE9都有,會選IE9。
注:
對於該項目,我解決兼容性問題的辦法是:加載首頁時,代碼控制默認選擇極速模式,如果IE內核小於等於9,就跳轉到提示頁面。
因為只要符合IE內核小於等於9這個條件,就證明了瀏覽器是兼容模式或者360的版本為5.0版本。(meta標簽和條件注釋不分先后順序)
由於360瀏覽器9.1版本的原因,所以我在提示頁面中提示用戶如果瀏覽器為兼容模式,請手動調整為極速模式。
完整的解決方案應為:
① 首先設置兩個meta標簽,一個控制webkit內核,另外一個控制默認選擇最高IE內核(如此,5.0版本使用的是最高IE內核,而其他高版本,使用的是谷歌內核;這兩個標簽不區分先后順序);
② 然后將在IE9內核下面樣式異常的地方,加上兼容性代碼;
③ 如果IE內核版本低於IE8,則提示更換瀏覽器;
4 如果IE內核版本等於IE8,則添加三個js文件以支持html5標簽。
<meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 8]> <script > window.location.href="/browserUpgrade.html"; </script> <![endif]--> <!--[if lt IE 9]> <script src="/u/cms/www/html5shiv.js"></script> <script src="/u/cms/www/respond.js"></script> <script src="/u/cms/www/excanvas.js"></script> <![endif]--
PS:指定極速模式與兼容模式的代碼不能同時編寫,否則瀏覽器加載不穩定。導致首頁是兼容模式時,其他頁面是極速模式;首頁是極速模式時,其他頁面是兼容模式;
如果在開始菜單中找不到ie瀏覽器,請到C:\Program Files\Internet Explorer找到iexplore.exe;這樣就可以看到IE內核版本了。
參考博客:
1、用Meta標簽代碼讓360瀏覽器默認極速模式不是兼容模式
https://www.jb51.net/web/259920.html
2、Chrome內核和Webkit內核區別是什么?
https://zhidao.baidu.com/question/336031809.html
3、判斷IE版本的HTML語句
https://blog.csdn.net/u013063153/article/details/52689580
3、360社區自定義切核功能說明
http://bbs.360.cn/thread-14958904-1-1.html
4、360瀏覽器內核控制標簽meta說明
https://browser.360.cn/se/help/kernel.html
5、最有效解決IE8 position兼容性問題
https://www.cnblogs.com/wanghaiyang/p/6418189.html
6、html5shiv.js和respond.min.js的作用
https://www.cnblogs.com/yangjie-space/p/4816279.html
7、excanvas.js的原理
https://zhidao.baidu.com/question/710968549776882005.html
13 tomcat設置80端口
如果啟動tomcat時,發現80端口被占用,那么需要排查以下幾個地方,
圖13.1 端口被占用截圖
1、查看iis服務器下面的網站是否占用了80端口(IIS的默認網站設置的端口就是80)
2、關閉SQL Server Reporting Services (MSSQLSERVER) 這個服務
3、在注冊表中找到找到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\HTTP,
然后在右邊列表中找到項Start,將其值改為0,然后重啟電腦。
4、如果以上三種方法都不行,那么可能是服務器廠商將系統的HTTP端口設為了80端口,這就需要聯系廠商修改服務器的配置了。
服務器配置解決辦法:
1、將后面的網線要鏈接到管理網口,就是那個單獨出來一個的那個網口;
圖13.2
2、網線另外一段不連接交換機,連接任意一台筆記本電腦;
設置ipv4的ip地址為192.168.2.100(2網段),默認網關192.168.2.1,子網掩碼255 255 255 0;
3、瀏覽器輸入ip地址,進入ibmc管理界面,找到服務配置,更改其中的Web Server(HTTP)的端口,
圖13.3
圖13.4
終止http服務的命令:
輸入net stop http
按y 確定
再輸入 Sc config http start= disabled
注意:
windows企業版是沒有iis服務的,只有專業版有
圖13.5
參考博客:
1、Windows平台下80端口被System占用解決辦法
https://jingyan.baidu.com/article/08b6a591b23ebe14a8092231.html
2、win10 旗艦版無iis服務
https://bbs.csdn.net/topics/392114623?page=1
3、win10 無iis服務
https://zhidao.baidu.com/question/1737384355496153827.html
14 tomcat設置自啟動
由於服務器上面不允許裝JDK,所以傳統的方式無效,在輸入cmd命令時會拋出以下異常,
JAVA_HOME should point to a JDK not a JRE
所以我們采取的解決辦法是使用windows的定時任務,詳細過程查看以下博客,
https://blog.csdn.net/shiyong1949/article/details/52779359
經本人測試,發現按照博客配置后,tomcat仍然不會自啟動,經分析,原因就是觸發器配置錯誤。我們應該選擇登錄時啟動tomcat(特定用戶與所有用戶的選擇不做要求,一般選擇特定用戶)。
圖14.1
圖14.2
圖14.3
注意:定時任務中下圖選項不能勾選,其默認是勾選的,我們需要手動去掉。
圖14.4
參考博客:
1、將Tomcat設置為自動啟動的服務(裝有JDK)
https://www.cnblogs.com/qianzf/p/6800459.html
15 部署運行asp程序
1、打開IIS服務器,
普通window系統參考該博客,
https://jingyan.baidu.com/article/ac6a9a5e36977d2b653eacb2.html
Windows Server2008系統參考該博客,
https://jingyan.baidu.com/article/1612d500aa4594e20e1eeefc.html
2、在IIS服務器中添加網站,選擇asp程序的物理路徑,設置好ip地址和端口。
3、右擊項目切換到功能視圖,在中間部分找到“ASP”,在設置里將啟用父路徑至改為true(這樣才可以使用相對路徑../和/等)。
4、配置匿名用戶
5、執行cmd命令:
cd C:\Windows\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers
6、開啟SQLServer的TCP/IP協議,配置1433端口;
7、為了方便本地調試,需要設置網頁將錯誤信息顯示出來。在“ASP”->“調試屬性”->“將錯誤發送到瀏覽器上”的值改為“True”,最后部署網站成功后再改為“False”。另外,把IE的“Internet選項”—“高級”—“顯示友好的http錯誤信息”的勾去掉。
參考博客:
1、在Windows2008下用IIS7.0和SQL2005部署.asp網站
https://jingyan.baidu.com/article/e4511cf35573e02b855eaf11.html
2、WIN2008系統安裝IIS7配過ASP后打開ASP網站為500錯誤的解決辦法
https://www.jb51.net/article/34688.htm
3、解決IIS不能在此路徑中使用此配置節點錯誤
https://blog.csdn.net/pianpianboy/article/details/40536891
4、Win7下IIS由於擴展配置問題而無法提供請求的頁
https://blog.csdn.net/ldl22847/article/details/7233611
5、sqlserver在還原數據庫時出現: 無法執行 BACKUP LOG,因為當前沒有數據庫備份
https://blog.csdn.net/sxf359/article/details/75579518
16 asp程序設置自啟動
1、在IIS服務中的右側操作欄中,將網站設置為自啟動;
2、在服務中將以下兩個服務設為自啟動,
Windows Process Activation Service服務
World Wide Web Publishing Service服務
如果重啟電腦發現這兩個服務狀態為未啟動,那么就采用windows定時任務,找到World Wide Web Publishing Service服務 的bat文件,設置登錄自啟動即可。(方法參考tomcat設置自啟動)
參考博客:
1、IIS無法啟動計算機上的服務W3SVC如何修復
https://blog.csdn.net/xw505501936/article/details/48339243
2、iis開機時無法自啟動,必須手動啟動?怎么解決?
https://bbs.csdn.net/topics/80011278
17 修改tomcat服務器內存
在環境變量中新建一個系統變量,
變量名:JAVA_OPTS
變量值:-Xms512m -Xmx512m
進本人測試,網上那種修改catalina.bat文件的無效。
參考博客:
1、TOMCAT內存大小調整
https://blog.csdn.net/coolwzjcool/article/details/2544448
18 新聞采集功能
網易新聞排行榜舉例說明,地址為http://news.163.com/special/0001386F/rank_whole.html
圖一
1.點擊頂部“運營”,選擇“采集管理”,點擊右側“添加”按鈕(見圖二)進入添加采集頁面(見圖三)。
圖二
添加采集
輸入采集名稱,選擇“欄目”為末級欄目。將“頁面編碼”改為“UTF-8”。輸入采集地址,可采集多個地址,每個地址一行。輸入動態地址,動態地址可用[page]代替,[page]代替的是比如第二頁:http://news.163.com/special/0001386F/rank_whole_2.html,可用 http://news.163.com/special/0001386F/rank_whole_[page].html代替,要根據原網頁的頁面地址結構分析加[page],再輸入“頁碼”。
圖三
采集規則
在瀏覽器上輸入地址,進入頁面,右擊頁面選擇“查看網頁源代碼”,“開始HTML”代表的是要采集的內容的開始HTML標簽如:<div class=”ddd”>測試</div>就選擇<div class=”ddd”>。“結束HTML”就是選擇</div>。
“內容地址集”選擇<table width="100%" cellpadding="0" cellspacing="0" border="0">的原因是標簽<table>里面包含了我們本頁面所需要的所有內容地址,見圖五-六。
“內容地址”取的是內容地址集里面單個的<a>標簽里邊的地址,見圖七。
“標題”是新聞詳細頁所存在的正文標題標簽都可以取,見圖八。
“內容”是新聞詳細頁的新聞正文內容,取其標簽,見圖九。
所有的采集規則無論是“開始HTML”和“結束HTML”都是取唯一標簽,比如說不能在取的HTML標簽中不能存在相同的“開始HTML”和“結束HTML”。
圖四
圖五
圖六
圖七
圖八
圖九
19 視頻播放的格式
在開發視頻單頁的過程中,遇到了視頻不能播放的問題。剛開始是用的html5內嵌的播放器導致很多視頻格式的視頻播放不了。后面換了幾種播放器就能正常播放常見的幾種視頻格式,比如MP4、flv、ogg等,建議使用CK播放器和player.swf。其中MPEG、avi格式的不能正常播放,播放器不支持,目前還沒能找到更好的播放器。
20 播放器設置下載功能
播放器的下載功能取決於播放器類型和瀏覽器版本。
部分播放器自帶下載功能,比如說如下兩圖同一個播放器在不同的瀏覽器下下載功能一個能體現一個不能體現。
后面在播放頁面加了一個視頻下載鏈接來下載視頻。
<span>下載鏈接:</span><span id="views"><a href="${content.mediaPath!}" title="點我下載" download>${content.title!}</a></span>
21 增量備份
增量備份(incremental backup)是備份的一個類型,是指在一次全備份或上一次增量備份后,以后每次的備份只需備份與前一次相比增加或者被修改的文件。
下載自動增量備份軟件Allway Sync並運行。
1、新建同步組,選擇菜單欄“同步組”,選擇“新建同步組”
2、請在文本框中輸入同步文件夾的路徑,或點擊“瀏覽”按鈕選擇。
3、請在文本框中輸入同步文件夾的路徑,或點擊“瀏覽”按鈕選擇。
4、點擊“同步”,進行文件夾同步備份。
5、同步成功之后右擊“新的同步組1”,選擇“配置”。
6、配置頁面,展開“默認配置”下面的“新的同步組1”,選擇“同步計划”,勾選“每隔制定的時間間隔同步”再選擇“同步時間間隔”的時間。
7、勾選“使用windows‘任務計划’”,點擊“配置任務計划”進入屬性界面。
8、選擇“計划”,點擊“新建”,選擇“計划任務”項中的間隔時間,並根據需求填寫“開始時間”,點擊“確定”。
22 標簽的用法
1、獲取一級友情鏈接
參數詳解:
siteId:站點ID
ctgId:鏈接類別編號
enabled:是否顯示
對象的屬性:
name:鏈接分類名稱
id:鏈接分類編號
domain:域名(鏈接地址)
[@cms_friendlink_ctg_list siteId='1'] [#list tag_list as ctg] ${ctg.name} [/#list] [/@cms_friendlink_ctg_list]
2、獲取子級友情鏈接
[@cms_friendlink_list ctgId='${ctg.id}'] [#list tag_list as childLink] <a href="${childLink.domain}" target="_blank"> ${childLink.name} </a> [/#list] [/@cms_friendlink_list]
3、獲取某個廣告位下的廣告
由於jeecms沒有提供該標簽,所以我們需要自定義標簽來實現此功能,具體操作步驟參考以下博客:
https://www.cnblogs.com/jifeng/p/4117709.html
對象的屬性:
attr.image_url 圖片地址
attr.image_link 圖片鏈接地址
[@cms_advertising_space id='4' ] [#if tag_list?size>0] [#list tag_list as c] <li><img src="${c.attr.image_url}" border="0"></li> [/#list] [/#if] [/@cms_advertising_space]
4、獲取某個廣告的信息
[@cms_advertising id='19'] <a href="${tag_bean.attr.image_link}" > <img src="${tag_bean.attr.image_url}" > </a> [/@cms_advertising]
5、截取字符串
[@text_cut s='誰是小胖俠' len='12' append="..."/]
6、日期格式化
${content.date?string('MM-dd')}
7、獲取當前元素的索引
[#if content_index%4==0]
8、判斷當前數組的長度
[#if tag_list?size>0]
9、判斷某個元素不為空
[#if title??]
10、防止空異常
jeecms獲取某些屬性時,如果該屬性為空,則系統會拋出異常,可以通過以下方式解決,
${content.typeImg!}
如果沒有類型圖,則不顯示
${content.typeImg!'C://0978.jpg'}
如果沒有類型圖,則去'C://0978.jpg'路徑找
11、分頁標簽
[@cms_pagination/]
參數:sysPage
作用:對頁面顯示出來的記錄進行分頁
是否為內容分頁。1:內容分頁;0:欄目分頁。默認欄目分頁。
這個分頁標簽使用一般是跟其他標簽一起使用的,一般和一些列表標簽一起使用。
示例
[@cms_pagination sysPage='1'/]
效果:
和別的標簽一起使用示例:
<div class="pagebar"> [@cms_comment_page contentId=contentId count='6' orderBy='1'] <dl class="rmpl"> [#if tag_pagination.list?size = 0] <dt><span>暫無相關評論!</span></dt> [#else] [#list tag_pagination.list as c] <dt><span>${(c.commentUser.username)!"匿名網友"}</span> 於 ${c.createTime} 評論道:</dt> <dd>${c.textHtml!}</dd> <dd class="line"></dd> [/#list] <div class="pagebar">[@cms_pagination sysPage='1'/]</div> [/#if] </dl> [/@cms_comment_page] </div>
效果圖:
自定義分頁樣式,必須寫在 [@cms_comment_page] 里面
[#assign p=tag_pagination/] [#if p.totalPage gt 1] <div class="search-pagination" [#if cssClass??] class="${cssClass!}"[/#if][#if cssStyle??] style="${cssStyle!}"[/#if]> <ul class="pagination"> <li> <a href="javascript:;">共 ${p.totalPage} 頁</a> </li> <li> [#if !p.firstPage] <a href="${hrefFormer}[#if p.prePage gt 1]_${p.prePage}[/#if]${hrefLatter}">上一頁</a>[#t/] [/#if] </li> <li class=""> [#list 1..p.totalPage as i] <a href="${hrefFormer}[#if i gt 1]_${i}[/#if]${hrefLatter}">[#t/] [#if p.pageNo == i]<span class="page-active" style="color: red;">${i}</span>[#else]${i}[/#if]</a> [#t/] [/#list] </li> <li> [#if !p.lastPage] <a href="${hrefFormer+'_'+p.nextPage+hrefLatter}" rel="next">下一頁</a>[#lt/] [/#if] </li> [#if !p.lastPage] <li> <a href="${hrefFormer+'_'+p.totalPage+hrefLatter}"">最后一頁</a>[#t/] </li> [/#if] <!-- page-active --> </ul> </div>
12、搜索
name="q",value="${oldq!}": 搜索關鍵字
<div class="search"> <form id="msearch" method="get" autocomplete="off" action="${base}/search.jspx" target="_blank"> <div class="serach_type" id="catid"> <a href="javascript:;" target="_self">全部欄目</a> <ul style="width: 75px; display: none;"> <li val="">全部欄目</li> [@cms_channel id="103"] <li val="${tag_bean.id}">${tag_bean.name}</li> [/@cms_channel] [@cms_channel_list] [#list tag_list as channel] <li val="${channel.id}" name="channelId">${channel.name}</li> [/#list] [/@cms_channel_list] </ul> </div> <input type="hidden" name="c" value="so"/> <input type="hidden" id="catid_input" name="catid" value=""/> <input type="text" name="q" id="searchsubmit" class="search_txt" value="${oldq!}" placeholder="請輸入內容"> <button type="submit" name="searchsubmit" id="searchsubmit" class="search_btn" sc="1" value="true">搜索</button> <script type="text/javascript">markSelect('catid');</script> </form> </div>
[@cms_lucene_page]
[@cms_lucene_page q=q channelId=channelId descLen='100' append='...' count='4' sysPage='1' ]
搜索結果分頁標簽
作用:對搜索結果分頁
參數:
q: 搜索關鍵字
siteId:站點ID
channeled:欄目ID
startDate::開始時間
endDate:結束時間
count 分頁數
示例:
<div class="w96" style="min-height:500px;"> [#if q??] [@cms_lucene_page q=q channelId=channelId descLen='100' append='...' count='4' sysPage='1' ] <div class="search_msg">您搜索的<span class="red">“${q!}”</span>, 共有 <span class="red">${tag_list?size} 條</span> 查詢結果,[@process_time/] </div> [#list tag_list as s] <dl class="list3"> <dt><span>[<a href="${s.ctgUrl}" target="_blank">${s.ctgName}</a>]</span> <a href="${s.url}" title="${s.title}" target="_blank">${s.title}</a></dt> <dd class="zy">[@text_cut s=s.description len=descLen append=append/]</dd> <dd>來源: <a href="${s.originUrl!}" target="_blank">${s.origin!'本站原創'}</a> 瀏覽次數:${s.views}次 發布時間: ${s.releaseDate} </dd> </dl> [/#list] [/@cms_lucene_page] [/#if] </div>
結果示例:
注意:
[@cms_lucene_list]與[@cms_lucene_page]的效果顯示是不一樣的,[@cms_lucene_list]其顯示的結果由其內的熟悉count和搜索結果的總數決定的,如果搜索結果的總數大於count則顯示的結果就為count設定的值,如果搜索結果的總數小於count設定的值則顯示搜索結果的總數。而[@cms_lucene_page]不一樣,它始終是會顯示出所有的搜索結果來的,只是每一頁顯示的值是由count決定的,所以,我建議,一般情況下,還是用[@cms_lucene_page]比較好,因為用它既能顯示出搜索結果的分頁又能正確的顯示出搜索出來的結果總數。
13、評論
WEB-INF-t-cms-www-gyxrmyy-content
news.html 內容詳情頁
inc_comment_input.html 評論輸入框
inc_comment_list.html 評論列表
WEB-INF-t-cms-www-gyxrmyy-csi
comment_list.html 查看評論的回復
WEB-INF-t-cms-www-gyxrmyy-special
comment_input.html 評論的回復中的評論
[#if channel.commentControl!=2]
[#include "inc_comment_input.html"/]
[#include "inc_comment_list.html"/]
[/#if]
用到css r-cms-www-default-css index.css r-cms-jqueryUI jquery.ui.css 用到js r-cms jquery.js front.js r-cms-jqueryUI jquery-ui.js
<script type="text/javascript"> $(function() { Cms.checkPerm("${base}","${content.id}"); Cms.collectCsi("${base}","collectCsiDiv","collect_csi","${content.id}"); Cms.attachment("${base}","${content.id}","${content.attachments?size}","attach"); Cms.viewCount("${base}","${content.id}"); Cms.siteFlow("${base}", location.href, document.referrer,"${site.config.flowSwitch?string}"); }); </script> <script type="text/javascript"> jQuery(document).ready(function($){ $('.content-comment').click(function(){ $('html,body').animate({scrollTop:$('#comments-text').offset().top}, 1000) $('#comments-text').focus(); }); }); $(function(){ //設置一個定時器,為BUTTON點擊事件用 var timer=null; var number1=0; //文本輸入時改變 $('#comments-text').keyup(function(){ if(!$(this).val()==''){ $('.submit-on').attr("class", "submit-out"); }else{ $(".submit-out").attr("class", "submit-on"); } }); //處理輸入的內容是文字還是字母的函數 function getLength(str){ return String(str).replace(/[^\x00-\xff]/g,'aa').length; }; }); </script>
評論分頁 [@cms_comment_page]
[@cms_comment_list siteId =‘1’contentId=‘1’ greaterThen=‘0’ checked=‘1’ recommend =‘1’ count='6' orderBy='1 ']
評論分頁標簽
參數詳解:
siteId:站點id,非必選
contentId:內容ID,非必選
greaterThen: 評論內容最大支持大於多少,非必選
checked: 是否需要審核,1審核通過的,0 全部 非必選 默認全部
recommend:是否推薦,1推薦的,0 全部 非必選 默認全部
parentId:上級評論ID 優先級大於contentId若是出現了parentId ,contentId參數無效
count:分頁數
orderBy:排列順序:0 :按評論時間降序 1 :按評論時間升序。默認降序
若是parentId contentId siteId都沒有,則默認當前站點的評論
在內容頁模板中可以將contentId 設置成content.id,讀取本內容下的評論
作用:對評論分頁讀取
具體例子:
評論對象屬性
<div class="pagebar"> [@cms_comment_page contentId=content.id count='6' orderBy='1'] <dl class="rmpl"> [#if tag_pagination.list?size = 0] <dt><span>暫無相關評論!</span></dt> [#else] [#list tag_pagination.list as c] <dt><span>${(c.commentUser.username)!"匿名網友"}</span>於 ${c.createTime} 評論道:</dt> <dd>${c.textHtml!}</dd> <dd class="line"></dd> [/#list] <div class="pagebar">[@cms_pagination sysPage='1'/]</div> [/#if] </dl> [/@cms_comment_page] </div>
textHtml:評論內容
replayHtml:回復內容
ip:評論者ip地址
createTime:評論時間
replayTime:回復時間
ups:頂數
downs:踩數
recommend:是否推薦
checked:是否審核
replyCount:回復數
replayUser:回復用戶對象 例如獲取回復管理員用戶名${c. replayUser.username!}
commentUser:評論用戶對象 例如${c. commentUser.username!}
parent:父級評論對象 例如${c. parent.username!}
[@cms_comment_list siteId =‘1’contentId=‘1’ greaterThen=‘0’ checked=‘1’ recommend =‘1’ count='6' orderBy='1 ']
評論列表標簽
參數和cms_comment_page標簽一致,只是不能標簽體內不能插入分頁標簽。
參數詳解:
siteId:站點id
contentId:內容ID
greaterThen: 評論內容最大支持大於多少
checked: 是否需要審核
recommend:是否推薦
orderBy:排列順序:0 :按評論時間降序 1 :按評論時間升序。默認降序。
作用:顯示評論列表
具體例子:
<div class="blue_right_top"><h2><a href="#" target="_blank">熱門評論</a></h2></div> <div class="blue_right_div"> [@cms_comment_list siteId='1' count='5' recommend='1' textLen='50' append='...'] <dl class="rmpl"> [#list tag_list as c] <dt><span>${(c.commentUser.username)!"匿名網友"}</span>對<a href="${c.content.url}" target="_blank">${c.content.title}</a>評論道:</dt> <dd>[@text_cut s=c.textHtml len=textLen append=append/]</dd> <dd class="line"></dd> [/#list] </dl> [/@cms_comment_list] </div>
其他常用的標簽可以查看JEECMS-V7系統使用說明書和以下博客:
https://blog.csdn.net/qq_32047637/article/details/56676918
https://blog.csdn.net/u012176984/article/details/45501771
23 圖標模糊
網頁上的圖標顯示比較模糊,是由於圖片的像素問題所導致的,將圖片的大小調成與網頁圖標一致即可。
24 360瀏覽器無法加載flash
原因是該電腦連的局域網,未自動下載內置flash player;然后本地的flash player版本又太低;所以導致瀏覽器無法加載flash player,按鈕便無法顯示。
網上flash播放器的離線安裝包很少,有針對ie的、chrome的安裝包,經測試發現ie版離線安裝包無效(無論開啟極速/兼容),只有chrome版安裝包有效。
在ie瀏覽器下面訪問我們的網站,用的ie內核的flash,上傳按鈕也是無法顯示的。用谷歌的在ie下我沒測過
查看瀏覽器的插件:chrome://plugins/
一般情況下,瀏覽器在聯網環境下,會自動下載內置的flash player
25 UEditor相關問題
img元素的style屬性被刪除
修改ueditor的配置文件,在白名單中添加img的style屬性
中文的引號和省略號變成了轉義字符
修改ueditor.all.js文件,
注意:無需修改outputXssFilter等其他屬性值
參考博客:
1、百度編輯器ueditor如何設置允許img的sytle
https://segmentfault.com/q/1010000011424006
2、百度編輯器ueditor如何設置允許img的sytle
https://blog.csdn.net/wanghao3616/article/details/25816747461113
26 CKEditor時效性問題
在頁面內將編輯器賦值給一個變量即可,
然后使用如下語句就可以取得編輯器內的值。
editor.document.getBody().getText(); //取得純文本
editor.document.getBody().getHtml(); //取得html文本
/** * 提交表單校驗 */ var mtEditor=null; function checkSubmit(){ var txt=mtEditor.document.getBody().getText(). replace(/[\r\n]/g,""); if(txt==""){ alert("內容不能為空"); return false; } }
27 CSS控制圖片的寬高比
如果類樣式單純的設置圖片的寬度和高度,
若圖片大小無style控制,則類樣式生效,element style無數據;
若圖片大小有style控制,則類樣式無效,element style有數據;這是因為優先級的原因;
但是如果類樣式設置圖片的最大寬度或高度,則對以上兩種情況都有效。