Wagtail技术问题：如何修改自动生成区块的CSS类名？

问题背景 #

在Wagtail中定义了如下StructBlock：

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels + [FieldPanel('courses')]

前端渲染{{ page.courses }}后，自动生成了带block-Courses类名的外层div：

<div class="swiper-wrapper" id="swiper-wrapper-dfa89409b3fe2577" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
    <div class="block-Courses"></div>
    <div class="block-Courses"></div>
    <div class="block-Courses"></div>
</div>

尝试添加form_classname = 'swiper-wrap'配置后无效，反而生成了嵌套的空div，无法替换目标类名。

解决方案 #

核心说明 #

form_classname是用于后台编辑界面的类名配置，和前端渲染的结构无关，这是你之前用错方法的原因。要修改前端自动生成的外层div类名，有两种可靠方法：

方法1：手动循环StreamField（最直接可控）

放弃直接渲染{{ page.courses }}，改为循环每个区块并手动控制外层容器的类名：

1. 修改index.html的渲染逻辑：

<div class="swiper-wrapper" id="swiper-wrapper-dfa89409b3fe2577" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
    {% for block in page.courses %}
        <div class="swiper-wrap"> <!-- 这里替换为你需要的类名 -->
            {{ block }}
        </div>
    {% endfor %}
</div>

2. 调整区块模板blocks/course_block.html，移除原来的外层div（避免嵌套冗余结构），同时修正变量名错误（原模板中self.course_name等变量和StructBlock字段名不匹配）：

<div class="item-courses swiper-slide">
    <p class="item-courses__data">{{ self.Start_date }}</p>
    <div class="item-courses__title">
        <h3 class="title3">{{ self.Name }}</h3>
    </div>
    <div class="item-courses__text">
        <p class="text2">{{ self.Description }}</p>
    </div>
    <div class="item-courses__more">
        <div class="item-courses__price">
            <h4 class="title4">{{ self.Price }} ₫</h4>
        </div>
        <a href="#" class="item-courses__link link-hover">More</a>
    </div>
    <div class="item-courses__image">
        {% if self.Image %}
            <img src="{{ self.Image.url }}" alt="{{ self.Name }}">
        {% endif %}
    </div>
</div>

方法2：自定义StructBlock渲染逻辑

如果需要保留自动渲染的逻辑，可以自定义StructBlock并重写render方法，直接控制外层容器类名：

1. 在models.py中定义自定义Block：

from wagtail.blocks import StructBlock, CharBlock, TextBlock, ImageChooserBlock

class CourseStructBlock(StructBlock):
    Start_date = CharBlock()
    Name = CharBlock()
    Description = TextBlock()
    Image = ImageChooserBlock()
    Price = CharBlock()

    class Meta:
        icon = 'plus'
        template = 'blocks/course_block.html'

    def render(self, value, context=None):
        # 重写渲染逻辑，添加自定义类名的外层div
        block_content = super().render(value, context)
        return f'<div class="swiper-wrap">{block_content}</div>'

2. 更新StreamField的定义：

courses = StreamField([
    ('Courses', CourseStructBlock()),
], True)

注意：此方法需要同步修改course_block.html移除原有外层div，避免出现嵌套结构。

内容的提问来源于stack exchange，提问作者Hater