線上書籍

Home

[1031]XOOPS佈景設計

一、 安裝XOOPS基本網站版
  1. http://120.115.2.90/modules/tad_uploader/index.php?of_cat_sn=3
  2. 利用FTP軟體(如:filezilla)將 my_xoops_base_xxx.tgz 上傳到家目錄(如:/home/tad)
  3. pietty登入,並解壓縮該檔案: tar zxvf my_xoops_base_2.1_20140103.tgz (列出檔案指令:ls,或ll)
  4. 接著請確定uploads、xoops_data連同底下的目錄及檔案均為777
  5. 因為預設擁有者可能不存在您的主機中,所以,請修改public_html、xoops_data及xoops_lib 的擁有者:「chown -R 擁有者:所屬群組 public_html」,例如: chown -R tad:tad public_html
二、 製作XOOPS的佈景大致流程
  1. 「後台→偏好設定→系統設定→一般設定」將「自動編譯您修改的樣板檔?」選「是」。
  2. 先設計好一個完整的網頁→把網頁變成XOOPS樣板→套用後進行CSS微調。
  3. 開始修改各區塊或模組外觀,以配合佈景風格。
  4. 幾個不錯的佈景參考網站:
三、 建立佈景目錄及基本目錄和檔案
  1. http://www.templatemo.com/templates/templatemo_331_magic_color/
  2. 利用 FireFox ,在畫面上按右鍵的「檢視頁面資訊」,其中的「媒體」即可查看網頁用到的圖檔或多媒體檔案。
  3. FireFox可安裝 web developer 來查看佈景元素。
  4. 建立一個資料夾,如theme2014,用來放置所有佈景相關檔案。
    • (1)  在佈景資料夾下建立用來放置圖檔的images目錄,以及放置CSS檔的css目錄,以及放置自訂樣板檔的tpl目錄。
    • (2)  建立index.html(未來的theme.html),編碼需符合網站編碼,如:UTF-8
  5. 設計所需圖檔,規劃基本架構
    • (1)  基本區域:「頁首」、「主要內容」、「頁尾」
    • (2)  XOOPS 2.2之前僅有:左、右、上中、上中左、上中右等5個區塊放置區
    • (3)  XOOPS 2.3以後新增:下中、下中左、下中右等3個區塊放置區
    • (4)  以上所有區域並沒有規定一定非得放在哪裡不可,您可自行決定擺放的位置,或者欲出現的欄位數。
  6. 若要載入tadtools的bootstrap,那麼尚未套用樣板標籤的位置是(底下的js路徑也請比照辦理): <link href="../../modules/tadtools/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
  7. 可將 theme2014 上傳到佈景目錄(themes)底下,在尚未套用前,利用「http://網址/themes/theme2014/」這樣的方式來看。
  8. 線上字型:http://www.justfont.com
四、 將樣板製作成XOOPS佈景樣板
  1. 請將index.html另存成theme.html,theme.html才是XOOPS佈景的主樣板檔。
  2. XOOPS採用改造過的Smarty佈景引擎,一般Smarty的樣板標籤為{var},但XOOPS的樣板標籤必須寫為<{$var}>才行。
  3. 設定目前佈景名稱的樣板標籤<{$theme_name}>: <{assign var=theme_name value=$xoTheme->folderName}>
  4. xoops內建的樣板標籤:
    • (1)  <{$xoops_langcode}>:語系(lang)
    • (2)  <{$xoops_charset}>:語系編碼(charset)
    • (3)  <{$xoops_sitename}>:網站名稱
    • (4)  <{$xoops_slogan}>:網站口號
    • (5)  <{$xoops_pagetitle}>:頁面標題
    • (6)  <{$xoops_isuser}>:是否有登入
    • (7)  <{$xoops_userid}>:使用者編號
    • (8)  <{$xoops_uname}>:登入帳號
    • (9)  <{$xoops_isadmin}>:是否為管理員
    • (10)  <{$xoops_theme}>:使用佈景名稱
    • (11)  <{$xoops_imageurl}>:佈景路徑
    • (12)  <{$xoops_themecss}>:佈景CSS路徑
    • (13)  <{$xoops_requesturi}>:執行的網址
    • (14)  <{$xoops_dirname}>:XOOPS目錄
    • (15)  <{$xoops_banner}>:廣告
    • (16)  <{$xoops_avatar}>:使用者圖像(XOOPS2.4.3新增)
    • (17)  <{$xoops_usergroups}>:使用者所屬群組(XOOPS2.4.3新增)
    • (18)  <{$xoops_url}>:網址
    • (19)  <{$xoops_rootpath}>:實體路徑
    • (20)  <{$xoops_url}>:網址
    • (21)  <{$xoops_version}>:xoops版本
    • (22)  <{$xoops_upload_url}>:上傳目錄網址
  5. 開啟教材中的「meta.txt」,並將裡頭所有內容複製起來,貼到<head>中。
  6. 開啟教材中的「外部檔案.txt」,並將裡頭所有內容複製起來,貼到<head>中。
  7. 修改圖檔路徑,若原本html中有引入圖檔或外部檔案的,請根據位置,改用樣板標籤載入之。
    • (1)  <{xoImgUrl 佈景下的檔案}>代表完整佈景路徑。
    • (2)  <{xoAppUrl 網站下的檔案}>代表XOOPS網址。
  8. 以上述的bootstrap.css為例,其位置用樣板標籤方式載入即為(因為不在佈景下): <{xoAppUrl modules/tadtools/bootstrap/css/bootstrap.css}>
  9. 複製必要的XOOPS樣式,把xoops.css複製到您的佈景目錄/css中即可。
  10. 加入XOOPS佈景語法(樣板標籤)
    • (1)  請開啟教材中的「樣板碼.txt」,並將裡頭所有內容依序複製起來。
    • (2)  將複製起來的語法,根據對應位置複製到theme.html中。
五、 製作區塊樣板
  1. 修改block.html的主架構:
    • (1)  區塊標題:<{$block.title}>
    • (2)  區塊內容:<{$block.content}>
  2. 修改xoops.css中的區塊外觀設定
  3. 每個區塊放置區都可引入不同的區塊樣板。
  4. 安裝您的佈景:「後台→偏好設定→系統設定→一般設定」進行佈景安裝
    • (1)  「預設佈景(theme)」:選擇您做的佈景
    • (2)  「使用者可選擇的佈景」:使用者可套用的佈景,一定要包含「預設版面風格」。
    • (3)  登出後,佈景始生效。
  5. 請修改中間區塊的外觀(或右邊),並另存成新的區塊樣板檔,如:center_block.html
  6. 修改theme.html中,該區塊放置區所引入的樣板檔,如: <{foreach item=block from=$xoBlocks.page_topcenter}> <{includeq file="$theme_name/xotpl/center_block.html"}> <{/foreach}>
  7. 區塊樣板可以使用不同id達到和別的區域區隔效果: <div class="block" id="center_black"> …略…</div>
  8. 樣式設定時,便可針對該區域設定外觀
六、 統一jquery版本
  1. 若載入jquery的版本不同,容易導致相衝,以致jquery套用不正常。 <script type='text/javascript'> if(typeof jQuery == 'undefined') { document.write("<script type='text/javascript' src='<{xoAppUrl modules/tadtools/jquery/jquery.js}>'><\/script>"); } </script>