線上書籍

Home

[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）

      <html lang="<{$xoops_langcode}>">

       

    2. <{$xoops_charset}>：語系編碼（charset）

      <meta charset="<{$xoops_charset}>">

       

    3. <{$xoops_sitename}>：網站名稱

    4. <{$xoops_slogan}>：網站口號

      <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}>，如：

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

    <a href="<{xoAppUrl}>"><img src="<{xoImgUrl}>images/logo.png"></a>

     

四、換成更強大的meta

  1. 將原有的<meta>全部移除，換成tadtools內建的meta.tpl

    <{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註解或刪除，改成：

    <{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來達成，例如：

    article { min-height: 450px !important; }

     

  6. !important可給予該宣告最大優先權（比行內樣式還高），但不建議濫用，有時會造成除錯困難。

六、加上給各個模組引入css或js用的區域

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

    <{$xoops_module_header}>

     

七、改成tadtools內建的js

  1. 接著js部份也一樣改用內建的，因為內建也會引入jquery、popper、bootstrap的js：

    <{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. 最後在原來的位置引入該樣板檔即可：

    <{includeq file="$xoops_rootpath/themes/my_theme/xotpl/nav.tpl"}>

     

九、將佈景名稱設為變數

  1. 做成樣板後，未來會有很多地方會用到佈景目錄名稱，萬一以後佈景改名，那得修改非常多地方，因此，可以利用assign語法將佈景名稱設為Smarty變數。

    <{assign var=my_theme value=$xoTheme->folderName}>

     

  2. 原本引入該導覽列樣板檔的語法即可把my_theme 改為$my_theme：

    <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/nav.tpl"}>

     

十、佈景的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來供套用，以便呈現一個區塊的標題和內容。

    <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：

    <{foreach from=$xoBlocks.canvas_left item=block}> <{includeq file="$xoops_rootpath/themes/$my_theme/xoTpl/block.tpl"}> <{/foreach}>

     

  2. 最後在theme.tpl中的左區域部份（順便加上id="canvas_left"），引入該樣板檔即可：

    <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，並於頁尾區引入之

    <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

    <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中間區域的樣版檔

    <!-- 上中 --> <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

    <div class="col-sm-7" id="page_center"> <{includeq file="$xoops_rootpath/themes/$my_theme/xotpl/page_center.tpl"}> </div>

     

  3. 至此，大致所有內容都已經可以顯示出來了！剩下的就是各種CSS微調囉！