Download - 【 I Love Joomla 】- Joomla!佈景製作教學
講 者 : ASIKA
所 有 權 :I LOVE JOOMLA 社 群
Joomla!佈景製作教學�
http://www.facebook.com/groups/lovejoomla/
工欲善其事、必先利其器�
好用順手的程式編輯器�
� PsPad
� NotePad++
� UltraPad
� DreamWeaver
瀏覽器除錯工具�
� Chrome 內建開發者工具
� FireFox 的 FireBUG 外掛
� IE8,9 內建開發者工具
新增文件檔案�
� Mac上推薦安裝 Document Palette可以像Windows一樣新增各類型檔案文件。
Joomla!的模版結構�
簡易說明�
� Joomla!的模版皆放在:templates 資料夾下面。每個模版有一個自己的資料夾。
� 一定會有一個 templateDteails.xml 用來辨別模版資訊。
� 還有一個 index.php 檔案
� 有以上兩者模版即可使用。
� html是核心輸出覆蓋功能專用。 其他資料夾可以自行組織。
templateDetails.xml�
� 以下xml內容為一個模版要正常運作的最低限度需求內容。
� 例如模版名稱叫sakura,將這個xml放在 templates/sakura 下,Joomla!中的擴充套件探索即可判讀
�
<?xml version="1.0" encoding="utf-‐8"?> <extension type="template" version="2.5" client="site">
<name>Sakura Template</name> </extension>
設為預設佈景�
� 探索並安裝完成後,我們就可以先設為預設了
index.php�
� 最簡單的模版初始頁面:
� define('_JEXEC') or die 避免直接執行本php檔 � 同樣放在 template 下即可執行。
<?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>
執行成果�
�
Joomla!模版引擎簡介�
基本模版引擎標籤�
� <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" name="position-‐5" />
� 載入模組區塊位置。 � module 只能顯示與name同名的模組。 � modules 可以顯示任何模組。
基本模版引擎標籤�
Module模組標籤
模組的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時用的就是這個。
自製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" name="position-‐1" />
<?php endif; ?>
� 用php標籤包住jdoc標籤
� 以$this-‐>countModules()計算此位置的模組數量,大於1才會顯示。
� 避免該位置沒有模組時出現空白或奇怪的線條
可用的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') ; ?> [函式] 計算模組數量。
Config 佈景參數�
製作佈景參數�
� 在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="網站標題"
� 成果:
Thank You