育將電腦工作室 - 線上書籍

XOOPS 佈景 2017
=============

### 一、安裝佈景

1. 上傳資料夾至 themes/
2. 「後台/偏好設定/系統設定/一般設定/使用者可選擇的佈景」加上佈景
3. 「後台/模組/tadtools/初始設定」：1.「否」 2.「bootstrap3 (bootstrap3-預設)」
4. 由於尚在開發狀態，如果發生錯誤，常造成畫面出現空白，而浪費許多debug的時間，所以預設佈景仍然設定其他確定可用的佈景(如：default)，打開「佈景選擇」區塊，直接在前台變更佈景。
5. ![](https://www.ugm.com.tw/uploads/tad_book3/image/10502/ntc/4/04_1.jpg)
6. 下載[預設資料](https://github.com/webugm/xoops_theme_develop/raw/master/tools/theme_other_20170307.zip)至 「u\_creative」底下解壓，
7. 當選擇佈景時，chrome 出現20個錯誤，這是 css、js、img 的路徑錯誤的關係
 
#### 二、開啟錯誤檢查模式：「Smarty 樣板錯誤檢查」 
 注意：xoops的樣板標籤為「<{}>」

![](https://www.ugm.com.tw/uploads/tad_book3/image/theme/step4_debug.jpg)

四、設定目前佈景名稱的樣板標籤

<{$theme\_name}>

```
<pre class="brush:as3;">
<{assign var=theme_name value=$xoTheme->folderName}>
```

$xoTheme->folderName ：物件的寫法

五、顯示可用變數

1. 在佈景前面加入： ```
 <pre class="brush:as3;">
 <{assign var=show_var value=1}>
 ```
 
 這是在佈景指定變數的方式
2. 在</body> 之前： 
 ```
 <pre class="brush:as3;">
 <{if $xoops_isadmin and $show_var}>
 <{includeq file="$theme_name/tpl/show_var.html"}>
 <{/if}>
 ```
 
 includeq file 是引入子樣板的方法，預設根目錄為「/themes」
 
六、用絕對路徑取代相對路徑

1. ![](https://www.ugm.com.tw/uploads/tad_book3/image/theme/step5.jpg)
2. "vendor/ => "<{xoImgUrl}>vendor/
3. "css/ => "<{xoImgUrl}>css/
4. "js/ => "<{xoImgUrl}>js/
5. "img/ => "<{xoImgUrl}>img/
6. 備註：通常要取代的單字，我習慣多選取 單字 的頭尾兩個字，以避免取代其他不想取代的單字。ctrl+H
7. 可用chrome 檢查，直到沒有錯誤為止
 
七、改變 jquery 引入方式

```
<pre class="brush:as3;">

<script src="<{xoAppUrl}>browse.php?Frameworks/jquery/jquery.js" type="text/javascript"></script>
```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown