線上書籍

Home

[1092] 前端技術入門

一、調整顯示區的寬度

  1. BootStrap的.container預設顯示區為1140px，扣除左右的15px實際顯示為1110px

  2. 套用內容之後會發現版面擁擠，左右可能又空太大，因此，可以自行調大。

  3. 請將各個.container後面加上.my-container-width

    <div class="container my-container-width">

  4. 接著修改css/style.css，利用max-width調整想要的版面大小：

    .my-container-width { max-width: 1430px; }

     

二、根據不同螢幕解析度，自動調整版面布局

  1. 若想當畫面大時分三欄，畫面小一點時，分兩欄，手機畫面變一欄，那麼，我們可以利用斷點，搭配order來自動調整中間區域的布局：

    <aside class="col-xl order-xl-1 col-md-6 order-md-2" id="canvas_left"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/canvas_left.tpl"}> </aside> <div class="col-xl-7 order-xl-2 col-md-12 order-md-1" id="page_center"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/page_center.tpl"}> </div> <aside class="col-xl order-xl-3 col-md-6 order-md-3" id="canvas_right"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/canvas_right.tpl"}> </aside>

     

  2. 當螢幕解析度高於1200時 xl 斷點才會起作用：

    1. .col-xl-7表示中間佔7等份，左右用.col-xl代表左右均分。

    2. .order-xl-1表示順序1（由上至下，由左至右），其餘依此類推

  3. 當螢幕解析度低於1200時，且高於768時，md 斷點才會起作用：

    1. .col-md-12表示中間佔12等份，也就是滿版，且.order-md-1表示順序1，也就是會出現在最上面

    2. 左右用.col-md-6代表左右各佔一半，且左區域.order-md-2、右區域.order-md-3會自動被擠到下方，變成兩欄的狀態。

  4. https://bootstrap.hexschool.com/docs/4.2/layout/grid/#reordering

三、關於佈景管理模組

  1. tad_themes模組可以讓使用者很輕鬆的透過瀏覽器來設定佈景

  2. 要讓佈景可以搭配tad_themes模組，必須至少要有一個config.php檔案，且樣板檔需導入get_var.tpl以取得站長填設定的值，以便將設定值套用到樣板中。

四、修改為可控佈景的流程

  1. 先產生config.php檔案（可直接從school2019複製過來）

  2. 修改config.php設定，關閉不需要的大項目（不關也沒關係，只是會變成設了也沒用）

    $config_tabs[1] = 0; //不使用tabs-1 版面基礎設定 $config_tabs[2] = 0; //不使用tabs-2 背景圖 $config_tabs[3] = 1; //使用tabs-3 滑動圖片 $config_tabs[4] = 0; //不使用tabs-4 logo圖 $config_tabs[5] = 0; //不使用tabs-5 區塊標題列 $config_tabs[6] = 0; //不使用tabs-6 導覽工具列

  3. 開啟的大項中，還有各個小項，也可以依據需求開啟或關閉，如：

    $config_enable['slide_width'] = ['enable' => '0', 'min' => '', 'max' => '', 'require' => '0', 'default' => '12']; $config_enable['slide_height'] = ['enable' => '0', 'min' => '', 'max' => '', 'require' => '0', 'default' => '0']; $config_enable['use_slide'] = ['enable' => '1', 'min' => '', 'max' => '', 'require' => '0', 'default' => '1'];

    1. enable：是否啟用該設定項目，1為啟用，0為不使用

    2. min：最小值（搭配require使用，限數字）

    3. max：最大值（搭配require使用，限數字）

    4. require：是否為必填，1為必填，0為不限

    5. default：該設定項目的預設值，沒有可留空

五、如何知道佈景變數有哪些可以使用？

  1. 先在<head>中，引入此共同樣板檔，如此，便可抓到所有佈景變數的設定值

    <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/get_var.tpl"}>

     

  2. 接著在下方的</body>之前加入以下這段，即可顯示所有可的佈景變數

    <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}>

     

六、將主選單加入導覽列中

  1. Tad Themes 偏好設定中有個「顯示主選單下拉選單」的設定項，若設為「是」，<{$auto_mainmenu}>的值將會是 1，此時，導覽列應該要能顯示主選單內容。

  2. 主選單的所有內容會放在<{$main_menu_var}>中，是一個陣列，故先用<{if}>判斷有無顯示主選單，若有才用<{foreach}>讀取主選單陣列。

    <{if $auto_mainmenu}> <li> <a href="#"><i class="fa fa-play-circle"></i> 主選單</a> <ul> <{foreach from=$main_menu_var item=opt}> <li> <a href="<{$opt.url}>"> <i class="fa fa-play-circle"></i> <{$opt.title}> </a> </li> <{/foreach}> </ul> </li> <{/if}>

     

  3. 選項陣列包含id、title、url、target、icon、img、read_group等索引，但重要的只有：

    1. title：選項文字，是主要的呈現部份

    2. url：連結位置，點擊選項後要連往何處

七、將自訂的選單加入導覽列

  1. 自訂選單的變數名稱為<{$menu_var}>

  2. 流程和主選單差不多，但自訂選單的變數多了幾個會用到的陣列索引：

    1. target：_self（本視窗）、_blank（新視窗）、popup（燈箱效果）

    2. icon：自定義的Fontawesome 4.7圖示

    3. submenu：子選項，若有，也一樣是陣列格式，最多只有三層。

  3. 選項部份可寫成如下，並請存成xotpl/opt.tpl：

    <a href="<{$opt.url}>" target="<{$opt.target}>"> <i class="fa <{if $opt.icon}><{$opt.icon}><{else}>fa-play-circle<{/if}>"></i> <{$opt.title}> </a>

  4. 接著在xotpl/nav.tpl中加入自訂選單的部份：

    <{foreach from=$menu_var item=opt}> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}> <{/foreach}>

     

  5. 由於子選單可能會有三層，若要一層一層的寫，整個樣板檔會很複雜，因此，可以做成獨立樣板，讓同一串語法可以不斷的重複被引用。

  6. 建立 xotpl/menu.tpl：

    <li> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/opt.tpl"}> <{if $opt.submenu}> <ul> <{foreach from=$opt.submenu item=opt}> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}> <{/foreach}> </ul> <{/if}> </li>

    1. 先載入 xotpl/opt.tpl以呈現目前選項。

    2. 接著用<{if}>判斷目前傳進來的選項有無子選項$opt.submenu

    3. 若有，就在選項下方加入<ul>以做一個子選單，然後再利用$opt.submenu跑一次迴圈，重複同樣的動作。

八、製作會員選單

  1. 我們可以利用<{$xoops_isuser}>來判斷目前的操作者是否有登入，若有，可以加入會員選單（以取代會員選單區塊）

    <{if $xoops_isuser}> <li> <a href="#"> <i class="fa fa-user-circle-o"></i> 歡迎：<{$xoops_name}> </a> </li> <{/if}>

     

  2. 其中<{$xoops_name}>為使用者真實姓名，亦可用<{$xoops_uname}>帳號

  3. 若是想讓該選項跑到右邊，可以利用CSS的浮動功能來做，例如：float:right;

  4. 但若是在手機狀態下，我們希望所有選項都在左邊，因此，可改用BootStrap4的浮動樣式來做，並加上斷點判斷，如.float-md-right就是螢幕在768px以上才會浮動到右邊的意思。

    <li class="float-md-right">

     

  5. 下方我們可以加入會員選單，我們先利用<{$xoops_isadmin}>來判斷該用戶是否為管理員，若是，則利用<{foreach}>迴圈讀取<{$admin_menu_var}>，並產生管理員選單。

    <ul> <{if $xoops_isadmin}> <{foreach from=$admin_menu_var item=admin_opt}> <li> <a href="<{$admin_opt.url}>"> <i class="fa <{$admin_opt.icon}>"></i> <{$admin_opt.title}> </a> </li> <{/foreach}> <{/if}> </ul>

     

  6. 接著在下方就可以利用<{foreach}>迴圈讀取<{$user_menu_var}>，並產生會員選單。

    <{foreach from=$user_menu_var item=user_opt}> <li> <a href="<{$user_opt.url}>"> <i class="fa <{$user_opt.icon}>"></i> <{$user_opt.title}> </a> </li> <{/foreach}>

     

九、改用mega選單

  1. 當選項很多時，可以考慮改用橫向的多欄選單，用法也很簡單，只要加上.mega即可：

    <li class="mega" data-columns=6>

  2. 不過加上後，會發現選單是置中的，且顏色不太對勁，因此，可以透過CSS來調整之：

    .stellarnav.desktop>ul>li.mega>ul>li>a { color: #3c583d; } .stellarnav.desktop>ul>li.mega>ul>li>a:hover { color: #fdfdf9; background: #91917a; }

     

十、修正mega選單的位置問題

  1. 修改js\stellarnav.js的347行，在 navWidth前加上-

    nav.find('li.mega > ul').css({'max-width':-navWidth});