線上書籍

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>