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. 一段典型的代码如下:

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

3,风格参数说明


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

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

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

  1. <?php
  2. if ($module->showtitle)
  3. {
  4. echo '<h2>' .$module->title .'</h2>';
  5. }
  6. ?>

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

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

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

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

一段典型的代码如下:

  1. <?php
  2. if (isset( $attribs['background'] ))
  3. {
  4. $background = $attribs['background'];
  5. } else {
  6. $background = 'blue';
  7. }
  8. ?>

4,v0.0.13版本


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

4.1 代码片段如下:

  1. function modChrome_zmaxround($module, &$params, &$attribs)
  2. { ?>
  3. <div class=" zmaxround module<?php echo htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8'); ?>">
  4. <div class="module-wrap">
  5. <div>
  6. <div class="zmax-module-container">
  7. <?php if ((bool) $module->showtitle) : ?>
  8. <div class="module-title">
  9. <h3><?php echo $module->title; ?></h3>
  10. </div>
  11. <?php endif; ?>
  12. <div class="module-content">
  13. <?php echo $module->content; ?>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. <?php

4.2 执行的效果

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

joomla自定义模块风格

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

 zmaxround风格截图

4.3 v0.0.13版本的代码

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

5,说明


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


作者:张敏
原文:http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1551-first-template-23?tmpl=component&zhuanti=1

Joomla模板开发教程

© 野草工作室版权所有 | 粤ICP备13002429号

基础学习教程

站内链接