10-2 Bootstrap 3 佈景製作

一、安裝佈景

1. 上傳資料夾至 themes/
2. 「後台/偏好設定/系統設定/一般設定/使用者可選擇的佈景」加上佈景
3. 「後台/模組/tadtools/初始設定」：1.「否」 2.「bootstrap3 (bootstrap3-預設)」
4. 下載預設資料至 「開發佈景」底下解壓，

二、設定目前佈景名稱的樣板標籤

1. <{$theme_name}>

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

   $xoTheme->folderName ：物件的寫法
   可在後台開啟：smarty除錯，來看有那些變數可用

三、顯示可用變數

1. 在佈景前面加入：

   <{assign var=show_var value=1}>

    

2. 在</body> 之前：

   
       <{if $xoops_isadmin and $show_var}>
         <{includeq file="$xoops_rootpath/modules/ugm_tools2/themes_common/show_var.tpl"}>
       <{/if}>

    

四、用絕對路徑取代相對路徑

1. 備註：通常要取代的單字，我習慣多選取 單字 的頭尾兩個字，以避免取代其他不想取代的單字。ctrl+H
2. 可用chrome  檢查，直到沒有錯誤為止

五、更換標籤

1. 置換meta

   
       <!-- Meta -->
       <meta charset="<{$xoops_charset}>">
       <meta name="keywords" content="<{$xoops_meta_keywords}>">
       <meta name="description" content="<{$xoops_meta_description}>">
       <meta name="robots" content="<{$xoops_meta_robots}>">
       <meta name="rating" content="<{$xoops_meta_rating}>">
       <meta name="author" content="<{$xoops_meta_author}>">
       <meta name="generator" content="育將電腦工室">
       

     
     <{* xoops 所需css,僅量放前面，請接在meta *}>     
     <link rel="stylesheet" type="text/css" href="<{xoImgUrl}>css/xoops.css"> 

    

2. 置換title

   
       <link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>">
   
       <title><{if $xoops_dirname == "system"}><{$xoops_sitename}><{if $xoops_pagetitle !=''}> - <{$xoops_pagetitle}><{/if}><{else}><{if $xoops_pagetitle !=''}><{$xoops_pagetitle}> - <{$xoops_sitename}><{/if}><{/if}></title>
       <{$xoops_module_header}>

    

3. 取消jquery引入
4. 將js移至「<{$xoops_module_header}>」後面

六、theme.tpl

1. 佈局

   
   
                     <{* 左、上中、上左、上右、右、內容 *}>
                     <{if $xoops_showlblock || $xoops_showrblock || $xoops_showcblock || $xoops_contents}>
                       <div class="row page-row">
                         <{includeq file="$theme_name/tpl/leftBlock.tpl"}>
                         <{includeq file="$theme_name/tpl/content-zone.tpl"}>
                         <{includeq file="$theme_name/tpl/rightBlock.tpl"}>                        
                       </div><!--//page-row-->
                     <{/if}>
                     
                     <{* 下中、下左、下右 *}>
                     <{if $xoBlocks.page_bottomcenter || $xoBlocks.page_bottomright || $xoBlocks.page_bottomleft}>
                         <div class="row page-row">
                             <{includeq file="$theme_name/tpl/bottomLeft.tpl"}>
                             <{includeq file="$theme_name/tpl/bottom-zone.tpl"}>
                             <{includeq file="$theme_name/tpl/bottomRight.tpl"}>                    
                         </div><!--//page-row-->
                     <{/if}>
   
                     <{if $xoBlocks.footer_center || $xoBlocks.footer_right || $xoBlocks.footer_left}>
                         <div class="row page-row">
                             <{includeq file="$theme_name/tpl/footerLeft.tpl"}>
                             <{includeq file="$theme_name/tpl/footerCenter.tpl"}>
                             <{includeq file="$theme_name/tpl/footerRight.tpl"}>                               
                         </div>
                     <{/if}>
                     <!-- //page-row  -->

    

七、自訂區塊內容

1. 自訂區塊

   <div style='height:30px;border: solid 1px black; '> </div>

    

2.