【 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

【 I Love Joomla 】- Joomla!佈景製作教學

Technology

Transcript of 【 I Love Joomla 】- Joomla!佈景製作教學