主講人：飛鳥(Asika) (http://blog.asikart.com) I Love Joomla 2012.2月小聚 http://www.facebook.com/groups/lovejoomla/

1. Joomla!佈景製作教學
講 者 ： A S I K A
所 有 權 ： I
L O V E
J O O M L A
社 群
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
nameSakura
Template/name
/extension
— 例如模版名稱叫sakura，將這個xml放在 templates/
sakura 下，Joomla!中的擴充套件探索即可判讀
—

9. 設為預設佈景
— 探索並安裝完成後，我們就可以先設為預設了

10. index.php
— 最簡單的模版初始頁面：
?php
defined('_JEXEC')
or
die;?
!DOCTYPE
html
PUBLIC
-­‐/W3C//DTD
XHTML
1.0
Strict//ENhttp://www.w3.org/TR/xhtml1/
DTD/xhtml1-­‐strict.dtd
html
head
jdoc:include
type=head
/
/head
body
pThis
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檔案

15. 基本模版引擎標籤
標頭文件（head）標籤

16. 基本模版引擎標籤
MainBody元件標籤
jdoc:include
type=component
/
— 展示主要頁面內容，元件生成的畫面等。
— （只限一個）

17. 基本模版引擎標籤
MainBody元件標籤

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
可以顯示任何模組。

20. 基本模版引擎標籤
Module模組標籤

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
佈景參數

28. 製作佈景參數
— 在templateDetails.xml中新增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

31. 參數種類
— 每個項目點進去後都有參數詳細說明

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