Joomla 1.5 模板解构
作者：我就是个世界
发表于：2009-08-16
Joomla1.5 的模板引擎比起Joomla 1.X时代有相当大的进步，在Joomla1.5中允许设计者为模板定制可选参数，这些参数对应不同的选项，例如修改模板背景颜色、字号大小、宽度… 。用户可以在管理后台的模板管理里修改，参数值保存在模板根目录下的“params.ini”文件里。
重写代码功能也非常不错，这个新的功能提高了Joomla 模板的可访问性，他允许设计者重写Joomla核心组件与模块的HTML代码，在以前Joomla的组件与模块应用了大量的表格，做为一个现代网站，网页布局中已经很少使用表格了，我们通过这个重写代码的功能，可以去掉所有Joomla组件与模块中的表格。
Joomla1.5在默认安装下，里面有一个叫“Beez”的模板，他是重写代码的完美案例，如果想使用重写代码功能，可以参考这个模板。在模板的根目录下，所有重写的组件、模块的代码都放在“html”文件夹里，Joomla在加载模板时会查看这个文件夹，如果里面有组件与模块的HTML代码，那么Joomla会使用这个文件夹里的代码代替原组件与模块的HTML代码。
模板可用参数示例下面的文字介绍了设计制作Joomla 1.5模板的基本思路。
制作一个空白的Joomla 1.5 模板：
[color=#FF0000]name/index.php
name/templateDetails.xml[/color][separator]
这两个文件是必须的，并且文件名也必须与上面的例子相同，因为这两个文件是被joomla核心直接调用的，所以不能错。
[color=#FF0000]templateDetails.xml[/color]，这个文件里的内容是告诉joomla使用这个模板时会被调用的其它所有文件，包括CSS，JS，图像文件等等。这里要注意，D是大写的，同时它还包括，作者名称，版权等信息。
[color=#FF0000]Index.php[/color]，这个文件是模板的核心文件，用它来告诉joomla，我们如何放置组件与模块。它是php与(X)HTML的组合。
[b]在大部分的模块里还包括下面这些文件：[/b]
name/template_thumbnail.png，这个文件是模板的预览图，方便在后台进行选择模板使用。
name/css/template.css，样式表，这里包含模板使用的所有样式，字体大小，颜色等等。
name/images/logo.png，任何的图像文件一般都会放在images目录下。
[img][attach]251[/attach][/img]
[b]templateDetails文件内容示例：[/b]
templateDetails.xml，这个文件里必须包含所有模板使用到的文件，同时它还包含所有者的名称与版权，有些还会显示在网站管理后台，它的内容看起来像下面这样。
[code]<install version=“1.5″ type=“template”>
<name>template name</name>
<creationdate>2008.02.08</creationdate>
<author>lyw0301</author>
<copyright>GPL</copyright>
<authoremail>lyw0301@gmail.com </authoremail>
<authorurl>www.plili.com </authorurl>
<version>1.0</version>
<description>模板的描述信息</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/script.js</filename>
<filename>images/header.gif</filename>
<filename>images/logo.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
<params>
</params></install> [/code]
[b]templateDetails文件内容解释：[/b]
[code]<install version=”1.5″ type=”template”>. 这行信息告诉后台安装安装器，我们要安装的内容是模板，版本是1.5
<name></name>. 定义模板的名称，这个名称同时还用做模板所在目录的名称，所以不能是中文或任何特殊字符
<creationDate></creationDate>. 模板建立的日期
<author></author>.模板的所有人
<copyright></copyright>.模板的版权信息
<authorEmail></authorEmail>. 模板制作人的email地址
<authorUrl></authorUrl>. 模板所有人的网站
<version>1.0</version>. 这个模板的版本号
<files> 所有模板用到的文件
<filename>index.php</filename>
</files>
<positions></positions>.模板用到的模块位置名称
<params></params>.定义模板使用的参数，可以在网站后台对模板进行控制，比如可以更改网站的字体颜色，网页宽度，等等[/code]
[b]index.php文件内容示例：[/b]
[code]<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”templates/<?php echo $this->template ?>/css/template.css” type=”text/css” />
</head>[/code]
[b]index.php文件内容解释：[/b]
[code]<jdoc:include type=”head” />，在默认安装的情况下，这行代码调入下面的内容：
<title>Welcome to the Frontpage</title>
<meta name=”description” content=”Joomla! – the dynamic portal engine and
content management system” />
<meta name=”generator” content=”Joomla! 1.5 – Open Source Content Management” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”robots” content=”index, follow” />
<meta name=”keywords” content=”joomla, Joomla” />
<link href=”index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=rss” rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ />
<link href=”index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=atom” rel=”alternate” type=”application/atom+xml” title=”Atom1.0″ />
<script type=”text/javascript” src=”http://localhost/joomla/media/system/js/mootools.js”></script>
<script type=”text/javascript” src=”http://localhost/joomla/media/system/js/caption.js”></script>[/code]
[b]模板主体代码：[/b]
[code]<body>
<?php echo $mainframe->getCfg(’sitename’);?><br />
<jdoc:include type=”module” name=”breadcrumbs” />
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”modules” name=”left” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”right” />
</body>[/code]
[b]Joomla模块内容调入命令解释：[/b]
这是Joomla模板的调入命令，例如：“
[b]结论：[/b]制作一个空白的Joomla模板很容易，完成一个复杂的设计就没那么简单，你需要考虑很多问题，比如用户使用的浏览器，隐藏模块位置，可用性等等。在自己着手设计前可以先参考别人的作品，有很多代码你直接就可以使用，本文提到的调入命令，文件头的信息，XML文件的结构等这些信息直接复制粘贴就可以使用了，不需要自己亲手编写。
重写代码功能也非常不错，这个新的功能提高了Joomla 模板的可访问性，他允许设计者重写Joomla核心组件与模块的HTML代码，在以前Joomla的组件与模块应用了大量的表格，做为一个现代网站，网页布局中已经很少使用表格了，我们通过这个重写代码的功能，可以去掉所有Joomla组件与模块中的表格。
Joomla1.5在默认安装下，里面有一个叫“Beez”的模板，他是重写代码的完美案例，如果想使用重写代码功能，可以参考这个模板。在模板的根目录下，所有重写的组件、模块的代码都放在“html”文件夹里，Joomla在加载模板时会查看这个文件夹，如果里面有组件与模块的HTML代码，那么Joomla会使用这个文件夹里的代码代替原组件与模块的HTML代码。
模板可用参数示例下面的文字介绍了设计制作Joomla 1.5模板的基本思路。
制作一个空白的Joomla 1.5 模板：
[color=#FF0000]name/index.php
name/templateDetails.xml[/color][separator]
这两个文件是必须的，并且文件名也必须与上面的例子相同，因为这两个文件是被joomla核心直接调用的，所以不能错。
[color=#FF0000]templateDetails.xml[/color]，这个文件里的内容是告诉joomla使用这个模板时会被调用的其它所有文件，包括CSS，JS，图像文件等等。这里要注意，D是大写的，同时它还包括，作者名称，版权等信息。
[color=#FF0000]Index.php[/color]，这个文件是模板的核心文件，用它来告诉joomla，我们如何放置组件与模块。它是php与(X)HTML的组合。
[b]在大部分的模块里还包括下面这些文件：[/b]
name/template_thumbnail.png，这个文件是模板的预览图，方便在后台进行选择模板使用。
name/css/template.css，样式表，这里包含模板使用的所有样式，字体大小，颜色等等。
name/images/logo.png，任何的图像文件一般都会放在images目录下。
[img][attach]251[/attach][/img]
[b]templateDetails文件内容示例：[/b]
templateDetails.xml，这个文件里必须包含所有模板使用到的文件，同时它还包含所有者的名称与版权，有些还会显示在网站管理后台，它的内容看起来像下面这样。
[code]<install version=“1.5″ type=“template”>
<name>template name</name>
<creationdate>2008.02.08</creationdate>
<author>lyw0301</author>
<copyright>GPL</copyright>
<authoremail>lyw0301@gmail.com </authoremail>
<authorurl>www.plili.com </authorurl>
<version>1.0</version>
<description>模板的描述信息</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/script.js</filename>
<filename>images/header.gif</filename>
<filename>images/logo.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
<params>
</params></install> [/code]
[b]templateDetails文件内容解释：[/b]
[code]<install version=”1.5″ type=”template”>. 这行信息告诉后台安装安装器，我们要安装的内容是模板，版本是1.5
<name></name>. 定义模板的名称，这个名称同时还用做模板所在目录的名称，所以不能是中文或任何特殊字符
<creationDate></creationDate>. 模板建立的日期
<author></author>.模板的所有人
<copyright></copyright>.模板的版权信息
<authorEmail></authorEmail>. 模板制作人的email地址
<authorUrl></authorUrl>. 模板所有人的网站
<version>1.0</version>. 这个模板的版本号
<files> 所有模板用到的文件
<filename>index.php</filename>
</files>
<positions></positions>.模板用到的模块位置名称
<params></params>.定义模板使用的参数，可以在网站后台对模板进行控制，比如可以更改网站的字体颜色，网页宽度，等等[/code]
[b]index.php文件内容示例：[/b]
[code]<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”templates/<?php echo $this->template ?>/css/template.css” type=”text/css” />
</head>[/code]
[b]index.php文件内容解释：[/b]
[code]<jdoc:include type=”head” />，在默认安装的情况下，这行代码调入下面的内容：
<title>Welcome to the Frontpage</title>
<meta name=”description” content=”Joomla! – the dynamic portal engine and
content management system” />
<meta name=”generator” content=”Joomla! 1.5 – Open Source Content Management” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”robots” content=”index, follow” />
<meta name=”keywords” content=”joomla, Joomla” />
<link href=”index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=rss” rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ />
<link href=”index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=atom” rel=”alternate” type=”application/atom+xml” title=”Atom1.0″ />
<script type=”text/javascript” src=”http://localhost/joomla/media/system/js/mootools.js”></script>
<script type=”text/javascript” src=”http://localhost/joomla/media/system/js/caption.js”></script>[/code]
[b]模板主体代码：[/b]
[code]<body>
<?php echo $mainframe->getCfg(’sitename’);?><br />
<jdoc:include type=”module” name=”breadcrumbs” />
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”modules” name=”left” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”right” />
</body>[/code]
[b]Joomla模块内容调入命令解释：[/b]
[b]结论：[/b]制作一个空白的Joomla模板很容易，完成一个复杂的设计就没那么简单，你需要考虑很多问题，比如用户使用的浏览器，隐藏模块位置，可用性等等。在自己着手设计前可以先参考别人的作品，有很多代码你直接就可以使用，本文提到的调入命令，文件头的信息，XML文件的结构等这些信息直接复制粘贴就可以使用了，不需要自己亲手编写。
已有1条评论