12.2 实现多风格模板 -v0.0.18版本

在实际网站的制作中，我们会看到有一些页面十分的相似，但有一些页面感觉完全是完全不同的风格，无论这样安排模块都无法实现想要的效果。一个典型的例子就是网站的首页和内容页的布局。今天，我们将为这种问题提供解决方案——多风格的模板

1，本节目标

了解什么是模板风格，以及如何定义模板的风格

2，模板风格

2.1 什么是模板风格

模板风格可以让我实现网页对不同页面的不同布局。

关于模板风格的详细介绍请参考：模板风格（样式）
关于模板风格的使用请参考：网站首页的实现

2.2 如何定义模板风格

a,增加模板风格选择参数

模板风格是和模板的参数有关的，通过设置不同的模板参数来实现不同的风格。我们知道不同的模板风格最大的区别是他们的布局不一样，因此，第一步要做的就是在后台增加一个参数，让用户选择当前需要使用的布局。

<config>
	<fields name="params">
<fieldset name="advanced">
	<field 
name="logo" 
type="media" 
label="网站LOGO"
description="网站的LOGO ,大小建议100*80(px)" 
default="templates/planc/image/logo.png"
	/>
	<field
name="style"
type="filelist"
label="选择布局风格"
description="布局风格文件"
directory="templates/planc/styles" 
filter=".php" 
required="true"
default="default.php"
	/>
</fieldset>
	</fields>
</config>

上面在后台定义了style这个参数，这个参数的类型是filelist。这种字段类型的作用是列出指定文件夹中的所有文件。我们设置了directory（目录）这个参数的值为templates/planc/styles。最后的效果就是系统会读取出styles目录下的所有php文件。结果如下：

了解更多的字段类型请参考：XXXXX

b, 添加风格文件

下一步就是在模板的根目录下创建一个文件夹styles.并且在这个文件夹中新建两个布局文件:default.php，home.php.（内容为空）文件夹的结构如图：

default.php 代表默认的布局
home.php 代表了首页布局

这样就会在下拉选择框中看到我们的布局文件了。如图：

看到上面说明我们的模板风格的定义就完成了。

3，使用模板风格

假设现在我们需要给首页一种特殊的布局。那么我们需要做的就是创建一种新的风格。如何创建模板风格请参考：网站首页的实现 .完成后，在样式管理中可以看到如下截图：

从上图中可以看到planc现在有两种风格了。一个是默认，一个是首页宽屏风格。这两种风格唯一的不同就是模板的参数设置值不同。默认风格设置的布局风格为default.php。首页宽屏风格设置是home.php。如图：

4，实现模板风格

如果你做完了上面的设置，刷新前台，你会发现前台根本没有变化。这是因为我们还没有实现这些参数以及布局文件。接下来要做的就是改进我们的代码的结构。

<html>
	<head>
<jdoc:include type="head" />
	</head>
	<body>
<?php  
	$style = $this->params->get("style","default.php");
	$layoutFile = JPATH_ROOT."/templates/planc/styles/".$style;
	ob_start();
	include($layoutFile);
	$output = ob_get_contents();
	ob_end_clean();
	echo  $output;	
?>
	</body>
</html>

在index.php中我们做的就是首先获得当前使用的布局风格，然后加载这个风格对应的文件。现在我们将全部的布局文件的细节放到具体的style中去实现了。这样通过在具体的风格中文件中定义不同的模块位置就是可以实现多种页面风格了。home.php代码片段如下：

<div class="mid">
	<?php if ($this->countModules('scroll-row')) : ?>
	<div class="scroll-row">
<jdoc:include type="modules" name="scroll-row" style="none" />
	</div>
	<?php endif ?>
	
	<?php if ($this->countModules('feature-row')) : ?>
	<div class="features-list">
<jdoc:include type="modules" name="feature-row" style="featureRow" />
	</div>
	<?php endif ?>
</div>

home布局的顶部和尾部和default一样，唯一不一样的就是中部，在home的中部没有定义组件输出，一个scroll-row位置和feature-row这个位置.

4，v0.0.18版本

4.1 代码

在本次版本中，我们对模板的执行流程进行了重新的设计，将具体的模块位置的定义单独提取放到style下面的布局文件中。但我们需要增加新的布局，只需要将原有的文件复制一份，在原有基础上进行修改即可。通过这种方法我们可以实现任何风格的页面

4.2 前台效果

4.3 v0.0.18版本

关于v0.0.18版本的代码，可以在此下载 tpl_plancv0.0.18_2019-01-19_for_j3x.zip

5，说明

在Joomla中，要求所有的文件都必须是UFT8 无BOM格式的。否则可能出现异常
在本版本中我们增加了styles文件夹，在打包安装包的时候不要忘记在templateDetails.xml文件中增加

作者：张敏

原文：http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1564-first-template-36?tmpl=component&zhuanti=1

12.2 实现多风格模板 -v0.0.18版本

1，本节目标

2，模板风格

3，使用模板风格

4，实现模板风格

4，v0.0.18版本

5，说明

Joomla模板开发教程

获取最新资讯

基础学习教程

Joomla系列教程

站内链接