10.3 定义自己的模块风格-v0.0.13版本

在前面我们已经了解了Joomla自带的模块风格，在本节就开始介绍如何创建自己的模块风格。

1，本节目标

了解如何创建自己的模块风格

2，modules.php

2.1，创建modules.php文件

要定义自己的模块风格，首先需要在自己的模板的根目录下创建一个html文件夹，然后在这个文件夹中创建一个modules.php。完整的路径如下：网站的根目录/templates/你的模板/html/modules.php

2.2 定义模块风格类

我们需要在modules.php文件中定义一个方法，这个方法的名称为 modChrome_STYLE。这里的STYLE就是你需要定义的模块类型的风格名称。这个方法有3个参数，$module ,&$params，&$attribs. 一段典型的代码如下：

function modChrome_zmaxround($module, &$params, &$attribs)
{    //这里写具体的代码
}

3，风格参数说明

在这个方法中，系统会自动设置好$module,$params,$attribs这些变量，基本上涵盖了一个模块的所有信息。（这些信息都存储在#__modules这个表中）。在这些信息中，通常我们会用的几个属性如下：

• $module->content :模块的内容
• $module->showtitle:是否显示模块的标题
• $module->title:模块的标题

这个函数的实现和正常的PHP代码没有区别。下面一段代码演示了如何来判断是否输出模块的标题。

<?php
  if ($module->showtitle) 
  {
    echo '<h2>' .$module->title .'</h2>';
  }
?>

我们可以通过$params这个变量来获得模块的设置参数。 模块的参数就是管理员在后台设置的参数。通过调用get方法来获得具体的参数的这。一段典型的代码如下：

<div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <!-- div contents -->
</div>

访问自定义的模块风格属性

在定义模块位置的时候，我们也可以自定义一些附加的属性。如: <jdoc:include type="modules" name="user1" style="custom" background="green" /> 在定义这个位置的时候，我们也指定了一个background属性。同样的，这些属性也会通过$attribs这个变量传递给我们，以便我们调用。

一段典型的代码如下：

<?php
if (isset( $attribs['background'] )) 
    {
      $background = $attribs['background'];
    } else {
      $background = 'blue';
    }
?>

4，v0.0.13版本

在本版中，我们自定义了一种模块风格zmaxround,该风格可以给模块增加一个圆角。

4.1 代码片段如下：

function modChrome_zmaxround($module, &$params, &$attribs)
{ ?>
<div class=" zmaxround module<?php echo htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8'); ?>">
	<div class="module-wrap">
<div>
	<div class="zmax-module-container">
<?php if ((bool) $module->showtitle) : ?>
	<div class="module-title">
<h3><?php echo $module->title; ?></h3>
	</div>
<?php endif; ?>
<div class="module-content">
	<?php echo $module->content; ?>
</div>
	</div>
</div>
	</div>
</div>
	<?php

4.2 执行的效果

在模块高级参数-模块样式下面可以看到我们自定义的模块风格。如图：

将该风格应用后，在前台显示的效果如下：

4.3 v0.0.13版本的代码

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

5，说明

• 由于本版本中增加了一个新的文件夹html。因此在打包的时候记得修改templateDetailes.xml文件加上html这个文件夹