9分钟阅读时间 (1848个单词)

从零开始使用Twitter Bootstrap框架构建响应式Joomla！模板

八月

周三，01八月2012

237771次点击

0条评论

在这篇文章中，我们想要深入了解Joomla模板系统的内部，以了解基本知识。从头开始创建一个模板并不是什么难事。当你构建一个网站时，你总是需要决定是自己创建模板还是购买一个模板。除了这两种选择之外，你还可以修改现有的模板。为了做出有用的决定，你需要了解创建Joomla模板的过程。

Joomla中的模板

Joomla由前端（网站）和后端（管理界面）两部分组成。这两部分都有自己的模板。它们存储在以下文件夹中

/templates - 前端
/administrator/templates - 后端

每个模板都有自己的文件夹。在Joomla 2.5中，你可以找到两个预安装的非响应式模板（Beez 2和5）和一个模板框架（Atomic）

/templates/atomic
Atomic是一种不太常见的模板框架
/templates/beez_20
Beez 2是Joomla的标准模板。
/templates/beez5
Beez 5是Beez 2的HTML5版本
/templates/system
在这个文件夹中，Joomla存储了所有模板共有的文件，例如《离线》和《错误》页面。

管理员文件夹看起来一样

/administrator/templates/bluestork
Bluestork是默认的标准管理员模板
/administrator/templates/hathor
Hathor是可选的管理员模板。它是可访问的，颜色可自定义。
/administrator/templates/system
在这个文件夹中，Joomla存储了所有模板共有的文件，例如《错误》页面。

如何创建新的模板？

你有三种方式来创建一个新的模板

从头开始创建文件夹和所有必要的文件
安装一个启动主题并修改它
复制现有的模板并修改它

在本章中，我们想尝试第一种方案。我们将从头开始创建一个基于Twitter Bootstrap框架的Joomla 2.5响应式前端模板。我会尽量让它尽可能简单。本章的目的是理解Joomla模板的结构。之后让它越来越美观和复杂是非常容易的 :)

模板名称

首先，我们需要给我们的模板起一个名字。这个名称将出现在XML文件、数据库、Web服务器文件系统和几个缓存中。请避免在名称中使用特殊字符和空格。我将把这个模板命名为cocoate。

文件和文件夹

创建一个 /templates/cocoate 文件夹。

在文件夹中，我们需要以下文件和一个子文件夹css

/templates/cocoate/index.php
/templates/cocoate/templateDetails.xml

index.php

<?php
defined('_JEXEC') or die;
?>
<!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" />
</head>
<body >
<jdoc:include type="modules" name="top" style="xhtml" />    
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="footer" style="none" />    
</body>
</html>

列表 1：index.php

index.php 文件是“页面”模板，“整体画面”。在这个文件中，所有的片段（CSS、JavaScript、Joomla内容）都被加载。在我们的例子中，我只是使用 <jdoc:include ...> 命令加载了Joomla内容。它包含头部、组件内容和根据模块位置（什么是模块？）的模块内容。

templateDetails.xml

这是模板中最重要的文件。它是包含所有模板文件或文件夹列表的清单文件，包括作者和版权等信息。没有这个文件，Joomla将找不到您的模板。位置是已在index.php文件中提到的模块位置。您可以创建任意多的位置。到目前为止，Joomla还没有命名标准。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "https://www.joomla.net.cn/xml/dtd/1.6/template-install.dtd">
<install version="2.5" type="template" method="upgrade">
    <name>cocoate</name>
        <creationDate>2012-07-17</creationDate>
    <author>Hagen Graf</author>
    <authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it.</authorEmail>
    <authorUrl>http://cocoate.com</authorUrl>
    <copyright>Copyright (C) 2012 cocoate</copyright>
    <version>1.0</version>
    <description><![CDATA[
    <p>cocoate is a template exercise from scratch.<p>
    ]]></description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>top</position>
        <position>breadcrumbs</position>
        <position>footer</position>
        <position>left</position>
        <position>right</position>
        <position>footer</position>
    </positions>
</install>

列表 2：templateDetails.xml

发现并安装模板

在创建这两个文件和文件夹之后，我们必须发现并安装模板。从Joomla 1.6开始，模板在 _extensions 数据库表中“注册”。转到 扩展 -> 扩展管理器 -> 发现。 点击顶部的发现图标。您将看到您刚刚创建的模板（图 1）。选择模板并点击安装（图 2）。

图 1：发现 cocoate 模板

图 2：安装 cocoate 模板

在安装过程中，还自动创建了一个模板样式。检查这个样式（扩展 -> 模板管理器）并将其设置为默认模板样式（图 3）。

图 3：选择 cocoate 模板作为默认模板

访问您的网站并首次查看您的模板（图 4）。

图 4：带有您新模板的网站

当您使用移动设备打开网站时，您会注意到它是完全响应式的 :) 但目前还没有真正的“用户界面”，它还不够美观，我们还没有图像。

集成Twitter Bootstrap文件

现在，在继续之前，我们需要集成Twitter Bootstrap。在我写这篇文章的时候，2.0.4版本是最新发布版。
在例子中，我使用带有文档（http://twitter.github.com/bootstrap/）的Twitter Bootstrap包（图 5）。下载并解压包（https://github.com/twitter/bootstrap/zipball/master）并将文件夹 /assets 复制到 /template/cocoate 文件夹中（图 6）。

图 5：Twitter Bootstrap 网站

图 6：复制或移动 assets 文件夹

assets 文件夹包含必要的CSS和JavaScript文件，并附带预定义的图像和图标。

以后，当您对Joomla模板更有经验时，您可以将在不同文件夹中放置必要的Twitter Bootstrap文件。在我们的例子中，使用 /assets 文件夹更简单。

将Twitter Bootstrap集成到您的模板中

Twitter Bootstrap包含三个名为hero、fluid和starter-template的示例模板。您可以通过点击 /example 文件夹中的文件来检查它们。
我们的目标是结合Joomla相关命令和以下示例之一。为了示例，我选择了流体模板（fluid.html）。

在 /templates/cocoate/index.php 中包含了所有必要的Joomla组件。我们需要创建这两个组件的混合体，让我们从文件中需要的一些关键元素开始。

<?php
defined('_JEXEC') or die;
// detecting site title
$app = JFactory::getApplication();
?>

这是PHP代码和Joomla模板的典型开始。对象 $app 包含了关于你的Joomla的有用数据，例如你网站的名称。

<!DOCTYPE html>
<html lang="en">

这个文档类型是HTML5版本，来自Twitter Bootstrap示例。

在 <head> 部分，我们需要通过 <jdoc> 命令创建Joomla元标签并集成Bootstrap文件。

<head>
    <meta charset="utf-8">
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap.css" type="text/css" media="screen" />
    ...
    <!-- ... more Bootstrap files ... -->
    ...
    <link rel="apple-touch-icon-precomposed" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<body> 部分可以大部分复制自 fluid.html 示例。在正确的位置嵌入 <jdoc> 命令非常重要。
这是一个顶部菜单的示例。你需要将菜单模块放置在 top-menu 位置，并且可以例如从 $app 对象显示网站名称。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
    ...
    <a class="brand" href="#"><?php echo $app->getCfg('sitename'); ?></a>
    <div class="nav-collapse">
      <jdoc:include type="modules" name="top-menu" style="none" />
    </div>
  </div>
</div>

主页位于所谓的 "Fluid Container" 中。它有一个默认的12行网格系统。我们使用其中9行来显示Joomla组件，3行用于右侧的侧边栏，称为 right。右侧只有在有可用模块时才显示。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span9">
      <div class="hero-unit">
        <jdoc:include type="component" />
      </div>
    </div><!--/row-->
  </div><!--/span-->
  <div class="span3">
    <?php if($this->countModules('right')) : ?>
    <div class="well sidebar-nav">
      <jdoc:include type="modules" name="right" style="none" />
    </div><!--/.well -->
    <?php endif; ?>
   </div><!--/span-->
 </div><!--/row-->
</div><!--/.fluid-container-->

最后是一些Twitter Bootstrap JavaScript文件。

<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script>
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
        jQuery.noConflict();
</script>

正如你所看到的，JavaScript框架jQuery被加载了，还有Twitter Bootstrap的最小版本。你可以在这里看到完整的index.php文件的内容 /templates/cocoate/index.php。

结果是远非完美（图7），但它看起来像是一个网站，而且是 ... 响应式的。用你的浏览器窗口试试！

图7：新模板的第一眼

Joomla覆盖

到目前为止，一切都很简单。现在真正的开始工作。你必须覆盖默认的Joomla HTML输出，以充分利用Twitter Bootstrap框架（图8）。如果你不知道我说的覆盖是什么意思，请看这里这里（针对开发者）和这里（针对用户）。

图8：HTML覆盖

下拉菜单

Joomla没有默认的下拉菜单，但Twitter Bootstrap为菜单提供下拉支持，当然，我们想在模板中正好有这个功能。学习模块的HTML输出的所有细节相当困难。对于这一章节，我建议使用现有的覆盖。感谢Gary Gisclair的工作 Gary Gisclair，我们能够下载Strapped模板（http://hwdmediashare.co.uk/joomla-templates/116-strapped）并使用现有的覆盖。我只是把整个 /html 文件夹复制到 /templates/cocoate 文件夹。

我使用了默认的Joomla示例数据，并将 主菜单模块 放置在 top-menu 位置。为了匹配正确的CSS类，我需要在 菜单类后缀（扩展 -> 模块管理 -> 主菜单 -> 编辑 -> 高级选项）中添加 " nav-dropdown"（《图9》）