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建站解決方案！
