6. XOOPS可調式佈景開發（上）

一、申請練習空間

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

二、關於XOOPS

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

三、 XOOPS架設環境

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

四、在Linux下安裝XOOPS

http://120.115.2.90/modules/tadnews/index.php?nsn=17
下載XOOPS 輕鬆架安裝程式 http://120.115.2.90/modules/tad_uploader/index.php?op=dlfile&cfsn=112&cat_sn=11
解壓後，將 install.php 及 phpseclib 目錄上傳到網頁目錄下
開瀏覽器，執行「http://網址/install.php」，如：「http://202.39.64.155/~帳號/install.php」即可自動安裝最新版XOOPS輕鬆架。

安裝後，請檢查目錄（假設目錄是/home/xxx/public_html）屬性及擁有者（假設是xxx），若不正確，請修正之。

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/

五、關於可調式佈景

可控制佈景意指站長可以透過佈景管理模組（tad_themes）從後台針對佈景做客製化的調整。目前並非所有佈景都支援，而是要有套用tadtools/themes_tpl3/get_var.tpl用來載入佈景變數才算數。
此外，tadtools/themes_tpl3目錄下提供非常多現成樣板供佈景使用。除了get_var.tpl以外，其餘的皆非必須，當然直接套用可省下不少功夫。
若無可用之練習素材，可下載之前上課自製的佈景。

六、基礎動作

將設計好的佈景複製到佈景目錄themes下，例如 my_rwd
將index.html複製為theme.html
將theme_package.zip壓縮，並複製裡面的檔案目錄到my_rwd中

七、編輯主頁面theme.html

先將CSS設定部份，複製到css/style.css檔案中。
將一些沒有內建的js或css暫時移出<head></head>之外。
將theme.html中<body>前的語法都刪掉，並開啟「加入頁首.TXT」，將裡面的語法複製起來，貼到剛剛刪掉的地方。
將剛剛移出的js或css移回</head>之前，並在路徑前加上<{xoImgUrl}>

清空主內內容區，留下最外層容器（如container）即可。在容器中，貼入：

<!-- 載入布局 -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/$theme_type.tpl"}>

找出頁尾，貼上頁尾標籤（亦可連同設定工具一起貼上）

<{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}>

在</body>之前，加入以下語法，並移除bootstrap.js及jquery.js等連結語法

<!-- 載入bootstrap -->
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/bootstrap_js.tpl"}>
<!-- 載入自訂js -->
<{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}>

檢查或取代所有src路徑，凡是檔案放在佈景下的都要加上<{xoImgUrl}>
<{xoImgUrl}>是網站佈景的路徑，屆時會例如替換成：http://網址/themes/rwd/
<{xoAppUrl}>是網站網址，如：http://網址/

八、試用新佈景

至後台「偏好設定→系統設定→一般設定」，將「使用者可選擇的佈景」加入my_rwd
至區塊管理，啟用「網站佈景」區塊，並置於所有頁面，以便切換。
至前台，找到「網站佈景」區塊，點選my_rwd選項，以切換佈景。

九、修改導覽列

將原有的導覽列剪下，做成新檔nav.tpl，並存到xotpl中，以便日後利用。

將內建導覽列語法貼到原先導覽列位置

<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/navbar.tpl"}>

十、 theme.ini及README

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

十一、 config.php

我們做的佈景，其實可以在沒有安裝 tad_theme 佈景管理模組下使用，其各種設定值便是來自於config.php中。
config.php用來設定佈景預設值，初次設定此佈景時會將該檔案內容寫入資料庫。
$theme_change=1; 設定佈景種類是否可自訂，若值為1，表示可同時支援bootstrap以及固定寬度的HTML模式。以my_rwd來講，應該是0，不給改。
$theme_kind='bootstrap3'; 則是設定預設的佈景種類，其值為bootstrap3、mix或html。以my_rwd來講，應該是bootstrap3。
$menu_var_kind用來設定引入哪些選單？「my_menu」是佈景管理中「自訂選單」中的選項，「admin」則是管理員專用選單，「user」是一般使用者選單，all 則是同時包含上述三種。
$theme_color = 'bootstrap3';額外顏色設定，可從tadtools設定。所有顏色設定均放於 /modules/tadtools/bootstrap3/themes 底下。
每個設定項目上有註解，中文部份說明此項目是在設定什麼（名稱和後台的設定項目會盡量一致）
中括號 [] 裡的資訊則是告知，此設定項目是用在什麼地方？或者說哪個檔案會套用之。
- (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]：有明確檔案，有明確寫編號的，表示那幾個編號版型都會用到該設定。
$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為該欄位預設值（相當重要！！！），務必設定正確。

十二、各種images下的圖檔目錄

「bg」：背景圖，對應 $config_enable['bg_img'] 設定項，$config_enable['bg_img'] 中的預設檔案，務必放至「images/bg」底下。
「bt_bg」：區塊標題背景圖，對應 $config_enable['bt_bg_img'] 設定項，$config_enable['bt_bg_img'] 中的預設檔案，務必放至「images/bt_bg」底下。
「logo」：背景圖，對應 $config_enable['logo_img'] 設定項，$config_enable['logo_img'] 中的預設檔案，務必放至「images/logo」底下。
「nav_bg」：導覽列背景圖，對應 $config_enable['navbar_img'] 設定項，$config_enable['navbar_img'] 中的預設檔案，務必放至「images/nav_bg」底下。
「navlogo」：導覽列logo圖，對應 $config_enable[navlogo_img'] 設定項，$config_enable['navlogo_img'] 中的預設檔案，務必放至「images/navlogo」底下。
「slide」：滑動圖預設圖檔，直接將預設圖片放到「images/slide」底下即可。

5. 同上週～