Tad 教材網 - 線上書籍

:::

\[1061\] XOOPS佈景設計
==================

### [![](http://tad0616.net/uploads/dl.gif)](https://www.tad0616.net/uploads/tad_book3/file/42/09.pdf) 一、 XOOPS的畫面組成

<table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td> </td> <th colspan="2" rowspan="1">佈景樣板</th> <th colspan="2" rowspan="1">模組樣板</th> </tr> <tr> <th style="white-space: nowrap;">位置</th> <td colspan="2" rowspan="1">放在themes/佈景名稱/ 就是一套佈景</td> <td colspan="2" rowspan="1">隨著模組而來，一般在 modules/模組名稱/templates/ 下</td> </tr> <tr> <th style="white-space: nowrap;">用途</th> <td colspan="2" rowspan="1">負責整個網站的大外觀</td> <td colspan="2" rowspan="1">負責模組頁面的布局以及該模組的區塊布局。</td> </tr> <tr> <td colspan="5" style="white-space: nowrap;">設定都在「偏好設定→系統設定→一般設定」裡頭</td> </tr> <tr> <th style="white-space: nowrap;">套用</th> <td>預設佈景</td> <td>用佈景區塊來切換</td> <td colspan="2" rowspan="1">預設樣板群組</td> </tr> <tr> <th style="white-space: nowrap;">作用範圍</th> <td>適用於所有人員，包括訪客</td> <td>只適用於登入會員，登出即失效</td> <td>模組樣板</td> <td>區塊樣板</td> </tr> <tr> <th style="white-space: nowrap;">用途</th> <td>網站的主要佈景</td> <td>測試用</td> <td>模組版面布局</td> <td>區塊版面布局</td> </tr> <tr> <th style="white-space: nowrap;">資料來源</th> <td>「預設佈景」（「使用者可選擇的佈景」中務必包含「預設佈景」）</td> <td>「使用者可選擇的佈景」</td> <td>/modules/模組名稱/templates/ 下的樣板檔</td> <td>/modules/模組名稱/templates/blocks/ 下的樣板檔</td> </tr> </tbody> </table>

### 二、 樣板修改方式

<table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <th style="white-space: nowrap;"> </th> <th colspan="2" rowspan="1">佈景樣板</th> <th colspan="2" rowspan="1">模組樣板</th> </tr> <tr> <th style="white-space: nowrap;">修改方式</th> <td>直接修改themes/佈景名稱/ 中的樣板檔</td> <td style="background-color: rgb(255, 255, 204);">透過tad\_themes的後台來修改</td> <td>修改 modules/模組名稱/templates/ 下的樣板檔</td> <td style="background-color: rgb(255, 255, 204);">  
 修改themes/佈景名稱/modules下的樣板檔</td> </tr> <tr> <th style="white-space: nowrap;">優點</th> <td>直接、有效</td> <td style="background-color: rgb(255, 255, 204);">可以透過tad\_themes的後台來修改佈景，簡單設定、上傳即可</td> <td>很直接</td> <td style="background-color: rgb(255, 255, 204);">優先權高，可以保留模組自有樣板，日後更新模組不怕被覆蓋</td> </tr> <tr> <th style="white-space: nowrap;">缺點</th> <td>難度高、日後更新可能就失效。</td> <td style="background-color: rgb(255, 255, 204);">佈景有限且部份想改的地方可能並不提供修改</td> <td>日後更新困難，卻容易遺失自己修改的樣板（因為會被更新覆蓋）</td> <td style="background-color: rgb(255, 255, 204);">長時間下來，可能會有會和模組架構漸行漸遠</td> </tr> <tr> <th style="white-space: nowrap;">備註</th> <td>早期（或官方版）均屬於這種改法</td> <td style="background-color: rgb(255, 255, 204);">需搭配可調式佈景及tad\_themes模組</td> <td>不建議</td> <td style="background-color: rgb(255, 255, 204);">從後台「樣板」產生該模組樣板，可從線上修改。</td> </tr> </tbody> </table>

### 三、 Tad Themes 佈景管理及Tad Tools工具箱的關係

1. 可調式佈景通常需要搭配tad\_themes模組一起使用，但也可以獨立運作。因為設計者會把可以設定的部份寫到config.php（預設的設定）及config2.php（該佈景的自訂設定）裡面，若是沒有安裝tad\_themes，則直接讀取設定檔中的預設值，來呈現佈景應有的樣子。
2. 若是有安裝tad\_themes，那麼第一次執行時，tad\_themes會讀取config.php及config2.php裡面的設定，並將設定存至資料庫，以便站長隨時透過tad\_themes提供的界面來修改設定值。
3. 佈景設定值的讀取則是由tadtools來負責（因為該模組在每個頁面都會用到），然後再傳送各種自訂的設定值給佈景，此時，config.php及config2.php便無用途。
 
### 四、 Tad Tools工具箱的角色

1. 由於XOOPS 2.5.x系列預設均不支援bootstrap3（2.6才內建，以下簡稱bs3），因此，若是模組或佈景需要用到bs3，都需要自行載入，如此，不但容易版本相衝，更造成許多不便。
2. 為解決此問題，直接在佈景統一引用bs3是目前唯一比較簡單的方式。但需要有個機制，讓不支援bs3的佈景也可以導入bs3（以便讓模組使用），讓已經支援bs3的佈景無須再引入，以避免衝突。
3. 因此，在Tadtools後台的初始設定，就是在做此事。Tadtools會先將「使用者可選擇的佈景」設定讀出，並自動判斷是否有內建bs3，日後，tadtools便能依據此設定來決定是否要載入bs3。
4. 此外，tadtools中的themes\_common放置佈景會用到的一些共同樣板檔，例如一些佈景變數取得的工具頁面。themes3\_tpl中則是BootStrap3的一些可直接套用的預設樣板檔，例如版面布局檔、滑動圖文、導覽列...等，可加速佈景開發製作。
 
### 五、 config.php與config2.php的角色

<table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <th>檔案</th> <th>config.php（必要）</th> <th>config2.php（非必要）</th> </tr> <tr> <th>用途</th> <td>是可調式佈景的各種預設值，讓沒有安裝tad\_themes的網站也可以使用此佈景</td> <td>讓佈景開發者可以對此佈景新增各種設定（若該設定不存在於config.php中的話）</td> </tr> <tr> <th>設定選項</th> <td>不可異動，僅能修改設定值或關閉設定項目</td> <td>可以自行增減項目</td> </tr> <tr> <th>設定界面</th> <td>tad\_themes後台的「佈景管理」中的頁籤</td> <td>tad\_themes後台中的「額外設定」</td> </tr> </tbody> </table>

### 六、 Smarty的角色

1. XOOPS網站的內容放在資料庫中，需由PHP讀出，並產生畫面。但畫面由HTML所製作，因此，需利用Smarty這個佈景引擎來將PHP輸出的變數，透過樣板的Smarty標籤填入HTML的樣板中。
2. 由於這個過程需要編譯，為了加快速度，就會有所謂的樣板快取產生。此快取放置於xoops\_data/cache底下，XOOPS的原則是，先讀快取，若沒有快取，則產生之。
3. 後台「偏好設定→系統設定→一般設定」裡頭「自動編譯您修改的樣板檔？」選「是」就是告訴XOOPS不要先讀快取，而是直接讀樣板檔，如此，將能得到最正確的結果，但有可能會影響到主機效能（雖然不易察覺），待佈景或模組穩定後，再設成「否」即可。
 
### 七、 Smarty迴圈

```
<pre class="brush:php;gutter:false;">
$footer_blocks[0]['title'] = "會員選單";
$footer_blocks[0]['bid'] = "1";
$footer_blocks[1]['title'] = "線上使用者";
$footer_blocks[1]['bid'] = "7";
```

```
<pre class="brush:xml;gutter:false;">
<{foreach from=$footer_blocks key=k item=fb}>
  <h3><{$fb.title}></h3>
  <{block id=$fb.bid}>
<{/foreaach}>
```

1. 第一圈，會讀出$footer\_blocks\[0\]的底下兩個元素，此時，$k=0，$fb是title及bid兩個元素的陣列。要取得其值，用$fb.title及$fb.bid即可。
2. 若是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. 這是上課用的範例，但不幸的是，這是一個超複雜的範例，徒增許多教學上的困擾，但換個角度想，這也是一個不錯的學習機會，只是比較沒有時間慢慢研究其中奧秘。底下簡單提出一些小提示。
2. 如果是單欄式佈景，製作難度肯定高，您有兩種處理方式： 
  - (1) 功力不夠的話，請大膽捨棄您看不懂的部份，留下頭尾，其餘部份直接套用tadtools中的預設樣板即可（即「加入內容及頁尾.TXT」那些內容）。
  - (2) 如果功力夠的話，首頁保持單欄式，內頁才套用預設樣板。首頁單欄式的內容一樣分兩種處理： 
      - (a) 功力超強：直接讀取XOOPS中間區域個部份區塊，並手動製作樣板來呈現之（請直接參考釋出的eElectronics佈景theme.tpl）。優點是使用者設定簡單，缺點是製作困難、使用者套用時比較難預期效果如何。
      - (b) 功力尚可：直接用config2.php新增設定欄位，將將該欄位值套用到單欄式的內容中。優點是較容易控制，製作上也不算太難，缺點是使用者設定較為麻煩，且XOOPS內建的中間區域將無作用。
3. 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）

:::