Tad 教材網 - 線上書籍

:::

5-8 theme2014/xotpl/block_center.html （中間區塊樣板檔）

6-1 theme2014/theme.html 樣板檔（加入管理工具） next

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

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

### 一、 強化區塊樣板

1. 可直接套用tadtools的blockTitle.html樣板，即有強化區塊標題的功能 ```
  <pre class="brush:xml;">
  <{include file="$xoops_rootpath/modules/tadtools/themes_tpl/blockTitle.html"}>
  ```
2. 由於tadtools的blockTitle.html樣板就有內建樣式class="blockTitle"，所以，若原本佈景有自己定義class="blockTitle"的，則可拿掉。
3. 想隱藏區塊標題，請在標題後加上 \[hide\]，例如："標題 \[hide\]"。
4. 想使用圖片作為標題，請在標題後加上 \[pic\]以及圖片在佈景中的位置，例如："標題 \[pic\]img/usermenu.png"。
5. 想要在區塊標題前面放一個 icon，請在標題後加上 \[icon\]以及圖片在佈景中的位置，如："標題 \[icon\]img/icon.gif"。
6. 希望區塊標題有連結網址，請在標題後加上 \[link\]以及網址，例如："標題 \[link\]http://ck2tw.net"。
7. 當使用圖片作為標題時，原本的區塊名稱會作為 "alt" 或 "title" 標籤的內容。
 
### 二、 加入後臺管理連結

1. 利用<{$xoops\_isadmin}>樣板標籤可判斷目前登入者是否為管理員，XOOPS的管理後台路徑為「http://網址/admin.php」。 ```
  <pre class="brush:xml;">
  <{if $xoops_isadmin}>
      <li><a href="<{xoAppUrl admin.php}>">後台管理</a></li>
  <{/if}>
  ```
 
### 三、 加入登出和登入按鈕

1. 利用<{$xoops\_isuser}>樣板標籤可以判斷目前登入者是否為註冊會員。登出的網址為「http://網址/user.php?op=logout」。
 
 ```
<pre class="brush:xml;">
<{if $xoops_isuser}>
    <li><a href="<{xoAppUrl user.php?op=logout}>">登出</a></li>
<{else}>
    <li><a href="<{xoAppUrl user.php}>">登入</a></li>
<{/if}>
```

###   
 四、 新通知信

1. xoInboxCount就是用來計算新通知信數量的smarty外掛，將之設定為樣板變數$pmcount，如此，就可以利用他來呈現到畫面上。
 
 ```
<pre class="brush:xml;">
<{xoInboxCount assign=pmcount}>
<{if $pmcount}>
  <li><a href="<{xoAppUrl viewpmsg.php}>">您有 <{$pmcount}> 封信</a></li>
<{/if}>
```

###   
 五、 使用者資訊

1. 利用 xoMemberInfo可取得使用者資訊的陣列，並將之套用到$mem變數，如此，我們便可以在樣板中使用使用者資訊，陣列的用法為<{$陣列名稱.陣列項目}> ```
  <pre class="brush:xml;">
  <{xoMemberInfo assign=mem}>
  ```
2. 此外，每個項目如<{$mem.name}>，都可以加上\_expire查其到期日時間戳記，例如<{$mem.name\_expire}>的值為1397970511（雖然不曉得這要幹嘛～） 
  - (1) <{$mem.uname}>：tad（帳號）
  - (2) <{$mem.name}>：吳弘凱（真實姓名）
  - (3) <{$mem.email}>：tad0616@gmail.com（Email）
  - (4) <{$mem.user\_avatar}>：avatars/cavt50877193c9788.png（頭像）
  - (5) <{$mem.url}>：http://localhost/x25/（個人網站）
  - (6) <{$mem.user\_icq}>：（ICQ即時通訊的帳號）
  - (7) <{$mem.user\_aim}>：（美國線上即時通訊的帳號）
  - (8) <{$mem.user\_yim}>：（雅虎即時通的帳號）
  - (9) <{$mem.user\_msnm}>：（MSN即時通訊的帳號）
  - (10) <{$mem.posts}>：93（文章發表數）
  - (11) <{$mem.user\_from}>：台南（來自）
  - (12) <{$mem.user\_occ}>：老師（職業）
  - (13) <{$mem.user\_intrest}>：看漫畫（興趣）
  - (14) <{$mem.bio}>：（其他資訊）
  - (15) <$mem.user\_sig}>：沒有簽名（簽名檔）
 
### 六、 常用使用者選單的內容連結位置

1. <a href="<{xoAppUrl user.php}>" >查看帳號</a>
2. <a href="<{xoAppUrl edituser.php}>">編輯帳號</a>
3. <a href="<{xoAppUrl notifications.php}>">通知</a>
4. <a href="<{xoAppUrl user.php?op=logout}>">登出</a>
 
### 七、 登入畫面常用的欄位名稱及路徑

1. form的action要改為<{xoAppUrl user.php}>，method使用post方式，帳號欄位的name為uname，密碼欄位的name則為pass，欄位可使用placeholder佔位字元來進行提示，亦可用class=”input-small”使用較小輸入欄位。
2. 若需要加入記住帳密的功能可加入：<input type="checkbox" value="On" name="rememberme">記住我
3. 需要<input type="hidden" value="login" name="op">才能真的執行登入
4. <input type="hidden" name="xoops\_redirect" value="<{$xoops\_requesturi}>"> 登入後會轉向至目前頁面。
5. 立即註冊路徑：<{xoAppUrl register.php}>
6. 密碼遺失路徑：<{xoAppUrl user.php#lost}>
 
### 八、 插入小插圖：

1. 若插圖放在佈景下的images中，那麼，可用{xoImgUrl images/檔名}>來插圖。
2. <img src="<{xoImgUrl images/圖.png}>" hspace="3" align="absmiddle">
3. hspace為HTML的插圖屬性，意思是圖片左右兩側的間距。
4. align是用來對齊的，absmiddle可以做到絕對垂直置中對齊。
5. 插入個人圖像（2.4.3之後才支援） ```
  <pre class="brush:xml;">
  <div align="right" style="width:90px;height:90px;background-image:url(<{xoAppUrl /uploads/}><{$xoops_avatar}>)"></div>
  ```
 
### 九、 修改轉頁畫面

1. XOOPS 2.3前轉頁樣板：/modules/system/templates/system\_redirect.html
2. XOOPS 2.3以後轉頁樣板：/佈景/modules/system/system\_redirect.html
3. 「偏好設定/系統設定/一般設定」中的「<span class="caption-text">使用 jGrowl 動態轉向</span>」要選「否」才有作用。
4. 可以在佈景下建立一個modules，上傳至佈景中，並將該目錄設為777可寫入。
5. 進到後台「樣板」，「<span class="caption-text">選擇佈景</span>」選用新佈景，<span class="caption-text">「強制產生檔案」選「是」</span>，「<span class="caption-text">選擇模組</span>」選擇「系統管理」（即 system 模組）
6. 送出後，在「<span class="caption-text">選擇樣板</span>」中挑選 system\_redirect.html 後送出。
7. 接著您可以從後台的樣板直接編輯 /system/system\_redirect.html 來修改之。也可以將之下載來修改之。
8. 轉頁的話，此行要保留 ```
  <pre class="brush:xml;">
  <meta http-equiv="Refresh" content="<{$time}>; url=<{$url}>" />
  
  <{$message}>
  <{$lang_ifnotreload}>
  
  <{if $xoops_logdump != ''}>
    <{$xoops_logdump}>
  <{/if}>
  ```
 
### 十、 設定語系

1. XOOPS 2.3以後可設定佈景語系檔：/佈景/language/語系/main.php
2. 一樣用define("常數","字串")來設定，例如：define("\_THEME\_ID", "帳號：");
3. 佈景中使用：<{$smarty.const.\_THEME\_ID}>
4. 若要套用變數到語系中：<span data-ft="{"tn":"K"}" data-reactid=".uj.1:3:1:$comment10202350894073717_10202351518889337:0.0.$right.0.$left.0.0.1:$comment-body"><span class="UFICommentBody" data-reactid=".uj.1:3:1:$comment10202350894073717_10202351518889337:0.0.$right.0.$left.0.0.1:$comment-body.0"><span data-reactid=".uj.1:3:1:$comment10202350894073717_10202351518889337:0.0.$right.0.$left.0.0.1:$comment-body.0.$end:0:$0:0"><{$欲套入變數|string\_format:$smarty.const.語系常數}></span></span></span>
 
### 十一、 網站小圖

1. 可自行製作網站ico圖示：http://www.favicon.cc/
2. 做完存成favicon.ico放置於「佈景/icons」下即可。

:::