8. 現有網頁改製為XOOPS佈景

一、基本工作

將下載好的佈景解壓縮（上課範例 | 下載，另一個固定式範例 | 下載），移到themes/下，並將裡面的 index.html複製一份，並命名為theme.html或theme.tpl（XOOPS 2.5.8以後）
下載必要XOOPS佈景相關檔，並複製裡面的所有檔案及目錄到欲修改的佈景目錄中
幾個免費佈景網站：

二、編輯主頁面theme.html或 theme.tpl

若有頁內的CSS設定部份，請將之複製到css/style.css檔案中。
將一些沒有內建的js或css暫時移到別的地方，等會兒再處理。Bootstrap、Font Awesome、jquery可以不用移出，等會直接蓋掉即可，因為系統有內建了。
將theme.html中<body>前的語法都刪掉，並開啟「加入頁首.TXT」，將裡面的語法複製起來，貼到剛剛刪掉的地方。若是有style.css或Bootstrap、Font Awesome、jquery請刪除之，系統會自動載入。
將剛剛移出的js或css移回</head>之前，並在所有路徑前加上<{xoImgUrl}>，例如取代（Ctrl+H）所有的「src="img」為「src="<{xoImgUrl}>img」，常見的還有「src="js」取代成「src="<{xoImgUrl}>js」、「src="css」取代成「src=""<{xoImgUrl}>css」、「href="imgaes」取代成「href=""<{xoImgUrl}>imgaes」...等。
將【佈景變數及必要的語法】加至</body>前，並刪除bootstrap.js及jquery.js的設定。

三、套用新佈景

至後台「偏好設定→系統設定→一般設定」，將「使用者可選擇的佈景」加入新佈景
至區塊管理，啟用「網站佈景」區塊，並置於所有頁面，以便切換。
至前台，找到「網站佈景」區塊，點選新佈景套用之，並檢查運作有無異常。

四、不使用預設樣板的作法

以logo為例，複製/modules/tadtools/themes3_tpl/logo.tpl到佈景的xotpl目錄下。
開啟該檔，並修改成自己想要的樣子。

在佈景中引入自己修改的檔案：

<{includeq file="$theme_name/xotpl/logo.tpl"}>

五、自製滑動圖文效果

到額外佈景將「顯示佈景變數資訊」設為「是」
將滑動圖文的網頁語法剪下，存到xotpl/slider.tpl，並於原本位置引入
```
<{includeq file="$theme_name/xotpl/slider.tpl"}>
```
找到滑動圖文 $slider_var，用亦是參考其變數名稱及觀察其對應值

解析HTML語法，找出每個slide對應的語法，並套用Smarty迴圈，以便自動產生，如：

<{foreach from=$slider_var item=slide name=slider}>
  <li data-target="#slide-list" data-slide-to="<{$i}>" <{if $smarty.foreach.slider.first}>class="active"<{/if}>></li>
  <{assign var=i value=$i+1}>
<{/foreach}>

若要套用描述文字，用：
```
<{$slide.text_description}>
```
若要套用圖片，則用：
```
<{$slide.file_url}>
```

六、常用Smarty迴圈用法

Smarty迴圈用來處理陣列，常用方法如下：

<{foreach from=$來源變數 item=迴圈內變數名稱 name=迴圈別名}>
  <{$迴圈內變數名稱.索引}>
<{/foreach}>

<{$smarty.foreach.迴圈別名.first}> 迴圈第一圈
<{$smarty.foreach.迴圈別名.last}> 迴圈最後一圈
<{$smarty.foreach.迴圈別名.iteration}> 取得迴圈的計數值，依序輸出1、2、3......
<{$smarty.foreach.迴圈別名.total}> 取得迴圈執行總數

七、用SmartMenu製作導覽列

官網：https://www.smartmenus.org/
範例頁面：http://vadikom.github.io/smartmenus/src/demo/

tadtools中亦有內建，在smartmenus目錄中，底下範例為套用sm-blue佈景

<link rel="stylesheet" href="<{$xoops_url}>/modules/tadtools/smartmenus/css/sm-core-css.css">
<link rel="stylesheet" href="<{$xoops_url}>/modules/tadtools/smartmenus/css/sm-blue.css">
<link rel="stylesheet" href="<{$xoops_url}>/modules/tadtools/smartmenus/css/sm-responsive.css">
<script src="<{$xoops_url}>/modules/tadtools/smartmenus/jquery.smartmenus.js"></script>
<script src="<{$xoops_url}>/modules/tadtools/smartmenus/sm-responsive.js"></script>
<script type="text/javascript">
  $(function() {
    $('#main-menu').smartmenus({
      mainMenuSubOffsetX: -1,
      mainMenuSubOffsetY: 4,
      subMenusSubOffsetX: 6,
      subMenusSubOffsetY: -6
    });
  });
</script>

在<ul>標籤中指定一個ID，並套用class="sm sm-blue"，便可輕易做出多層導覽列。

自訂選單的變數為 $menu_var

<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<ul id="main-menu" class="sm sm-blue">
  <li><a href="<{$xoops_url}>">回首頁</a></li>
  <{foreach from=$menu_var item=menu name=m}>
    <li><a href="<{$menu.url}>"><{$menu.title}></a>
    <{if $menu.submenu}>
      <{*子選單迴圈*}>
    <{/if}>
    </li>
  <{/foreach}>
</ul>

若需要修改導覽列樣式，請將tadtools中的 /smartmenus/css/sm-blue.css複製到佈景目錄下的css目錄中，並改引用自己的樣式檔，如：
```
<link rel="stylesheet" href="<{xoImgUrl}>css/sm-blue.css">
```
接著就利用瀏覽器的元素檢查工具，修改導覽列樣式成自己想要的樣子。
選單目前最多三層，亦即最多只有三組<ul></ul>

八、手動載入區塊

先在config2.php加入一組設定，例如：

$theme_config[$i]['name']    = "block1";
$theme_config[$i]['text']    = '第一個綠底區塊編號';
$theme_config[$i]['desc']    = '可從區塊管理，編輯區塊時，該區塊的bid編號';
$theme_config[$i]['type']    = "text";
$theme_config[$i]['default'] = '472';

接著在樣板檔中，找到要加入區塊的地方，插入該區塊即可：
```
<{block id=$block1}>
```

九、自動讀取區塊（以中央區塊為例）

各個區域的區塊變數名稱為：
- (1) 上左區塊：$xoBlocks.page_topleft
- (2) 上右區塊：$xoBlocks.page_topright
- (3) 上中區塊：$xoBlocks.page_topcenter
- (4) 下左區塊：$xoBlocks.page_bottomleft
- (5) 下右區塊：$xoBlocks.page_bottomright
- (6) 下中區塊：$xoBlocks.page_bottomcenter
- (7) 左區塊：$xoBlocks.canvas_left
- (8) 右區塊：$xoBlocks.canvas_right
```
<{foreach from=$xoBlocks.page_topcenter item=block}>
  區塊標題及內容
<{/foreach}>
```

其中區塊標題建議用：

<{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>

區塊內容為：

<div class="blockContent">
  <{$block.content}>
</div>

若是想讓某些項目不斷循環重複，其語法為：
```
<{cycle values='項目1,項目2'}>
```

十、首頁和模組頁區隔開來

要讓樣板判別現在位置是在首頁還是模組頁：

<{if $xoops_dirname == "system"}>
  <{* 在首頁 *}>
<{else}>
  <{* 在模組 *}>
<{/if}>

十一、修改關站畫面

複製theme.html（或theme.tpl）至「佈景/modules/system/system_siteclosed.tpl」
清空主要呈現內容的地方，留下頭尾，並於主內容區貼上以下語法即可：
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/siteclosed_login.tpl"}>
```
到後台一般設定將預設佈景改為新佈景，並將「關閉網站」選「是」，開啟另一個瀏覽器來測試是否有正確的關站畫面。

7-4 tad2017/config2.php