1. 程式人生 > >Discuz3.3精仿小米風格整站模板制作——1、新建模板方案

Discuz3.3精仿小米風格整站模板制作——1、新建模板方案

功能 for 需要 標準 不同 命名方式 良好的 技術 標題

術語說明:

模板——模板是一堆按照規定命名方式的html文件,用於指定整個論壇不同頁面的外觀。 標簽——標簽和模板共同作用以實現論壇換膚功能,其中標簽主要控制頁面顯示什麽數據,顯示多少條等。 風格——風格是一個xml配置文件,用於配置一些固定區域字體的大小、顏色、背景色等。例如春節時,整個版面變成喜慶紅色等。風格這個功能實質上是一種可以直接在後臺設置論壇中固定格式的文字(如標題列表等)的大小、顏色、背景色等而不用單獨寫css文件進行覆蓋的技術。對於有編碼能力的站長來說,其實無多大意義。

Discuz模板制作官方說明: http://faq.comsenz.com/library/template/made/made_extend.htm

本部分內容是對Discuz官方提供的模板概述的擴展說明。請參閱上述網址,對Discuz模板制作有個初步認識。discuz模板文件位於網站根目錄/template/目錄下。其中子目錄default是其默認模板,站長可以根據需要在此目錄下新建模板目錄以放置自己的模板。

Discuz的模板是固定文件名的htm文件。例如,首頁的模板文件叫discuz.html。其中,默認模板的首頁模板文件位於站點根目錄/template/default/forum/discuz.html。discuz對模板做了兩點基本要求:

  1. 模板名稱固定——對於不同的功能,模板的文件名是固定的,例如首頁的模板名叫discuz.htm,板塊的主體列表頁模板文件名叫forumdisplay_list.htm等等。http://faq.comsenz.com/library/template/filelist/filelist_index.htm 此網址給出了默認模板目錄下各個模板文件所對應的功能區域名稱。我們所要做的工作就是按照這個目錄列表,創建對應的htm文件,以實現論壇換膚。
  2. 模板文件擴展名固定為htm——html文件的擴展名有兩種,分別為htm和html。以htm為後綴的文件一般在早期linux中比較常見。現在大多為html為後綴,同時這也是w3c推薦的做法。

個人認為,discuz如此設計恨怪異,讓新上手的使用者理解起來非常困難。良好的設計方案應該讓使用者自由選擇模板才對。例如,對於論壇首頁這個功能而言,使用者能自由決定是選擇x模板方案下的index.html還是default.php或是其他什麽文本文件。如此做法更符合一般人的直覺。後續,作者將對discuz的源碼做小小修改,使其可以識別html後綴的文件(修改為識別html後綴文件或其他後綴文件,例如asp、jsp、php等代碼大同小異,使用者可以自行參照修改)。在discuz模板目錄下,有一特殊目錄——common,此目錄下的文件為非必須模板文件,它只是將各個模板的公用部分提純,其本身可有可無,完全依照制作者的思路而定。

discuz讀取模板的規則(以首頁模板舉例):首先讀取後臺指定的模板目錄中是否存在discuz.htm文件,如存在,直接以此文件做為模板,如不存在,則取默認模板文件中的discuz.html文件作為模板。

Discuz新建模板方案的主要流程

一、新建風格方案

登錄後臺,點擊頂部【界面】功能區,頁面刷新後,左側會顯示關於【界面】的功能導航,此時選擇左側的【風格管理】。在新增輸入區域輸入自定義的風格名稱,點擊【新增】。此時系統會復制一套空的風格方案。(風格方案實質上是一堆css和圖片路徑設置,先忽略這個,後續再詳細說明具體設置)然後選擇,當瀏覽者使用什麽瀏覽設備時,采用此風格(模板)方案。系統提供了

四個選項,其中,【電腦版】必選。其他可忽略,此處的判斷是通過http頭進行篩選的。意味著我們可以建立四套風格及對應的模板,分別為不同的瀏覽者提供不同的顯示效果。

二、新建模板目錄

在站點根目錄/template/下新建模板目錄,並將默認模板目錄(default)中的discuz_style_default.xml文件拷貝到新建的目錄中,修改文件名為:discuz_style_新建的目錄名.xml。模板目錄建議采用英文字符。以防止服務器不識別中文目錄。然後用記事本打開該xml文件進行編輯,修改對應的配置項。具體修改參見官方提供的模板制作概述下圖為修改好的示例:

技術分享

註意:directory項中,路徑要和模板文件夾所在的路徑保持一致。templateid項中,具體的值修改為對應風格方案的id,(在風格方案中,點擊編輯,從網址欄中可以看到具體的id。)

三、後臺新建模板套系

在【界面】——【模板管理】中,新增模板名稱(建議和風格名稱保持一致)並指定正確的路徑。參見下圖:

技術分享

至此,新建模板方案就大功告成了。在【工具】——【更新緩存】中更新一次緩存。前臺樣式就是新建的模板了。此時我們會發現前臺沒有任何變化,這是因為我們只是新建了模板方案,但是沒有建立具體的模板文件,系統檢測到沒有模板文件後,自動采用了默認模板方案中的對應模板文件(在discuz模板讀取規則中有敘述),故前臺沒有任何變化。在後續的章節中,我們將制作各個模板文件,此時前臺就會發生對應的變化。

Discuz3.3精仿小米風格整站模板制作——1、新建模板方案