在Joomla博客中，我們已經(jīng)為明年的Joomla 4版本撰寫了大量文章。

在本教程中，我將討論Joomla 4中的一項(xiàng)技術(shù)更改，它將對(duì)設(shè)計(jì)人員產(chǎn)生重大影響。

在Joomla中，模塊樣式定義模塊的HTML輸出。這些樣式控制模塊標(biāo)題，標(biāo)題和類后綴的輸出。

在Joomla 3之前，模塊樣式是通過(guò)位于每個(gè)模板/html文件夾內(nèi)名為modules.php的唯一文件來(lái)管理的。

從Joomla 4開(kāi)始，模塊樣式將在布局文件中進(jìn)行管理。

在這篇文章中，我將向您介紹在即將發(fā)布的Joomla 4中實(shí)現(xiàn)樣式化模塊的新方法。

Joomla 3中的模塊樣式如何工作

首先，讓我解釋一下Joomla 3中的模塊樣式是如何工作的。

例如，在/templates/ Protostar /index.php文件中定義了Protostar模板中的模塊 position-7，定義如下:

<jdoc:include type="modules" name="position-7" style="well" />

在上面的代碼中，style屬性是“well”。這種樣式的HTML結(jié)構(gòu)是通過(guò)一個(gè)名為modChrome_style()的方法在/templates/protostar/ HTML /modules.php文件中定義的。因此，本例中的方法名為modChrome_well()。

下面是使用“well”樣式的模塊會(huì)呈現(xiàn)的內(nèi)容:

Joomla 4中的模塊樣式如何工作

在Joomla 4中，modules.php文件已被刪除，取而代之的是布局文件，每個(gè)模塊樣式一個(gè)布局文件。

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

<jdoc:include type="modules" name="top-a" style="cardGrey" />

在上面的代碼中，樣式屬性是“cardGrey”。這種樣式的HTML結(jié)構(gòu)是在/templates/cassiopeia/ HTML /layouts/chromes/cardGrey.php文件中定義的。

使用“cardGrey”樣式的模塊將呈現(xiàn)如下:

“模塊樣式”選項(xiàng)

即使在模板的index.php文件中為每個(gè)位置定義了模塊樣式，您也可以在編輯模塊時(shí)選擇不同的樣式。為此，可以使用模塊的選項(xiàng)卡“Advanced”>參數(shù)“module Style”。

使用這個(gè)參數(shù)，你可以訪問(wèn)核心Joomla風(fēng)格，包括從所有模板:

請(qǐng)注意，“模塊樣式”選項(xiàng)在Joomla 4中的工作方式與在Joomla 3中的工作方式相同。