Tad 教材網 - 線上書籍

:::

8-2 theme2014/language/tchinese_utf8/main.php 語系檔

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

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

### 一、 先準備好一個佈景

1. 您可以自己設計一個靜態畫面，也可以從網路上抓取免費佈景來修改成XOOPS佈景。
2. 範例：http://www.templatemo.com/preview/templatemo\_322\_sailing
3. 解壓縮後，刪除不必要檔案，並將index.html複製一份成theme.html
 
### 二、 放入共同的佈景檔案及目錄

1. 將theme\_package.zip解壓縮，並將裡頭的所有檔案目錄複製至佈景目錄中。
2. 修改theme.ini及README的內容，主要就是填一下佈景名稱及其他資訊而已。
 
### 三、 修改theme.html的頁首

1. 將theme\_package.zip解壓縮，並將裡頭的所有檔案目錄複製至佈景目錄中。（兩個TXT檔不需要複製）
2. 開啟「加入頁首.txt」，將裡面的語法，貼至</head>之前，並取代原有內容。（若原有佈景有自訂的javascript語法，應留下，勿將之覆蓋掉，除非用不到）
3. 找到「<{xoImgUrl css/style.css}>」修改為該佈景的主要CSS檔位置。若有兩個以上的CSS檔則自行加上。
 
### 四、 修改theme.html的主要版型及頁尾

1. 利用FireFox的「檢測元素」功能，找出主內容區的位置，以本例而言<div id="templatemo\_content">中即為主要內容及側邊欄的呈現區域。請將裡面的語法刪除。我們用現有的可切換版型的樣板來取代之
2. 開啟「加入內容及頁尾.TXT」，找到【版型及內容】，複製語法，貼到<div id="templatemo\_content">中。至此，佈景以可呈現區塊及主內容，並可切換版型。 ```
  <pre class="brush:xml;">
  <div id="templatemo_content">
    <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>
  </div>
  ```
3. 接著陸續加上【頁尾】以及【佈景變數及必要的語法】（加至</body>前）。
4. 最後將佈景中，有載入圖片或額外檔案的部份，利用<{xoAppUrl}>或<{xoImgUrl}>重設其路徑。
 
### 五、 套用佈景

1. 「後台→偏好設定→系統設定→一般設定→使用者可選擇的佈景 」加入新佈景，接著再至前台的佈景區塊選用新佈景。
2. 開啟config.php，根據佈景狀況，調整相關參數。例如背景顏色及佈景寬度，不給改的就請將enable設為0，但其預設值仍須為正確的預設值（因為不開放修改會直接存入預設值）
3. 開啟config2.php，將不需要的設定項目標記起來。例如頁尾顏色、底圖等。
4. 調整期間，先別進後台，這樣設定值就不會寫進資料庫，調整config.php馬上就可以看到效果。
 
### 六、 調整選單、Logo或滑動圖文

1. 參考「加入內容及頁尾.TXT」語法，可直接套用所需樣板。
2. 或利用樣板變數，自製選單（$menu\_var）或滑動圖文（$slider\_var）搭配<{foreach form=$xxx item=OOO}><{$OOO.key}><{/foreach}>的寫法來自己做出相關功能。
 
### 七、 製作縮圖

1. 最後，做好後，擷取螢幕，存成screenshot.png，並將圖片大小縮至450px，接著，再轉檔為shot.gif，並將其寬度縮至150px
2. 最後，直接上傳到網站並套用，或壓縮成zip檔，準備釋出。
 
### 八、「補充」額外設定

1. 陣列的寫法（json格式）： ```
  <pre class="brush:jscript;">
  [{"name":"回首頁","url":"{XOOPS_URL}/index.php"},
  {"name":"最新消息","url":"{XOOPS_URL}/modules/tadnews/"},
  {"name":"電子相簿","url":"{XOOPS_URL}/modules/tadgallery/"},
  {"name":"檔案下載","url":"{XOOPS_URL}/modules/tad_uploader/"},
  {"name":"聯絡我們","url":"{XOOPS_URL}/modules/ugm_contact_us/"}]
  ```
2. 若需要多幾個項目： ```
  <pre class="brush:jscript;">
  [{"name":"回首頁","url":"{XOOPS_URL}/index.php" , "target":"_self"},
  {"name":"最新消息","url":"{XOOPS_URL}/modules/tadnews/" , "target":"_blank"},
  {"name":"電子相簿","url":"{XOOPS_URL}/modules/tadgallery/" , "target":"_blank"},
  {"name":"檔案下載","url":"{XOOPS_URL}/modules/tad_uploader/" , "target":"_blank"},
  {"name":"聯絡我們","url":"{XOOPS_URL}/modules/ugm_contact_us/" , "target":"_blank"}]
  ```
 
### 九、完整佈景檔下載

[sailing\_demo.zip](http://www.tad0616.net/uploads/tad_book3/file/1031/sailing_demo.zip)
========================================================================================

:::