Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
Destaque (13)
Semelhante a I Love Joomla! 佈景製作教學 0212
Semelhante a I Love Joomla! 佈景製作教學 0212 (20)
Mais de Asika Simon
I Love Joomla! 佈景製作教學 0212
- 1. Joomla!佈景製作教學 講者： ASIKA 所有權：I LOVE JOOMLA 社群 http://www.facebook.com/groups/lovejoomla/
- 2. 工欲善其事、必先利其器
- 3. 好用順手的程式編輯器 PsPad NotePad++ UltraPad DreamWeaver
- 4. 瀏覽器除錯工具 Chrome 內建開發者工具 FireFox 的 FireBUG 外掛 IE8,9 內建開發者工具
- 5. 新增文件檔案 Mac上推薦安裝 Document Palette可以像Windows 一樣新增各類型檔案文件。
- 6. Joomla!的模版結構
- 7. 簡易說明 Joomla!的模版皆放在：templates 資料夾下面。每個模版有一個 自己的資料夾。 一定會有一個 templateDteails.xml 用來辨別模版資訊。 還有一個 index.php 檔案 有以上兩者模版即可使用。 html是核心輸出覆蓋功能專用。 其他資料夾可以自行組織。
- 8. templateDetails.xml 以下xml內容為一個模版要正常運作的最低限度需求內 容。 <?xml version="1.0" encoding="utf-8"?> <extension type="template" version="2.5" client="site"> <name>Sakura Template</name> </extension> 例如模版名稱叫sakura，將這個xml放在 templates/sakura 下，Joomla!中的擴充套件探索即可 判讀
- 10. index.php 最簡單的模版初始頁面： <?php defined('_JEXEC') or die;?> <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <jdoc:include type="head" /> </head> <body> <p>This is Sakura Template by Asika</p> </body> </html> define('_JEXEC') or die 避免直接執行本php檔 同樣放在 template 下即可執行。
- 11. 執行成果
- 12. Joomla!模版引擎簡介
- 13. 基本模版引擎標籤 <jdoc:include type="head" /> <jdoc:include type="component" /> <jdoc:include type="message" /> <jdoc:include type="module" name="footer" /> <jdoc:include type="modules" name="position-5" />
- 14. 基本模版引擎標籤 標頭文件（head）標籤 <jdoc:include type="head" /> 載入Joomla!的<head>與全站meta資訊,只限一個。 含有title, generator, meta keyword等標籤。 載入mootools.js等等liberaries。 其他任何套件用程式插入的css或js檔案
- 16. 基本模版引擎標籤 MainBody元件標籤 <jdoc:include type="component" /> 展示主要頁面內容，元件生成的畫面等。 （只限一個）
- 18. 基本模版引擎標籤 Message系統訊息標籤 <jdoc:include type="message" /> 顯示登入需求、操作錯誤 等等Joomla!系統訊息
- 19. 基本模版引擎標籤 Module模組標籤 <jdoc:include type="module" name="footer" /> <jdoc:include type="modules" name="position-5" /> 載入模組區塊位置。 module 只能顯示與name同名的模組。 modules 可以顯示任何模組。
- 21. 模組的Chrome Style與attributes type="modules","module" 時可以有額外的參數。 <jdoc:include type="modules" name="position-5" style="rounded" attr="A" attr="B" /> Style類型： none : 直接顯示模組內容。 rounded : 用四個div包起來方便製作圓角。 xhtml : 用div包起來方便製作一般樣式。 table, horz : 用table表格包起來。 outline : 顯示區塊位置名稱，?tp=1時用的就是這個。
- 22. 自製chrome style 在 templates/YOUR_TEMPLATE/html 下，建立一 個新檔案 modules.php 假設我想新增一個 style="custom"，就在該文件下 新增一個 function: function modChrome_custom($modules,&$params,&$attr){} $modules : 模組物件，包含所有模組資訊。 $params : 模組參數，用 $params->get('key')取得參數。 $attr : 自定屬性，會生成陣列， $attr['attr1']=="A"。
- 23. 自製chrome style 以下為xhtml模式的範例Chrome Style function modChrome_xhtml($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class="moduletable<?php echo htmlspecialchars($params- >get('moduleclass_sfx')); ?>"> <?php if ($module->showtitle != 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif; }
- 24. 特殊功能
- 25. 沒有模組時隱藏模組位置 <?php if ($this->countModules( 'position-1' )) : ?> <jdoc:include type="modules" name="position-1" /> <?php endif; ?> 用php標籤包住jdoc標籤 以$this->countModules()計算此位置的模組數量， 大於1才會顯示。 避免該位置沒有模組時出現空白或奇怪的線條
- 26. 可用的php功能說明 使用方式 說明 [變數] <?php echo $this->baseurl ; ?> 若網站放在子目錄，將返回子目 錄名稱。（subdir/） 若放在根目錄，將返回斜線（/） <?php echo $this->template ; ?> [變數] 返回現在的模版資料夾名稱。 <?php echo $this->params->get('key') ; ?> [函式] 取得模版參數。 [函式] <?php echo $this->countMenuChildren() ; ?> 若本頁面是某個選單，計算下方 還有幾個子選單。 <?php echo $this->countModules('position') ; ?> [函式] 計算模組數量。
- 27. Config 佈景參數
- 29. 參數標籤結構 第一層：config 參數的根元素，在extension下 第二層：fields name必須為params 第三層：fieldset 可以有多個 第四層：field 一筆一筆的參數設定 <config> <fields name="params"> <fieldset name="basic"> <field name="title" type="text" label="TITLE" /> <field name="width" type="text" label="WIDTH" /> </fieldset> <fieldset name="advanced"> <field ... /> <field ... /> </fieldset> </fields> </config>
- 30. 參數種類 可參考官方wiki formfield 欄位說明: http://docs.joomla.org/Form_field
- 32. 範例 Text 欄位： http://docs.joomla.org/Text_form_field_type <field name="sitetitle" type="text" label="網站標題" description="網站標題說明" />
- 33. 範例 select list 下拉式選單欄位： http://docs.joomla.org/List_form_field_type <field name="color" type="list" label="佈景主題顏色" > <option value="nature">自然</option> <option value="personal">專業</option> </field>
- 34. 語系檔製作
- 35. 設定key Joomla! language key 格式：大寫並用底線相連 TPL_SAKURA_SITE_TITLE 使用時機： 當佈景參數中的label, description, option等任何會顯示 出來的字串。 當php檔案中使用 echo Jtext::_('LAGUAGE_KEY') 時
- 36. 範例 當templateDetails.xml中的參數這樣寫時： <field name="sitetitle" type="text" label="TPL_SAKURA_SITE_TITLE" /> 未翻譯時長這樣：
- 37. 範例 在 templates/sakura/language/zh-TW 下新增檔 案： zh-TW.tpl_sakura.ini 英文則改成 laguage/en-GB/en-GB.tpl_sakura.ini 在ini檔中加入一段字串： TPL_SAKURA_SITE_TITLE="網站標題" 成果：
- 38. Thank You