一、 XOOPS的畫面組成
| |
佈景樣板
模組樣板
位置
| 放在themes/佈景名稱/ 就是一套佈景 |
隨著模組而來，一般在 modules/模組名稱/templates/ 下 |
用途
| 負責整個網站的大外觀 |
負責模組頁面的布局以及該模組的區塊布局。 |
| 設定都在「偏好設定→系統設定→一般設定」裡頭 |
套用
| 預設佈景 |
用佈景區塊來切換 |
預設樣板群組 |
作用範圍
| 適用於所有人員，包括訪客 |
只適用於登入會員，登出即失效 |
模組樣板 |
區塊樣板 |
用途
| 網站的主要佈景 |
測試用 |
模組版面布局 |
區塊版面布局 |
資料來源
| 「預設佈景」（「使用者可選擇的佈景」中務必包含「預設佈景」） |
「使用者可選擇的佈景」 |
/modules/模組名稱/templates/ 下的樣板檔 |
/modules/模組名稱/templates/blocks/ 下的樣板檔 |
二、 樣板修改方式
佈景樣板
模組樣板
修改方式
| 直接修改themes/佈景名稱/ 中的樣板檔 |
透過tad_themes的後台來修改 |
修改 modules/模組名稱/templates/ 下的樣板檔 |
修改themes/佈景名稱/modules下的樣板檔 |
優點
| 直接、有效 |
可以透過tad_themes的後台來修改佈景，簡單設定、上傳即可 |
很直接 |
優先權高，可以保留模組自有樣板，日後更新模組不怕被覆蓋 |
缺點
| 難度高、日後更新可能就失效。 |
佈景有限且部份想改的地方可能並不提供修改 |
日後更新困難，卻容易遺失自己修改的樣板（因為會被更新覆蓋） |
長時間下來，可能會有會和模組架構漸行漸遠 |
備註
| 早期（或官方版）均屬於這種改法 |
需搭配可調式佈景及tad_themes模組 |
不建議 |
從後台「樣板」產生該模組樣板，可從線上修改。 |
三、 Tad Themes 佈景管理及Tad Tools工具箱的關係
- 可調式佈景通常需要搭配tad_themes模組一起使用，但也可以獨立運作。因為設計者會把可以設定的部份寫到config.php（預設的設定）及config2.php（該佈景的自訂設定）裡面，若是沒有安裝tad_themes，則直接讀取設定檔中的預設值，來呈現佈景應有的樣子。
- 若是有安裝tad_themes，那麼第一次執行時，tad_themes會讀取config.php及config2.php裡面的設定，並將設定存至資料庫，以便站長隨時透過tad_themes提供的界面來修改設定值。
- 佈景設定值的讀取則是由tadtools來負責（因為該模組在每個頁面都會用到），然後再傳送各種自訂的設定值給佈景，此時，config.php及config2.php便無用途。
四、 Tad Tools工具箱的角色
- 由於XOOPS 2.5.x系列預設均不支援bootstrap3（2.6才內建，以下簡稱bs3），因此，若是模組或佈景需要用到bs3，都需要自行載入，如此，不但容易版本相衝，更造成許多不便。
- 為解決此問題，直接在佈景統一引用bs3是目前唯一比較簡單的方式。但需要有個機制，讓不支援bs3的佈景也可以導入bs3（以便讓模組使用），讓已經支援bs3的佈景無須再引入，以避免衝突。
- 因此，在Tadtools後台的初始設定，就是在做此事。Tadtools會先將「使用者可選擇的佈景」設定讀出，並自動判斷是否有內建bs3，日後，tadtools便能依據此設定來決定是否要載入bs3。
- 此外，tadtools中的themes_common放置佈景會用到的一些共同樣板檔，例如一些佈景變數取得的工具頁面。themes3_tpl中則是BootStrap3的一些可直接套用的預設樣板檔，例如版面布局檔、滑動圖文、導覽列...等，可加速佈景開發製作。
五、 config.php與config2.php的角色
檔案
config.php（必要）
config2.php（非必要）
用途
| 是可調式佈景的各種預設值，讓沒有安裝tad_themes的網站也可以使用此佈景 |
讓佈景開發者可以對此佈景新增各種設定（若該設定不存在於config.php中的話） |
設定選項
| 不可異動，僅能修改設定值或關閉設定項目 |
可以自行增減項目 |
設定界面
| tad_themes後台的「佈景管理」中的頁籤 |
tad_themes後台中的「額外設定」 |
六、 Smarty的角色
- XOOPS網站的內容放在資料庫中，需由PHP讀出，並產生畫面。但畫面由HTML所製作，因此，需利用Smarty這個佈景引擎來將PHP輸出的變數，透過樣板的Smarty標籤填入HTML的樣板中。
- 由於這個過程需要編譯，為了加快速度，就會有所謂的樣板快取產生。此快取放置於xoops_data/cache底下，XOOPS的原則是，先讀快取，若沒有快取，則產生之。
- 後台「偏好設定→系統設定→一般設定」裡頭「自動編譯您修改的樣板檔？」選「是」就是告訴XOOPS不要先讀快取，而是直接讀樣板檔，如此，將能得到最正確的結果，但有可能會影響到主機效能（雖然不易察覺），待佈景或模組穩定後，再設成「否」即可。
七、 Smarty迴圈
$footer_blocks[0]['title'] = "會員選單";
$footer_blocks[0]['bid'] = "1";
$footer_blocks[1]['title'] = "線上使用者";
$footer_blocks[1]['bid'] = "7";
<{foreach from=$footer_blocks key=k item=fb}>
<h3><{$fb.title}></h3>
<{block id=$fb.bid}>
<{/foreaach}>
- 第一圈，會讀出$footer_blocks[0]的底下兩個元素，此時，$k=0，$fb是title及bid兩個元素的陣列。要取得其值，用$fb.title及$fb.bid即可。
- 若是foreach有設定name，例如：name=fbk，則：
- (1) <{$smarty.foreach.fbk.first}> 代表此迴圈跑第一圈時，
- (2) <{$smarty.foreach.fbk.last}> 代表此迴圈跑最後一圈
- (3) <{$smarty.foreach.fbk.index}> 取得迴圈的索引值，依序輸出0、1
- (4) <{$smarty.foreach.fbk.iteration}> 取得迴圈的計數值，依序輸出1、2
- (5) <{$smarty.foreach.fbk.total}> 取得此迴圈執行總數，會得到2
八、 破解eElectronics這個佈景
- 這是上課用的範例，但不幸的是，這是一個超複雜的範例，徒增許多教學上的困擾，但換個角度想，這也是一個不錯的學習機會，只是比較沒有時間慢慢研究其中奧秘。底下簡單提出一些小提示。
- 如果是單欄式佈景，製作難度肯定高，您有兩種處理方式：
- (1) 功力不夠的話，請大膽捨棄您看不懂的部份，留下頭尾，其餘部份直接套用tadtools中的預設樣板即可（即「加入內容及頁尾.TXT」那些內容）。
- (2) 如果功力夠的話，首頁保持單欄式，內頁才套用預設樣板。首頁單欄式的內容一樣分兩種處理：
- (a) 功力超強：直接讀取XOOPS中間區域個部份區塊，並手動製作樣板來呈現之（請直接參考釋出的eElectronics佈景theme.tpl）。優點是使用者設定簡單，缺點是製作困難、使用者套用時比較難預期效果如何。
- (b) 功力尚可：直接用config2.php新增設定欄位，將將該欄位值套用到單欄式的內容中。優點是較容易控制，製作上也不算太難，缺點是使用者設定較為麻煩，且XOOPS內建的中間區域將無作用。
- eElectronics的特色是有綠色（.promo-area）和白色（.maincontent-area）間隔跳色（可利用Smarty的cycle語法達成），且用CSS技巧產生類似平行四邊形（.zigzag-bottom）的版面，簡單講若是把.zigzag-bottom拿掉，將只看到綠、白的水平間隔，而不會有斜線版面產生。
- (1) 想像一下，綠、白、綠、白的版面，在其交界處貼上一個平行四邊形的色塊，此平行四邊形的顏色會和下方版面顏色一致。
- (2) .zigzag-bottom只負責產生形狀（且浮起來z-index為9），不內建顏色，顏色是情況來產生：
- (a) .promo-area .zigzag-bottom 顏色設定成白色（因為下方是白色的.maincontent-area）
- (b) .maincontent-area .zigzag-bottom 顏色設定成綠色（因為下方是綠色的.promo-area）