为您的分类博客创建一个漂亮的横幅，易于网站内容管理员调整和维护——您肯定需要扩展来完成这个任务？不是的。在Joomla中不需要。您甚至不需要是超级编码者就能实现这一点！阅读有关自定义字段如何样式化您的分类的全部内容。

已经有很多关于文章和分类博客的文章，但一个重要的方面却被忽略了：您可以在分类中使用自定义字段。

您将如何创建这样的横幅？使用扩展？让我们看看我们如何使用Joomla核心来完成它。

起始位置

我们有一个旅行博客（查看有关分类博客的这篇文章），有多个分类的文章：山脉、城市之旅和公路之旅。我们为每个分类都有一个菜单项。每个页面都应该有一个标题、副标题、简介文本和图片。这些信息应该在一个特定颜色的框中显示。

我们有Joomla元素来完成这个任务吗？是的！

标题：分类名称

副标题：自定义字段

简介文本：分类描述

图片：分类图片

颜色：自定义字段

创建字段

一开始可能看不到，这就是为什么它可能经常被忽视，但您可以为一个分类创建字段和字段组。在内容 -> 字段组中，您需要在下拉菜单中选择“分类”

我们将创建一个名为“分类详情”的组，并向其中添加一些字段

1. 一个用于副标题的文本字段
2. 一个单选字段，用于选择分类描述的布局
3. 一个颜色字段，用于选择框的颜色

所有字段都应该在选项中设置为“不自动显示”，因为我们想在博客视图的覆盖中使用它们。

这就是编辑我们的分类时看起来像什么，我们有一个新的标签页叫做“分类详情”，包含我们的三个字段

在“分类”标签页中，我们输入简介文本

而在“选项”中，我们选择图片

覆盖

为了在正确的位置显示新元素，我们将创建一个博客视图的覆盖（系统 -> 站点模板 -> 卡西欧佩亚详情和文件 -> 创建覆盖 -> 组件 -> com_content -> 分类）

系统将在我们的模板中创建几个文件，在html/com_content/category文件夹内。我们只需要blog.php文件，其他文件可以删除。

从第37行到第73行，我们找到了博客页面顶部的代码：页面标题、分类标题、分类标签、分类描述、分类图片等。由于我们网站上的不是所有分类都会有特殊框，所以我们不会修改原始代码。我们将它放在if/else语句中，作为我们新代码的替代。我们的想法是使用新的字段“描述布局”来控制博客页面的构建方式：如果我们选择“横幅”作为布局，我们将使用新代码并得到一个漂亮的框，如果我们选择“标准”（单选框的默认值），将使用博客视图的正常代码。

直接在第37行之后插入此代码

    <?php if ($this->category->jcfields[12]->rawvalue == 1) : ?>
        <div class="category-container fullwidth" style="background-color:<?php echo $this->category->jcfields[13]->rawvalue; ?>;">
            <div class="category-container__inner">
                <?php echo LayoutHelper::render(
                    'joomla.html.image',
                    [
                        'src' => $this->category->getParams()->get('image'),
                        'alt' => empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? false : $this->category->getParams()->get('image_alt'),
                    ]
                ); ?>
                <hgroup class="category-title">
                    <h1><?php echo $this->category->title; ?></h1>
                    <p><?php echo $this->category->jcfields[11]->rawvalue; ?></p>
                </hgroup>
            </div>
            <?php echo HTMLHelper::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
        </div>

    <?php else : ?>

并在该行之前

<?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>

关闭if语句

    <?php endif; ?>

    <?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>

覆盖的完整代码可以在这里找到

https://gist.github.com/drmenzelit/b5f0f159d424804ff7f741db6575d111

请确保将字段ID替换为您的自定义字段的ID。

代码解释

首先，我们使用if语句检查字段“描述布局”（在此案例中ID为12）的值是否为1（横幅布局）。如果是，则执行下面的代码。

我们创建一个具有“category-container”类的div元素（这对于CSS的样式化很重要），并添加一个内联样式用于我们的背景颜色（通常内联样式不是最佳实践，但在此情况下是可以接受的）。这样我们可以创建具有自己颜色的新分类，而无需为每个分类编写新的CSS。

在容器内部，我们创建另一个具有“category-container__inner”类的div元素，并在其中插入分类图片、分类标题和副标题字段，它们在一个hgroup元素中分组。在

.category-container {
    color: white;
    padding: 1.3rem;
    margin-bottom: 2rem;
}
.category-container p {
    margin-bottom: 0;
}
.category-container__inner {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: end;
    margin-bottom: 1rem;
}
.category-container__inner img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.category-container__inner .category-title {
    grid-column: 1;
    grid-row: 1;
    padding: 1rem;
}
.category-container__inner .category-title p {
    font-size: calc(1.2rem + .9vw);
}