Joomla !3的模板制作相比Joomla !2.5,略微有一些改动和改进，主要是如何调用模板文件和模板模块或组件。这里在这里非常简单明了的指导如何将静态HTML页面制作成为动态的Joomla !3模板和网站。
1、创建 templateDetails.xml文件
首先,就像Joomla !2.5中那样,您必须创建一个templateDetails.xml文件。这里面定义好生成你joomla模板的所有的文件和目录用于。您可以了解更多关于templateDetails。xml文件。
2 创建 index.php 文件
接下来,复制你的 index.html 文件并且重命名为 index.php. 打开index.php 进行编辑，替换所有代码从页面的顶部,包括<head>标签，包括如下信息:
<?php
defined(''_JEXEC'') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . ''/media/jui/css/bootstrap.min.css'');
$doc->addStyleSheet($this->baseurl . ''/media/jui/css/bootstrap-responsive.css'');
$doc->addScript($this->baseurl . ''/media/jui/js/jquery.min.js'');
$doc->addScript($this->baseurl . ''/media/jui/js/bootstrap.min.js'');
JHtml::_(''jquery.framework'');
JHtml::_(''bootstrap.framework'');
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<jdoc:include type="head" />
现在，添加下面的代码到每个要调用的外部文件名前面。这是一个相对地址（有了这点比和wordpress比较起来简直强太多了。）
<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/
现在，调用一个css文件，如同下面的形式来调用。
<link rel="stylesheet" type="text/css" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/yourFileName.css"/>
3 - 确定你的内容类型
你必须检查一遍你的每个静态页面并确认哪个部分将要嵌套当前网站的模块. 显然，主要位置显示你的文章部分.
4 - 添加内容到Joomla! 3
登录到 Joomla! 3 安装并，并从你的静态页面复制内容添加到joomla文章管理中，比如加一个模块,这个模块的类型应该类型自定义HTML。
5 - 用调用模块或文章的方法替换静态内容显示
现在，用模块位置去替换内容，我们将用下面的操作步骤实现:
假设你的内容在调用前是下面的样子:
<div class="this-container">
<h3>This is a module</h3>
<p>These are my module contents</p>
</div>
您的模块应该改成这样::
<?php if($this->countModules(''this-container'')) : ?>
<div class="this-container">
<jdoc:include type="modules" name="this-container" style="xhtml" />
</div><!-- /.this-container -->
<?php endif ;?>
Where This is a module would be the Module Title in Joomla! and These are my module contents would be the CustomOutput of the Module.
- 注意,我们只是将<div>元素包裹在一个PHP声明中， and put the contents of the
divin our Joomla! 3 module in the admin side of our Joomla! 3 installation. The contents were replaced with the module call<jdoc:include...
To replace your article content with an Article Position, we will use the following steps:
Your article contents should look like the following(ish) before changes:
<div class="main-content">
<h1>Article Title</h1>
<p>Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents. Article contents.</p>
</div>
Your article contents should then be changed to look like this:
<div class="main-content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
Where Article Title would be the Article Title in Joomla! and Article contents... would be the contents of the article in Joomla!
- Note - do not add the php if statement for the main-content call. Also, the main content div should be called in the templateDetails.xml file.
6 - Install Your Template to Joomla! 3
Finally, the rewarding part. Zip your template directory and upload the .zip file to the extension manager in Joomla! 3. Go into your modules and select their appropriate module positions based on your specific template. You''re done!
- Note - There''s a chance, depneding on your code, that you''ll have to make significant updates to your HTML/CSS for your template to appear correctly. This generally happens because of how it calls its objects. Use the Firebug plugin on Firefox if you need help troubleshooting appearance issues.
For more help on Joomla! development, check out these Joomla Resources.
六艺团队，致力于提供中国最专业的Joomla建站解决方案！
