Insight Joomla! (DAY 1) : How does Template Work

最新推荐文章于 2022-06-16 23:10:53 发布

zlxadhkust

最新推荐文章于 2022-06-16 23:10:53 发布

阅读量2.2k

点赞数

分类专栏： Joomla! PHP 文章标签： stylesheet include class xhtml user system

本文链接：https://blog.csdn.net/zlxadhkust/article/details/6729952

版权

PHP 同时被 2 个专栏收录

112 篇文章 0 订阅

订阅专栏

Joomla!

62 篇文章 0 订阅

订阅专栏

About Template in Joomla!1.5

After reading the basic introductions about how template works and how to design a template, let's do some little tests on default templaterhuk_milkyway.

First of all, take a look at templateDetails.xml:

	<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>
		<position>debug</position>
		<position>syndicate</position>
	</positions>

this block regisiter the positions to Joomla! system, then you can see them in the module editer panel:

position-option

And use tp=1 command to highlight the positions in the overall page:

layout-top

layout-bottom

Then, the next is that we found only the 11 positions in details file appear inindex.php:

<div id="header_r">
						<div id="logo"></div>
						<jdoc:include type="modules" name="top" />
					</div>

<div id="pillmenu">
									<jdoc:include type="modules" name="user3" />
								</div>

<div id="search">
				<jdoc:include type="modules" name="user4" />
			</div>

			<div id="pathway">
				<jdoc:include type="modules" name="breadcrumb" />
			</div>


...

<div id="leftcolumn">
						<?php if($this->countModules('left')) : ?>
							<jdoc:include type="modules" name="left" style="rounded" />
						<?php endif; ?>
						</div>

						<?php if($this->countModules('left')) : ?>
						<div id="maincolumn">
						<?php else: ?>
						<div id="maincolumn_full">
						<?php endif; ?>
							<?php if($this->countModules('user1 or user2')) : ?>
								<table class="nopad user1user2">
									<tr valign="top">
										<?php if($this->countModules('user1')) : ?>
											<td>
												<jdoc:include type="modules" name="user1" style="xhtml" />
											</td>
										<?php endif; ?>
										<?php if($this->countModules('user1 and user2')) : ?>
											<td class="greyline"> </td>
										<?php endif; ?>
										<?php if($this->countModules('user2')) : ?>
											<td>
												<jdoc:include type="modules" name="user2" style="xhtml" />
											</td>
										<?php endif; ?>
									</tr>
								</table>


....

<tr valign="top">
									<td>
										<jdoc:include type="component" />
										<jdoc:include type="modules" name="footer" style="xhtml"/>
									</td>
									<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
										<td class="greyline"> </td>
										<td width="170">
											<jdoc:include type="modules" name="right" style="xhtml"/>
										</td>
									<?php endif; ?>
								</tr>

...

<p id="syndicate">
						<jdoc:include type="modules" name="syndicate" />
					</p>

...

<jdoc:include type="modules" name="debug" />

The way these positions were referenced is including jdoc statement, like:

<jdoc:include type="modules" name="user2" style="xhtml" />

The basic template and overall layout is worked out withindex.php, there are lots of div tags insideindex.php, with class and id specified, and all these style classes or id's style rule are stored in/css/template.css file. For example, inindex.php:

<div class="center" align="center">
	<div id="wrapper">
		<div id="wrapper_r">
			<div id="header">
				<div id="header_l">
					<div id="header_r">
						<div id="logo"></div>

and accordingly, in template.css:

div.center {
  text-align: center;
}

div#wrapper {
	margin-left: auto;
	margin-right: auto;
}

body.width_medium div#wrapper {
	width: 950px;
}

body.width_small div#wrapper {
	width: 773px;
}

body.width_fmax div#wrapper {
	min-width: 750px;
	max-width: 1050px;
}

div#header_l {
	position: relative;
}

div#header_r {
	height: 90px;
	padding-left: 370px;
	padding-right: 30px;
	padding-top: 25px;
	overflow: hidden;
	text-align: left;
}

div#logo {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 298px;
	height: 75px;
	background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
	margin-left: 30px;
	margin-top: 25px;
}

The conclusion is that we regisiter a position in details.xml file, and then we can assign that position to one or more modules in admin panel, and finally we output the modules by including a jdoc statement with its name attribute set to the position. That is the basic mechanism of Joomla! 's template, and the position's name is depending on user's preference, there is no specific rules on that.

And now, go a little bit further to explore how does Joomla! provide flexiblity with respect of design, and how doesrhuk_milkyway take advantage of that.

In the body opening tag:

<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">

there are three invokes of $this->params->get method, and the three parameter names match the params section in details.xml file:

	<params>
		<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
			<option value="blue">Blue</option>
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="orange">Orange</option>
			<option value="black">Black</option>
			<option value="white">White</option>
		</param>
		<param name="backgroundVariation" type="list" default="blue" label="Background Variation" description="Background color variation to use">
			<option value="blue">Blue</option>
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="orange">Orange</option>
			<option value="black">Black</option>
			<option value="white">White</option>
		</param>
		<param name="widthStyle" type="list" default="fmax" label="Template Width" description="Width style of the template">
			<option value="fmax">Fluid with maximum</option>
			<option value="medium">Medium</option>
			<option value="small">Small</option>
			<option value="fluid">Fluid</option>
		</param>
	</params>

These xml elements tell Joomla! system that the admin panel should provide dropdown list to the user to set the three template parameter, and the setting values will be stored inparams.ini file.

template-params

By this method, the overall style of the template can be determined on the fly, for example, with the current setting, the statement:

<?php echo $this->params->get('colorVariation'); ?>

will output: blue

So, the whole attribue will be evaluated as

class="color_blue"

with the same approach, the proper css file can be loaded on the fly:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

And here, the structure of the files in css folder can prove the inference:

css-structure

Without Any Customization, What Will Joomla! Output??

I decide to create a supppppppper simple template, for tracing the raw output of Joomla! system itself, the structure is as following:

test-template-structure

template.css just is empty, because I don't want to add any style to the output stuff; andtemplateDetails.xml is:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>testtemplate</name>
	<creationDate>2011-08-29</creationDate>
	<author>Vincent Zhang</author>
	<authorEmail>vincent@example.com</authorEmail>
	<authorUrl>http://www.example.com</authorUrl>
	<copyright>Vincent Zhang 2011</copyright>
	<license>GNU/GPL</license>
	<version>1.0.0</version>
	<description>Template for learning</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>test</position>
	</positions>
</install>

and index.php:

<?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="<?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>
	<div id="test">
		<jdoc:include type="modules" name="test" /> 
	</div>
	<jdoc:include type="component" />
</body>
</html>

One good thing for version 1.5 is that you never have to package your template into a zip archive, you can just copy it into the templates folder, and Joomla! will detect that automatically. I define my own position 'test', and of course I need to put a module(main menu here) into the position:

main-menu-test

Then goto the http://localhost/ in browser:

raw-output

The source code of the HTML is:

<!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="en-gb" lang="en-gb" >

<head>

	  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta name="robots" content="index, follow" /> 
  <meta name="keywords" content="joomla, Joomla, TaiwanJoomla" /> 
  <meta name="title" content="Joomla! Overview" /> 
  <meta name="author" content="" /> 
  <meta name="description" content="Joomla! - 動態的入口網站架設引擎及內容管理系統" /> 
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" /> 
  <title>Joomla! Overview</title> 
  <script type="text/javascript" src="/joomla!/media/system/js/mootools.js"></script> 
  <script type="text/javascript" src="/joomla!/media/system/js/caption.js"></script> 


	<link rel="stylesheet" href="/joomla!/templates/system/css/system.css" type="text/css" />

	<link rel="stylesheet" href="/joomla!/templates/system/css/general.css" type="text/css" />

	<link rel="stylesheet" href="/joomla!/templates/testtemplate/css/template.css" type="text/css" />

</head>

<body>

	<div id="test">

		<ul class="menu"><li class="item1"><a href="http://localhost/joomla!/"><span>賽事編排</span></a></li><li id="current" class="active item27"><a href="/joomla!/index.php?option=com_content&view=article&id=19&Itemid=27"><span>賽事程序表</span></a></li><li class="item2"><a href="/joomla!/index.php?option=com_content&view=article&id=5&Itemid=2"><span>主客對賽表</span></a></li><li class="item37"><a href="/joomla!/index.php?option=com_content&view=section&id=4&Itemid=37"><span>成績龍虎榜</span></a></li><li class="item41"><a href="/joomla!/index.php?option=com_content&view=section&id=3&Itemid=41"><span>金靴射手榜</span></a></li><li class="item50"><a href="/joomla!/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50"><span>賽事晉級圖</span></a></li><li class="item48"><a href="/joomla!/index.php?option=com_weblinks&view=categories&Itemid=48"><span>罰牌記錄</span></a></li></ul> 

	</div>

	<table class="contentpaneopen"> 
<tr> 
		<td class="contentheading" width="100%"> 
					Joomla! Overview			</td> 
						<td align="right" width="100%" class="buttonheading"> 
		<a href="/joomla!/index.php?view=article&catid=29%3Athe-cms&id=19%3Ajoomla-overview&format=pdf&option=com_content&Itemid=27" title="PDF" οnclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/joomla!/images/M_images/pdf_button.png" alt="PDF"  /></a>		</td> 
		
				<td align="right" width="100%" class="buttonheading"> 
		<a href="/joomla!/index.php?view=article&catid=29%3Athe-cms&id=19%3Ajoomla-overview&tmpl=component&print=1&layout=default&page=&option=com_content&Itemid=27" title="Print" οnclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/joomla!/images/M_images/printButton.png" alt="Print"  /></a>		</td> 
		
				<td align="right" width="100%" class="buttonheading"> 
		<a href="/joomla!/index.php?option=com_mailto&tmpl=component&link=abfd68e440566d17d3013fc50080894829d6177a" title="E-mail" οnclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/joomla!/images/M_images/emailButton.png" alt="E-mail"  /></a>		</td> 
					</tr> 
</table> 
 
<table class="contentpaneopen"> 
 
<tr> 
	<td valign="top" class="createdate"> 
		Saturday, 09 August 2008 07:49	</td> 
</tr> 
 
 
<tr> 
<td valign="top"> 
<p>If you're new to Web publishing systems, you'll find that Joomla! delivers sophisticated solutions to your online needs. It can deliver a robust enterprise-level Web site, empowered by endless extensibility for your bespoke publishing needs. Moreover, it is often the system of choice for small business or home users who want a professional looking site that's simple to deploy and use. <em>We do content right</em>.<br /> </p><p>So what's the catch? How much does this system cost?</p><p> Well, there's good news ... and more good news! Joomla! 1.5 is free, it is released under an Open Source license - the GNU/General Public License v 2.0. Had you invested in a mainstream, commercial alternative, there'd be nothing but moths left in your wallet and to add new functionality would probably mean taking out a second mortgage each time you wanted something adding!</p><p>Joomla! changes all that ... <br />Joomla! is different from the normal models for content management software. For a start, it's not complicated. Joomla! has been developed for everybody, and anybody can develop it further. It is designed to work (primarily) with other Open Source, free, software such as PHP, MySQL, and Apache. </p><p>It is easy to install and administer, and is reliable. </p><p>Joomla! doesn't even require the user or administrator of the system to know HTML to operate it once it's up and running.</p><p>To get the perfect Web site with all the functionality that you require for your particular application may take additional time and effort, but with the Joomla! Community support that is available and the many Third Party Developers actively creating and releasing new Extensions for the 1.5 platform on an almost daily basis, there is likely to be something out there to meet your needs. Or you could develop your own Extensions and make these available to the rest of the community. </p>

</td> 
</tr> 
 
<tr> 
	<td class="modifydate"> 
		Last Updated on Saturday, 09 August 2008 07:49	</td> 
</tr> 
</table> 
<span class="article_separator"> </span> 


</body>

</html>

And this test template will be useful in future, since I can use it to check out the default CSS class names(such as contentpaneopen) output by Joomla! for any module. And that will be helpful with designing my own template.

What does component.php have to do with??

I post this question in Joomla! offical forum, and some one said that it only had to do with PDF print. One doc tells the new features of 1.5 version says that it is for printing friendly design.

RefS:

http://docs.joomla.org/Creating_a_basic_Joomla!_template

http://docs.joomla.org/Understanding_Joomla!_templates

http://help.joomla.org/files/JJYs_Joomla_Template_Design_Tutorial-2010_08_26.pdf

source-code for immediate above tutorial:

http://help.joomla.org/files/JJYs_Example_Joomla_Template_2010_05_07.zip

zlxadhkust

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Insight Joomla! (DAY 1) : How does Template Work

About Template in Joomla!1.5After reading the basic introductions about how template works and how to design a template, let's do some
复制链接

扫一扫