育將電腦工作室 - 線上書籍

最新xoops佈景開發
===========

### 一、安裝佈景

1. 上傳資料夾至 themes/
2. 「後台/偏好設定/系統設定/一般設定/使用者可選擇的佈景」加上佈景
3. 「後台/模組/tadtools/初始設定」：1.「否」 2.「bootstrap3 (bootstrap3-預設)」
4. 由於尚在開發狀態，如果發生錯誤，常造成畫面出現空白，而浪費許多debug的時間，所以預設佈景仍然設定其他確定可用的佈景(如：default)，打開「佈景選擇」區塊，直接在前台變更佈景。
5. ![](https://www.ugm.com.tw/uploads/tad_book3/image/10502/ntc/4/04_1.jpg)
6. 下載[預設資料](http://github.ugm.com.tw/soft/20161119/theme_20161119.zip)至 「creative」底下解壓，
7. 當選擇佈景時，chrome 出現20個錯誤，這是 css、js、img 的路徑錯誤的關係
8. ### 二、設定目前佈景名稱的樣板標籤
  
  <{$theme\_name}>
  
   <table> <tbody> <tr> <td>`1`</td> <td>`<{assign ``var``=theme_name value=$xoTheme->folderName}>`</td> </tr> </tbody> </table>
  
  $xoTheme->folderName ：物件的寫法
  
  可在後台開啟：smarty除錯，來看有那些變數可用
  
  ### 三、顯示可用變數
9. 在佈景前面加入： <table> <tbody> <tr> <td>`1`</td> <td>`<{assign ``var``=show_``var` `value=``1``}>`</td> </tr> </tbody> </table>
10. 在</body> 之前： <table> <tbody> <tr> <td>`1`</td> <td>`<{``if` `$xoops_isadmin and $show_``var``}>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`      ``<{includeq file=``"$xoops_rootpath/modules/ugm_tools/themes_common/show_var.html"``}>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`<{/``if``}>`</td> </tr> </tbody> </table>
11. ### 四、用絕對路徑取代相對路徑
12. "vendor/ => "<{xoImgUrl}>vendor/
13. "css/ => "<{xoImgUrl}>css/
14. "js/ => "<{xoImgUrl}>js/
15. "img/ => "<{xoImgUrl}>img/
16. 備註：通常要取代的單字，我習慣多選取 單字 的頭尾兩個字，以避免取代其他不想取代的單字。ctrl+H
17. 可用chrome 檢查，直到沒有錯誤為止
18. ### 五、改變 jquery 引入方式
19. <table> <tbody> <tr> <td>`1`</td> <td>``</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`<script src=``"<{xoAppUrl}>browse.php?Frameworks/jquery/jquery.js"` `type=``"text/javascript"``></script>`</td> </tr> </tbody> </table>
  
  由於有時在區塊也會引入，所以位置應該調整至上方
20. ### 六、建立佈景樣板資料夾 tpl
  
  ### 七、調整導航列
21. container-fluid -> container
22. 我們希望在模組的時候，不要出現<header>區塊，可以用<{$xoops\_dirname}> 做判斷
23. http://localhost/modules/tadnews/ -> <{$xoops\_dirname}> = tadnews
24. http://localhost/ -> <{$xoops\_dirname}> = system ，xoops預設模組為：「system」
25. <table> <tbody> <tr> <td>`1`</td> <td>`<{``if` `$xoops_dirname == ``"system"``}>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`        ``<{* 在首頁 *}>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`<{``else``}>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`4`</td> <td>`        ``<{* 在模組 *}>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`5`</td> <td>`<{/``if``}>`</td> </tr> </tbody> </table>
26. 將導航調整為黑底白字，由於在模組時背景圖已經不顯示，所以並不需要執行「affix.js」
27. 在<body>加上 class="<{$xoops\_dirname}>"
28. 調整 <table> <tbody> <tr> <td>`1`</td> <td>``</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`<script src=``"<{xoImgUrl}>js/creative.min.js"``></script>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`1`</td> <td>``</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`<script src=``"<{xoImgUrl}>js/creative.js"``></script>`</td> </tr> </tbody> </table>
29. creative.js 當加上「.system」affix 只有在首頁才會執行 <table> <tbody> <tr> <td>`1`</td> <td>`// Offset for Main Navigation`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>` ``$(``'.system #mainNav'``).affix({`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`     ``offset: {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`4`</td> <td>`         ``top: ``100`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`5`</td> <td>`     ``}`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`6`</td> <td>` ``})`</td> </tr> </tbody> </table>
30. 手動調整在模組時，執行 「affix」類別，讓導航可以反白顯示。在nav 加上 「<{if $xoops\_dirname != 'system'}>affix<{/if}>」 <table> <tbody> <tr> <td>`1`</td> <td>`<nav id=``"mainNav"` `class``=``"navbar navbar-default navbar-fixed-top <{if $xoops_dirname != 'system'}>affix<{/if}>"``>`</td> </tr> </tbody> </table>
31. 調整CSS  
   將css換成沒被壓縮的檔案 <table> <tbody> <tr> <td>`1`</td> <td>``</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`<link href=``"<{xoImgUrl}>css/creative.css"` `rel=``"stylesheet"``>`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`1`</td> <td>`.navbar-``default``.affix {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`    ``background-color: white;`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`    ``border-color: rgba(``34``, ``34``, ``34``, ``0.05``);`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`4`</td> <td>`  ``}`</td> </tr> </tbody> </table>
  
   換成 <table> <tbody> <tr> <td>`1`</td> <td>`.navbar-``default``.affix {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`    ``/*background-color: white;*/``/*ugm*/`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`    ``background: rgba(``51``, ``51``, ``51``, ``0.8``);`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`4`</td> <td>`    ``border-color: rgba(``34``, ``34``, ``34``, ``0.05``);`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`5`</td> <td>`  ``}`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`1`</td> <td>`.navbar-``default``.affix .nav > li > a,`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`  ``.navbar-``default``.affix .nav > li > a:focus {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`    ``color: #``222222``;`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`4`</td> <td>`  ``}`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`5`</td> <td>`  ``.navbar-``default``.affix .nav > li > a:hover,`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`6`</td> <td>`  ``.navbar-``default``.affix .nav > li > a:focus:hover {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`7`</td> <td>`    ``color: #F05F40;`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`8`</td> <td>`  ``}`</td> </tr> </tbody> </table>
  
   換成 <table> <tbody> <tr> <td>`1`</td> <td>`.navbar-``default``.affix .nav > li > a,`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`2`</td> <td>`  ``.navbar-``default``.affix .nav > li > a:focus {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`3`</td> <td>`    ``color: rgba(``255``,``255``,``255``,.``7``);`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`4`</td> <td>`  ``}`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`5`</td> <td>`  ``.navbar-``default``.affix .nav > li > a:hover,`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`6`</td> <td>`  ``.navbar-``default``.affix .nav > li > a:focus:hover {`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`7`</td> <td>`    ``color: white;`</td> </tr> </tbody> </table>
  
   <table> <tbody> <tr> <td>`8`</td> <td>`  ``}``/*ugm*/`</td> </tr> </tbody> </table>
32. ### 八、由資料表控制預設佈景
  
  config=> conf\_id=7 => default
  
  ![](https://www.ugm.com.tw/uploads/tad_book3/image/10502/ntc/4/02_config.jpg)

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown