Embed Size (px)
Citation preview
講 者 ： 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
