Tad 教材網 - 線上書籍

:::

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

### 一、關於XOOPS佈景樣板

1. XOOPS佈景樣板支援.html以及.tpl（建議），故將佈景檔改名為`theme.tpl`
2. XOOPS用的是Smarty2.x的樣板引擎（最新為3.x）
3. 佈景只作用在前台，後台有後台專用的佈景（亦可自行設計）
4. 布景暫時切換法（登出就恢復原狀）：
 
 
 1. 至後台「偏好設定→系統設定→一般設定」，將「使用者可選擇的佈景」加入新佈景
 2. 至區塊管理，啟用「網站佈景」區塊，並置於所有頁面，以便切換。
 3. 至前台，找到「網站佈景」區塊，點選新佈景套用之，並檢查運作有無異常。
5. 正式切換佈景：後台「偏好設定→系統設定→一般設定」，將「預設佈景」設為新佈景即可。
6. 若是空網站，建議用安裝精靈，快速新增一些內容，如此比較能測試佈景的正確性。
 
### 二、XOOPS內建的樣板標籤

1. 一般都有的佈景樣板標籤：
 
 
 1. `<{$xoops_langcode}>`：語系（lang）
 
 
 ```markup
 <html lang="<{$xoops_langcode}>">
 ```
 2. `<{$xoops_charset}>`：語系編碼（charset）
 
 
 ```markup
 <meta charset="<{$xoops_charset}>">
 ```
 3. `<{$xoops_sitename}>`：網站名稱
 4. `<{$xoops_slogan}>`：網站口號
 
 
 ```markup
 <title><{$xoops_sitename}>-<{$xoops_slogan}></title>
 ```
 5. `<{$xoops_pagetitle}>`：頁面標題
 6. `<{$xoops_search}>`：是否開放搜尋
 7. `<{$xoops_theme}>`：使用佈景名稱
 8. `<{$xoops_imageurl}>`：佈景路徑
 9. `<{$xoops_themecss}>`：佈景CSS路徑
 10. `<{$xoops_requesturi}>`：執行的網址
 11. `<{$xoops_dirname}>`：XOOPS目錄
 12. `<{$xoops_banner}>`：廣告
 13. `<{$xoops_url}>`：網址
 14. `<{$xoops_rootpath}>`：實體路徑
 15. `<{$xoops_version}>`：xoops版本
 16. `<{$xoops_upload_url}>`：上傳目錄網址
2. 登入後才會有的登入者資訊：
 
 
 1. `<{$xoops_isuser}>`：是否有登入
 2. `<{$xoops_avatar}>`：使用者圖像
 3. `<{$xoops_userid}>`：使用者編號
 4. `<{$xoops_uname}>`：登入帳號
 5. `<{$xoops_name}>`：真實姓名
 6. `<{$xoops_isadmin}>`：是否為管理員
 7. `<{$xoops_usergroups}>`：使用者所屬的群組編號（陣列）
3. 後台「偏好設定→系統設定」中的所有項目，例如頁尾的輸入框 name 為 footer，那麼只要用`<{$xoops_footer}>`即可抓到頁尾內容。
 
### 三、將佈景內的素材佈景路徑

1. 佈景中一律使用絕對路徑，如`<{xoImgUrl}>`或`<{xoAppUrl}>`（注意，沒有$符號）
2. 凡是有引入佈景內的素材（css, js, images），一律在前面加上`<{xoImgUrl}>`，如：
 
 
 ```markup
 <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>
 ```
3. `<{xoImgUrl}>`屆時會被替換成「http://網址/themes/佈景名稱/」
4. 還有另一個標籤`<{xoAppUrl}>`則是會被替換成「http://網址/」，亦可用`<{$xoops_url}>```
 
 
 ```markup
 <a href="<{xoAppUrl}>"><img src="<{xoImgUrl}>images/logo.png"></a>
 ```
 
 <dl> </dl>### 四、換成更強大的meta

1. 將原有的`<meta>`全部移除，換成tadtools內建的`meta.tpl`
 
 
 ```markup
 <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/meta.tpl"}>
 ```
2. tadtools內建的`meta.tpl`更完整，也更強大，例如有支援facebook的各種og標籤
 
### 五、改成tadtools內建的css

1. 佈景中原有的BootStrap4、font-awesome其實tadtools中也都有內建，還更完整，包括會引入XOOPS需要的各種css檔，因此，我們可以先將引入的css註解或刪除，改成：
 
 
 ```markup
 <{includeq file="$xoops_rootpath/modules/tadtools/themes4_tpl/link_css.tpl"}>
 ```
2. 請將之貼到其他的css引入檔（如stellarnav.min.css導覽列）之下，如此，我們日後可以透過修改`css/style.css`來修正一些既有的css設定。
3. 由於裡面有也會自動引入佈景下的`css/style.css`，故亦可將此行註解或刪除。
4. 若佈景是用BootStrap3，則需將 `themes4_tpl`改為 `themes3_tpl`
5. 套用完或許會發現aside、article的最低高度被取消了，這是因為被BootStrap4的網格系統給重置了。若堅持要有最低高度，可以利用萬惡的`!important`來達成，例如：
 
 
 ```css
 article {
 min-height: 450px !important;
 }
 ```
6. `!important`可給予該宣告最大優先權（比行內樣式還高），但不建議濫用，有時會造成除錯困難。
 
### 六、加上給各個模組引入css或js用的區域

1. 由於模組本身也可能需要引入css檔或js檔，因此，XOOPS有個機制可以讓各個模組字型引入css或js，且一旦發現重複引入，便會自動整合成一個，以避免重複引入，引入結果會套用到`<{$xoops_module_header}>`中。故請將之放到`link_css.tpl`底下。
 
 
 ```markup
 <{$xoops_module_header}>
 ```
 
 <dl> </dl>### 七、改成tadtools內建的js

1. 接著js部份也一樣改用內建的，因為內建也會引入jquery、popper、bootstrap的js：
 
 
 ```markup
 <{includeq file="$xoops_rootpath/modules/tadtools/themes4_tpl/bootstrap_js.tpl"}>
 ```
2. 請放到`<{$xoops_module_header}>`之下，原來的那三行js就可以刪除或註解掉囉！
 
### 八、把導覽列做成獨立樣板

1. 為了保持`theme.tpl`的易讀性及彈性，可將導覽列的部份做成獨立樣板，以後還可以方便切換成不同導覽列。
2. 建立`xotpl/nav.tpl`，並將導覽列的相關語法，如外部連結的`stellarnav.min.css`檔、內部樣式`<style>`設定及`<nav class="stellarnav">`語法，還有下方的js部份都搬到該檔中。
3. 最後在原來的位置引入該樣板檔即可：
 
 
 ```markup
 <{includeq file="$xoops_rootpath/themes/my_theme/xotpl/nav.tpl"}>
 ```
 
 <dl> </dl>### 九、將佈景名稱設為變數

1. 做成樣板後，未來會有很多地方會用到佈景目錄名稱，萬一以後佈景改名，那得修改非常多地方，因此，可以利用`assign`語法將佈景名稱設為Smarty變數。
 
 
 ```markup
 <{assign var=my_theme value=$xoTheme->folderName}>
 ```
2. 原本引入該導覽列樣板檔的語法即可把`my_theme` 改為`$my_theme`：
 
 
 ```markup
 <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/nav.tpl"}>
 ```
 
 <dl> </dl>### 十、佈景的11個顯示區域

1. XOOPS呈現區塊的區域一共有11個區域，分別是：
 
 
 1. `canvas_left`（左區域）
 2. `canvas_right`（右區域）
 3. 中間區域還分為上下各三區：
 
 
 1. `page_topleft`（上中左區域）
 2. `page_topcenter`（上中區域）
 3. `page_topright`（上中右區域）
 4. `page_bottomleft`（下中左區域）
 5. `page_bottomcenter`（下中區域）
 6. `page_bottomright`（下中右區域）
 4. 頁尾區則分三區：
 
 
 1. `footer_left`（頁尾左區域）
 2. `footer_right`（頁尾右區域）
 3. `footer_center`（頁尾中區域）
 4. `footer_all`（預留，無實際作用）
2. 以上位置只是建議位置，佈景開發者其實可以任意運用這些區域，彈性擺放到版面設計中。
3. 整個網站的所有區塊是放在`<{$xoBlocks}>`中，該值為多維陣列，以左區域為例，所有左區域的區塊就是包含在`<{$xoBlocks.canvas_left}>`中
4. 每個區塊的結構其實都一樣，所以，可以先做一個共用的區塊樣板`xotpl/block.tpl`來供套用，以便呈現一個區塊的標題和內容。
 
 
 ```markup
 <div class="block">
 <div class="blockHead">
 <h3 class="blockTitle">
 <{$block.title}>
 </h3>
 </div>
 <div class="blockContent">
 <{$block.content}>
 </div>
 </div>
 ```
5. 每個區塊的完整訊息都包含在`<{$block}>`中，其中可用的項目有`id`（區塊編號）、`module`（所屬模組）、`title`（區塊標題）、`weight`（權重）、`lastmod`（最後修改日期）、`content`（區塊內容），若要顯示 區塊標題，用`<{$block.title}>`即可。
 
### 十一、導入左右區域的區塊

1. 左區域中的所有區塊是放在`<{$xoBlocks.canvas_left}>`中，因為一個區域可能會有很多個區塊，所以，我們用Smarty的迴圈將之讀出，並將之存為`xotpl/canvas_left.tpl`：
 
 
 ```markup
 <{foreach from=$xoBlocks.canvas_left item=block}>
 <{includeq file="$xoops_rootpath/themes/$my_theme/xoTpl/block.tpl"}>
 <{/foreach}>
 ```
2. 最後在`theme.tpl`中的左區域部份（順便加上`id="canvas_left"`），引入該樣板檔即可：
 
 
 ```markup
 <aside class="col-sm" id="canvas_left">
 <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/canvas_left.tpl"}>
 </aside>
 ```
3. 右邊區域請比照辦理，只要將 `canvas_left`改為 `canvas_right`即可。
 
### 十二、導入頁尾區的區塊

1. XOOPS於2.5.9起新增了三個頁尾區塊顯示區域，故佈景也需要新增此三區才行。
2. 先建立xotpl/footer.tpl，並於頁尾區引入之
 
 
 ```markup
 <footer class="col-sm">
 <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/footer.tpl"}>
 </footer>
 ```
3. 在`xotpl/footer.tpl`中用`.row>.col-sm-4*3`建立三個區域，並依序導入`$xoBlocks.footer_left`、`$xoBlocks.footer_center`、`$xoBlocks.footer_right`
 
 
 ```markup
 <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}>
 ```
4. 其中`<{$xoops_footer}>`會呈現預設的頁尾資訊（於後台「meta及頁尾」中設定）
 
### 十三、製作中間區域（含主內容區）

1. 先來製作`xotpl/page_center.tpl`中間區域的樣版檔
 
 
 ```markup
 
 <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>
 ```
2. 將中間區域改為`div#page_center`，並引入 `page_center.tpl`
 
 
 ```markup
 <div class="col-sm-7" id="page_center">
 <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/page_center.tpl"}>
 </div>
 ```
3. 至此，大致所有內容都已經可以顯示出來了！剩下的就是各種CSS微調囉！

:::