Tad 教材網 - 線上書籍

:::

\[1092\] 前端技術入門
===============

### 一、調整顯示區的寬度

1. BootStrap的`.container`預設顯示區為1140px，扣除左右的15px實際顯示為1110px
2. 套用內容之後會發現版面擁擠，左右可能又空太大，因此，可以自行調大。
3. 請將各個`.container`後面加上`.my-container-width`
 
 
 ```markup
 <div class="container my-container-width">
 ```
4. 接著修改`css/style.css`，利用`max-width`調整想要的版面大小：
 
 
 ```css
 .my-container-width { max-width: 1430px; }
 ```
 
 <dl> </dl>### 二、根據不同螢幕解析度，自動調整版面布局

1. 若想當畫面大時分三欄，畫面小一點時，分兩欄，手機畫面變一欄，那麼，我們可以利用斷點，搭配order來自動調整中間區域的布局：
 
 
 ```markup
 <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`設定，關閉不需要的大項目（不關也沒關係，只是會變成設了也沒用）
 
 
 ```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. 開啟的大項中，還有各個小項，也可以依據需求開啟或關閉，如：
 
 
 ```php
 $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>`中，引入此共同樣板檔，如此，便可抓到所有佈景變數的設定值
 
 
 ```markup
 <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/get_var.tpl"}>
 ```
2. 接著在下方的`</body>`之前加入以下這段，即可顯示所有可的佈景變數
 
 
 ```markup
 <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}>
 ```
 
 <dl> </dl>### 六、將主選單加入導覽列中

1. Tad Themes 偏好設定中有個「顯示主選單下拉選單」的設定項，若設為「是」，`<{$auto_mainmenu}>`的值將會是 1，此時，導覽列應該要能顯示主選單內容。
2. 主選單的所有內容會放在`<{$main_menu_var}>`中，是一個陣列，故先用`<{if}>`判斷有無顯示主選單，若有才用`<{foreach}>`讀取主選單陣列。
 
 
 ```markup
 <{if $auto_mainmenu}>
 <li>
 <a href="#"> 主選單</a>
 <ul>
 <{foreach from=$main_menu_var item=opt}>
 <li>
 <a href="<{$opt.url}>">
 <{$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`：
 
 
 ```markup
 <a href="<{$opt.url}>" target="<{$opt.target}>">
 <{$opt.icon}><{else}>fa-play-circle<{/if}>">
 <{$opt.title}>
 </a>
 ```
4. 接著在`xotpl/nav.tpl`中加入自訂選單的部份：
 
 
 ```markup
 <{foreach from=$menu_var item=opt}>
 <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/menu.tpl"}>
 <{/foreach}>
 ```
5. 由於子選單可能會有三層，若要一層一層的寫，整個樣板檔會很複雜，因此，可以做成獨立樣板，讓同一串語法可以不斷的重複被引用。
6. 建立 `xotpl/menu.tpl`：
 
 
 ```markup
 <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}>`來判斷目前的操作者是否有登入，若有，可以加入會員選單（以取代會員選單區塊）
 
 
 ```markup
 <{if $xoops_isuser}>
 <li>
 <a href="#">
 
 歡迎：<{$xoops_name}>
 </a>
 </li>
 <{/if}>
 ```
2. 其中`<{$xoops_name}>`為使用者真實姓名，亦可用`<{$xoops_uname}>`帳號
3. 若是想讓該選項跑到右邊，可以利用CSS的浮動功能來做，例如：`float:right;`
4. 但若是在手機狀態下，我們希望所有選項都在左邊，因此，可改用BootStrap4的浮動樣式來做，並加上斷點判斷，如`.float-md-right`就是螢幕在768px以上才會浮動到右邊的意思。
 
 
 ```markup
 <li class="float-md-right">
 ```
5. 下方我們可以加入會員選單，我們先利用`<{$xoops_isadmin}>`來判斷該用戶是否為管理員，若是，則利用`<{foreach}>`迴圈讀取`<{$admin_menu_var}>`，並產生管理員選單。
 
 
 ```markup
 <ul>
 <{if $xoops_isadmin}>
 <{foreach from=$admin_menu_var item=admin_opt}>
 <li>
 <a href="<{$admin_opt.url}>">
 "> <{$admin_opt.title}>
 </a>
 </li>
 <{/foreach}>
 <{/if}>
 </ul>
 ```
6. 接著在下方就可以利用`<{foreach}>`迴圈讀取`<{$user_menu_var}>`，並產生會員選單。
 
 
 ```markup
 <{foreach from=$user_menu_var item=user_opt}>
 <li>
 <a href="<{$user_opt.url}>">
 "> <{$user_opt.title}>
 </a>
 </li>
 <{/foreach}>
 ```
 
 <dl> </dl>### 九、改用mega選單

1. 當選項很多時，可以考慮改用橫向的多欄選單，用法也很簡單，只要加上`.mega`即可：
 
 
 ```markup
 <li class="mega" data-columns=6>
 ```
2. 不過加上後，會發現選單是置中的，且顏色不太對勁，因此，可以透過CSS來調整之：
 
 
 ```css
 .stellarnav.desktop>ul>li.mega>ul>li>a {
 color: #3c583d;
 }
 
 .stellarnav.desktop>ul>li.mega>ul>li>a:hover {
 color: #fdfdf9;
 background: #91917a;
 }
 ```
 
 <dl> </dl>### 十、修正mega選單的位置問題

1. 修改`js\stellarnav.js`的347行，在 `navWidth`前加上-
 
 
 ```javascript
 nav.find('li.mega > ul').css({'max-width':-navWidth});
 ```
 
 <dl> </dl></body>

:::