:::

5-3 theme.tpl

6-1 modules\system\system_siteclosed.tpl next

[1092] 前端技術入門

6. 利用多背景來組成自適應畫面

一、關於自訂樣板

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

二、設計關閉網站時的樣板

建立my_theme\modules\system\system_siteclosed.tpl
將theme.tpl的內容複製到system_siteclosed.tpl

接著將主要顯示區的部份清空，並載入內建的登入界面即可。

<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>

此時登入界面應該是無法顯示正確中文字，而是顯示佈景常數，故在config.php載入語系
```
<?php
xoops_loadLanguage('theme_common', 'tadtools');
```

三、釘住工具列

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

四、利用多重背景圖來組成畫面

以 https://www.freepik.com/free-vector/tree-with-bird-inspiring-message_1053290.htm#page=1&query=tree%20bird&position=3 為例
下載後解壓，並將 ai 檔轉為 svg https://convertio.co/zh/ai-svg/
利用inkscape來整理圖片（Ctrl+Shif+G 解散群組）
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. 下載整理好的圖片

五、多重背景的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;
}

越底部的背景圖，放越後面。
可將導覽列移到最上方，避免遮住底圖，同時修改header的高度，以達視覺的最佳效果。
```
header {
  min-height: 300px;
}
```

可調整各區域底色為半透明，如：

aside {
  background: #dadec54b;
  border-radius: 8px;
}

border-radius 為圓角矩形的用法：http://www.w3big.com/zh-TW/css3/css3-border-radius.html

六、巢狀網格系統

由於<header>有漂亮的圖片，為了避免被logo遮住，且善用一下空間，我們可以調整一下<header>部份

我們可以先把 logo 部份，獨立存成 xotpl\logo.tpl，搜尋部份也獨立存成 xotpl\search.tpl，如此，讓主樣板檔引入，讓內容結構更清晰。

<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>

接著我們在<header>外面再多包一層.row，讓畫面更有彈性，並於<header>下方多一個區域，等會用來載入滑動圖片輪播。

<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>

七、載入滑動圖片輪播

https://bootstrap.hexschool.com/docs/4.2/components/carousel/

建立 xotpl\carousel.tpl，並於主樣板載入之

<section class="mb-4">
    <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/carousel.tpl"}>
</section>

參考說明頁面語法，貼上並利用 smarty 的 foreach 來讀取 $slider_var，分別取出<{$slider.file_url}>圖檔網址及<{$slider.text_description}>圖檔說明兩部份。

id 記得重新命名一下，如： b4_carousel，後面若要加入控制項會用到。

<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>

下方記得加入 javascript 的語法，否則是不會動作的

<script type="text/javascript">
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

若要加入上一張或下一張的控制項，按說明加入，並修改對應的 id 即可

<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>

八、讓使用者自己決定是否要使用控制項

請在my_theme底下建立config2_slide.php，即可自己新增滑動圖的額外設定
額外設定有以下檔案（該設定項目有啟用，額外設定才會有作用）：
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

額外設定可以彌補現有架構欄位之不足，提供佈景開發者一個簡易的新增欄位途徑：

<?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";

每次新增一個項目，就多一組 $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 格式，例如：
```
[
    {
        "name": "回首頁",
        "url": "{XOOPS_URL}",
        "target": "_self"
    },
    {
        "name": "最新消息",
        "url": "{XOOPS_URL}/modules/tadnews/",
        "target": "_self"
    },
    {
        "name": "電子相簿",
        "url": "{XOOPS_URL}/modules/tadgallery/",
        "target": "_self"
    }
]
```
不同type類型，會多出一些設定項目：
1. options：選項設定（radio、select、selectpicker、bg_file會用到），值為陣列，如：
```
$theme_config[$i]['options'] = ['left' => '靠左' , 'center' => '置中', 'right' => '靠右'];
```
2. repeat：底圖重複設定之預設值（僅bg_file會用到）
3. position：底圖位置設定之預設值（僅bg_file會用到）
4. size：底圖縮放設定之預設值（僅bg_file會用到）
```
$theme_config[$i]['repeat'] = "no-repeat";
$theme_config[$i]['position'] = "left top";
$theme_config[$i]['size'] = "auto";
```

九、在樣板中套用自己定義的額外設定

剛剛增加了個 show_slide_control額外設定，在樣板中可用<{$show_slide_control}>來取得該設定值。因此，我們開啟xotpl\carousel.tpl，利用它來判斷是否要顯示控制項：

<{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}>

十、讓佈景支援多國語系

在my_theme下建立language/tchinese_utf8目錄，並新增main.php，內容為：

<?php
define('SHOW_SLIDE_CONTROL', '是否顯示左右箭頭');
define('SHOW_SLIDE_CONTROL_DESC', '顯示左右箭頭可以讓使用者手動切換滑動圖');

若是需要英文語系，請建立language/english/main.php，依此類推

修改原本的config2_slide.php，把中文換成語系：

$theme_config[$i]['text'] = constant('SHOW_SLIDE_CONTROL');
$theme_config[$i]['desc'] = constant('SHOW_SLIDE_CONTROL_DESC');

constant()是PHP的內建函數之一，用來將字串轉為常數。

十一、額外設定config2.php的語系

額外設定config2.php的語系稍微不一樣，並不需要用constant()來轉換之，如：

define('SHOW_VAR', '顯示佈景變數資訊');
define('SHOW_VAR_DESC', '佈景開發時，會顯示所有 tad_themes 提供的控制變數及設定值');

建立my_theme/config2.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";

修改my_theme/theme.tpl的最下方，以便套用該設定值

<{if $show_var}>
    <div class="container my-container-width">
        <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}>
    </div>
<{/if}>