:::

6. XOOPS可調式佈景開發(上)

一、 申請練習空間

  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
  3. 解壓後,將 install.php 及 phpseclib 目錄上傳到網頁目錄下
  4. 開瀏覽器,執行「http://網址/install.php」,如:「http://202.39.64.155/~帳號/install.php」即可自動安裝最新版XOOPS輕鬆架。
  5. 安裝後,請檢查目錄(假設目錄是/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/

五、 關於可調式佈景

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

六、 基礎動作

  1. 將設計好的佈景複製到佈景目錄themes下,例如 my_rwd
  2. 將index.html複製為theme.html
  3. theme_package.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)即可。在容器中,貼入:
    <!-- 載入布局 -->
    <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/$theme_type.tpl"}>
  6. 找出頁尾,貼上頁尾標籤(亦可連同設定工具一起貼上)
    <{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等連結語法
    <!-- 載入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}>
  8. 檢查或取代所有src路徑,凡是檔案放在佈景下的都要加上<{xoImgUrl}>
  9. <{xoImgUrl}>是網站佈景的路徑,屆時會例如替換成:http://網址/themes/rwd/
  10. <{xoAppUrl}>是網站網址,如:http://網址/

八、 試用新佈景

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

九、 修改導覽列

  1. 將原有的導覽列剪下,做成新檔nav.tpl,並存到xotpl中,以便日後利用。
  2. 將內建導覽列語法貼到原先導覽列位置
    <{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」底下即可。

:::

書籍目錄

展開 | 闔起

線上使用者

26人線上 (5人在瀏覽線上書籍)

會員: 0

訪客: 26

更多…