Tad 教材網 - 線上書籍

:::

6-1 modules\system\system_siteclosed.tpl next

\[1092\] 前端技術入門
===============

### 一、關於自訂樣板

1. 當網站關閉時，系統預設會去讀取佈景下`modules\system\system_siteclosed.tpl`
2. 佈景下的` modules `是自訂樣板，優先權高於內建的樣板，其中以模組目錄名稱為依據。
3. 若是要修改的是模組的某個區塊外觀，則修改「`modules\模組目錄\blocks\區塊樣板.tpl`」
 
### 二、設計關閉網站時的樣板

1. 建立`my_theme\modules\system\system_siteclosed.tpl`
2. 將`theme.tpl`的內容複製到`system_siteclosed.tpl`
3. 接著將主要顯示區的部份清空，並載入內建的登入界面即可。
  
   
  ```markup
  <div class="container my-container-width">
      <div class="row">
          <div class="col">
              <{includeq file="$xoops_rootpath/modules/tadtools/themes4_tpl/siteclosed_login.tpl"}>
          </div>
      </div>
  </div>
  ```
4. 此時登入界面應該是無法顯示正確中文字，而是顯示佈景常數，故在`config.php`載入語系
  
   
  ```php
  <?php
  xoops_loadLanguage('theme_common', 'tadtools');
  ```
 
 <dl> </dl>### 三、釘住工具列

1. <https://github.com/garand/sticky>
2. 下載後，解壓，並將`jquery.sticky.js`複製到js中即可
3. 接著按照官網上範例，在`</head>`前貼上載入語法，路徑記得用絕對路徑，並指定挑選器為`#nav`，如此，便能將導覽列釘住。
4. 若發現捲動畫面時，導覽列被網頁內容遮住，可以加入 `zIndex`參數，提高其垂直位置。
 
### 四、利用多重背景圖來組成畫面

1. 以 [https://www.freepik.com/free-vector/tree-with-bird-inspiring-message\_1053290.htm#page=1&query=tree%20bird&position=3](https://www.freepik.com/free-vector/tree-with-bird-inspiring-message_1053290.htm#page=1&query=tree%20bird&position=3) 為例
2. [下載](https://www.tad0616.net/uploads/tad_book3/file/46/tree-with-bird-inspiring-message.zip)後解壓，並將 [ai 檔](https://www.tad0616.net/uploads/tad_book3/file/46/100064-OLDE5X-233.ai)轉為 svg <https://convertio.co/zh/ai-svg/>
3. 利用[inkscape](https://inkscape.org/zh-hant/release/1.0.1/windows/)來整理圖片（<kbd>Ctrl</kbd>+<kbd>Shif</kbd>+<kbd>G</kbd> 解散群組）
  
  
  1. 將底圖拖出，並單獨匯出 png，適當縮小及裁剪，存為 `images\bg.png`
  2. 刪除掉文字，圖片左右翻轉，將剩餘圖檔匯出 png，大小可設為 888x888，存為 `images\tree.png`
  3. 將 `images\tree.png` 裁剪為三部份，分別命名為 `images\tree_t.png`（枝葉部份，約888x410px）、`images\tree_m.png`（樹幹部份，約 888x16，因為要重複，所以，高度越低越看不出破綻）、`images\tree_b.png`（底部）
  4. `images\tree_b.png`還可以裁出一小部份的草地，命名為`images\tree_b_r.png`
  5. [下載整理好的圖片](https://www.tad0616.net/uploads/tad_book3/file/46/tree.zip)
 
### 五、多重背景的CSS語法

1. 將這些圖片利用背景語法，依照各圖片特性，將之組合起來
  
   
  ```css
  body {
      background: url(../images/tree_b.png) no-repeat left bottom,
      url(../images/tree_b_r.png) repeat-x left bottom,
      url(../images/tree_t.png) no-repeat left top,
      url(../images/tree_m.png) repeat-y left center,
      url(../images/bg_s.png) repeat center center;
  }
  ```
2. 越底部的背景圖，放越後面。
3. 可將導覽列移到最上方，避免遮住底圖，同時修改header的高度，以達視覺的最佳效果。
  
   
  ```css
  header {
    min-height: 300px;
  }
  ```
4. 可調整各區域底色為半透明，如：
  
   
  ```css
  aside {
    background: #dadec54b;
    border-radius: 8px;
  }
  ```
5. `border-radius` 為圓角矩形的用法：<http://www.w3big.com/zh-TW/css3/css3-border-radius.html>
 
### 六、巢狀網格系統

1. 由於`<header>`有漂亮的圖片，為了避免被logo遮住，且善用一下空間，我們可以調整一下`<header>`部份
2. 我們可以先把 logo 部份，獨立存成 `xotpl\logo.tpl`，搜尋部份也獨立存成 `xotpl\search.tpl`，如此，讓主樣板檔引入，讓內容結構更清晰。
  
   
  ```markup
  <header class="row">
      <div class="col-sm-9">
          <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/logo.tpl"}>
      </div>
      <div class="col-sm-3">
          <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/search.tpl"}>
      </div>
  </header>
  ```
3. 接著我們在`<header>`外面再多包一層`.row`，讓畫面更有彈性，並於`<header>`下方多一個區域，等會用來載入滑動圖片輪播。
  
   
  ```markup
  <div class="container my-container-width">
      <div class="row">
          <div class="col-sm-5"></div>
          <div class="col-sm-7">
              <header class="row">
                  略
              </header>
              <section class="mb-4">
                  載入滑動圖片輪播
              </section>
          </div>
      </div>
  </div>
  ```
 
 <dl> </dl>### 七、載入滑動圖片輪播

1. <https://bootstrap.hexschool.com/docs/4.2/components/carousel/>
2. 建立 `xotpl\carousel.tpl`，並於主樣板載入之
  
   
  ```markup
  <section class="mb-4">
      <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/carousel.tpl"}>
  </section>
  ```
3. 參考說明頁面語法，貼上並利用 smarty 的 `foreach` 來讀取 `$slider_var`，分別取出`<{$slider.file_url}>`圖檔網址及`<{$slider.text_description}>`圖檔說明兩部份。
4. `id `記得重新命名一下，如： `b4_carousel`，後面若要加入控制項會用到。
  
   
  ```markup
  <div id="b4_carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          <{foreach from=$slider_var item=slider name=carousel}>
              <div class="carousel-item <{if $smarty.foreach.carousel.index==0}>active<{/if}>">
                  <img src="<{$slider.file_url}>" class="d-block w-100" alt="<{$slider.text_description}>">
              </div>
          <{/foreach}>
      </div>
  </div>
  ```
5. 下方記得加入 javascript 的語法，否則是不會動作的
  
   
  ```javascript
  <script type="text/javascript">
      $(document).ready(function () {
          $('.carousel').carousel();
      });
  </script>
  ```
6. 若要加入上一張或下一張的控制項，按說明加入，並修改對應的` id `即可
  
   
  ```markup
  <div id="b4_carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          略
      </div>
      <a class="carousel-control-prev" href="#b4_carousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#b4_carousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>
  </div>
  ```
 
 <dl> </dl>### 八、讓使用者自己決定是否要使用控制項

1. 請在`my_theme`底下建立`config2_slide.php`，即可自己新增滑動圖的額外設定
2. 額外設定有以下檔案（該設定項目有啟用，額外設定才會有作用）：
  
  
  1. 不屬於任何一類的額外設定：`config2.php`
  2. tabs-1 版面基礎設定的額外設定：`config2_base.php`
  3. tabs-2 背景圖的額外設定：`config2_bg.php`
  4. tabs-3 滑動圖片的額外設定：`config2_slide.php`
  5. tabs-4 logo圖的額外設定：`config2_logo.php`
  6. tabs-5 區塊標題列的額外設定：`config2_block.php`
  7. tabs-6 導覽工具列的額外設定：`config2_nav.php`
3. 額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑：
  
   
  ```php
  <?php
  $i = 0;
  //slide 顯示左右箭頭
  $i++;
  $theme_config[$i]['name'] = "show_slide_control";
  $theme_config[$i]['text'] = "是否顯示左右箭頭";
  $theme_config[$i]['desc'] = "顯示左右箭頭可以讓使用者手動切換滑動圖";
  $theme_config[$i]['type'] = "yesno";
  $theme_config[$i]['default'] = "0";
  ```
4. 每次新增一個項目，就多一組 `$theme_config` 即可，以下是幾個必備的設定項目：
  
  
  1. `name`：用來讓佈景套用的變數名稱，不要有名稱重複的狀況，必須是唯一的。
  2. `text`：是設定界面的項目名稱，會顯示在佈景管理界面上，可用語系替代之
  3. `desc`：則是設定的相關說明，會顯示在佈景管理界面上，可用語系替代之
  4. `type`：有 `text`（文字框）、`color`（挑顏色）、`radio`（單選框）、`yesno`（是否單選）、`select`（下拉選單）、`selectpicker`（下拉圖形選單）、`textarea`（大量文字）、`array`（選項）、`file`（上傳框）、`bg_file`（背景圖上傳）等類型。
  5. `default `是該欄位預設值，若欄位類型為 `array `，其預設值格式為 `json `格式，例如：
      
       
      ```javascript
      [
          {
              "name": "回首頁",
              "url": "{XOOPS_URL}",
              "target": "_self"
          },
          {
              "name": "最新消息",
              "url": "{XOOPS_URL}/modules/tadnews/",
              "target": "_self"
          },
          {
              "name": "電子相簿",
              "url": "{XOOPS_URL}/modules/tadgallery/",
              "target": "_self"
          }
      ]
      ```
5. 不同`type`類型，會多出一些設定項目：
  
  
  1. `options`：選項設定（`radio`、`select`、`selectpicker`、`bg_file`會用到），值為陣列，如：
      
       
      ```php
      $theme_config[$i]['options'] = ['left' => '靠左' , 'center' => '置中', 'right' => '靠右'];
      ```
  2. `repeat`：底圖重複設定之預設值（僅`bg_file`會用到）
  3. `position`：底圖位置設定之預設值（僅`bg_file`會用到）
  4. `size`：底圖縮放設定之預設值（僅`bg_file`會用到）
      
       
      ```php
      $theme_config[$i]['repeat'] = "no-repeat";
      $theme_config[$i]['position'] = "left top";
      $theme_config[$i]['size'] = "auto";
      ```
 
 <dl> </dl>### 九、在樣板中套用自己定義的額外設定

1. 剛剛增加了個 `show_slide_control`額外設定，在樣板中可用`<{$show_slide_control}>`來取得該設定值。因此，我們開啟`xotpl\carousel.tpl`，利用它來判斷是否要顯示控制項：
  
   
  ```markup
  <{if $show_slide_control}>
      <a class="carousel-control-prev" href="#b4_carousel" role="button" data-slide="prev">略</a>
      <a class="carousel-control-next" href="#b4_carousel" role="button" data-slide="next">略</a>
  <{/if}>
  ```
 
 <dl> </dl>### 十、讓佈景支援多國語系

1. 在`my_theme`下建立`language/tchinese_utf8`目錄，並新增`main.php`，內容為：
  
   
  ```php
  <?php
  define('SHOW_SLIDE_CONTROL', '是否顯示左右箭頭');
  define('SHOW_SLIDE_CONTROL_DESC', '顯示左右箭頭可以讓使用者手動切換滑動圖');
  ```
2. 若是需要英文語系，請建立`language/english/main.php`，依此類推
3. 修改原本的`config2_slide.php`，把中文換成語系：
  
   
  ```php
  $theme_config[$i]['text'] = constant('SHOW_SLIDE_CONTROL');
  $theme_config[$i]['desc'] = constant('SHOW_SLIDE_CONTROL_DESC');
  ```
4. [constant()](https://www.php.net/manual/zh/function.constant.php)是PHP的內建函數之一，用來將字串轉為常數。
 
### 十一、額外設定config2.php的語系

1. 額外設定`config2.php`的語系稍微不一樣，並不需要用`constant()`來轉換之，如：
  
   
  ```php
  define('SHOW_VAR', '顯示佈景變數資訊');
  define('SHOW_VAR_DESC', '佈景開發時，會顯示所有 tad_themes 提供的控制變數及設定值');
  ```
2. 建立`my_theme/config2.php`，並在裡面新增一個設定項，以便控制是否顯示佈景變數
  
   
  ```php
  <?php
  $i = 0;
  $theme_config[$i]['name'] = "show_var";
  $theme_config[$i]['text'] = SHOW_VAR;
  $theme_config[$i]['desc'] = SHOW_VAR_DESC;
  $theme_config[$i]['type'] = "yesno";
  $theme_config[$i]['default'] = "0";
  ```
3. 修改`my_theme/theme.tpl`的最下方，以便套用該設定值
  
   
  ```markup
  <{if $show_var}>
      <div class="container my-container-width">
          <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}>
      </div>
  <{/if}>
  ```
4. 這樣整個佈景就大功告成囉！

:::