在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中的工作方式相同。

相关文章
|
4月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
7月前
【项目bug】:解决elementui抽屉组件打开时页面抖动
解决elementui抽屉组件打开时页面抖动
185 0
|
9月前
|
中间件
Nuxt处理全局组件的显示与隐藏
在Nuxt开发过程中,大家会遇到需要控制全局组件的显示与隐藏。比如说移动端的路由导航栏、头部的返回操作。。。 为了使切换页面的同时,确定是否展示全局组件,保证页面展示的平稳过渡。 下面是我在项目中用到一个办法,已实现。
167 0
|
数据安全/隐私保护
uniapp动态切换显示不同内容组件
通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.
uniapp动态切换显示不同内容组件
uniapp配置全局样式
本文讲解如何使用uniapp配置全局样式,和其中的优先级问题。
571 0
uniapp配置全局样式
|
缓存 前端开发 JavaScript
换肤 - 一文看破常用的网站主题切换方式
现在大部分主流网站都不约而同的添加了暗色主题,让我们一起看看这些常用的切换方案、实现方式以及注意点。
|
前端开发
前端工作小结71-修改首页布局样式
前端工作小结71-修改首页布局样式
69 0
前端工作小结71-修改首页布局样式
Qml实用技巧:将样式style从对象中独立出来,可使多个按钮加载同一个样式
Qml实用技巧:将样式style从对象中独立出来,可使多个按钮加载同一个样式
Qml实用技巧:将样式style从对象中独立出来,可使多个按钮加载同一个样式
关于QtForMac开发 ui界面设置最小宽度和高度无效 的解决方法
关于QtForMac开发 ui界面设置最小宽度和高度无效 的解决方法