本欄目下相關鏈接


界面風格與模板定制

本文檔將對 Discuz! 的界面風格以及編譯模板的使用和修改方法做必要的說明,如果您熱衷於使用個性化的界面,或為自己的論壇添加 多語言特性,請仔細閱讀本文檔,它會給您的工作帶來切實的幫助。

界面風格和模板的定義

    • 模板:Discuz! 的前台程序全部使用界面與程序代碼分離的技術編寫,使得軟件開發人員和美工設計人員可以有效的實現分工,在彼此 不互相影響、互相依賴的情況下獨立的工作。模板技術就是實現這一分工的途徑,即論壇功能通過程序代碼實現,而界面通過模板實現,您 只要通過對模板的修改,即可實現對論壇界面的完全定制。
    • 界面風格:為了方便您的界面定制的需要,對於模板中經常用到的一些參數(如字體、字號、顏色、背景等等),我們將其從模板中抽出, 以風格變量的形式供您修改,這樣在定制要求不高的情況下,您也可以通過對風格的修改實現界面的與眾不同。雖然事實上只通過模板就已經 可以實現對界面的完全定制,但界面風格的設計會使得一些常用的模板變量參數可以被很容易修改,從而減輕界面定制的工作量。而且同時, 在 Discuz! 及大多數同類產品中,模板是必須與界面風格搭配才能產生作用的。

Discuz! 在界面定制方面的特色

    Discuz! 以來內建了極為強大和高效的編譯模板功能,基於北京康盛世紀科技有限公司獨有的編譯模板內核,您可以輕鬆的擁有以下功能:

    • 多模板 - 一個論壇可以擁有多個完全不同的模板套系
    • 多界面 - 基於模板的配色與字型參數自定義,根據模板的不同可定義不同內碼和不同語言
    • 多語言 - 全部語言信息保存在語言包中,修改界面只需修改語言包中的變量內容,不同分論壇可以擁有自己的語言提示

    基於以上功能,Discuz! 具有以下先進特性:

    • 風格搭配更自由,支持替換變量,論壇風格自由論壇與匹配不同的模板套系
    • 每個分論壇可以使用不同的界面風格和語言,用戶也選擇自己的風格界面
    • 由於模板中已包含了各種常用的邏輯關係系,實現用最少數量的模板建立複雜頁面
    • 界面風格打包和發佈更加容易,支持默認模板和自定模板的無縫連接

界面風格與模板定制的詳細說明

    Discuz! 的模板採用文件保存,默認模板保存在 ./templates/default/ 目錄中,該目錄下 *.htm 文件是模板文件,*.lang.php 是語言包 文件,默認模板的目錄不能被修改,而且不能被刪除,否則將導致嚴重的問題。

    默認模板必須包含全部的模板文件和語言包,但自定義模板則只需包含與默認模板有差別的文件即可,未被包含的文件(模板或語言包), 系統會自動讀取默認模板中的內容。例如自定義界面只修改了 header.htm 模板,在這個模板目錄中只包含 header.htm 即可了。

    自定義模板中的語言包只對該目錄內包含的模板(htm)有效,不會影響到未被包含的模板和默認模板的語言信息。

    如果需要導出論壇界面,系統會自動判斷該方案使用的模板是默認模板或是自定義模板。如果使用的是自定義模板,導出的內容中將會包含 所用到自定義模板的全部內容。因此,除了導出的文件以外,則只需打包含界面所使用的圖片目錄即可發佈您的界面方案了。導出文件名 discuz_style_x。txt,該文件可用記事本打開,為了避免內部錯誤和提高粘貼的速度,文件採用每行 50 字的 base64 編碼,以 Discuz! 2.0 為例,格式如下:

    
    	# Discuz! Style Dump
    	# Version: Discuz! 2.0
    	# Time: 2002-12-21 10:25 AM
    	# From: Discuz! Board (http://discuz.net/)
    	#
    	# This file was BASE64 encoded
    	#
    	# Discuz! Community: http://www.Discuz.net
    	# Please visit our website for newest infomation about Discuz!
    	# --------------------------------------------------------
    
    
    	YTo5OntzOjQ6Im5hbWUiO3M6NDoieG1hcyI7czoxMDoidGVtcG
    	xhdGVpZCI7czoxOiI0IjtzOjc6InRwbG5hbWUiO3M6NDoieG1h
    	cyI7czo3OiJjaGFyc2V0IjtzOjY6ImdiMjMxMiI7czo5OiJkaX
    	JlY3RvcnkiO3M6MTY6Ii4vdGVtcGxhdGVzL3htYXMiO3M6OToi
    
    	...
    	...
    

    !! 強烈建議您不要修改默認模板的任何內容 !!

    如果需新增自己的模板套系,建議將其放在 ./templates/模板的英文名稱/ 目錄中,這將給維護和升級帶來巨大的方便。

    Discuz! 自 2.0.0 以來,率先將編譯模板技術在商業產品中實現,使得模板技術的應用有了本質的飛躍,不僅解決了困擾已久的速度瓶頸 問題,而且模板中包含豐富易用的邏輯功能,又完美的實現了模板的可擴展性,使得一個模板足以容納一個頁面的全部信息,而不必再像以往 那樣必須用十幾個小模板才能完成一個具有邏輯功能的頁面。將為界面的擴充帶來極大方便——只需修改模板就可實現一些基本的頁面功能而不 必改動程序。

    Discuz! 的模板採用近似 PHP 表達式的語法,支持的元素如下:

    • <!--{ ... }-->
      邏輯元素包圍符,該符號用於包含條件和循環元素

      • 條件判斷

        
        	<!--{if expr1}-->
        		statement1
        	<!--{elseif expr2}-->
        		statement2
        	<!--{else}-->
        		statement3
        	<!--{/if}-->
        

        這是一個典型的條件模板,當條件 expr1 為真時,顯示模板 statement1 內容;否則當 expr2 為真時,顯示模板 statement2 內容,否則 顯示模板 statement3 的內容。如同其他語言中的條件控制一樣,其中 <!--{elseif expr}--> 和 <!--{else} --> 是非必須的。

      • 不帶下標變量的數組循環

        
        	<!--{loop $array $value)}-->
        		statement
        	<!--{/loop}-->
        

        相當於 PHP 的數組循環語句:

        
        	foreach($array as $value) {
        		statement
        	}
        

      • 帶下標變量的數組循環

        
        	<!--{loop $array $key $value)}-->
        		statement
        	<!--{/loop}-->
        

        相當於 PHP 的數組循環語句:

        
        	foreach($array as $key => $value) {
        		statement
        	}
        

        邏輯元素包圍符在 { } 外面包含了 html 的註釋符號 <!-- -->,除了為了和信息元素相區別外,也方便了使用 Dreamweaver 和 Frontpage 之類工具編輯模板的用戶。因邏輯元素會被識別為 html 的註釋而不被顯示,對於絕大多數用戶,邏輯元素中的內容是完全不需要 修改的,甚至修改錯一個字符就可能引起錯誤信息和整個系統無法運行。因此通常您在修改模板的時候,不要修改模板的邏輯信息,更不要將 邏輯信息內部元素(如 <!--{else}--> 等)的前後位置作以修改,否則可能會導致錯誤。如果您的模板被不慎修改損壞,請立即用原 標準默認模板覆蓋,即可恢復。

        對於高手而言,實際上外部的 <!-- --> 是可以省略不寫的,可以用於某些元素在模板中的定位,但強烈建議普通用戶不要輕易嘗試。



    • { ... }
      信息元素包圍符


      • {CONSTANT}
        可以引用界面替換變量,其中必須為大寫字母,該符號實際的作用是引用 PHP 常量 CONSTANT,因此也可以通過它來引用其他的常量內容。

      • {lang variable}
        可以在模板中引用語言變量 variable 的內容,語言變量經由 templates.php.lang 中數組 $language 定義。如 {lang post_edit} 的 內容在編譯模板的時候被替換為 $language['post_edit'] 的內容,簡體中文版的意思是「編輯帖子」。

      • {template name}
        模板嵌入符,為了避免模板的冗長,可以使用本符號來將 name 模板的內容嵌入本模板中(實際上為引用)。

      • {eval statement}
        運行 PHP 語句體 statement。推薦只在特別必須的時候才使用該結構,因為它會破壞模板的結構和可讀性。如 {eval echo 'template!';} 實現的功能為 echo 'template';

      • {LF}
        換行符,因為 Discuz! 模板引擎會忽略掉多於的換行(\n),這個符號用來成生需要的 \n。

    我們所推薦的模板修改方法:通過普通編輯器手工書寫 html 或通過 Dreamweaver 或 Frontpage 修改。但是修改需切記,同一邏輯元素內 或嵌套中元素的位置和內容切勿修改,即通常情況下,您不能把 <!--{}--> 包圍的內容單獨的移動,更不能刪除。但是整個最外部邏輯 結構是可以移動或刪除的。

    如果修改後模板所在頁面在輸出類似如下的錯誤信息 Parse error: parse error, unexpected '}' in /home/username/forums/forumdata/templates/1_login.tpl.php on line 6,說明模板中出現 了無法匹配,或格式錯誤的邏輯元素,請仔細檢查是否有元素不對應,沒有結束或嵌套損壞,格式錯誤的現象,必要時可以恢復原始模板來解決 問題。

    Discuz! 提供了方便的界面打包程序,前面已對其格式做了介紹,將導出信息的內容粘貼到 系統設置 中 風格方案 中的 導入界面方案 中, 執行即可。程序會自動解析數據內容,恢復相關的界面設置,自定義替換變量和所需的模板設置。如果被導出界面使用了非默認模板,必須將 ./templates 目錄屬性設置為 777,以便導入程序自動建立模板記錄和文件夾。

    如果想打包您所設計的界面,通常只需將界面風格下載回來後,將該風格所使用的圖片目錄及模板目錄中的文件一同打包,附帶相應的操作 說明,即可方便的將界面與其他同一版本的 Discuz! 論壇共享。

    再次強烈建議您不要修改默認模板的內容,不當的修改默認模板可能導致整個系統的運行故障。如果需要新增界面和修改模板,請通過新增 模板套系的方法來實現,這將給日後的升級和維護帶來巨大好處。

    如果您看了以上的說明仍然對 Discuz! 的界面和模板不太瞭解,您可以打開一個默認的模板文件,對照上面的說明,相信很快就是熟悉這一 部分的使用方法,實踐出真知,祝您使用愉快,並在自己動手 DIY 界面風格的中得到滿足。