:::

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

一、關於自訂樣板

  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. 接著將主要顯示區的部份清空,並載入內建的登入界面即可。

    <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
    xoops_loadLanguage('theme_common', 'tadtools');

     

三、釘住工具列

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

  2. 下載後解壓,並將 ai 檔轉為 svg https://convertio.co/zh/ai-svg/

  3. 利用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語法

  1. 將這些圖片利用背景語法,依照各圖片特性,將之組合起來

    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的高度,以達視覺的最佳效果。

    header {
      min-height: 300px;
    }

     

  4. 可調整各區域底色為半透明,如:

    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,如此,讓主樣板檔引入,讓內容結構更清晰。

    <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>下方多一個區域,等會用來載入滑動圖片輪播。

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

     

七、載入滑動圖片輪播

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

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

    <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,後面若要加入控制項會用到。

    <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 的語法,否則是不會動作的

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

     

  6. 若要加入上一張或下一張的控制項,按說明加入,並修改對應的 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>

     

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

  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
    $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 格式,例如:

      [
          {
              "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:選項設定(radioselectselectpickerbg_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";

       

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

  1. 剛剛增加了個 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}>

     

十、讓佈景支援多國語系

  1. my_theme下建立language/tchinese_utf8目錄,並新增main.php,內容為:

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

     

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

  3. 修改原本的config2_slide.php,把中文換成語系:

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

     

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

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

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

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

     

  2. 建立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";

     

  3. 修改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}>

     

  4. 這樣整個佈景就大功告成囉!


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

19人線上 (7人在瀏覽線上書籍)

會員: 0

訪客: 19

更多…