Tad 教材網 - 線上書籍

:::

6-7 theme2014/language/tchinese_utf8/main.php

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

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1031/07.zip)

### 一、 所謂可控制佈景

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

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

1. config.php用來設定佈景預設值，初次設定此佈景時會將該黨內容寫入資料庫。此外，若使用者沒有安裝tad\_themes模組，也可以利用它來改變佈景的設定值。
2. $theme\_change=1; 設定佈景種類是否可自訂，若值為1，表示可同時支援bootstrap以及固定寬度的HTML模式。以theme2014來講，應該是0，不給改。
3. $theme\_kind='bootstrap'; 則是設定預設的佈景種類，其值為bootstrap或html。以theme2014來講，應該是html（因為是固定寬度）。
4. $config\_tabs\[1\]=1; \[\]中的編號為頁籤編號（目前為1~6），值為0或1，1表示要在tad\_themes後台的佈景設定使用該頁籤功能。
5. 頁籤底下有各種設定項目，\[\]中為設定項目名稱，值以陣列方式呈現，如：
6. $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為該欄位預設值，透過這欄位，可以先設定好最理想的佈景設定值。
 
### 四、 切換版面布局

1. TadTools中有提供切換版面布局的樣板檔，可直接套用最簡單 ```
  <pre class="brush:xml;">
  <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>
  ```
2. 由於html模式並不是靠bootstrap去排版，而是用傳統CSS方式（如此才能自訂左右區塊寬度），所以，原先的「class="container-fluid"」需移除。
3. 若希望高度可以自動調整，可直接引入（貼在</body>之前即可）： ```
  <pre class="brush:xml;">
  <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/my_js.html"}>
  ```
4. 另外，要注意的是，預設好的HTML版型布局就是單純做好布局而已，並不會有所謂的欄間距，需要欄間距需自行處理。例如 ```
  <pre class="brush:css;">
  div.leftBlock , div.rightBlock{
    padding: 0px 8px;
  }
  ```
 
### 五、 觀看佈景變數

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

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

1. 需自行在樣板中套用該變數的有：theme\_type, theme\_width, margin\_top, margin\_bottom。
2. 若引入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。
3. 若引入theme\_type\_x.html（八種版型）就會自行套用的變數有：base\_color, lb\_color, cb\_color, rb\_color, lb\_width, rb\_width。
4. 若引入slideshow\_responsive.html（滑動圖文）會自行套用的變數有：slide\_width, slide\_height。
5. 若引入logo.html（logo圖）會自行套用的變數有：logo\_img, logo\_position, logo\_top, logo\_right, logo\_bottom, logo\_left。
6. 若引入navbar.html（導覽列）會自行套用的變數有：navbar\_img, navbar\_icon, navlogo\_img。
7. 目前暫無作用的變數（預留）：clb\_width, crb\_width。
 
### 八、 logo部份

1. logo部份可直接自己寫樣板檔，例如： ```
  <pre class="brush:xml;">
  <a href="<{xoAppUrl}>"><img src="<{$logo_img}>"></a>
  ```
2. 亦可直接套用現成的logo.html（有支援Flash及logo位置） ```
  <pre class="brush:xml;">
  <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/logo.html"}>
  ```
 
### 九、 額外設定

1. 額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑： ```
  <pre class="brush:php;">
  $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";
  ```
2. type有text（文字框）、color（挑顏色）、textarea（大量文字）、yesno（是否單選）、file（上傳框）等類型。

:::