去上了joomla自製版型的課程，和自己之前知道的整理一下當作複習，文多沒有圖。
joomla版型一定需要有的檔案如下：
- index.php
- templateDetails.xml
有這兩個檔案版型就可以運作
但通常版型的架構會像下面這樣
templatename
├css(資料夾，裡面放用到的css檔)
├html(資料夾，裡面放要覆蓋元件、模組外觀的php)
├images(資料夾，裡面放用到的圖檔)
├javascript(資料夾，裡面放用到的js)
├index.html(通常裡面會指有很簡單的內容，避免資料夾結構被看光)
├index.php(一定要有的文件，版型的主要架構)
├template_preview.png(在後台佈景主題管理的預覽圖)
├template_thumbnail.png(在後台佈景主題管理的預覽圖)
└templateDetails.xml(一定要有的文件，記載版型的基本資訊，包含名稱、作者..內含檔案、模組位置等訊息)
joomla 版面重要觀念
joomla的版面是由一個元件+若干個模組所組成。
templateDetails.xml說明
最基本需要的內容如下
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>tellustemplate</name>
</extension>
常見會包含以下內容
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>tellustemplate</name>
<creationDate>2013-12-26</creationDate>
<author>Jackie</author>
<authorEmail>Email住址會使用灌水程式保護機制。你需要啟動Javascript才能觀看它</authorEmail>
<authorUrl>http://www.tellustek.com</authorUrl>
<copyright>Jackie 2013</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>佈景主題描述</description>
<files>
<folder>images</folder>
<folder>css</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</extension>
上面的部分就是基本的版型訊息，例如版型名稱、作者、日期、mail、授權、版本、描述
<files></files>標籤包起來的則是版型的檔案結構
- 資料夾要用<folder></folder>標籤包起來
- 檔案則是<filename></filename>標籤包起來
<positions></positions>包起來的則是在後台模組設定的時候，可以選的模組位置
index.php說明：
就是版型的主要架構，可以先按照做一般靜態頁面的方法，做成靜態的html，之後再把對應的位置修改成對應的jooma的語法，基本的index.php通常會有以下內容
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/tellustemplate/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
- <?php defined( '_JEXEC' ) or die( 'Restricted access' );?>是為了避免直接執行這個PHP檔
- <!DOCTYPE html>這邊就根據自己的需求去寫
- 有注意到有很多jdoc:include嗎?那些是joomla版型標籤，接著往下說明
joomla 版型標籤說明
joomla的版型標籤有以下幾個大類型
- <jdoc:include type="head" />
- <jdoc:include type="message" />
- <jdoc:include type="component" />
- <jdoc:include type="module" name="breadcrumbs" title="Breadcrumbs" />
- <jdoc:include type="modules" name="debug" />
<jdoc:include type="head" />
這個會引入joomla預設的head，這個會引入joomla的head，把全站的meta keyword 、meta desc、網站title、generator、需要載入的css、js liberaries 都一起載入，還有其他元件、plugin引入的js、css檔都會在這邊
<jdoc:include type="message" />
一些系統訊息例如：登入錯誤、註冊成功之類的系統訊息就會出現在這個位置
<jdoc:include type="component" />
元件的內容會出現在這裡，一個版型只能有一個。***很重要三顆星
<jdoc:include type="module" name="breadcrumbs" title="Breadcrumbs" />
<jdoc:include type="modules" name="position-1" />
這兩個一起講
type是module沒有s的：只會顯示模組類型和name一樣的模組，如果有設定title的屬性的話，則模組名稱也要一樣(大小寫有區別)。
type是modules：可以顯示各式各樣的模組，只要模組設定中的位置寫著是這裡的name即可。
官方文件說明網址：Jdoc statements
type是module和modules可以有其他的參數，例如下面這樣
<jdoc:include type="modules" name="user1" style="rounded" />
其中style有幾個內建的類型
- rounded：會用四個div包起來方便做圓角，不過現在用CSS3就很方便了，不過如果IE8以下也要圓角的話還是乖乖用...
- none：沒有任何附加其他標籤。
- table：用table標籤包起模組內容。
- horz：用兩層table標籤包起模組內容。
- xhtml：用一個div標籤包起模組內容。
- outline：會出現像?tp=1的樣式
直接看官方的連結比較清楚：Module chrome
其他的下次再補充
參考資料如下：
- 官方文件：
- Creating a basic Joomla! template(建立基本joomla版型)
- Jdoc statements(jdoc的類型)
- Module chrome(jdoc中module、modules的style屬性就叫做module chrome)
- Applying custom module chrome(如何自製module chrome)
- 飛鳥寫的教學：
- Joomla!佈景製作教學(投影片後半有很精采的特殊功能，一定要看!!)