進階佈景設計

5-7 進階佈景設計

一、嵌入自製選單

設定好之後下載解壓縮，並移至佈景下，目錄改為menu

在樣板中加入相關語法（一般不外乎是CSS以及JS和HTML三個部份而已）：

`1`	`<link` `rel="stylesheet"` `type="text/css"` `href="<{xoImgUrl menu/styles.css}>" />`

`2`	`<script` `type="text/javascript"` `src="<{xoImgUrl menu/menu_jquery.js}>"></script>`

修改menu/styles.css，將底色及pIndicator、cIndicator的border-top-color改為透明，以便顯示原佈景的底圖。

二、 Smarty的迴圈

迴圈的資料來源（$menu_var）長這樣子（但其實這和佈景開發者無關，看看就好）：

$menu_var[0]=array('id'=>"編號1" , 'title'=>"選單1" , 'url'=>"網址1" , 'target'="目標1" , 'icon'="圖示1" , 'submenu'="子項目1");

套用迴圈，from是smarty的變數來源，item是自訂一個在迴圈中使用的變數名稱：

1<{foreach from=$menu_var item=m}>
2  <li class="active">
3    <a href="<{$m.url}>" target="<{$m.target}>">
4      <i class="<{$m.icon}> icon-white"></i>
5      <span><{$m.title}></span>
6    </a>
7  </li>
8<{/foreach}>

若有子選項，需在<li>中加入class="has-sub"，並且在<li></li>裡面再加入第二組迴圈：

01<li <{if $m.submenu}>class="has-sub"<{/if}>>
02  <a href="<{$m.url}>" target="<{$m.target}>">第一層選項</a>
03  <{if $m.submenu}>
04    <ul>
05      <{foreach from=$m.submenu item=m2}>
06        ...略...
07      <{/foreach}>
08    </ul>
09  <{/if}>
10</li>

三、樣板中使用PHP

Smarty中允許使用PHP，只要用以下語法即可，若要將結果顯示在畫面上，直接用echo即可。

若需要載入內建物件，記得用global才行。

1<{php}>
2global $xoopsUser;
3echo $xoopsUser->name();
4<{/php}>

四、套用自製滑動圖文

滑動圖文的樣板變數為$slider_var，其值如下：

01//檔案編號
02$slide_var[0]['files_sn']=740;
03 
04//排序
05$slide_var[0]['sort']=5;
06 
07//主機上真實檔名
08$slide_var[0]['file_name']= 'slide_16_3.jpg';
09 
10//描述（含HTML）
11$slide_var[0]['description']='<h3>您可以自己修改這部份內容</h3><p>從佈景管理的後台設定畫面，您除了可以上傳滑動圖片外，也可以自己輸入圖片說明內容。部份佈景都支援HTML語法，您可以試試。</p>';
12 
13//描述（不含HTML）
14$slide_var[0]['text_description']='您可以自己修改這部份內容從佈景管理的後台設定畫面，您除了可以上傳滑動圖片外，也可以自己輸入圖片說明內容。部份佈景都支援HTML語法，您可以試試。';
15 
16//原始檔名
17$slide_var[0]['original_filename']='2011061111173338.jpg'; 
18 
19//放置位置
20$slide_var[0]['sub_dir']='/white/slide';
21 
22//檔案絕對路徑
23$slide_var[0]['file_url']='http://user50.myxoops.cyc.edu.tw/uploads/tad_themes/white/slide/slide_16_3.jpg';
24 
25//縮圖絕對路徑
26$slide_var[0]['file_thumb_url']='http://user50.myxoops.cyc.edu.tw/uploads/tad_themes/white/slide/thumbs/slide_16_3.jpg';