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