7. 打造可控制佈景

一、所謂可控制佈景

可控制佈景意指站長可以透過佈景管理模組（tad_themes）從後台針對佈景做客製化的調整。目前並非所有佈景都支援，而是要有套用tadtools/themes_tpl/ get_var.html才算數。
此外，tadtools/themes_tpl目錄下提供非常多現成樣板供佈景使用。除了get_var.html以外，其餘的皆非必須，當然直接套用可省下不少功夫。
get_var.html用來載入佈景變數，所以，一切都從這一行開始：
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/get_var.html"}>
```

二、加入theme.ini

基本上，這個檔只是簡單的佈景基本資料而已，僅tad_adm（站長工具箱）會根據該檔案中的版本來判別佈景是否需更新。在佈景上，是完全用不著的。
其中screenshot.png是該佈景預覽圖（寬約450px），推測是用在官網的佈景顯示；而shot.gif則是佈景預覽縮圖（寬約150px），會用在佈景區塊上。
Firefox可安裝此附加元件來擷取螢幕： https://addons.mozilla.org/zh-TW/firefox/addon/abduction/?src=search

三、加入最重要的config.php

config.php用來設定佈景預設值，初次設定此佈景時會將該黨內容寫入資料庫。此外，若使用者沒有安裝tad_themes模組，也可以利用它來改變佈景的設定值。
$theme_change=1; 設定佈景種類是否可自訂，若值為1，表示可同時支援bootstrap以及固定寬度的HTML模式。以theme2014來講，應該是0，不給改。
$theme_kind='bootstrap'; 則是設定預設的佈景種類，其值為bootstrap或html。以theme2014來講，應該是html（因為是固定寬度）。
$config_tabs[1]=1; []中的編號為頁籤編號（目前為1~6），值為0或1，1表示要在tad_themes後台的佈景設定使用該頁籤功能。
頁籤底下有各種設定項目，[]中為設定項目名稱，值以陣列方式呈現，如：
$config_enable['theme_type']=array('enable'=>1, 'min'=>'' , 'max'=>'' , 'require'=>0 , 'default'=>'theme_type_2');
- (1) enable代表是否使用此設定項，值為1或0，1代表使用之，0代表不使用。
- (2) min表示其設定值的最小值，可不填。
- (3) max表示其設定值的最大值，可不填。
- (4) require表示是否為必填欄位，值為1或0，1代表必填。
- (5) default為該欄位預設值，透過這欄位，可以先設定好最理想的佈景設定值。

四、切換版面布局

TadTools中有提供切換版面布局的樣板檔，可直接套用最簡單

<{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>

由於html模式並不是靠bootstrap去排版，而是用傳統CSS方式（如此才能自訂左右區塊寬度），所以，原先的「class="container-fluid"」需移除。
若希望高度可以自動調整，可直接引入（貼在</body>之前即可）：
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/my_js.html"}>
```
另外，要注意的是，預設好的HTML版型布局就是單純做好布局而已，並不會有所謂的欄間距，需要欄間距需自行處理。例如
```
div.leftBlock , div.rightBlock{
  padding: 0px 8px;
}
```

五、觀看佈景變數

get_var.html用來載入佈景變數，show_var.html則可讓您觀察所有佈景變數的名稱及其設定值（一般將該行置於</body>之前即可）
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/show_var.html"}>
```
佈景開發期間，可引入此檔。開發完成後，可利用額外設定來控制是否顯示佈景變數。

六、套用佈景變數

不允許修改的部份，請在config.php中，將enable設為0。
凡是允許修改的，佈景中，就必須想辦法去套用該變數（否則設它幹嘛？）
一般而言，自訂的樣式請放在最後面（即</head>前）
```
<style>
    body{
      font-size: <{$font_size}>;
    }
</style>
```
另外可直接引入theme_css.html，如此會自動設定頁面的CSS（背景、文字、連結...等）並自動引入theme_css_blocks.html（區塊標題樣式設定）及theme_css_navbar.html（導覽列樣式設定）
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css.html"}>
```
也可以不引入theme_css.html，單獨引入theme_css_blocks.html（區塊標題樣式設定）或theme_css_navbar.html（導覽列樣式設定）

七、 config.php中的設定項

需自行在樣板中套用該變數的有：theme_type, theme_width, margin_top, margin_bottom。
若引入theme_css.html（佈景自訂CSS設定，會自動載入以下兩個檔，非必須）會自行套用的變數有：font_size, font_color, link_color, hover_color, bg_img, bg_color, bg_repeat, bg_attachment, bg_position。
- (1) 若引入theme_css_blocks.html（區塊標題CSS設定）會自行套用的變數有：bt_text_size, bt_text_padding, bt_text, bt_bg_color, bt_radius, block_config, bt_bg_img, bt_bg_repeat。
- (2) 若引入theme_css_navbar.html（導覽列CSS設定）會自行套用的變數有：navbar_bg_top, navbar_bg_bottom, navbar_hover, navbar_color, navbar_color_hover。
若引入theme_type_x.html（八種版型）就會自行套用的變數有：base_color, lb_color, cb_color, rb_color, lb_width, rb_width。
若引入slideshow_responsive.html（滑動圖文）會自行套用的變數有：slide_width, slide_height。
若引入logo.html（logo圖）會自行套用的變數有：logo_img, logo_position, logo_top, logo_right, logo_bottom, logo_left。
若引入navbar.html（導覽列）會自行套用的變數有：navbar_img, navbar_icon, navlogo_img。
目前暫無作用的變數（預留）：clb_width, crb_width。

八、 logo部份

logo部份可直接自己寫樣板檔，例如：

<a href="<{xoAppUrl}>"><img src="<{$logo_img}>"></a>

亦可直接套用現成的logo.html（有支援Flash及logo位置）

<{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/logo.html"}>

九、額外設定

額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑：

$i=0;  //這是第一組，第二組請改為 $i++;
$theme_config[$i]['name']="show_var";
$theme_config[$i]['text']= "顯示佈景變數資訊";
$theme_config[$i]['desc']="是否顯示所有 tad_themes 提供的控制變數及設定值";
$theme_config[$i]['type']="yesno";
$theme_config[$i]['default']="0";