線上書籍

Home

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

    <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：選項設定（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";

       

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

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