狠狠撸

闯辞辞尘濒补!佈景製作教学

講者： A S I K A
?

?
所有權： I
? L O V E
? J O O M L A
? 社群
?

http://www.facebook.com/groups/lovejoomla/

工欲善其事、必先利其器

好用順手的程式編輯器

—?? PsPad
?

—?? NotePad++
?

—?? UltraPad
?

—?? DreamWeaver

瀏覽器除錯工具

—?? Chrome 內建開發者工具

—?? FireFox 的 FireBUG 外掛

—?? IE8,9 內建開發者工具

新增文件檔案

—?? Mac上推薦安裝 Document
?Palette可以像Windows
一樣新增各類型檔案文件。

闯辞辞尘濒补!的模版结构

簡易說明

—?? Joomla!的模版皆放在：templates
?資料夾下面。每個模版有一個
自己的資料夾。
?

—?? 一定會有一個
?
templateDteails.xml
?
用來辨別模版資訊。
?

—?? 還有一個 index.php
?檔案
?

?
—?? 有以上兩者模版即可使用。
?

—?? html是核心輸出覆蓋功能專用。
?
其他資料夾可以自行組織。

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!中的擴充套件探索即可判讀
?

—??
?
?

設為預設佈景

—?? 探索並安裝完成後，我們就可以先設為預設了
?

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
?下即可執行。

闯辞辞尘濒补!模版引擎介绍

基本模版引擎标籤

—?? 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
?/
?


標頭文件（head）標籤
?

jdoc:include
?type=head
?/
?

—?? 載入Joomla!的head與全站meta資訊,只限一個。
?
—?? 含有title,
?generator,
?meta
?keyword等標籤。
?
—?? 載入mootools.js等等liberaries。
?
—?? 其他任何套件用程式插入的css或js檔案


標頭文件（head）標籤
?


MainBody元件標籤
?

jdoc:include
?type=component
?/
?

—?? 展示主要頁面內容，元件生成的畫面等。
?
—?? （只限一個）


MainBody元件標籤
?


Message系統訊息標籤
?

jdoc:include
?type=message
?/
?

—?? 顯示登入需求、操作錯誤
?
等等Joomla!系統訊息


Module模組標籤
?

jdoc:include
?type=module
?name=footer
?/
?
jdoc:include
?type=modules
?/
?

—?? 載入模組區塊位置。
?
—?? module
?只能顯示與name同名的模組。
?
—?? modules
?可以顯示任何模組。


Module模組標籤
?

模組的Chrome
?Style與attributes

—?? type=modules,module
?時可以有額外的參數。
?
?
—?? jdoc:include
?type=modules
?
style=rounded
?attr=A
?attr=B
?/
?

—?? Style類型：
?
??? none
?:
?
?直接顯示模組內容。
?
??? rounded
?:
?用四個div包起來方便製作圓角。
?
??? xhtml
?:
?
?用div包起來方便製作一般樣式。
?
??? table,
?horz
?:
?用table表格包起來。
?

??? outline
?:
?顯示區塊位置名稱，?tp=1時用的就是這個。
?

自製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。
?

自製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;
?
}

沒有模組時隱藏模組位置

?php
?if
?($this-?‐countModules(
?'position-?‐1'
?))
?:
??
?

?jdoc:include
?type=modules
?/
?
?php
?endif;
??
?

—?? 用php標籤包住jdoc標籤
?

—?? 以$this-?‐countModules()計算此位置的模組數量，
大於1才會顯示。
?

—?? 避免該位置沒有模組時出現空白或奇怪的線條
?

可用的辫丑辫功能说明

使用方式
說明

[變數]
若網站放在子目錄，將返回子目
?php
?echo
?$this-?‐baseurl
?;
??
錄名稱。（subdir/）
若放在根目錄，將返回斜線（/）

[變數]
?php
?echo
?$this-?‐template
?;
??
返回現在的模版資料夾名稱。

?php
?echo
?$this-?‐params-?‐get('key')
?;
??
[函式] 取得模版參數。

[函式]
?php
?echo
?$this-?‐countMenuChildren()
?;
??
若本頁面是某個選單，計算下方
還有幾個子選單。

?php
?echo
?$this-?‐countModules('position')
?;
??
[函式] 計算模組數量。

製作佈景參數

—?? 在templateDetails.xml中新增config標籤

參數標籤結構

—?? 第一層：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

參數種類

—?? 可參考官方wiki
?formfield 欄位說明:
?
??? http://docs.joomla.org/Form_field
?

?參數種類

—?? 每個項目點進去後都有參數詳細說明
?

範例

—?? Text
?欄位：
?
??? http://docs.joomla.org/Text_form_field_type
?
?

field
?name=sitetitle
?
?
?

?type=text
?
?
?

?label=網站標題
?
?

?description=網站標題說明
?
?
/

範例

—?? 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
?

?

?

設定key

—?? Joomla!
?language
?key
?格式：大寫並用底線相連
?
??? TPL_SAKURA_SITE_TITLE
?

—?? 使用時機：
?
??? 當佈景參數中的label,
?description,
?option等任何會顯示
出來的字串。
?

??? 當php檔案中使用 echo
?Jtext::_('LAGUAGE_KEY')
?時
?

範例

—?? 當templateDetails.xml中的參數這樣寫時：
?

field
?name=sitetitle
?
?
?

?type=text
?
?
?

?label=TPL_SAKURA_SITE_TITLE
?
?
/

—?? 未翻譯時長這樣：

範例

—?? 在 templates/sakura/language/zh-?‐TW
?下新增檔
案： zh-?‐TW.tpl_sakura.ini
?
??? 英文則改成 laguage/en-?‐GB/en-?‐GB.tpl_sakura.ini
?

—?? 在ini檔中加入一段字串：
?
??? TPL_SAKURA_SITE_TITLE=網站標題
?

—?? 成果：
?

狠狠撸

【 I Love Joomla 】- 闯辞辞尘濒补!佈景製作教学

More Related Content

What's hot (11)

Similar to 【 I Love Joomla 】- 闯辞辞尘濒补!佈景製作教学 (20)

More from ilovejoomla (8)

【 I Love Joomla 】- 闯辞辞尘濒补!佈景製作教学