線上書籍

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});