開發一個簡易的Joomla 1.5 佈景主題樣版-2

[creating basic joomla template-2]：[計畫]-[手冊]

Joomla 1.5, joomla 中文, joomla 佈景主題

開發一個簡易的佈景主題樣板-2

版面設計

首先，我們先來看一下這次我們要設計的版型，如圖所示： MyTemplate

index.php檔

前篇我們編輯了templateDetail.xml檔案，完成了整個佈景主題樣板套件包的架構定義，接下來我們開啟index.php檔，並輸入以下內容:

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
 ?>

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>
templates/system/css/system.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>
templates/system/css/general.css" type="text/css" />

<link rel="stylesheet"  href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />
<style>
   #header {background-color:#ccccff;width:990px;height:100px;}
   #TopMenu {background-color:#8ac487;widht:990px;height:50px;}
   #content {background-color:#ffe0cc;widht:990px;height:400px;}
   #footer {background-color:#8e87c4;widht:990px;height:50px;}
</style>
</head>
<body>
<center>
<h1>這是我的第一個佈景主題樣板</h1>
<div id="header">
      <jdoc:include type="module" name="header" />
</div>
<div id="TopMenu">
      <jdoc:include type="module" name="TopMenu" />
</div>
<div id="content">
      <jdoc:include type="component" />
</div>
<div id="footer">
      <jdoc:include type="module" name="footer" />
</div>
</center>
</body>

讀者可以看到<head>區塊中，我們宣告了這個頁面的CSS設定，同時包含了兩種CSS語法的設定，在這裡先不討論，往後的篇幅有說明。

Joomla1.5自訂標籤

在解釋程式碼之前，先來說明一下什麼是自訂標籤，"標籤(Tag)"我們知道，正如同一般HTML中的 p, a ,h1 ,h2 ,div, span等，這些是HTML規範裡有明確定義的，是給瀏覽器看的，而自訂標籤通常是由開發者自行決定字符所定義的標籤，如：<book>, <bird>般，目的是給伺服器端程式看的，由伺服器本身或者伺服器端的程式解析後再轉換成可讓瀏覽器看懂得一搬HTML標籤。主要的功能則是能夠進行一些邏輯計算或者化繁為簡的操作，進而將結果以HTML呈現。

各位可以看到上面的語法中，出現了如下的標籤：

<jdoc:include type="[類型]" name="[名稱]" />

這是Joomla的自訂標籤，若type屬性的值為module則表示要在這個網頁位置插入一個[模組位置]，而位置名稱就設定在name屬性中。

<jdoc:include type="component" />

這個自訂標籤表示在樣板中要放置"主要元件內容"的位置，若設定上，該頁面是使用核心元件，那麼可以顯示的即為單篇文章、分類清單、使用者個人資訊等。少了這行，整個樣板就只能放置一般的模組而失去了顯示主要內容的功能，務必小心。

The Cave

2010年3月31日星期三