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.
Upcoming SlideShare
【 I Love Joomla 】Joomla & VirtueMart 整合實例分享
Next
Download to read offline and view in fullscreen.

17

Share

I Love Joomla! 佈景製作教學 0212

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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.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. 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 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. 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
  • YawenWu8

    Jun. 1, 2018
  • darren7130

    May. 17, 2017
  • ssuser95e13f

    Apr. 16, 2017
  • LinYu14

    Sep. 29, 2016
  • amyissisi

    Dec. 4, 2015
  • DavidTseng6

    May. 10, 2015
  • ChienHuaHuang

    Apr. 15, 2015
  • dt297i

    Apr. 15, 2015
  • rex20020728

    Dec. 17, 2014
  • hobbyling

    Nov. 23, 2014
  • jimmyuserslider

    Oct. 17, 2014
  • yunedo

    Oct. 16, 2014
  • chmxyz

    Mar. 28, 2014
  • wandoujian9

    Mar. 19, 2014
  • changjhihyeh

    Dec. 26, 2013
  • chuck7349

    Jul. 9, 2013
  • flamelin

    Nov. 14, 2012

Views

Total views

24,606

On Slideshare

0

From embeds

0

Number of embeds

8,767

Actions

Downloads

228

Shares

0

Comments

0

Likes

17

×