:::

3. 製作成XOOPS佈景

一、關於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. 後台「偏好設定→系統設定」中的所有項目,例如頁尾的輸入框 namefooter,那麼只要用<{$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. 佈景中原有的BootStrap4font-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. 套用完或許會發現asidearticle的最低高度被取消了,這是因為被BootStrap4的網格系統給重置了。若堅持要有最低高度,可以利用萬惡的!important來達成,例如:

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

     

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

六、加上給各個模組引入cssjs用的區域

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

    <{$xoops_module_header}>

     

七、改成tadtools內建的js

  1. 接著js部份也一樣改用內建的,因為內建也會引入jquerypopperbootstrapjs

    <{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. XOOPS2.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微調囉!


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

18人線上 (4人在瀏覽線上書籍)

會員: 0

訪客: 18

更多…