Tad 教材網 - 線上書籍

:::

5-1 theme2014/index.html 基本頁面 next

\[1031\]XOOPS佈景設計
=================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1031/05.zip)

### 一、 安裝XOOPS基本網站版

1. [http://120.115.2.90/modules/tad\_uploader/index.php?of\_cat\_sn=3](http://120.115.2.90/modules/tad_uploader/index.php?of_cat_sn=3)
2. 利用FTP軟體（如：[filezilla](http://163.26.52.243/modules/tad_uploader/index.php?op=dlfile&cfsn=25&cat_sn=1&name=filezilla_3.5.3_win32-setup.exe)）將 my\_xoops\_base\_xxx.tgz 上傳到家目錄（如：/home/tad）
3. 用[pietty](http://ntu.csie.org/~piaip/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」，例如： ```
  <pre class="brush:php;">
  chown -R tad:tad public_html
  ```
 
### 二、 製作XOOPS的佈景大致流程

1. 「後台→偏好設定→系統設定→一般設定」將「自動編譯您修改的樣板檔？」選「是」。
2. 先設計好一個完整的網頁→把網頁變成XOOPS樣板→套用後進行CSS微調。
3. 開始修改各區塊或模組外觀，以配合佈景風格。
4. 幾個不錯的佈景參考網站： 
  - (1) <http://www.freewebsitetemplates.com/>
  - (2) <http://www.templatemo.com/>
 
### 三、 建立佈景目錄及基本目錄和檔案

1. [http://www.templatemo.com/templates/templatemo\_331\_magic\_color/](http://www.templatemo.com/templates/templatemo_331_magic_color/)
2. 利用 FireFox ，在畫面上按右鍵的「檢視頁面資訊」，其中的「媒體」即可查看網頁用到的圖檔或多媒體檔案。
3. FireFox可安裝 [web developer](http://www.tad0616.net/modules/tad_uploader/index.php?op=dlfile&cfsn=724&cat_sn=65&name=webdeveloper1.2.2-zh-tw.xpi) 來查看佈景元素。
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路徑也請比照辦理）： ```
  <pre class="brush:xml;">
  <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}>： ```
  <pre class="brush:xml;">
  <{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為例，其位置用樣板標籤方式載入即為（因為不在佈景下）： ```
  <pre class="brush:xml;">
  <{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中，該區塊放置區所引入的樣板檔，如： ```
  <pre class="brush:xml;">
  <{foreach item=block from=$xoBlocks.page_topcenter}>
       <{includeq file="$theme_name/xotpl/center_block.html"}>
  <{/foreach}>
  ```
7. 區塊樣板可以使用不同id達到和別的區域區隔效果： ```
  <pre class="brush:xml;">
  <div class="block" id="center_black"> …略…</div>
  ```
8. 樣式設定時，便可針對該區域設定外觀
 
### 六、 統一jquery版本

1. 若載入jquery的版本不同，容易導致相衝，以致jquery套用不正常。 ```
  <pre class="brush:jscript;">
   <script type='text/javascript'>
     if(typeof jQuery == 'undefined') {
     document.write("<script type='text/javascript' src='<{xoAppUrl modules/tadtools/jquery/jquery.js}>'><\/script>");
     }
   </script>
  ```

:::