8. 進階佈景設計

一、 嵌入自製選單

1. 不錯的選單網站：http://cssmenumaker.com/
2. 設定好之後下載解壓縮，並移至佈景下，目錄改為menu
3. 在樣板中加入相關語法（一般不外乎是CSS以及JS和HTML三個部份而已）：

   <link rel="stylesheet" type="text/css" href="<{xoImgUrl menu/styles.css}>" />
   <script type="text/javascript" src="<{xoImgUrl menu/menu_jquery.js}>"></script>

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

二、 Smarty的迴圈

1. 迴圈的資料來源（$menu_var）長這樣子（但其實這和佈景開發者無關，看看就好）：
2. $menu_var[0]=array('id'=>"編號1" , 'title'=>"選單1" ,  'url'=>"網址1" , 'target'="目標1" , 'icon'="圖示1" , 'submenu'="子項目1");
3. 套用迴圈，from是smarty的變數來源，item是自訂一個在迴圈中使用的變數名稱：

   <{foreach from=$menu_var item=m}>
     <li class="active">
       <a href="<{$m.url}>" target="<{$m.target}>">
         <i class="<{$m.icon}> icon-white"></i>
         <span><{$m.title}></span>
       </a>
     </li>
   <{/foreach}>

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

   <li <{if $m.submenu}>class="has-sub"<{/if}>>
     <a href="<{$m.url}>" target="<{$m.target}>">第一層選項</a>
     <{if $m.submenu}>
       <ul>
         <{foreach from=$m.submenu item=m2}>
           ...略...
         <{/foreach}>
       </ul>
     <{/if}>
   </li>

三、 樣板中使用PHP

1. Smarty中允許使用PHP，只要用以下語法即可，若要將結果顯示在畫面上，直接用echo即可。
2. 若需要載入內建物件，記得用global才行。

   <{php}>
   global $xoopsUser;
   echo $xoopsUser->name();
   <{/php}>

四、 套用自製滑動圖文

1. 滑動圖文的樣板變數為$slider_var，其值如下：
2. $slide_var[0]=array('files_sn'=>編號 , 'sort'=>排序 , 'file_name'=>真實檔名 , 'description'=>描述 , 'original_filename'=>原始檔名 , 'sub_dir'=>子目錄 , 'file_url'=>完整圖檔位置) ;
3. 不錯的滑動圖文：http://www.devtrix.net/sliderman/
4. 請將相關語法（javascript及CSS部份）貼到</head>前，接著參照範例頁，將HTML貼到欲呈現位置並修改參數以及CSS檔的寬度及高度設定。例如：
5. 若是用demo3，記得到其他範例去將左右方向的圖示複製一份到img下。