进入专题模式查看 >>

在前面我们已经了解了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 执行的效果

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

joomla自定义模块风格.png

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

 zmaxround风格截图.png

4.3 v0.0.13版本的代码

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

5,说明


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

用户评分: 0 / 5

不活动星星不活动星星不活动星星不活动星星不活动星星
 

评论

  • 未找到评论