4. 讓佈景可透過tad_themes來管理

一、調整顯示區的寬度

BootStrap的.container預設顯示區為1140px，扣除左右的15px實際顯示為1110px
套用內容之後會發現版面擁擠，左右可能又空太大，因此，可以自行調大。
請將各個.container後面加上.my-container-width
```
<div class="container my-container-width">
```
接著修改css/style.css，利用max-width調整想要的版面大小：
```
.my-container-width { max-width: 1430px; }
```

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

若想當畫面大時分三欄，畫面小一點時，分兩欄，手機畫面變一欄，那麼，我們可以利用斷點，搭配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>

當螢幕解析度高於1200時 xl 斷點才會起作用：
1. .col-xl-7表示中間佔7等份，左右用.col-xl代表左右均分。
2. .order-xl-1表示順序1（由上至下，由左至右），其餘依此類推
當螢幕解析度低於1200時，且高於768時，md 斷點才會起作用：
1. .col-md-12表示中間佔12等份，也就是滿版，且.order-md-1表示順序1，也就是會出現在最上面
2. 左右用.col-md-6代表左右各佔一半，且左區域.order-md-2、右區域.order-md-3會自動被擠到下方，變成兩欄的狀態。
https://bootstrap.hexschool.com/docs/4.2/layout/grid/#reordering

三、關於佈景管理模組

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

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

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

修改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 導覽工具列

開啟的大項中，還有各個小項，也可以依據需求開啟或關閉，如：
```
$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：該設定項目的預設值，沒有可留空

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

先在<head>中，引入此共同樣板檔，如此，便可抓到所有佈景變數的設定值
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes_common/get_var.tpl"}>
```
接著在下方的</body>之前加入以下這段，即可顯示所有可的佈景變數
```
<{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}>
```

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

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

主選單的所有內容會放在<{$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}>

選項陣列包含id、title、url、target、icon、img、read_group等索引，但重要的只有：
1. title：選項文字，是主要的呈現部份
2. url：連結位置，點擊選項後要連往何處

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

自訂選單的變數名稱為<{$menu_var}>
流程和主選單差不多，但自訂選單的變數多了幾個會用到的陣列索引：
1. target：_self（本視窗）、_blank（新視窗）、popup（燈箱效果）
2. icon：自定義的Fontawesome 4.7圖示
3. submenu：子選項，若有，也一樣是陣列格式，最多只有三層。

選項部份可寫成如下，並請存成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>

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

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

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

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

先載入 xotpl/opt.tpl以呈現目前選項。
接著用<{if}>判斷目前傳進來的選項有無子選項$opt.submenu
若有，就在選項下方加入<ul>以做一個子選單，然後再利用$opt.submenu跑一次迴圈，重複同樣的動作。

八、製作會員選單

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

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

其中<{$xoops_name}>為使用者真實姓名，亦可用<{$xoops_uname}>帳號
若是想讓該選項跑到右邊，可以利用CSS的浮動功能來做，例如：float:right;
但若是在手機狀態下，我們希望所有選項都在左邊，因此，可改用BootStrap4的浮動樣式來做，並加上斷點判斷，如.float-md-right就是螢幕在768px以上才會浮動到右邊的意思。
```
<li class="float-md-right">
```

下方我們可以加入會員選單，我們先利用<{$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>

接著在下方就可以利用<{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選單

當選項很多時，可以考慮改用橫向的多欄選單，用法也很簡單，只要加上.mega即可：
```
<li class="mega" data-columns=6>
```

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

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

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