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. 這樣整個佈景就大功告成囉！

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1538

快速登入

書籍目錄

展開 | 闔起

線上使用者

92人線上 (17人在瀏覽線上書籍)

會員: 0

訪客: 92

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者