在过去的几周里，我一直在重建一个用核心Joomla和核心卡西奥佩亚模板构建的Joomla网站。这不是为了客户，而是一个练习，以满足我自己的信念，即不需要页面构建器。

每次我看到有人提倡使用页面构建器与Joomla，我脖子后面的毛发都会竖起来。对我来说，这让我想起了我使用Frontpage或Dreamweaver构建网站的日子。每个页面都是独立的，性能可能很糟糕，当客户想要更新内容时，这会非常耗时。

我已经完全准备好遇到一些挑战，但到目前为止，我已经完成了大约80%，最大的挑战是找到一种在内容中创建全宽模块的方法。

面临的问题是，我们只能在内容的容器中插入一个模块。为了使模块（或其背景）扩展到页面整个宽度，我们需要做更多的工作。经过一些研究，我发现可以通过添加一个div和一个CSS类来实现。

内容中的模块

在文章中包含任何模块都很容易做。我为此创建的个人工作流程如下。

1. 以正常方式创建我想要的模块，但将其放在一个自定义命名模块位置中，例如articlepraisequote
2. 在文章中，我使用CMSContent按钮，选择模块，然后选择要插入的模块。
3. 然后Joomla将插入一个类似{ loadmoduleid 128 }的字符串，并将在文章中渲染所选模块。

自定义命名模块位置

通过使用自定义命名模块位置，我可以确信它不会意外地显示在额外的页面上，并且我不必浪费时间将模块分配给特定的菜单项——这当然是在创建菜单项之后才能做的事情。

创建位置是一个简单且非常有用，但通常不会在教程中遇到的操作。你所要做的就是进入模块位置选择框，输入你想创建的位置名称，然后按回车。就是这样 - 模块位置现在已保存 - 因为它本身不在模板中，所以它不会在任何地方显示，除非你像上面那样特别调用它。

模块样式化

有几种不同的方式来样式化模块。

1. 向模块选项添加CSS类
2. 为模块创建布局覆盖
3. 为模块创建新布局

然而，所有这些都与模块相关，我想创建将任何模块添加到内容并使其全宽的能力。

模块外观（模块样式）

在做出任何更改之前，你需要了解模块外观及其创建的HTML标记。是的，对于同一件事有两个不同的名称可能很令人困惑。用户界面称其为模块样式，但文件位于layouts/chromes中。

在最基本的术语中，模块外观是围绕模块的标记。模块样式的概念背后的目标是使网站上任何模块的显示保持一致性。当你创建模块时，你将在“高级”选项卡中看到的大多数设置都适用于模块外观而不是特定模块。（不幸的是，并非所有这些选项都已在每个外观中实现。）

通常，要使用的chrome已在特定模块位置的模板中定义，我们从不更改它。

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

Joomla包含四个模块外观，Cassiopeia模板有额外的两个，即card和noCard。

当你创建模块时，默认设置是继承，这意味着它将使用为该模块位置定义的模板中的样式，但你也可以从下拉菜单手动选择不同的样式。

由于我们将模块插入到自定义名称的模块位置中的文章中，因此没有为该位置定义外观，因此如果我们将其保留在默认设置，则不会应用任何外观。

创建全宽模块外观

现有的Cassiopeia外观noCard.php将是我们作为基础的清洁版本，因为它应用简单的HTML标记，并实现了模块的所有选项。

使用模板管理器（或IDE）将文件 templates\cassiopeia\html\layouts\chromes\noCard.php 复制到 templates\cassiopeia\html\layouts\chromes\fullWidth.php

确保你正在编辑新创建的文件后，通过编辑 $moduleAtrribs['class'] 来更改标记

$moduleAttribs['class'] = $module->position . ' fullwidth ' . htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_QUOTES, 'UTF-8');

然后添加一个额外的div，并添加一个类，如下所示。

<<?php echo $moduleTag; ?> <?php echo ArrayHelper::toString($moduleAttribs); ?>>
	<div class="container">
        <?php if ($module->showtitle) : ?>
            <?php echo $header; ?>
        <?php endif; ?>
        <?php echo $module->content; ?>
    </div>
</<?php echo $moduleTag; ?>>

添加全宽模块类

在chrome中添加了新类，我们现在需要添加该类的CSS。

使用模板管理器（或IDE）创建文件 media/templates/site/cassiopeia/css/user.css - 或者如果你已经创建了它，则打开现有的 user.css。

现在你应该添加以下类

.fullwidth {
  margin-left: calc( -50vw + 50% + 10px );
  margin-right: calc( -50vw + 50% );
  max-width: calc( 100vw - 20px );
  padding-top: 30px;
  padding-bottom: 20px;
}

此CSS使模块能够突破正常内容宽度的限制，并跨越整个视口宽度，例如全宽图像横幅、轮播图或其他特色部分。小的边距确保全宽元素与视口边缘之间有一些间隔，防止它直接接触边缘。

汇总所有内容

1. 创建你希望在内容中插入的模块
2. 添加自定义位置
3. 将模块样式从 继承 更改为 全宽
4. 将类或多个类添加到模块类后缀中，例如 text-bg-primary text-center
5. 将模块插入内容中。

最终结果