2-2 css/style.css
3. 製作成XOOPS佈景
一、關於XOOPS佈景樣板
-
XOOPS佈景樣板支援.html以及.tpl（建議），故將佈景檔改名為
theme.tpl -
XOOPS用的是Smarty2.x的樣板引擎（最新為3.x）
-
佈景只作用在前台，後台有後台專用的佈景（亦可自行設計）
-
布景暫時切換法（登出就恢復原狀）：
-
至後台「偏好設定→系統設定→一般設定」，將「使用者可選擇的佈景」加入新佈景
-
至區塊管理，啟用「網站佈景」區塊，並置於所有頁面，以便切換。
-
至前台，找到「網站佈景」區塊，點選新佈景套用之，並檢查運作有無異常。
-
-
正式切換佈景：後台「偏好設定→系統設定→一般設定」，將「預設佈景」設為新佈景即可。
-
若是空網站，建議用安裝精靈，快速新增一些內容，如此比較能測試佈景的正確性。
二、XOOPS內建的樣板標籤
-
一般都有的佈景樣板標籤：
-
<{$xoops_langcode}>：語系（lang）<html lang="<{$xoops_langcode}>"> -
<{$xoops_charset}>：語系編碼（charset）<meta charset="<{$xoops_charset}>"> -
<{$xoops_sitename}>：網站名稱 -
<{$xoops_slogan}>：網站口號<title><{$xoops_sitename}>-<{$xoops_slogan}></title> -
<{$xoops_pagetitle}>：頁面標題 -
<{$xoops_search}>：是否開放搜尋 -
<{$xoops_theme}>：使用佈景名稱 -
<{$xoops_imageurl}>：佈景路徑 -
<{$xoops_themecss}>：佈景CSS路徑 -
<{$xoops_requesturi}>：執行的網址 -
<{$xoops_dirname}>：XOOPS目錄 -
<{$xoops_banner}>：廣告 -
<{$xoops_url}>：網址 -
<{$xoops_rootpath}>：實體路徑 -
<{$xoops_version}>：xoops版本 -
<{$xoops_upload_url}>：上傳目錄網址
-
-
登入後才會有的登入者資訊：
-
<{$xoops_isuser}>：是否有登入 -
<{$xoops_avatar}>：使用者圖像 -
<{$xoops_userid}>：使用者編號 -
<{$xoops_uname}>：登入帳號 -
<{$xoops_name}>：真實姓名 -
<{$xoops_isadmin}>：是否為管理員 -
<{$xoops_usergroups}>：使用者所屬的群組編號（陣列）
-
-
後台「偏好設定→系統設定」中的所有項目，例如頁尾的輸入框 name 為 footer，那麼只要用
<{$xoops_footer}>即可抓到頁尾內容。
三、將佈景內的素材佈景路徑
-
佈景中一律使用絕對路徑，如
<{xoImgUrl}>或<{xoAppUrl}>（注意，沒有$符號） -
凡是有引入佈景內的素材（css, js, images），一律在前面加上
<{xoImgUrl}>，如：<link rel="stylesheet" href="<{xoImgUrl}>css/style.css"> <img src="<{xoImgUrl}>images/logo.png" alt="Logo圖" > <script type="text/javascript" src="<{xoImgUrl}>js/stellarnav.js"></script> -
<{xoImgUrl}>屆時會被替換成「http://網址/themes/佈景名稱/」 -
還有另一個標籤
<{xoAppUrl}>則是會被替換成「http://網址/」，亦可用<{$xoops_url}><a href="<{xoAppUrl}>"><img src="<{xoImgUrl}>images/logo.png"></a>
四、換成更強大的meta
-
將原有的
<meta>全部移除，換成tadtools內建的meta.tpl<{includeq file="$xoops_rootpath/modules/tadtools/themes_common/meta.tpl"}> -
tadtools內建的
meta.tpl更完整，也更強大，例如有支援facebook的各種og標籤
五、改成tadtools內建的css
-
佈景中原有的BootStrap4、font-awesome其實tadtools中也都有內建，還更完整，包括會引入XOOPS需要的各種css檔，因此，我們可以先將引入的css註解或刪除，改成：
<{includeq file="$xoops_rootpath/modules/tadtools/themes4_tpl/link_css.tpl"}> -
請將之貼到其他的css引入檔（如stellarnav.min.css導覽列）之下，如此，我們日後可以透過修改
css/style.css來修正一些既有的css設定。 -
由於裡面有也會自動引入佈景下的
css/style.css，故亦可將此行註解或刪除。 -
若佈景是用BootStrap3，則需將
themes4_tpl改為themes3_tpl -
套用完或許會發現aside、article的最低高度被取消了，這是因為被BootStrap4的網格系統給重置了。若堅持要有最低高度，可以利用萬惡的
!important來達成，例如：article { min-height: 450px !important; } -
!important可給予該宣告最大優先權（比行內樣式還高），但不建議濫用，有時會造成除錯困難。
六、加上給各個模組引入css或js用的區域
-
由於模組本身也可能需要引入css檔或js檔，因此，XOOPS有個機制可以讓各個模組字型引入css或js，且一旦發現重複引入，便會自動整合成一個，以避免重複引入，引入結果會套用到
<{$xoops_module_header}>中。故請將之放到link_css.tpl底下。<{$xoops_module_header}>
七、改成tadtools內建的js
-
接著js部份也一樣改用內建的，因為內建也會引入jquery、popper、bootstrap的js：
<{includeq file="$xoops_rootpath/modules/tadtools/themes4_tpl/bootstrap_js.tpl"}> -
請放到
<{$xoops_module_header}>之下，原來的那三行js就可以刪除或註解掉囉！
八、把導覽列做成獨立樣板
-
為了保持
theme.tpl的易讀性及彈性，可將導覽列的部份做成獨立樣板，以後還可以方便切換成不同導覽列。 -
建立
xotpl/nav.tpl，並將導覽列的相關語法，如外部連結的stellarnav.min.css檔、內部樣式<style>設定及<nav class="stellarnav">語法，還有下方的js部份都搬到該檔中。 -
最後在原來的位置引入該樣板檔即可：
<{includeq file="$xoops_rootpath/themes/my_theme/xotpl/nav.tpl"}>
九、將佈景名稱設為變數
-
做成樣板後，未來會有很多地方會用到佈景目錄名稱，萬一以後佈景改名，那得修改非常多地方，因此，可以利用
assign語法將佈景名稱設為Smarty變數。<{assign var=my_theme value=$xoTheme->folderName}> -
原本引入該導覽列樣板檔的語法即可把
my_theme改為$my_theme：<{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/nav.tpl"}>
十、佈景的11個顯示區域
-
XOOPS呈現區塊的區域一共有11個區域，分別是：
-
canvas_left（左區域） -
canvas_right（右區域） -
中間區域還分為上下各三區：
-
page_topleft（上中左區域） -
page_topcenter（上中區域） -
page_topright（上中右區域） -
page_bottomleft（下中左區域） -
page_bottomcenter（下中區域） -
page_bottomright（下中右區域）
-
-
頁尾區則分三區：
-
footer_left（頁尾左區域） -
footer_right（頁尾右區域） -
footer_center（頁尾中區域） -
footer_all（預留，無實際作用）
-
-
-
以上位置只是建議位置，佈景開發者其實可以任意運用這些區域，彈性擺放到版面設計中。
-
整個網站的所有區塊是放在
<{$xoBlocks}>中，該值為多維陣列，以左區域為例，所有左區域的區塊就是包含在<{$xoBlocks.canvas_left}>中 -
每個區塊的結構其實都一樣，所以，可以先做一個共用的區塊樣板
xotpl/block.tpl來供套用，以便呈現一個區塊的標題和內容。<div class="block"> <div class="blockHead"> <h3 class="blockTitle"> <{$block.title}> </h3> </div> <div class="blockContent"> <{$block.content}> </div> </div> -
每個區塊的完整訊息都包含在
<{$block}>中，其中可用的項目有id（區塊編號）、module（所屬模組）、title（區塊標題）、weight（權重）、lastmod（最後修改日期）、content（區塊內容），若要顯示 區塊標題，用<{$block.title}>即可。
十一、導入左右區域的區塊
-
左區域中的所有區塊是放在
<{$xoBlocks.canvas_left}>中，因為一個區域可能會有很多個區塊，所以，我們用Smarty的迴圈將之讀出，並將之存為xotpl/canvas_left.tpl：<{foreach from=$xoBlocks.canvas_left item=block}> <{includeq file="$xoops_rootpath/themes/$my_theme/xoTpl/block.tpl"}> <{/foreach}> -
最後在
theme.tpl中的左區域部份（順便加上id="canvas_left"），引入該樣板檔即可：<aside class="col-sm" id="canvas_left"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/canvas_left.tpl"}> </aside> -
右邊區域請比照辦理，只要將
canvas_left改為canvas_right即可。
十二、導入頁尾區的區塊
-
XOOPS於2.5.9起新增了三個頁尾區塊顯示區域，故佈景也需要新增此三區才行。
-
先建立xotpl/footer.tpl，並於頁尾區引入之
<footer class="col-sm"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/footer.tpl"}> </footer> -
在
xotpl/footer.tpl中用.row>.col-sm-4*3建立三個區域，並依序導入$xoBlocks.footer_left、$xoBlocks.footer_center、$xoBlocks.footer_right<div class="row"> <div class="col-sm-4">跑 $xoBlocks.footer_ left 迴圈</div> <div class="col-sm-4">跑 $xoBlocks.footer_center 迴圈</div> <div class="col-sm-4">跑 $xoBlocks.footer_right 迴圈</div> </div> <{$xoops_footer}> -
其中
<{$xoops_footer}>會呈現預設的頁尾資訊（於後台「meta及頁尾」中設定）
十三、製作中間區域（含主內容區）
-
先來製作
xotpl/page_center.tpl中間區域的樣版檔<!-- 上中 --> <div id="page_topcenter"> 跑 $xoBlocks.page_topcenter 迴圈 </div> <!-- 上中左、右 --> <section class="row"> <div class="col-sm-6"> <div id="page_topleft">跑 $xoBlocks.page_topleft 迴圈</div> </div> <div class="col-sm-6"> <div id="page_topright">跑 $xoBlocks.page_topright 迴圈</div> </div> </section> <!-- 主內容區 --> <article id="xoops_contents"> <{$xoops_contents}> </article> <!-- 下中左、右 --> <section class="row"> <div class="col-sm-6"> <div id="page_bottomleft">跑 $xoBlocks.page_bottomleft 迴圈</div> </div> <div class="col-sm-6"> <div id="page_bottomright">跑 $xoBlocks.page_bottomright 迴圈</div> </div> </section> <!-- 下中 --> <section id="page_bottomcenter"> 跑 $xoBlocks.page_bottomcenter 迴圈 </section> -
將中間區域改為
div#page_center，並引入page_center.tpl<div class="col-sm-7" id="page_center"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/page_center.tpl"}> </div> -
至此，大致所有內容都已經可以顯示出來了！剩下的就是各種CSS微調囉！
