如何改造Discuz的門戶列表讓其變得簡潔大氣
? ? ? ? ? 在中國互聯(lián)網(wǎng)中,也許從業(yè)者無人不知道Disucz的大名,因?yàn)樗_實(shí)一款非常優(yōu)秀的開源建站軟件,也因此運(yùn)行在國內(nèi)各個(gè)網(wǎng)站服務(wù)器之上。說到它大家可 能最大的印象就是做社區(qū)論壇,其實(shí)從本質(zhì)上講這塊產(chǎn)品包括了很多模塊,而我們最常用的BBS只是其中的一部分而已,同樣的道理,門戶也是其中的模塊之一。
也許在國內(nèi)也有過很多優(yōu)秀的開源CMS建站系統(tǒng),但就是因?yàn)镈Z聚合了很多個(gè)模塊,而且進(jìn)行各個(gè)模塊的相互整合技術(shù)成本會(huì)很低,因此有不少的站長想直接 利用這個(gè)程序解決自己所有問題,即全部用這套程序搭建問題。但就在這個(gè)時(shí)候,大家可能都有所感受,其實(shí)DZ的精髓還是在于它的論壇部分,而其他的模塊就是 不痛不癢了,特別是門戶部分甚至在其官方?jīng)]有確切的入口。因此,大家也知道默認(rèn)的門戶模板是很久都沒有更新的,而且默認(rèn)的確實(shí)有點(diǎn)上不了臺(tái)面;比如今天就 跟大家說說門戶的列表頁吧,我就通過我之前做的一個(gè)實(shí)例來分享下改造過程吧,實(shí)現(xiàn)后就是下面的樣子,接下來我就講解下基本的思路吧。
第一,設(shè)計(jì)好樣式并不書寫好HTML和CSS。當(dāng)然這也是最簡單的一部分,這一點(diǎn)我相信只要懂做網(wǎng)站的朋友都會(huì),甚至可以直接copy那些比較優(yōu)秀網(wǎng)站的前端代碼,也就是大家所謂的仿站中的一部分。當(dāng)然我建議還是自己設(shè)計(jì)出版式來,這樣更具個(gè)性,而且是你想做成什么樣就是什么樣的。
第二,調(diào)用動(dòng)態(tài)參數(shù)。上 面第一步我們完成的僅僅是一個(gè)靜態(tài)的頁面,而我們現(xiàn)在做的肯定是需要讓其內(nèi)容動(dòng)起來,而這些參數(shù)無非就是DZ內(nèi)部的一些動(dòng)態(tài)變量參數(shù)。比如文章的發(fā)布日期 的變量是$value[dateline],文章的地址是$article_url,當(dāng)然這些參數(shù)只要參考默認(rèn)模板中的即可。這里又會(huì)有一個(gè)問題,也許大 家可能會(huì)在這個(gè)頁面需要加上默認(rèn)模板沒有的,而在默認(rèn)模板其他頁面有的。是不是自己復(fù)制另外頁面的相應(yīng)參數(shù)就可以了呢?肯定是不行的,DZ是一套比較復(fù)雜 的系統(tǒng),不同的頁面的很多參數(shù)是不能通用的,這樣就需要對(duì)部分進(jìn)行二次開發(fā)。比如就如上面展示的列表那樣需要加上原來沒有的瀏覽數(shù)和評(píng)論數(shù),就需要在相關(guān) 的函數(shù)中添加一些功能性語句了,比如這個(gè)列表的相關(guān)函數(shù)存儲(chǔ)在
/source/module/portal/portal_list.php中
在中間的自定義函數(shù)category_get_list中添加讓通用變量啟用的語句
$article_count = C::t(‘portal_article_count’)->fetch($value['aid']); if($article_count) $value = array_merge($article_count, $value);
這樣進(jìn)行簡單的二次開發(fā)后就可以在門戶的列表頁使用$value[commentnum]調(diào)用評(píng)論數(shù)以及用$value[viewnum]調(diào)用瀏覽數(shù)了;當(dāng)然其他的一些功能也是類似的,當(dāng)然需要你有一定的PHP基礎(chǔ)。
第三,優(yōu)化性能。就 如這種圖文列表的形式,我們不可能在一個(gè)單頁列表中包含的數(shù)據(jù)記錄數(shù)只會(huì)三五個(gè),一般地我們得在單頁有近二十條數(shù)據(jù),但這樣就會(huì)出現(xiàn)一個(gè)問題,當(dāng)用戶首次 打開這個(gè)列表的時(shí)候數(shù)據(jù)量會(huì)特別的大。比如就二十條數(shù)據(jù),圖片每個(gè)40KB,光列表中的圖片大小就有了800KB,這樣打開起來肯定不可能太快。這里就需 要我們進(jìn)行適當(dāng)?shù)男阅軆?yōu)化,比如可以進(jìn)行分屏加載,而使用jQuery和AJAX等技術(shù)都可以實(shí)現(xiàn)這些,比如jQuery的插件Lazy Load就可以實(shí)現(xiàn)圖片的分屏加載,當(dāng)然至于怎么用網(wǎng)上有很多相關(guān)的教程。在這里我不得不提示大家,jQuery 默認(rèn)情況下會(huì)與DZ的JS沖突,因?yàn)镈Z變量用的 是 $ 開頭,而jQuery也是用$這個(gè)所以會(huì)有沖突。解決的辦法也很簡單,jQuery庫不改變,只在引用的時(shí)候改變一下就可以了,可以先賦予一個(gè)變量如 var jq = jQuery.noConflict();然后用這個(gè)變量jq代替引用中的$就可以解決這個(gè)沖突了。
上面就是一個(gè)簡單的實(shí)例分享,希望對(duì)大家有所幫助。其實(shí)上面的內(nèi)容也提示了大家一些問題,那就是最好自己先掌握一些基礎(chǔ)知識(shí),同時(shí)不要胡亂添加一些代碼,比如很多站長甚至不知道jQuery會(huì)和DZ沖突,而在網(wǎng)上隨意下載特效添加在網(wǎng)站中,這樣不出問題才怪!
掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
轉(zhuǎn)載請(qǐng)注明出處:如何改造Discuz的門戶列表讓其變得簡潔大氣 - 微構(gòu)網(wǎng)絡(luò)