Tad 教材網 - 線上書籍

:::

7-4 tad2017/config2.php

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

[![](http://tad0616.net/uploads/dl.gif)](https://www.tad0616.net/uploads/tad_book3/file/42/08.pdf)

### 一、 基本工作

1. 將下載好的佈景解壓縮（[上課範例](http://shapebootstrap.net/item/1525000-eelectronics-ecommerce-html-template/live-demo) | [下載](https://www.tad0616.net/uploads/tad_book3/file/42/eelectronics-ecommerce-html-template.zip)，[另一個固定式範例](https://freewebsitetemplates.com/preview/photographywebsitetemplate/index.html) | [下載](https://www.tad0616.net/uploads/tad_book3/file/42/photographywebsitetemplate.zip)），移到themes/下，並將裡面的 index.html複製一份，並命名為theme.html或theme.tpl（XOOPS 2.5.8以後）
2. [下載必要XOOPS佈景相關檔](https://www.tad0616.net/uploads/tad_book3/file/42/theme_package_20170502.zip)，並複製裡面的所有檔案及目錄到欲修改的佈景目錄中
3. 幾個免費佈景網站： 
  1. <https://bootstrapmade.com/>
  2. <https://shapebootstrap.net/free-templates>
  3. <http://www.free-css.com/template-categories/responsive>
  4. <https://w3layouts.com/free-responsive-html5-css3-website-templates/>
  5. <https://freewebsitetemplates.com/>
 
### 二、 編輯主頁面theme.html或 theme.tpl

1. 若有頁內的CSS設定部份，請將之複製到css/style.css檔案中。
2. 將一些沒有內建的js或css暫時移到別的地方，等會兒再處理。Bootstrap、Font Awesome、jquery可以不用移出，等會直接蓋掉即可，因為系統有內建了。
3. 將theme.html中<body>前的語法都刪掉，並開啟「加入頁首.TXT」，將裡面的語法複製起來，貼到剛剛刪掉的地方。若是有style.css或Bootstrap、Font Awesome、jquery請刪除之，系統會自動載入。
4. 將剛剛移出的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」...等。
5. 將【佈景變數及必要的語法】加至</body>前，並刪除bootstrap.js及jquery.js的設定。
 
### 三、 套用新佈景

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

1. 以logo為例，複製/modules/tadtools/themes3\_tpl/logo.tpl到佈景的xotpl目錄下。
2. 開啟該檔，並修改成自己想要的樣子。
3. 在佈景中引入自己修改的檔案： ```
  <pre class="brush:xml;gutter:false;">
  <{includeq file="$theme_name/xotpl/logo.tpl"}>
  ```
 
### 五、 自製滑動圖文效果

1. 到額外佈景將「顯示佈景變數資訊」設為「是」
2. 將滑動圖文的網頁語法剪下，存到xotpl/slider.tpl，並於原本位置引入 ```
  <pre class="brush:xml;gutter:false;">
  <{includeq file="$theme_name/xotpl/slider.tpl"}>
  ```
3. 找到滑動圖文 $slider\_var，用亦是參考其變數名稱及觀察其對應值
4. 解析HTML語法，找出每個slide對應的語法，並套用Smarty迴圈，以便自動產生，如： ```
  <pre class="brush:xml;gutter:false;">
  <{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}>
  ```
5. 若要套用描述文字，用： ```
  <pre class="brush:xml;gutter:false;">
  <{$slide.text_description}>
  ```
6. 若要套用圖片，則用： ```
  <pre class="brush:xml;gutter:false;">
  <{$slide.file_url}>
  ```
 
### 六、 常用Smarty迴圈用法

1. Smarty迴圈用來處理陣列，常用方法如下： ```
  <pre class="brush:xml;gutter:false;">
  <{foreach from=$來源變數 item=迴圈內變數名稱 name=迴圈別名}>
    <{$迴圈內變數名稱.索引}>
  <{/foreach}>
  ```
2. <{$smarty.foreach.迴圈別名.first}> 迴圈第一圈
3. <{$smarty.foreach.迴圈別名.last}> 迴圈最後一圈
4. <{$smarty.foreach.迴圈別名.iteration}> 取得迴圈的計數值，依序輸出1、2、3......
5. <{$smarty.foreach.迴圈別名.total}> 取得迴圈執行總數
 
### 七、 用SmartMenu製作導覽列

1. 官網：<https://www.smartmenus.org/>
2. 範例頁面：<http://vadikom.github.io/smartmenus/src/demo/>
3. tadtools中亦有內建，在smartmenus目錄中，底下範例為套用sm-blue佈景 ```
  <pre class="brush:xml;gutter:false;">
  <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>
  ```
4. 在<ul>標籤中指定一個ID，並套用class="sm sm-blue"，便可輕易做出多層導覽列。
5. 自訂選單的變數為 $menu\_var ```
  <pre class="brush:xml;gutter:false;">
  <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>
  ```
6. 若需要修改導覽列樣式，請將tadtools中的 /smartmenus/css/sm-blue.css複製到佈景目錄下的css目錄中，並改引用自己的樣式檔，如： ```
  <pre class="brush:xml;gutter:false;">
  <link rel="stylesheet" href="<{xoImgUrl}>css/sm-blue.css">
  ```
7. 接著就利用瀏覽器的元素檢查工具，修改導覽列樣式成自己想要的樣子。
8. 選單目前最多三層，亦即最多只有三組<ul></ul>
 
### 八、 手動載入區塊

1. 先在config2.php加入一組設定，例如： ```
  <pre class="brush:php;gutter:false;">
  $theme_config[$i]['name']    = "block1";
  $theme_config[$i]['text']    = '第一個綠底區塊編號';
  $theme_config[$i]['desc']    = '可從區塊管理，編輯區塊時，該區塊的bid編號';
  $theme_config[$i]['type']    = "text";
  $theme_config[$i]['default'] = '472';
  ```
2. 接著在樣板檔中，找到要加入區塊的地方，插入該區塊即可： ```
  <pre class="brush:xml;gutter:false;">
  <{block id=$block1}>
  ```
 
### 九、 自動讀取區塊（以中央區塊為例）

1. 各個區域的區塊變數名稱為： 
  - (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 ```
      <pre class="brush:xml;gutter:false;">
      <{foreach from=$xoBlocks.page_topcenter item=block}>
        區塊標題及內容
      <{/foreach}>
      ```
2. 其中區塊標題建議用： ```
  <pre class="brush:xml;gutter:false;">
  <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
  ```
3. 區塊內容為： ```
  <pre class="brush:xml;gutter:false;">
  <div class="blockContent">
    <{$block.content}>
  </div>
  ```
4. 若是想讓某些項目不斷循環重複，其語法為： ```
  <pre class="brush:xml;gutter:false;">
  <{cycle values='項目1,項目2'}>
  ```
 
### 十、 首頁和模組頁區隔開來

1. 要讓樣板判別現在位置是在首頁還是模組頁： ```
  <pre class="brush:xml;gutter:false;">
  <{if $xoops_dirname == "system"}>
    <{* 在首頁 *}>
  <{else}>
    <{* 在模組 *}>
  <{/if}>
  ```
 
### 十一、 修改關站畫面

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

:::