[教學] 如何製作phpbb風格
發表於 : 2006-10-01 03:25
製作phpbb風格,因為過程有很多種狀況,所以分成幾個章節來說明
首先先剖析tpl風格檔的用意,T解釋成Temporary或Templates都可以,P解釋為Program或page....反正不重要啦XD
重點就是phpbb將tpl當成部分HTM與特殊函式的鑲嵌檔案,這與ASP或PHP中include的安插原裡一樣
因此不需要每隻tpl都要有完整的<htm>、<head>或<body>等等這些絕對元素。
以下圖解來解釋何謂 include 概念
圖中範例的顏色框標示了安插檔案的範圍作用,overall_header.tpl是htm、meta與body及css等等的起點包含了整體的背景與最外圍的框架,
overall_footer.tpl僅只是htm、body及終點,及包含版本宣告文而已。
中間的viewtopic_body.tpl 又安插了viewtopic_poll_result.tpl與jumpbox.tpl功能,這是最典型的動態資料網頁模組。
這跟一般的靜態htm檔案有何不同,舉個簡單的例子,如目錄選單,傳統靜態網頁不管幾頁,若是目錄結構更新異動,則每一隻htm檔案都要去更改,動態網頁則不管幾百頁,只要掌管目錄的一隻檔案修改即可,例如overall_header.tpl 中的目錄,phpbb每一個畫面都基本自動包含了這隻檔案引入,因此一隻檔案管遍所有頁面共同的目錄。
再舉一例,phpbb並不是每個頁面都需要有---[前往]選擇版面的下拉式選擇表---,於是把這個功能獨立寫一隻jumpbox.tpl,當有需要的頁面要有此功能時,則安插引入即可。
或許很多asp或php設計師會納悶,既然include就可以分解做到的事情,為何又要把他以tpl的檔案重工分解?
這就是phpbb迷人的地方,因為就是有開放風格開發設計的地方。如果一開始就採php來包含風格與主程式引擎,那麼風格永遠就只有一種囉,所以他們以php語法當成論壇引擎,tpl另外打包成為個別的風格版型。
再來了解每個TPL檔案代表的用途:
agreement.tpl --- 註冊同意聲明
-----------------------------------------------------------------------------------------------
bbcode.tpl --- BBcode代碼轉換瀏覽頁面時的HTM或CSS語法
-----------------------------------------------------------------------------------------------
confirm_body.tpl --- 系統訊息確認頁面 //有是與否的選擇按鈕
-----------------------------------------------------------------------------------------------
error_body.tpl --- 錯誤訊息頁面
-----------------------------------------------------------------------------------------------
faq_body.tpl --- 常見問題
-----------------------------------------------------------------------------------------------
groupcp_info_body.tpl---會員群組資訊頁面
-----------------------------------------------------------------------------------------------
groupcp_pending_info.tpl --- 等待審核群組成員
-----------------------------------------------------------------------------------------------
groupcp_user_body.tpl---會員群組成員一覽表
-----------------------------------------------------------------------------------------------
index_body.tpl --- 首頁 //僅只是首頁中間討論區總攬表與誰在線上的簡易檢視表
-----------------------------------------------------------------------------------------------
jumpbox.tpl --- [前往]選擇版面的下拉式選擇表
-----------------------------------------------------------------------------------------------
login_body.tpl --- 會員登入頁面
-----------------------------------------------------------------------------------------------
memberlist_body.tpl --- 會員列表
-----------------------------------------------------------------------------------------------
message_body.tpl --- 系統訊息告示區 //都是結論報告訊息
-----------------------------------------------------------------------------------------------
modcp_body.tpl --- 版面管理,主視窗
-----------------------------------------------------------------------------------------------
modcp_move.tpl --- 版面管理,移動主題控制台
-----------------------------------------------------------------------------------------------
modcp_split.tpl --- 版面管理,主題分割控制台
-----------------------------------------------------------------------------------------------
modcp_viewip.tpl --- 版面管理,檢視文章發表人IP位置
-----------------------------------------------------------------------------------------------
overall_footer.tpl --- 整體頁面的底部 //包含htm、head與body的結束
-----------------------------------------------------------------------------------------------
overall_header.tpl --- 整體頁面頂部 //包含htm、meta與body及css等等的完整起頭元素
-----------------------------------------------------------------------------------------------
posting_body.tpl --- 貼文頁面 //包含回覆與私人訊息
-----------------------------------------------------------------------------------------------
posting_poll_body.tpl --- 貼文區下方的投票選項
-----------------------------------------------------------------------------------------------
posting_preview.tpl --- 貼文區上方的預覽區
-----------------------------------------------------------------------------------------------
posting_smilies.tpl --- 表情圖示彈跳小視窗
-----------------------------------------------------------------------------------------------
posting_topic_review.tpl-- 回覆文章下方的原文檢視區 //採iframe的方式
-----------------------------------------------------------------------------------------------
privmsgs_body.tpl --- 私人訊息首頁
-----------------------------------------------------------------------------------------------
privmsgs_popup.tpl --- 私人訊息彈跳通知小視窗
-----------------------------------------------------------------------------------------------
privmsgs_preview.tpl --- 私人訊息貼文區上方的預覽區
-----------------------------------------------------------------------------------------------
privmsgs_read_body.tpl --- 閱讀私人訊息文章頁面
-----------------------------------------------------------------------------------------------
profile_add_body.tpl ---- 註冊與會員編輯個人資料頁面
-----------------------------------------------------------------------------------------------
profile_avatar_gallery.tpl --- 個人資料中的系統頭像選擇頁面
-----------------------------------------------------------------------------------------------
profile_send_email.tpl --- (啟用)會員郵件傳送的貼文視窗 //僅能純文字輸入
-----------------------------------------------------------------------------------------------
profile_send_pass.tpl --- 忘記密碼時的步驟流程頁面
-----------------------------------------------------------------------------------------------
profile_view_body.tpl --- 檢視會員的個人資料頁面
-----------------------------------------------------------------------------------------------
search_body.tpl --- 搜尋輸入選項主頁面
-----------------------------------------------------------------------------------------------
search_results_posts.tpl --- 搜尋結果以文章顯示排列
-----------------------------------------------------------------------------------------------
search_results_topics.tpl --- 搜尋結果以主題顯示排列
-----------------------------------------------------------------------------------------------
search_username.tpl --- 搜尋收件人的彈跳小視窗
-----------------------------------------------------------------------------------------------
simple_footer.tpl --- 任何彈跳小視窗的底部 //包含htm、head與body的結束
-----------------------------------------------------------------------------------------------
simple_header.tpl --- 任何彈跳小視窗頂部 //包含htm、meta與body及css等等的完整起頭元素
-----------------------------------------------------------------------------------------------
viewforum_body.tpl --- 檢視版面
-----------------------------------------------------------------------------------------------
viewonline_body.tpl --- 檢視誰在線上的人員清單表 //不是首頁的誰在線上表喔
-----------------------------------------------------------------------------------------------
viewtopic_body.tpl --- 檢視文章頁面
-----------------------------------------------------------------------------------------------
viewtopic_poll_ballot.tpl --- 檢視文章上方(瀏覽者)未投票選單項目表
-----------------------------------------------------------------------------------------------
viewtopic_poll_result.tpl --- 檢視文章上方(瀏覽者)已投票百分比結果
-----------------------------------------------------------------------------------------------
如有誤之處請多指教
首先先剖析tpl風格檔的用意,T解釋成Temporary或Templates都可以,P解釋為Program或page....反正不重要啦XD
重點就是phpbb將tpl當成部分HTM與特殊函式的鑲嵌檔案,這與ASP或PHP中include的安插原裡一樣
因此不需要每隻tpl都要有完整的<htm>、<head>或<body>等等這些絕對元素。
以下圖解來解釋何謂 include 概念
圖中範例的顏色框標示了安插檔案的範圍作用,overall_header.tpl是htm、meta與body及css等等的起點包含了整體的背景與最外圍的框架,
overall_footer.tpl僅只是htm、body及終點,及包含版本宣告文而已。
中間的viewtopic_body.tpl 又安插了viewtopic_poll_result.tpl與jumpbox.tpl功能,這是最典型的動態資料網頁模組。
這跟一般的靜態htm檔案有何不同,舉個簡單的例子,如目錄選單,傳統靜態網頁不管幾頁,若是目錄結構更新異動,則每一隻htm檔案都要去更改,動態網頁則不管幾百頁,只要掌管目錄的一隻檔案修改即可,例如overall_header.tpl 中的目錄,phpbb每一個畫面都基本自動包含了這隻檔案引入,因此一隻檔案管遍所有頁面共同的目錄。
再舉一例,phpbb並不是每個頁面都需要有---[前往]選擇版面的下拉式選擇表---,於是把這個功能獨立寫一隻jumpbox.tpl,當有需要的頁面要有此功能時,則安插引入即可。
或許很多asp或php設計師會納悶,既然include就可以分解做到的事情,為何又要把他以tpl的檔案重工分解?
這就是phpbb迷人的地方,因為就是有開放風格開發設計的地方。如果一開始就採php來包含風格與主程式引擎,那麼風格永遠就只有一種囉,所以他們以php語法當成論壇引擎,tpl另外打包成為個別的風格版型。
再來了解每個TPL檔案代表的用途:
agreement.tpl --- 註冊同意聲明
-----------------------------------------------------------------------------------------------
bbcode.tpl --- BBcode代碼轉換瀏覽頁面時的HTM或CSS語法
-----------------------------------------------------------------------------------------------
confirm_body.tpl --- 系統訊息確認頁面 //有是與否的選擇按鈕
-----------------------------------------------------------------------------------------------
error_body.tpl --- 錯誤訊息頁面
-----------------------------------------------------------------------------------------------
faq_body.tpl --- 常見問題
-----------------------------------------------------------------------------------------------
groupcp_info_body.tpl---會員群組資訊頁面
-----------------------------------------------------------------------------------------------
groupcp_pending_info.tpl --- 等待審核群組成員
-----------------------------------------------------------------------------------------------
groupcp_user_body.tpl---會員群組成員一覽表
-----------------------------------------------------------------------------------------------
index_body.tpl --- 首頁 //僅只是首頁中間討論區總攬表與誰在線上的簡易檢視表
-----------------------------------------------------------------------------------------------
jumpbox.tpl --- [前往]選擇版面的下拉式選擇表
-----------------------------------------------------------------------------------------------
login_body.tpl --- 會員登入頁面
-----------------------------------------------------------------------------------------------
memberlist_body.tpl --- 會員列表
-----------------------------------------------------------------------------------------------
message_body.tpl --- 系統訊息告示區 //都是結論報告訊息
-----------------------------------------------------------------------------------------------
modcp_body.tpl --- 版面管理,主視窗
-----------------------------------------------------------------------------------------------
modcp_move.tpl --- 版面管理,移動主題控制台
-----------------------------------------------------------------------------------------------
modcp_split.tpl --- 版面管理,主題分割控制台
-----------------------------------------------------------------------------------------------
modcp_viewip.tpl --- 版面管理,檢視文章發表人IP位置
-----------------------------------------------------------------------------------------------
overall_footer.tpl --- 整體頁面的底部 //包含htm、head與body的結束
-----------------------------------------------------------------------------------------------
overall_header.tpl --- 整體頁面頂部 //包含htm、meta與body及css等等的完整起頭元素
-----------------------------------------------------------------------------------------------
posting_body.tpl --- 貼文頁面 //包含回覆與私人訊息
-----------------------------------------------------------------------------------------------
posting_poll_body.tpl --- 貼文區下方的投票選項
-----------------------------------------------------------------------------------------------
posting_preview.tpl --- 貼文區上方的預覽區
-----------------------------------------------------------------------------------------------
posting_smilies.tpl --- 表情圖示彈跳小視窗
-----------------------------------------------------------------------------------------------
posting_topic_review.tpl-- 回覆文章下方的原文檢視區 //採iframe的方式
-----------------------------------------------------------------------------------------------
privmsgs_body.tpl --- 私人訊息首頁
-----------------------------------------------------------------------------------------------
privmsgs_popup.tpl --- 私人訊息彈跳通知小視窗
-----------------------------------------------------------------------------------------------
privmsgs_preview.tpl --- 私人訊息貼文區上方的預覽區
-----------------------------------------------------------------------------------------------
privmsgs_read_body.tpl --- 閱讀私人訊息文章頁面
-----------------------------------------------------------------------------------------------
profile_add_body.tpl ---- 註冊與會員編輯個人資料頁面
-----------------------------------------------------------------------------------------------
profile_avatar_gallery.tpl --- 個人資料中的系統頭像選擇頁面
-----------------------------------------------------------------------------------------------
profile_send_email.tpl --- (啟用)會員郵件傳送的貼文視窗 //僅能純文字輸入
-----------------------------------------------------------------------------------------------
profile_send_pass.tpl --- 忘記密碼時的步驟流程頁面
-----------------------------------------------------------------------------------------------
profile_view_body.tpl --- 檢視會員的個人資料頁面
-----------------------------------------------------------------------------------------------
search_body.tpl --- 搜尋輸入選項主頁面
-----------------------------------------------------------------------------------------------
search_results_posts.tpl --- 搜尋結果以文章顯示排列
-----------------------------------------------------------------------------------------------
search_results_topics.tpl --- 搜尋結果以主題顯示排列
-----------------------------------------------------------------------------------------------
search_username.tpl --- 搜尋收件人的彈跳小視窗
-----------------------------------------------------------------------------------------------
simple_footer.tpl --- 任何彈跳小視窗的底部 //包含htm、head與body的結束
-----------------------------------------------------------------------------------------------
simple_header.tpl --- 任何彈跳小視窗頂部 //包含htm、meta與body及css等等的完整起頭元素
-----------------------------------------------------------------------------------------------
viewforum_body.tpl --- 檢視版面
-----------------------------------------------------------------------------------------------
viewonline_body.tpl --- 檢視誰在線上的人員清單表 //不是首頁的誰在線上表喔
-----------------------------------------------------------------------------------------------
viewtopic_body.tpl --- 檢視文章頁面
-----------------------------------------------------------------------------------------------
viewtopic_poll_ballot.tpl --- 檢視文章上方(瀏覽者)未投票選單項目表
-----------------------------------------------------------------------------------------------
viewtopic_poll_result.tpl --- 檢視文章上方(瀏覽者)已投票百分比結果
-----------------------------------------------------------------------------------------------
如有誤之處請多指教