9. XOOPS佈景運作原理

一、 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）