如何修改HTML/CSS模板
你一定遇到过这个问题：你想构建一个网站，寻找Joomla模板却找不到一个你喜欢的。但是有很多HTML/CSS模板是免费的。在这篇文章中，我将解释如何修改一个常见的模板使其适用于Joomla！
为了这个教程，我找到了一个简单且现代的模板，它自带Bootstrap（Joomla使用的框架）：Start Bootstrap的Business Casual（《http://startbootstrap.com/template-overviews/business-casual/》）。
在修改模板时，重要的是要注意模板的许可证类型。如果有疑问，建议联系开发者询问是否允许修改模板、将其适配到CMS以及可用于哪些类型的项目：私人或商业。
Business Casual带有Apache 2许可证，允许修改并用于私人或商业项目。阅读模板页面上的评论，我还发现它已经被适配到Wordpress。因此，我们使用这个模板转换成Joomla模板不会有问题！
首先，我们下载并解压包到我们的电脑上。在目录中我们发现以下结构
css
fonts
img
js
about.html
blog.html
contact.html
index.html
LICENSE
README.md
如我们所见，模板包含了四个具有不同特性的页面。index.html文件展示了网站的主页，about.html具有一个特殊的结构，用于放置有关我们公司和工作组的说明。blog.html展示了博客文章，而contact.html包含了公司的地址和联系方式表单。
我们将首先专注于主页index.html，然后使用其他页面创建一些Joomla组件的重写。
在css文件夹中，我们有以下文件
bootstrap.css
bootstrap.min.css
business-casual.css
这些文件是模板的样式表。bootstrap.css 文件包含 Bootstrap 的典型定义，建议不要在此文件中做更改，以免 Bootstrap 更新时覆盖我们的定义。Bootstrap.min.css 是前者的压缩版本，通常包含在模板中。
在 business-casual.css 文件中，我们将放置我们的特定定义。在这里可以覆盖 Bootstrap 的值。
在 fonts 文件夹中，我们有
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
这些文件是 Glyphicons 字体不同格式的文件，为我们提供模板的图标。
img 文件夹包含演示中使用的图像。
js 文件夹包含以下文件
bootstrap.js
bootstrap.min.js
jquery.js
这些都是使模板具有功能所需的 JavaScript。
Joomla! 模板需要某些文件和目录，其中一些与 HTML/CSS 模板提供的不同。
css
images
js
component.php
error.php
favicon.ico
index.php
offline.php
template_preview.png
template_thumbnail.png
templateDetails.xml
最重要的文件是 index.php 和 templateDetails.xml。index.php 提供网站的架构，在 templateDetails.xml 中我们放置模板的定义：名称、作者、文件夹和文件、模块位置等。
现在我们将一步一步地构建我们的 Joomla 模板。
index.php
在这个文件中，我们创建网站的架构。我们将以从 Business Casual 下载的 index.html 为基础。我们复制 index.html，重命名为 index.php，然后开始进行必要的更改。
index.php 所需的最小结构是
<?php defined('_JEXEC') or die; ?>
<!doctype html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
但是仅此就只是一个很无聊的模板，所以我们将逐步添加部分。
以后我们需要一系列信息以实现模板的功能，为此我们将包含一些在 index.php 文件开头的 PHP 块中编写的变量。
<?php defined( '_JEXEC' ) or die;
// variables
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$menu = $app->getMenu();
$active = $app->getMenu()->getActive();
$params = $app->getParams();
$pageclass = $params->get('pageclass_sfx');
$tpath = $this->baseurl.'/templates/'.$this->template;
$templateparams = $app->getTemplate(true)->params;
// generator tag (para que no aparezca en el código fuente que nuestro sitio está hecho en Joomla)
$this->setGenerator(null);
// force latest IE & chrome frame
$doc->setMetadata('x-ua-compatible','IE=edge,chrome=1');
// js (no vamos a cargar el jquery que viene con la plantilla, sino el jquery que viene con Joomla)
JHtml::_('jquery.framework');
$doc->addScript($tpath.'/js/bootstrap.min.js');
// css (aquí cargamos nuestras hojas de estilo)
$doc->addStyleSheet($tpath.'/css/bootstrap.min.css');
$doc->addStyleSheet($tpath.'/css/business-casual.css');
?>
按照 index.html 的结构，我们看到它有一个语言定义：。在我们的 Joomla 模板中，我们可以使用 PHP 变量以动态方式放置这个定义。
<html lang="<?php echo $this->language; ?>">
接下来是模板的头部：<head>... </head>。使用 <jdoc:include type="head" /> 包含 Joomla 的头部信息：站点标题、CSS 和 JavaScript 文件。
为了实现支持移动设备的响应式页面，我们添加了视觉字段定义
<meta name="viewport" content="width=device-width, initial-scale=1">
在现代模板中，包括不同的图像，用户可以将它们作为书签保存到移动设备和平板电脑上。
<link rel="apple-touch-icon-precomposed" href="/<?php echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/<?php echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/<?php echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/<?php echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">
我们可以使用我们喜欢的图像处理程序（例如 GIMP）生成这些图标，并将它们保存在模板的 images 文件夹中。
这个模板使用 Google 字体，加载方式如下
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
然后在头部最后添加对 Internet Explorer 8 的支持
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
这样我们就关闭了头部，开始添加主体，这将为页面提供结构。
为了更好地控制页面，我们将向 <body> 标签添加一些变量。
<body class="<?php echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('page')).' '.$active->alias.' '.$pageclass; ?>">
接下来是一个 <div>，其中显示公司名称或站点名称。不建议将此信息静态地放置在模板中，因此我们将将其更改为显示 Joomla 全局配置中设置的动态站点名称的 PHP 变量
<div class="brand"><?php echo $app->getCfg('sitename'); ?></div>
地址也可以以更易管理的方式创建，例如使用 Joomla 模块。因此，在这个 <div> 中，我们将包括我们的第一个模块
<div class="address-bar"><jdoc:include type="modules" name="top" style="xhtml" /></div>
我们将“top”位置添加到 templateDetails.xml 文件中。
现在继续导航或菜单。第一部分保持原样，这部分会生成可折叠的菜单和当屏幕较小时（手机、平板电脑）出现的按钮。然后是一个链接到主页面，该链接只在手机上显示。这里我们也将静态内容改为动态内容。
<a class="navbar-brand" href="/<?php echo $this->baseurl; ?>/" title="<?php echo $app->getCfg('sitename'); ?>"><?php echo $app->getCfg('sitename'); ?></a>
接下来是菜单本身，当然我们也会用Joomla的菜单模块动态加载它。为此，我们从模板中删除了列表并调用了下一个模块。
<jdoc:include type="modules" name="navbar" />
我们到达模板的主体部分，我们将在这里放置内容。第一个块包含使用Bootstrap的“carousel”功能（轮播图）制作的幻灯片和一个欢迎信息。这部分我们将留待以后处理，现在我们稍作修改并添加了另外两个模块（幻灯片和标语）。
<?php if($this->countModules('slide') || $this->countModules('slogan')) : ?>
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<?php if($this->countModules('slide')) : ?>
<!-- SLIDESHOW -->
<div id="carousel-example-generic" class="carousel slide">
<jdoc:include type="modules" name="slide" style="xhtml" />
</div>
<?php endif; ?>
<?php if($this->countModules('slogan')) : ?>
<!-- SLOGAN -->
<jdoc:include type="modules" name="slogan" style="xhtml" />
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>
你可能想知道为什么我总是在每个模块前都使用一个“if”（例如：countModules('slogan')) : ?>）。这允许我们控制模块在哪里显示。如果不添加“if”，模块将始终存在，而使用“if”则只会出现在我们在Joomla后端模块配置中定义的页面上。我们稍后会更详细地介绍这一点。
我们继续结构。下一个块显示一篇文章。我们将从模板中移除静态内容并替换为
<jdoc:include type="message" />
<jdoc:include type="component" />
第一行是必要的，用于显示系统消息。第二行包含Joomla的内容：文章或某个其他组件。
下一个块包含我们可以将其转换为模块的文本。
<?php if($this->countModules('bottom')) : ?>
<div class="row">
<div class="box">
<!-- BOTTOM -->
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
</div>
<?php endif; ?>
我们到达页面的底部，这里我们找到版权信息，我们也将对其进行修改以使其动态化。
<p>Copyright © <?php echo date('Y'); ?> - <?php echo $app->getCfg('sitename'); ?></p>
最后，我们需要添加的是“debug”位置，这对于在Joomla全局配置中激活系统调试器时显示错误很重要。
<jdoc:include type="modules" name="debug" />
我们在这个标签的下一行添加这一行。
代码的最后几行用于激活Bootstrap的“carousel”。
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
现在我们创建一个templateDetails.xml文件。
templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.net.cn/xml/dtd/2.5/template-install.dtd">
<extension version="3.4" type="template" client="site" method="upgrade">
<name>businesscasual</name><!-- name the template -->
<creationDate>2015-03-12</creationDate><!-- the date your are beginn to code -->
<author>Viviana Menzel</author><!-- your name (oops, I repeat myself) -->
<copyright>Copyright © 2015 dr-menzel-it.de</copyright><!-- for who you are coding -->
<authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it. <;/authorEmail><!-- your email address -->
<authorUrl>http://www.dr-menzel-it.de</authorUrl><!-- your url -->
<version>1.0.0</version><!-- give your template a number -->
<description><![CDATA[
<h1>Business Casual for Joomla</h1>
<p>Created by <a href="http://www.dr-menzel-it.de" target="_blank">Viviana Menzel | dr-menzel-it.de</a>.</p>
<p>Based on <a href="http://startbootstrap.com/template-overviews/business-casual/" target="_blank">Start Bootstrap | startbootstrap.com/template-overviews/business-casual/</a>.</p>
]]></description><!-- change the description as you like -->
<files><!-- no need to change -->
<folder>css</folder>
<folder>fonts</folder>
<folder>html</folder>
<folder>images</folder>
<folder>js</folder>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.php</filename>
<filename>offline.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
</files>
<positions><!-- define the positions for modules here -->
<position>top</position>
<position>navbar</position>
<position>breadcrumbs</position>
<position>slide</position>
<position>slogan</position>
<position>bottom</position>
<position>debug</position>
</positions>
</extension>
在这个文件中，我们定义了模板的名称、版本和作者。我们列出了需要安装的文件夹和文件，最后定义了模块的位置。
现在我们需要其他文件来完成我们的模板。
error.php = 当发生错误时显示的页面，例如，如果使用了错误的URL。
offline.php = 当网站离线时使用的文件。
component.php = 必要的文件，用于显示可打印的页面版本。
在某些情况下，我们还需要为这些文件添加特殊的样式表：error.css、offline.css、editor.css和print.css。
template_preview.png和template_thumbnail.png = 是两个模板预览图，它们在模板管理器中的后端显示。
在html文件夹中，我们将稍后保存我们的覆盖。
目前我们将使用一些基本文件，例如在Blank（blank.vc）模板中可以找到的文件，这是一个用于创建自定义模板的非常基础的模板。
当所有文件都准备好了，我们可以为Joomla创建安装包。为此，我们只需将所有文件压缩到miplantilla.zip中。
我们进入Joomla站点的后端并使用扩展管理器安装该包。
在模板管理器中，我们将它选为标准模板，并在前端查看。
由于我们的Joomla安装是全新的，还没有内容，所以我们不会看到太多，但结构已经得到了识别。
现在我们将开始创建页面内容，并对我们的文件进行必要的修改，使其看起来像我们从模型中获取的模板。
菜单
我们首先看到的是，菜单（目前只有“首页”这一项）与模板模型中的不同。
如果我们查看原始的index.html，我们会发现菜单包含了一些类
<ul class="nav navbar-nav">
在Joomla为我们创建的菜单中，缺少了这些类，到目前为止列表看起来是这样的
<ul class="nav menu">
为了改变这一点，我们前往Joomla的模块管理器，找到菜单模块，在“高级”选项卡中，我们在“CSS类”字段中添加navbar-nav。
如果我们重新加载前端，我们会看到菜单现在有了正确的样式。
模块
在我们的模板中，我们为地址、幻灯片、欢迎信息和在内容主体下方更多信息创建了位置。现在我们将开始创建这些模块。
我们先从幻灯片开始。首先，我们使用多媒体管理器上传图片。我首先创建了一个名为“幻灯片”的文件夹，以便让图片保持有序。
然后，我们复制幻灯片的代码
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-example-generic" data-slide-to="1"> </li>
<li data-target="#carousel-example-generic" data-slide-to="2"> </li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="/img/slide-1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="/img/slide-2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="/img/slide-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
并使用HTML自定义模块中的编辑器将其作为源代码插入。现在我们需要修复指向图片的路径。为此，我们点击编辑器中出现的图标，并查找正确的图片或使用代码视图模式更改路径。正确的路径是：images/slideshow/。
我们将这个模块分配一个标题（我们将不显示）和“slide”位置，这是我们在模板中为幻灯片准备的位置。
这样我们的幻灯片就启动了。当然，我们也可以使用我们喜欢的扩展来创建幻灯片。
现在我们继续创建欢迎信息。同样，我们创建一个HTML自定义模块，复制示例代码，并分配“slogan”位置。
为了添加地址，我们用适当的代码和“top”位置做同样的事情。在这里，我们需要在我们的样式表中做一些小的调整，以便段落获得正确的样式。在business-casual.css文件中，我们查找“address-bar”类，并将其更改为以下方式
.address-bar {
display: inherit;
margin: 0;
padding: 0 0 40px;
}
.address-bar p {
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #fff;
}
现在文本看起来就像示例中那样。
在创建内容之前，我们在页面底部再次添加最后一个模块。我们再次创建一个HTML自定义模块，插入适当的代码，并分配“bottom”位置。
内容
现在让我们看看当我们创建一些内容时会发生什么。在文章管理器中，我们创建我们的第一个文章，并将其保存为特色文章，以便它出现在主页上，因为“主页”菜单被配置为以博客风格显示特色文章。如果我们保持Joomla的默认设置不变，内容将如下所示
让我们看看我们是否可以对其进行调整以适应模型。
首先，我们进入内容的全局选项，删除细节：作者、分类、发布日期、访问次数、图标、可链接标题 = 否，并隐藏文章之间的导航。
我们继续改进。
现在我们转到菜单，选择主菜单和“主页”项。在页面显示选项卡中，我们在“显示页面标题”字段中设置为否，这样页面标题“主页”就会从文章上方消失。
我们还需要修改标题的样式。如果我们注意示例，文章标题有定义的类intro-text和text-center，并且在标题上下有一个分隔线。
为了实现这种样式，我们需要对内容进行覆盖。特色文章由com_content中的“featured”视图控制。在Joomla 3.4中，创建组件修改很容易。我们转到模板管理器，选择模板，然后在这里点击“模板详细信息”和“Businesscasual模板的文件”。在“创建修改”选项卡中，我们选择“组件”，“com_content”，“featured”，Joomla会自动将必要的文件复制到我们模板的html文件夹中。
为了修改文章标题，我们转到刚刚创建的default_item.php文件，并按以下方式修改代码
<?php if ($params->get('show_title')) : ?>
<hr>
<h2 class="item-title intro-text text-center" itemprop="name">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>" itemprop="url">
<?php echo $this->escape($this->item->title); ?>
</a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</h2>
<hr>
<?php endif; ?>
我们在标题上方和下方添加了分隔线，并在h2元素中添加了intro-text和text-center类。
现在我们只需要将图片添加到文章中。如果我们使用CSS中已定义的img-responsive、img-border和img-left类，文章将呈现为模型所示。
这样，模板的主页就与原始模板相同，只是内容来自Joomla！
第二页 - 关于
一个网站通常包含多个页面，所以我们将使用剩余的示例来创建子页面。下一个菜单项是“关于”或“关于我们”（西班牙语）。
这个页面很简单，我们有站点标题、地址、菜单、一段文字、一个包含图片的块和页脚。这一切都在我们的模板中定义了，现在我们需要创建一个新的文章，其中包含介绍性文字和一个包含图片的模块。
在前面的步骤中，我们没有注意我们在哪些页面上展示我们创建的模块。现在我们需要做一些更改。我们进入幻灯片、标语和页脚模块的配置，将显示选项设置为仅在选择页面上显示，即主页。这样这些模块就不会在子页面上显示。
现在我们创建一个名为“关于我们”的新文章，并插入示例代码，更改图片路径
<div class="col-md-6">
<img class="img-responsive img-border-left" alt="" src="/images/slideshow/slide-2.jpg" />
</div>
<div class="col-md-6">
<p>This is a great place to introduce your company or project and describe what you do.</p>
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="clearfix"> </div>
保存文章并创建一个新的菜单项来显示该文章。在页面查看选项卡中，我们在显示页面标题字段中设置为否（如果我们不打算显示页面标题，我们也可以在菜单全局选项中更改此变量）。
现在我们看到标题再次没有正确的样式
在这里，我们还需要一个覆盖。这次是com_content，article。就像我们为精选文章做的那样，我们更改了标题的代码，如下所示
<div class="page-header">
<hr>
<h2 class="item-title intro-text text-center" itemprop="name">
<?php if ($params->get('show_title')) : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</h2>
<?php if ($this->item->state == 0) : ?>
<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if (strtotime($this->item->publish_up) > strtotime(JFactory::getDate())) : ?>
<span class="label label-warning"><?php echo JText::_('JNOTPUBLISHEDYET'); ?></span>
<?php endif; ?>
<?php if ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != JFactory::getDbo()->getNullDate()) : ?>
<span class="label label-warning"><?php echo JText::_('JEXPIRED'); ?></span>
<?php endif; ?>
<hr>
</div>
通过这个简单的更改，我们实现了标题的新样式
现在我们还需要创建一个显示我们团队图片的模块。我们将模板代码复制到一个自定义HTML模块中，将其位置设置为“底部”，并且仅在“关于我们”页面上显示。
这是我们从about.html复制的代码
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Our
<strong>Team</strong>
</h2>
<hr>
</div>
<div class="col-sm-4 text-center">
<img class="img-responsive" src="/http://placehold.it/750x450" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
</div>
<div class="col-sm-4 text-center">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
</div>
<div class="col-sm-4 text-center">
<img class="img-responsive" src="http://placehold.it/750x450" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
</div>
<div class="clearfix"></div>
在这个模块中，我们正在加载一些使用placehold.it服务的占位符图片。这个服务允许我们使用不同大小的图片来帮助我们布局网站，例如在没有真实图片的情况下向客户展示。
好的，关于我们页面就这样完成了
第三页 - 博客
对于博客页面，我们需要三个新的文章，我们将它们保存在一个名为“博客”的分类中，以便保持有序。
博客文章将包含标题、引言文本、完整文本和图片。
对于文章，我们遵循以下步骤。插入我们的文本，并用“阅读更多”来分割。
我们选择带有“无”浮动的引言图片。
当我们完成文章后，我们创建菜单项。为了显示文章的发布日期，我们在菜单配置中激活此选项（请记住，我们在文章的全局配置中已禁用此变量）。
在文章的全局选项中，我们进行其他一些小的更改
显示标题而不是“阅读更多” = 隐藏
在博客或精选类型格式选项中，我们将引言文章数量设置为0，列数量设置为1。
但页面还不是应有的样子
我们再次需要覆盖的帮助。这次是com_content，category。
一旦创建了必要的文件，我们打开blog_item.php文件，将引言图片的位置（item); ?>）放置在文章标题之前。
为了适应Bootstrap的新版本，在blog.php文件中，我们将把类“span-< ?php echo round((12 / $this->columns)); ? >”更改为“col-lg-< ?php echo round((12 / $this->columns)); ? >”。在关闭该
以创建文章之间的分隔线。
现在我们需要一些特殊的覆盖。从版本3开始，Joomla包括“布局”，这些是小块代码，在不同地方重复出现，并使用JLayoutHelper::render命令和布局名称加载。
在博客类型格式中，我们找到了多个布局，例如文章标题、图片和信息块。
joomla.content.blog_style_default_item_title
joomla.content.intro_image
joomla.content.info_block.block
通过在模板中创建修改，我们可以让Joomla复制到layouts、content中的所有必要文件。
我们首先从图片开始更改，打开intro_image.php文件，并为图片添加CSS类。
<?php if (isset($images->image_intro) && !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($displayData->slug, $displayData->catid, $displayData->language)); ?>"><img
<?php if ($images->image_intro_caption):
echo 'class="caption img-responsive img-border img-full"' . ' title="' . htmlspecialchars($images->image_intro_caption) . '"';
endif; ?>
src="/<?php echo htmlspecialchars($images->image_intro); ?>" class="img-responsive img-border img-full" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" itemprop="thumbnailUrl"/></a>
<?php else : ?><img
<?php if ($images->image_intro_caption):
echo 'class="caption img-responsive img-border img-full"' . ' title="' . htmlspecialchars($images->image_intro_caption) . '"';
endif; ?>
src="/<?php echo htmlspecialchars($images->image_intro); ?>" class="img-responsive img-border img-full" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" itemprop="thumbnailUrl"/>
<?php endif; ?>
</div>
>
接下来是标题，因此我们打开blog_style_default_item_title.php文件，并在“page-header”旁边添加类“text-center”。
现在我们转到详细块（作者、发布日期等）。在block.php文件中，我们移除了负责“详细信息”标题的
- 上添加了类“text-center”。然后我们查找publish_date.php文件，并删除此代码部分'COM_CONTENT_PUBLISHED_DATE_ON'，以便只显示日期。
- 任何HTML/CSS模板都可以转换为Joomla模板
- 创建Joomla模板最重要的文件是index.php和templateDetails.xml
- index.php提供了站点的结构，这里以动态方式包含Joomla的内容和模块
- 使用覆盖项，我们可以修改组件和模块的视图，以适应我们的模板
- 创建高质量的模板不需要使用大型框架
- 模板越简单，维护和更新就越容易
然后我们取用readmore.php文件来更改“阅读更多”按钮，并为包围按钮的
添加类“text-center”，同时为按钮本身添加类“btn-default btn-lg”。
现在我们只需对CSS做一些调整，以便文章标题和发布日期看起来更接近模型。通过将这些类添加到我们的business-casual.css中，我们可以实现与原始版本非常相似的效果
.page-header {
margin: 0;
}
.published {
text-transform: uppercase;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1;
color: #777;
letter-spacing: 1px;
}
第四页 - 联系我们
对于联系我们页面，我们将稍微修改Joomla的内置组件。它不会完全与示例一样，但我们将尽可能适应Bootstrap 3。
我们再次创建一个覆盖，这次是com_contact，contact（因为我们只显示一个特定的联系）。
我们将更改default.php文件中的更改，以便以不同的方式显示联系标题或名称。
<div class="page-header">
<hr>
<h2 class="intro-text text-center">
<?php if ($this->item->published == 0) : ?>
<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<span class="contact-name" itemprop="name"><?php echo $this->contact->name; ?></span>
</h2>
<hr>
</div>
在default_form.php文件中，我们进行更大的更改，以便让联系表单适应Bootstrap。
<div class="contact-form">
<form id="contact-form" action="<?php echo JRoute::_('index.php'); ?>" method="post" class="form-validate form-horizontal">
<fieldset>
<legend><?php echo JText::_('COM_CONTACT_FORM_LABEL'); ?></legend>
<div class="form-group">
<div class="col-sm-2 control-label"><?php echo $this->form->getLabel('contact_name'); ?></div>
<div class="col-sm-10 controls"><?php echo $this->form->getInput('contact_name'); ?></div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label"><?php echo $this->form->getLabel('contact_email'); ?></div>
<div class="col-sm-10 controls"><?php echo $this->form->getInput('contact_email'); ?></div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label"><?php echo $this->form->getLabel('contact_subject'); ?></div>
<div class="col-sm-10 controls"><?php echo $this->form->getInput('contact_subject'); ?></div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label"><?php echo $this->form->getLabel('contact_message'); ?></div>
<div class="col-sm-10 controls"><?php echo $this->form->getInput('contact_message'); ?></div>
</div>
<?php if ($this->params->get('show_email_copy')) : ?>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<?php echo $this->form->getInput('contact_email_copy'); ?>
<?php echo $this->form->getLabel('contact_email_copy'); ?>
</div>
</div>
</div>
<?php endif; ?>
<?php //Dynamically load any additional fields from plugins. ?>
<?php foreach ($this->form->getFieldsets() as $fieldset) : ?>
<?php if ($fieldset->name != 'contact') : ?>
<?php $fields = $this->form->getFieldset($fieldset->name); ?>
<?php foreach ($fields as $field) : ?>
<div class="form-group">
<?php if ($field->hidden) : ?>
<div class="col-sm-12 controls">
<?php echo $field->input; ?>
</div>
<?php else: ?>
<div class="col-sm-2 control-label">
<?php echo $field->label; ?>
<?php if (!$field->required && $field->type != "Spacer") : ?>
<span class="optional"><?php echo JText::_('COM_CONTACT_OPTIONAL'); ?></span>
<?php endif; ?>
</div>
<div class="col-sm-10 controls"><?php echo $field->input; ?></div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php endforeach; ?>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default validate" type="submit"><?php echo JText::_('COM_CONTACT_CONTACT_SEND'); ?></button>
<input type="hidden" name="option" value="com_contact" />
<input type="hidden" name="task" value="contact.submit" />
<input type="hidden" name="return" value="<?php echo $this->return_page; ?>" />
<input type="hidden" name="id" value="<?php echo $this->contact->slug; ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
</div>
</fieldset>
</form>
</div>
这些更改与我们在样式表中定义的一些额外类一起工作
legend {
font-size: inherit;
padding: 10px 0 5px;
display: inline-block;
}
textarea#jform_contact_message {
height: auto !important;
}
.form-horizontal .control-label {
text-align: left;
}
.controls input {
margin-bottom: 10px;
}
.controls input, .contact-form #jform_contact_message {
display: block;
width: 60%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff !important;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
最后，我们修改default_address.php文件，以显示Bootstrap（Glyphicons）的图标，因为Joomla的图标不够美观。例如，我们使用以下代码更改电话图标：
<span class="glyphicon glyphicon-earphone" ></span>
更改图标的另一种方法是选择全局联系人配置中的其他图像。
为此，我们需要访问我们上传到站点的自定义图标，并在此处配置。
在此文件中，我们还可以更改信息的顺序，例如将邮政编码放在城市之前或之后，具体取决于国家/地区。
现在的联系我们页面如下所示
如果您想添加Google地图，您肯定在JED中找到一个扩展。
不谦虚地说，我们得到了一个非常漂亮的模板！
最终步骤
还有很多细节可以修改，但我们没有足够的时间！留作作业吧 :-)
作为对您如此细心的读者的奖励，我为模板创建了一个错误页面、一个离线页面以及一些其他文件和模块的修改。
此模板的完整包可以从我的GitHub仓库下载：Github。
您可以根据项目需求调整这个模板，并根据需要添加覆盖项。如果您在寻找用于模板的优质图片，可以访问unsplash.com，这是一个提供免费图片的免费服务，适用于各种项目。
摘要
《Joomla社区杂志》上发布的一些文章代表了作者对特定主题的个人意见或经验，可能不代表Joomla项目的官方立场
关于作者
通过接受，您将访问由https://magazine.joomla.net.cn/之外第三方提供的服务
评论