Discuz!模板制作教程.doc

經(jīng)驗(yàn) Discuz！模板制作教程本帖最后由 PuBor于 2010-10-1 01:05 編輯 接觸Discuz! 有一段時間了，使用的風(fēng)格都是別人的免費(fèi)品。一來自己的美工水平實(shí)在不行，二來網(wǎng)上很少有比較完整的模板制作教程。因?yàn)楣ぷ鞯男枰?，現(xiàn)特寫了一份模板的制作教程。小弟才疏學(xué)淺，不對之處還請指正。 模板制作前請將你的界面設(shè)計(jì)好，并制作成html+CSS的格式。這里我就以大魔王的“藍(lán)色經(jīng)典”作為樣版（知識共享，希望大魔王不要介意，如有侵權(quán)，請及時通知我）。效果圖如下：下載 (38.08 KB)2009-08-02 20:34（圖1) 在開始前，先了介紹一下discuz!的幾個模板文件：1、 header.htm -頁面頭部2、 discus.htm-論壇首頁3、 footer.htm-頁面底部4、 viewthread-查看帖子內(nèi)容discuz！論壇的頁面通常是幾個模板文件共同作用下達(dá)到的效果，如圖1就是header.htm+discus.htm+footer.htm這三個文件共同作用的效果。Heaer.htm對應(yīng)的是：下載 (6.88 KB)2009-08-02 20:34（圖2） Footer.htm對應(yīng)的是：下載 (3.14 KB)2009-08-02 20:34（圖3） 剩下的就是discuz.htm文件顯示的了。當(dāng)然你要將首頁顯示的效果就制作成一個文件模板也是可以的，這里之所以分開，是因?yàn)閔eader.htm和footer.hmt文件通常還會被其它的模版文件引用。也就是說，其它的頁面（比如發(fā)貼的頁面）的頭部、底部與首頁的頭部、底部完全一樣，分開來寫就可以達(dá)到重復(fù)利用，減少勞動的效果。下面我們就開始制作：首先，現(xiàn)在我要制作的這套模板叫test，那么我就在templates目錄下建立一個test目錄。在test目錄下再新建一個images文件夾用于存放這套模板的圖片，把切好的所有圖片保存到這個文件夾中。templates/test文件夾用于存放這套模板的htm文件，在這個目錄中新建三個文件header.htm、discuz.htm、footer.htm，打開你設(shè)計(jì)好的主頁html文件，將你想作為頭部的那一段代碼復(fù)制粘貼到header.htm文件中，相應(yīng)的將作為底部的那一段代碼復(fù)制粘貼到footer.htm文件中，其余的代碼復(fù)制粘貼到discuz.htm文件中。最后在discuz.htm文件的最頂部和最底部分別加上：subtemplate header 和subtemplate footer這兩句算是discuz的語言，意思是將header.htm和footer.htm文件包含進(jìn)來，這樣就構(gòu)成了一個完整的主頁面了。接下來的工作要在論壇后臺設(shè)置中來完成（1） 進(jìn)入論壇點(diǎn)擊 “系統(tǒng)設(shè)置 界面 模板管理”， 在新增模板后填入模板名稱，模板文件所在目錄，板權(quán)信息然后提交即可！如圖4：下載 (5.7 KB)2009-08-02 20:34（圖4） （2） 在“界面 風(fēng)格管理” 中，在新增界面風(fēng)格后填入方案名稱“test”然后提交即可?。?） 提交方案名稱后，您就可以在界面風(fēng)格中看到您所定義的新的風(fēng)格方案。如下圖：下載 (21.58 KB)2009-08-02 20:34（圖5） 注意上面用紅色圓圈圈起來的那幅模版預(yù)覽圖，你的是不是沒有顯示出來？這需要將你的首頁的效果圖做成110x120并命名為preview.jpg，將這圖片放到test目錄下就可以了。到此，一套新的風(fēng)格模板方案就添加到模板庫里了，但還不是我們需要的最終效果，接下來要對模板文件繼續(xù)進(jìn)行調(diào)整，以達(dá)到想要的最終效果（4） 點(diǎn)擊 編輯 后就可以進(jìn)入該模板的風(fēng)格配色方案的編輯頁面，按照圖6把各個對應(yīng)參數(shù)填入相應(yīng)位置。下載 (25.02 KB)2009-08-02 20:35（圖6） 填寫好后，點(diǎn)擊“提交”，更新一下緩存，瀏覽論壇首頁出現(xiàn)下圖：下載 (22.9 KB)2009-08-02 20:35（圖7） 呵呵，有內(nèi)容出來了，可是排版上卻變得亂七八糟了，這是因?yàn)檫€沒有引入CSS文件。這時將原來設(shè)計(jì)好的CSS文件放到你模板目錄下（templates/test），并將它重命名為“css_append.htm”（注意：改后的文件名是css_append，后綴名是htm）。接著打開header.htm文件，找到你引入CSS文件的語句，這會因?yàn)橐氲恼Z句不同而不同，我這里是import url(css/style.css);將這個替換為：$rsshead$extraheadsubtemplate css_script這樣就可以將你的CSS文件引入了。進(jìn)入后臺更新一下緩存，現(xiàn)在的效果圖如下：下載 (11.51 KB)2009-08-02 20:35（圖8） 這樣就整齊了許多，這時你是不是發(fā)覺少了點(diǎn)東西？沒錯，圖片沒有顯視出來。下面我們先將背景圖（也就是CSS文件中引入的圖片）顯示出來。打開css_append.htm文件，找到所有你引入圖片的地方，將路徑替換為“STYLEIMGDIR”。例如：這里有一句：#footerpadding:1em 0;background:url(images/footer_bg.gif) 將它改為：#footerpadding:1em 0;background:url(STYLEIMGDIR/footer_bg.gif) repeat-x top;STYLEIMGDIR實(shí)際上是discuz的一個變量，當(dāng)模板被解釋時，就會用一個值來替換這個變量，這個變量的值可以在后臺設(shè)置。進(jìn)入后臺后點(diǎn)擊“界面 風(fēng)格管理”出現(xiàn)下圖：下載 (16.43 KB)2009-08-02 20:35（圖9） 找到你正在制作的test風(fēng)格，點(diǎn)擊“編輯”按鈕，出現(xiàn)下圖：下載 (25.63 KB)2009-08-02 20:35（圖10） 看到了吧，當(dāng)模板被解釋時，就會用上面所填的路徑來替換這個變量。好了，現(xiàn)在更新緩存再看一下效果：下載 (16.63 KB)2009-08-02 20:35（圖11） 哈哈，和原來設(shè)計(jì)的效果圖一樣了，是否有一種成功的喜悅？雖然，到這里已經(jīng)邁出了成功的一步，但革命尚未成功，同志仍需努力！現(xiàn)在制作的模版是靜態(tài)的，也就是說就算你發(fā)貼了，里面的內(nèi)容也不會改變的，甚至你點(diǎn)個連接都會出錯的。下面我們就來讓它“動”起來。一、修改頭部文件header.htm1、 打開正在制作的模板header.htm文件(以下簡稱header.htm)，以及默認(rèn)模板templatesdefault 的header.htm文件（以下簡稱“默認(rèn)header.htm”）。2、 將header.htm文件的標(biāo)題用 $navtitle $bbname $seotitle 來代替。例如：我這里是：“ 搜球論壇 ”改后就變成了“ $navtitle $bbname $seotitle ”3、 看header.htm里是否有類似“”這樣的語句，有就刪除。然后，將默認(rèn)header.htm里的以下語句：復(fù)制粘貼到header.htm文件相應(yīng)的位置（注這些對界面沒什么影響，但對SEO優(yōu)化有幫助）4、 將默認(rèn)header.htm里的以下語句：var STYLEID = STYLEID, IMGDIR = IMGDIR, VERHASH = VERHASH, charset = $charset, discuz_uid = $discuz_uid, cookiedomain = $cookiedomain, cookiepath = $cookiepath, attackevasive = $attackevasive, allowfloatwin = $allowfloatwin, creditnotice = if $creditnotice$creditnames/if, if in_array(CURSCRIPT, array(viewthread, forumdisplay)gid = parseInt($thisgid)elseif CURSCRIPT = indexgid = parseInt($gid)elsegid = 0/if, fid = parseInt($fid), tid = parseInt($tid)復(fù)制粘貼到header.htm文件相應(yīng)的位置（至于這些有什么作用，自己查一下吧）5、 將頭部的logo“動”起來下載 (25.04 KB)2009-08-02 20:35（圖12） 找到顯示logo的地方，我這里是：搜球論壇將“index.php”和“搜球論壇”分別用$indexname和$bbname代替（$indexname 是首頁文件名的變量，$bbname是論壇名稱變量，其它相同的地方都可以用這兩個變量作替換，以增加模版的適應(yīng)性。）6、 讓登陸狀態(tài)“動”起來下載 (3.47 KB)2009-08-02 20:35（圖13） 歡迎回來，zncai|在線|退出| 短消息 論壇任務(wù)| 空間 個人中心| 系統(tǒng)設(shè)置 上面是我設(shè)計(jì)的效果圖和相應(yīng)的代碼，這是登陸時的顯示狀態(tài)，當(dāng)然我還希望沒登陸的時候這樣顯示：下載 (1.33 KB)2009-08-02 20:35（圖14） 在默認(rèn)header.htm文件中找到：$discuz_usersslang login_invisible_modelang login_normal_mode | lang my_posts lang space_short lang space_short a href=pm.php id=pm_ntc class=new title=lang pm_new target=_blanklang pm($_DCOOKIEpmnum) lang task | lang user_center 1-lang modcp lang admincp lang logout $_DCOOKIEloginuser lang activation lang logout $reglinkname lang login 用這一段代碼替換上面紅色黑體部份，并在 的后面加上這一句：還是那句話，想知到上面代碼具體的意思，只能你自己去查找，我不可能一個一個的來解釋。7、 讓菜單“動”起來下載 (5.03 KB)2009-08-02 20:35（圖15） 論壇 搜索 插件 抽獎系統(tǒng) 聊天室競拍中心 幫助導(dǎo)航 搜球網(wǎng)社區(qū)在默認(rèn)header.htm文件中找到： 0- if(top = self) if ($_DCACHEsettingsframeon = 2 & !defined(CACHE_FILE) & in_array(CURSCRIPT, array(index, forumdisplay, viewthread) & ($_DCOOKIEframeon = yes & $_GETframeon != no) | (empty($_DCOOKIEframeon) & empty($_GETframeon)top.location = frame.php?frameon=yes&referer=+escape(self.location); /ifdocument.write(lang frameon_column); elsedocument.write(lang frameon_flat); $navnav 0 & $moduleadminid = $adminid)-$moduleurl 0) | ($navlevel = 3 & $adminid = 1)-$navnav eval $mnid = $BASEFILENAME; eval $mnid = $navmng1; var currentMenu = $(mn_$mnid) ? $(mn_$mnid) : $(mn_$navmns0); currentMenu.parentNode.className = current; function setstyle(styleid) str = unescape(echo str_replace(, , urlencode($_SERVERQUERY_STRING);str = str.replace(/(|&)styleid=d+/ig, );str = (str != ? str + & : ) + styleid= + styleidlocation.href = $BASESCRIPT? + str; $stylename 用這一段代碼替換上面紅色黑體部份，這樣就實(shí)現(xiàn)了菜單的調(diào)用。到此整個頭部header.htm文件模板就制作好了。二、制作首頁主體部分同樣打開正在制作的模板discuz.htm文件(以下簡稱discuz.htm)，以及默認(rèn)模板templatesdefault 的discuz.htm文件（以下簡稱“默認(rèn)discuz.htm”）1、 導(dǎo)航條下載 (1.36 KB)2009-08-02 20:35（圖16） 搜球論壇 » 首頁“搜球論壇”和“首頁”分別用“$bbname”和“l(fā)ang home”代替。2、 版塊列表下載 (17.64 KB)2009-08-02 20:35（圖17） 小葉 新手指南 新手指南 版主: yysh 2 / 2 我是新手 yysh - 2009-6-25 17:03 上面只列出了“新手指南”區(qū)塊的代碼，其它區(qū)塊雷同就不再列出了。在默認(rèn)discuz.htm文件中找到下面這段代碼：（綠色字體是我添加的注釋） /循環(huán)lang forum_category_modedby: $catmoderators/ 如果有分區(qū)版主則顯示 /分區(qū)版塊的收縮與展開$catname/分區(qū)名稱 /這里有幾個變量，簡單來說是用于后臺控制的，不用細(xì)究 / 如果下級子版塊橫排數(shù)為0則按下面版式來顯示版塊列表，橫排數(shù)可在后臺設(shè)置的 /循環(huán)語句，循環(huán)次數(shù)為此分區(qū)的子塊版塊數(shù) $forumicon/版塊圖標(biāo) $forumname /版塊轉(zhuǎn)向 URL ，$forumname版塊名稱 (lang index_today: $forumtodayposts)/如果今日發(fā)貼數(shù)不為0則顯示 $forumdescription/版塊簡介 lang forum_subforums: $forumsubforums/是否顯示子版塊 / 如果版主不為空 /版主以平面方式顯示lang forum_moderators: $forummodera