在Joomla 4中,模块样式将转移到布局文件

简介:

在Joomla博客中,我们已经为明年的Joomla 4版本撰写了大量文章。

在本教程中,我将讨论Joomla 4中的一项技术更改,它将对设计人员产生重大影响。

joomla4_module_styles_1

在Joomla中,模块样式定义模块的HTML输出。这些样式控制模块标题,标题和类后缀的输出。

在Joomla 3之前,模块样式是通过位于每个模板/html文件夹内名为modules.php的唯一文件来管理的。

从Joomla 4开始,模块样式将在布局文件中进行管理。

在这篇文章中,我将向您介绍在即将发布的Joomla 4中实现样式化模块的新方法。

Joomla 3中的模块样式如何工作

首先,让我解释一下Joomla 3中的模块样式是如何工作的。

例如,在/templates/ Protostar /index.php文件中定义了Protostar模板中的模块 position-7,定义如下:


在上面的代码中,style属性是“well”。这种样式的HTML结构是通过一个名为modChrome_style()的方法在/templates/protostar/ HTML /modules.php文件中定义的。因此,本例中的方法名为modChrome_well()。

下面是使用“well”样式的模块会呈现的内容:

joomla4_module_styles_2

Joomla 4中的模块样式如何工作

在Joomla 4中,modules.php文件已被删除,取而代之的是布局文件,每个模块样式一个布局文件。

例如,在/templates/ Cassiopeia /index.php文件中定义了Cassiopeia模板中的top-a模块位置,如下所示:


在上面的代码中,样式属性是“cardGrey”。这种样式的HTML结构是在/templates/cassiopeia/ HTML /layouts/chromes/cardGrey.php文件中定义的。

使用“cardGrey”样式的模块将呈现如下:

joomla4_module_styles_3

“模块样式”选项

即使在模板的index.php文件中为每个位置定义了模块样式,您也可以在编辑模块时选择不同的样式。为此,可以使用模块的选项卡“Advanced”>参数“module Style”。

使用这个参数,你可以访问核心Joomla风格,包括从所有模板:

joomla4_module_styles_4

请注意,“模块样式”选项在Joomla 4中的工作方式与在Joomla 3中的工作方式相同。

相关文章
|
6月前
|
前端开发
一个方便的小系统,用于 CSS 中的动画入口
一个方便的小系统,用于 CSS 中的动画入口
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
本文介绍了在C# WPF应用程序中引入外部iconfont图标时可能遇到的显示问题及其解决方法:1) 检查资源路径和引入格式是否正确,确保字体文件引用格式为“#xxxx”,并正确指向字体文件位置;2) 确保图标资源被包含在程序集中,通过设置字体文件的生成操作为Resource(资源)来实现。
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
|
2月前
|
前端开发 PHP
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
本文介绍了ThinkPHP6中实现模板布局的三种方式:全局配置方式、模板标签方式和动态方法布局,并通过示例代码展示了如何在项目中应用这些布局方式。
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
|
3月前
|
前端开发
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
284 0
如何在前端项目中单独引入 ElementUI 图标以及使用
|
4月前
|
容器
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
108 0
|
6月前
|
前端开发
若依框架----图标(可能不全)css
若依框架----图标(可能不全)css
309 0
|
JavaScript
fastadmin 自定义 按钮 动态切换数据 TAB切换
fastadmin 自定义 按钮 动态切换数据 TAB切换
274 0
|
缓存 前端开发 JavaScript
换肤 - 一文看破常用的网站主题切换方式
现在大部分主流网站都不约而同的添加了暗色主题,让我们一起看看这些常用的切换方案、实现方式以及注意点。
|
前端开发
前端工作小结71-修改首页布局样式
前端工作小结71-修改首页布局样式
91 0
前端工作小结71-修改首页布局样式
Qml实用技巧:将样式style从对象中独立出来,可使多个按钮加载同一个样式
Qml实用技巧:将样式style从对象中独立出来,可使多个按钮加载同一个样式
Qml实用技巧:将样式style从对象中独立出来,可使多个按钮加载同一个样式