Joomla秘笈

關於開源CMS-Joomla的技術或相關資訊分享

客製化Joomla版型示意圖

Joomla客製化版型製作

去上了joomla自製版型的課程,和自己之前知道的整理一下當作複習,文多沒有圖。

joomla版型一定需要有的檔案如下:

  1. index.php
  2. 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

其他的下次再補充

參考資料如下:

Please enable the javascript to submit this form