Tad 教材網 - 線上書籍

:::

四小時佈景開發
=======

### 一、修改原頁首部份

1. 先將<body>之前的所有語法剪下，貼到新頁，然後刪除多餘或重複語法，只留下 CSS 或 JavaScript 的部份。
2. 若引入的是 bootstript的CSS檔或 jquery.js檔，也可刪除之，因為預設檔頭裡面已經有載入，無須重複載入。
3. 修正路徑，凡是有引入檔案的如圖片、 javascript 或CSS或各式檔案，找到「相對路徑/xxx檔」（只要不是http://開頭的）請將之改為「**<span style="color:#FF0000;"><{xoImgUrl</span>** 目錄/相對路徑/xxx檔**<span style="color:#FF0000;">}></span>**」 
    - <{xoImgUrl}> 代表當前佈景目錄的絕對位置，後面不需要加上 /。
    - 如：<link href="scripts/icons/general/stylesheets/general\_foundicons.css" media="screen" rel="stylesheet" type="text/css" />改為 <link href="**<span style="color:#FF0000;"><{xoImgUrl</span>** scripts/icons/general/stylesheets/general\_foundicons.css**<span style="color:#FF0000;">}></span>**" media="screen" rel="stylesheet" type="text/css" />  
         ![](http://www.tad0616.net/uploads/tad_book3/image/4h_theme/x181.png)
 
### 二、用共同樣板取代原頁首

1. 共同樣板已經將XOOPS所需要引入的檔案及相關設定都處理好了，您所需要的就是微調之而已（例如把原樣板的CSS設定及JavaScript語法整合進去即可）
2. 接著開啟「加入頁首.txt」，將裡面的語法，貼至<body>之前： ```
    
    
    <html lang="<{$xoops_langcode}>">
      <head>
        
        <{assign var=theme_name value=$xoTheme->folderName}>
    
        
        <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/get_var.html"}>
        
        <meta charset="<{$xoops_charset}>">
        
        <meta name="robots" content="<{$xoops_meta_robots}>" />
        
        <meta name="keywords" content="<{$xoops_meta_keywords}>" />
        
        <meta name="description" content="<{$xoops_meta_description}>" />
        
        <meta name="rating" content="<{$xoops_meta_rating}>" />
        
        <meta name="author" content="<{$xoops_meta_author}>" />
        
        <meta name="copyright" content="<{$xoops_meta_copyright}>" />
        
        <meta name="generator" content="XOOPS" />
    
        
        <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
    
        
        <link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>" />
    
        
        <link rel="shortcut icon" type="image/ico" href="<{xoImgUrl icons/favicon.ico}>" />
        <link rel="icon" type="image/png" href="<{xoImgUrl icons/favicon.png}>" />
    
        
        
        <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoAppUrl xoops.css}>" />
        
        <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl css/xoops.css}>" />
        
        <link href="<{xoAppUrl modules/tadtools/bootstrap/css/bootstrap.css}>" rel="stylesheet" media="screen">
        
        <link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl css/style.css}>" />
    
        
        <{$xoops_module_header}>
    
        
        <style type="text/css">
          body{
            font-family:<{$font_family}>;
          }
          <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/theme_css_blocks.html"}>
          
        </style>
    
        
        <script type='text/javascript'>
          if(typeof jQuery == 'undefined') {
          document.write("<script type='text/javascript' src='<{xoAppUrl modules/tadtools/jquery/jquery.js}>'><\/script>");
          }
        </script>
      </head>
    ```
3. 請檢查 <span style="color:#0000CD;"> </span>下的那一行佈景CSS主樣式檔是否存在，若並不存在可刪除之。
4. 將剛剛整理好的語法複製，並貼到 <span style="color:#0000CD;"> </span>下方並儲存，此時，theme.html的頁首部份已經搞定。
 
### 三、修改內容及頁尾

1. 開啟「加入內容及頁尾.TXT」，找到【版型及內容】，複製語法，找到之前自己寫的「<span style="color:#800080;">這裡是主內容區</span>」部份，貼上取代之。至此，佈景已經可以呈現區塊及主內容，並可切換各種版型。 ```
    
    <div class="contentArea">
    
        <div class="divPanel notop page-content">
    
            <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/$theme_type.html"}>
    
            <div id="footerInnerSeparator"></div>
        </div>
    </div>
    ```
2. 接著陸續加上【頁尾】以及【佈景變數及必要的語法】（加至</body>前）。其中 jquery.js 以及 bootstrap.js 共同樣板都會載入，故可先刪除之，  
     ![](http://www.tad0616.net/uploads/tad_book3/image/4h_theme/x182.png)
3. 接著貼上【佈景變數及必要的語法】，唯一留下的一行，一樣利用<{xoAppUrl}>或<{xoImgUrl}>重設其路徑。  
     ![](http://www.tad0616.net/uploads/tad_book3/image/4h_theme/x183.png)
 
### 四、修改導覽列

1. 找到導覽列，貼上預設導覽列共同樣板（日後可改） ```
    
    <div id="divMenuRight" class="pull-right">
        <{includeq file="$xoops_rootpath/modules/tadtools/themes_tpl/navbar.html"}>
    </div>
    ```
2. 搜尋一下「theme\_css\_navbar.html」，將該行註解拿掉，如此，使用者才能從後台直接設定下拉選單的樣式。  
     ![](http://www.tad0616.net/uploads/tad_book3/image/4h_theme/x184.png)

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1055

快速登入

書籍目錄

展開 | 闔起

線上使用者

72人線上 (29人在瀏覽線上書籍)

會員: 0

訪客: 72

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者