Joomla - 建立模板

在本章中，我們將學習如何在Joomla中建立模板。

建立模板

以下是Joomla中建立模板的簡單步驟：

步驟1 - 在你的Joomla → Templates資料夾內建立一個名為MyFirstTemplate的資料夾。在MyFirstTemplate資料夾內，再建立兩個名為images和CSS的資料夾，用於儲存所有圖片和CSS檔案。

步驟2 - 在MyFirstTemplate資料夾內，建立一個名為templateDetails.xml的檔案，沒有此檔案，模板將無法在Joomla中顯示。

templateDetails.xml

<?xml version = "1.0" encoding = "utf-8"?>

<extension version = "3.0" type = "template">
   <name>Tutorials Point</name>
   <creationDate>2015-06-13</creationDate>
   <author>Tutorials Point</author>
   <authorEmail>tutorials@example.com</authorEmail>
   <authorUrl>http://www.example.com </authorUrl>
   <copyright>Jack 2015</copyright>
   <license>GNU/GPL</license>
   <version>1.0.2</version>
   <description>My First Template</description>
	
   <files>
      <filename>index.php</filename>
      <filename>templateDetails.xml</filename>
      <folder>images</folder>
      <folder>css</folder>
   </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>

程式碼詳情

<files> - 它包含MyFirstTemplate資料夾中可用的檔案和資料夾。
<folder> - 它包含MyFirstTemplate資料夾中所有可用的資料夾。

步驟3 - 建立一個名為index.php的檔案。這有助於執行所有Joomla頁面。

index.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >

   <head>                                         //head section
      <jdoc:include type = "head" />
      <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type = "text/css" />
      <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type = "text/css" />
      <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
   </head>

   <body>                                          //body section
      <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' );?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >

此程式碼用於告訴瀏覽器正在使用哪種型別的html頁面，並透過描述網站中使用的語言來開始HTML文件。

<head>                                         //head section
   <jdoc:include type = "head" />
   <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type = "text/css" />
   <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type = "text/css" />
   <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type = "text/css" />
</head>

這些行用於連結Joomla模板的各種樣式表。

<body>                                          //body section
   <jdoc:include type = "modules" name = "top" />
   <jdoc:include type = "component" />
   <jdoc:include type = "modules" name = "bottom" />
</body>

此處在body部分，jdoc用於包含Joomla系統某些部分在Joomla中的輸出。name = "top"用於將選單設定在頂部。

步驟4 - 建立這兩個檔案後，登入Joomla並點選擴充套件→擴充套件管理器，將會顯示如下頁面。