Tad 教材網 - 線上書籍

:::

6-1 tad2017/theme.tpl next

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

[![](http://tad0616.net/uploads/dl.gif)](https://www.tad0616.net/uploads/tad_book3/file/42/06.pdf)

### 一、 申請練習空間

1. 請至<http://202.39.64.155>申請練習空間，Email 請填facebook的登入帳號（若有的話）。
2. 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
3. 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
4. 申請後，您的網站網址為：「http://202.39.64.155/~帳號」
5. 資料庫和FTP的帳號、密碼是一樣的！
 
### 二、 關於XOOPS

1. XOOPS官方網站：<http://www.xoops.org>
2. XOOPS正體中文延伸計畫：<http://xoops.tn.edu.tw>
3. XOOPS輕鬆架：<http://campus-xoops.tn.edu.tw> (<http://120.115.2.90>)
4. XOOPS跨平台，為自由軟體，任何情況都可免費使用。
 
### 三、 XOOPS架設環境

1. XOOPS是用PHP寫的網站系統，其資料存放在MySQL資料庫中，換言之，要用XOOPS，主機必須有：網頁伺服器（如Apache、IIS）、MySQL資料庫、支援PHP
2. XOOPS主機環境的最低需求PHP > 5.3.7（建議為PHP > 5.5），需MySQL資料庫，最低需求MySQL > 5（建議為MySQL > 5.5）。
3. 目前XOOPS最新版為2.5.8.1，但如果您的PHP是PHP7以上務必安裝2.5.8以上版本。
 
### 四、 在Linux下安裝XOOPS

1. <http://120.115.2.90/modules/tadnews/index.php?nsn=17>
2. 下載XOOPS 輕鬆架安裝程式 [http://120.115.2.90/modules/tad\_uploader/index.php?op=dlfile&cfsn=112&cat\_sn=11](http://120.115.2.90/modules/tad_uploader/index.php?op=dlfile&cfsn=112&cat_sn=11)
3. 解壓後，將 install.php 及 phpseclib 目錄上傳到網頁目錄下
4. 開瀏覽器，執行「http://網址/install.php」，如：「http://202.39.64.155/~帳號/install.php」即可自動安裝最新版XOOPS輕鬆架。
5. 安裝後，請檢查目錄（假設目錄是/home/xxx/public\_html）屬性及擁有者（假設是xxx），若不正確，請修正之。 ```
  <pre class="brush:bash;gutter:false;">
  chmod -R 755 /home/xxx/public_html
  chmod 777 /home/xxx/public_html/include/license.php
  chmod -R 777 /home/xxx/public_html/uploads
  chmod -R 755 /home/xxx/xoops_lib
  chmod -R 777 /home/xxx/xoops_data
  chown -R xxx:xxx /home/xxx/
  ```
 
### 五、 關於可調式佈景

1. 可控制佈景意指站長可以透過佈景管理模組（tad\_themes）從後台針對佈景做客製化的調整。目前並非所有佈景都支援，而是要有套用tadtools/themes\_tpl3/get\_var.tpl用來載入佈景變數才算數。
2. 此外，tadtools/themes\_tpl3目錄下提供非常多現成樣板供佈景使用。除了get\_var.tpl以外，其餘的皆非必須，當然直接套用可省下不少功夫。
3. 若無可用之練習素材，可[下載之前上課自製的佈景](http://202.39.64.155/modules/tad_uploader/index.php?op=dlfile&cfsn=11&cat_sn=3&name=bootstrap.zip)。
 
### 六、 基礎動作

1. 將設計好的佈景複製到佈景目錄themes下，例如 my\_rwd
2. 將index.html複製為theme.html
3. 將[theme\_package.zip](https://www.tad0616.net/uploads/tad_book3/file/42/theme_package_20170502.zip)壓縮，並複製裡面的檔案目錄到my\_rwd中
 
### 七、 編輯主頁面theme.html

1. 先將CSS設定部份，複製到css/style.css檔案中。
2. 將一些沒有內建的js或css暫時移出<head></head>之外。
3. 將theme.html中<body>前的語法都刪掉，並開啟「加入頁首.TXT」，將裡面的語法複製起來，貼到剛剛刪掉的地方。
4. 將剛剛移出的js或css移回</head>之前，並在路徑前加上<{xoImgUrl}>
5. 清空主內內容區，留下最外層容器（如container）即可。在容器中，貼入： ```
  <pre class="brush:bash;gutter:false;">
  
  <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/$theme_type.tpl"}>
  ```
6. 找出頁尾，貼上頁尾標籤（亦可連同設定工具一起貼上） ```
  <pre class="brush:bash;gutter:false;">
  <{if $xoops_isadmin}>
    <a href="<{$xoops_url}>/modules/system/admin.php?fct=preferences&op=show&confcat_id=3" class="block_config"></a>
  <{/if}>
  <{$xoops_footer}>
  ```
7. 在</body>之前，加入以下語法，並移除bootstrap.js及jquery.js等連結語法 ```
  <pre class="brush:bash;gutter:false;">
  
  <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/bootstrap_js.tpl"}>
  
  <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/my_js.tpl"}>
  
  <{$my_code}>
  
  <{if $show_var=='1'}>
    <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}>
  <{/if}>
  ```
8. 檢查或取代所有src路徑，凡是檔案放在佈景下的都要加上<{xoImgUrl}>
9. <{xoImgUrl}>是網站佈景的路徑，屆時會例如替換成：http://網址/themes/rwd/
10. <{xoAppUrl}>是網站網址，如：http://網址/
 
### 八、 試用新佈景

1. 至後台「偏好設定→系統設定→一般設定」，將「使用者可選擇的佈景」加入my\_rwd
2. 至區塊管理，啟用「網站佈景」區塊，並置於所有頁面，以便切換。
3. 至前台，找到「網站佈景」區塊，點選my\_rwd選項，以切換佈景。
 
### 九、 修改導覽列

1. 將原有的導覽列剪下，做成新檔nav.tpl，並存到xotpl中，以便日後利用。
2. 將內建導覽列語法貼到原先導覽列位置 ```
  <pre class="brush:bash;gutter:false;">
  <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/navbar.tpl"}>
  ```
 
### 十、 theme.ini及README

1. 基本上，theme.ini只是簡單的佈景基本資料而已，version 要認真填，tad\_adm（站長工具箱）會根據該檔案中的版本來判別佈景是否需更新。在佈景上，是完全用不著的。
2. 其中screenshot.png是該佈景預覽圖（寬約450px），推測是用在官網的佈景顯示；而shot.gif則是佈景預覽縮圖（寬約150px），會用在佈景區塊上。
3. README並非必要，僅屬自己紀錄，並提供git讀取資料用。
 
### 十一、 config.php

1. 我們做的佈景，其實可以在沒有安裝 tad\_theme 佈景管理模組下使用，其各種設定值便是來自於config.php中。
2. config.php用來設定佈景預設值，初次設定此佈景時會將該檔案內容寫入資料庫。
3. $theme\_change=1; 設定佈景種類是否可自訂，若值為1，表示可同時支援bootstrap以及固定寬度的HTML模式。以my\_rwd來講，應該是0，不給改。
4. $theme\_kind='bootstrap3'; 則是設定預設的佈景種類，其值為bootstrap3、mix或html。以my\_rwd來講，應該是bootstrap3。
5. $menu\_var\_kind用來設定引入哪些選單？「my\_menu」是佈景管理中「自訂選單」中的選項，「admin」則是管理員專用選單，「user」是一般使用者選單，all 則是同時包含上述三種。
6. $theme\_color = 'bootstrap3';額外顏色設定，可從tadtools設定。所有顏色設定均放於 /modules/tadtools/bootstrap3/themes 底下。
7. 每個設定項目上有註解，中文部份說明此項目是在設定什麼（名稱和後台的設定項目會盡量一致）
8. 中括號 \[\] 裡的資訊則是告知，此設定項目是用在什麼地方？或者說哪個檔案會套用之。 
  - (1) \[無\]：表示目前是寫死的，無作用（通常是為了以後留規格用的）。
  - (2) \[自\]：表示該項目需自行套用，沒有檔案會讀取之。
  - (3) \[theme\_css.html\]：有寫明確檔案的，表示該項目在該樣板中會被套用或使用之。
  - (4) \[theme\_type\_x.html\]：有明確檔案，但有寫 x 的，表示 theme\_type\_1.html～theme\_type\_7.html （也就是所有版型）都會用到該設定。
  - (5) \[theme\_type\_2~8.html\]：有明確檔案，有明確寫編號 的，表示那幾個編號版型都會用到該設定。
9. $config\_tabs\[1\]=1; \[\]中的編號為頁籤編號（目前為1~6），值為0或1，1表示要在tad\_themes後台的佈景設定使用該頁籤功能。
10. 頁籤底下有各種設定項目，\[\]中為設定項目名稱，值以陣列方式呈現，如：
11. $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為該欄位預設值（相當重要！！！），務必設定正確。
 
### 十二、 各種images下的圖檔目錄

1. 「bg」：背景圖，對應 $config\_enable\['bg\_img'\] 設定項，$config\_enable\['bg\_img'\] 中的預設檔案，務必放至「images/bg」底下。
2. 「bt\_bg」：區塊標題背景圖，對應 $config\_enable\['bt\_bg\_img'\] 設定項，$config\_enable\['bt\_bg\_img'\] 中的預設檔案，務必放至「images/bt\_bg」底下。
3. 「logo」：背景圖，對應 $config\_enable\['logo\_img'\] 設定項，$config\_enable\['logo\_img'\] 中的預設檔案，務必放至「images/logo」底下。
4. 「nav\_bg」：導覽列背景圖，對應 $config\_enable\['navbar\_img'\] 設定項，$config\_enable\['navbar\_img'\] 中的預設檔案，務必放至「images/nav\_bg」底下。
5. 「navlogo」：導覽列logo圖，對應 $config\_enable\[navlogo\_img'\] 設定項，$config\_enable\['navlogo\_img'\] 中的預設檔案，務必放至「images/navlogo」底下。
6. 「slide」：滑動圖預設圖檔，直接將預設圖片放到「images/slide」底下即可。

:::