Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

I Love Joomla! 佈景製作教學 0212

24,179 views

Published on

Published in: Technology
  • Be the first to comment

I Love Joomla! 佈景製作教學 0212

  1. 1. Joomla!佈景製作教學 講者: ASIKA 所有權:I LOVE JOOMLA 社群 http://www.facebook.com/groups/lovejoomla/
  2. 2. 工欲善其事、必先利其器
  3. 3. 好用順手的程式編輯器 PsPad NotePad++ UltraPad DreamWeaver
  4. 4. 瀏覽器除錯工具 Chrome 內建開發者工具 FireFox 的 FireBUG 外掛 IE8,9 內建開發者工具
  5. 5. 新增文件檔案 Mac上推薦安裝 Document Palette可以像Windows 一樣新增各類型檔案文件。
  6. 6. Joomla!的模版結構
  7. 7. 簡易說明 Joomla!的模版皆放在:templates 資料夾下面。每個模版有一個 自己的資料夾。 一定會有一個 templateDteails.xml 用來辨別模版資訊。 還有一個 index.php 檔案 有以上兩者模版即可使用。 html是核心輸出覆蓋功能專用。 其他資料夾可以自行組織。
  8. 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!中的擴充套件探索即可 判讀
  9. 9. 設為預設佈景 探索並安裝完成後,我們就可以先設為預設了
  10. 10. index.php 最簡單的模版初始頁面:<?php defined(_JEXEC) or die;?><!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0Strict//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. 11. 執行成果
  12. 12. Joomla!模版引擎簡介
  13. 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. 14. 基本模版引擎標籤 標頭文件(head)標籤 <jdoc:include type="head" /> 載入Joomla!的<head>與全站meta資訊,只限一個。 含有title, generator, meta keyword等標籤。 載入mootools.js等等liberaries。 其他任何套件用程式插入的css或js檔案
  15. 15. 基本模版引擎標籤標頭文件(head)標籤
  16. 16. 基本模版引擎標籤 MainBody元件標籤<jdoc:include type="component" /> 展示主要頁面內容,元件生成的畫面等。 (只限一個)
  17. 17. 基本模版引擎標籤MainBody元件標籤
  18. 18. 基本模版引擎標籤 Message系統訊息標籤<jdoc:include type="message" /> 顯示登入需求、操作錯誤等等Joomla!系統訊息
  19. 19. 基本模版引擎標籤 Module模組標籤<jdoc:include type="module" name="footer" /><jdoc:include type="modules" name="position-5" /> 載入模組區塊位置。 module 只能顯示與name同名的模組。 modules 可以顯示任何模組。
  20. 20. 基本模版引擎標籤Module模組標籤
  21. 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. 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. 23. 自製chrome style 以下為xhtml模式的範例Chrome Stylefunction 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. 24. 特殊功能
  25. 25. 沒有模組時隱藏模組位置<?php if ($this->countModules( position-1 )) : ?> <jdoc:include type="modules" name="position-1" /><?php endif; ?> 用php標籤包住jdoc標籤 以$this->countModules()計算此位置的模組數量, 大於1才會顯示。 避免該位置沒有模組時出現空白或奇怪的線條
  26. 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. 27. Config 佈景參數
  28. 28. 製作佈景參數 在templateDetails.xml中新增<config>標籤
  29. 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. 30. 參數種類 可參考官方wiki formfield 欄位說明:  http://docs.joomla.org/Form_field
  31. 31. 參數種類 每個項目點進去後都有參數詳細說明
  32. 32. 範例 Text 欄位:  http://docs.joomla.org/Text_form_field_type<field name="sitetitle" type="text" label="網站標題" description="網站標題說明"/>
  33. 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. 34. 語系檔製作
  35. 35. 設定key Joomla! language key 格式:大寫並用底線相連  TPL_SAKURA_SITE_TITLE 使用時機:  當佈景參數中的label, description, option等任何會顯示 出來的字串。  當php檔案中使用 echo Jtext::_(LAGUAGE_KEY) 時
  36. 36. 範例 當templateDetails.xml中的參數這樣寫時:<field name="sitetitle" type="text" label="TPL_SAKURA_SITE_TITLE"/> 未翻譯時長這樣:
  37. 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. 38. Thank You

×