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





