Joomla!社区杂志™

下载
启动
9分钟阅读时间 (1848字)

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

237770点击
Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch

在本文中，我们想深入了解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存储了所有模板共有的文件，例如错误页面。

如何创建新的模板？

您有三种创建新模板的方法

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

在本章中，我们想尝试第一种选择。我们将从头开始创建一个基于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）。

Discover

图1：发现cocoate模板

Install Template

图2：安装cocoate模板

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

Default Template

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

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

First look

图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）。

Twitter Bootstrap Download

图5：Twitter Bootstrap网站

Assets Folder

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

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

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

将Twitter Bootstrap集成到您的模板中

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

在/tmpls/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示例。

在部分，我们必须通过一个<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>

主页位于所谓的“流体容器”中。默认情况下，它有一个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），但它看起来像一个网站，而且是...响应式的。用您的浏览器窗口试试吧！

First Look

图7：新模板的第一眼

Joomla覆盖

到目前为止，一切都很容易。现在，真正的挑战开始了。您必须覆盖默认的Joomla HTML输出，以充分利用Twitter Bootstrap框架（图8）。如果您不知道我所说的覆盖是什么意思，请查看这里（面向开发者）和这里（面向用户）。

HTML Overrides

图8：HTML覆盖

下拉菜单

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

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

Main Menu

图9：主菜单 - 高级选项

它工作了！

Joomla和Twitter Bootstrap之间的通信正在工作。下拉菜单完全响应式，甚至图片也会自动调整大小（图10）。

Second Look

图10：基于Twitter Bootstrap的响应式模板

我也在我的测试网站上安装了这个示例模板，所以请查看http://joomla25.cocoate.com。

下一步

在我看来，下一步是

  • 只是与其他技术（CSS、JS、HTML5、Joomla、PHP、Twitter Bootstrap）玩耍
  • 查看 Twitter Bootstrap 文档
  • 创建自定义CSS
  • 使用Joomla参数配置模板

结论

我希望你现在能够决定是否想要更深入地使用Twitter Bootstrap框架进行Joomla模板设计，或者只是选择一个现成的模板。本章是《使用Joomla移动》一书的一部分，该书将尽快以PDF形式免费提供。

在Joomla社区杂志上发表的一些文章代表了作者对特定主题的个人观点或经验，可能不代表Joomla项目的官方立场。

0
标签
设计师
Joomla! 网站们：冠军主页

关于作者

Hagen Graf

Hagen Graf

Hagen Graf
 

评论

已经注册？ 登录这里
尚未发表评论。成为第一个发表评论的人

通过接受，您将访问https://magazine.joomla.net.cn/外部第三方提供的服务