Wagtail如何在Admin面板动态渲染块实现媒体字段条件显隐

Wagtail原生StructBlock没有提供字段联动的内置能力，需要通过「前端JS控制编辑页字段显隐+后端自定义校验拦截非法数据」两个环节实现，具体步骤如下：

1. 修正基础块定义，添加后端校验 #

首先修正原有代码的拼写错误（StruckBlock应为StructBlock、videoChooserBlock应为大写开头的VideoChooserBlock），同时重写块的clean方法做数据合法性校验，避免前端绕过导致脏数据入库。注意将两个媒体选择器设为非必填，因为是二选一规则，统一在clean方法里做校验：

from wagtail.blocks import StructBlock, ChoiceBlock, ImageChooserBlock, VideoChooserBlock
from django.core.exceptions import ValidationError


class MediaChoiceBlock(StructBlock):
    media_type = ChoiceBlock(
        choices=(("image", "图片"), ("video", "视频")),
        label="媒体类型",
        default="image"
    )
    image = ImageChooserBlock(label="图片", required=False)
    video = VideoChooserBlock(label="视频", required=False)

    def clean(self, value):
        cleaned_data = super().clean(value)
        media_type = cleaned_data.get("media_type")
        image_val = cleaned_data.get("image")
        video_val = cleaned_data.get("video")

        if media_type == "image":
            if not image_val:
                raise ValidationError("选择图片类型时必须上传对应图片")
            if video_val:
                raise ValidationError("选择图片类型时不能同时上传视频")
        elif media_type == "video":
            if not video_val:
                raise ValidationError("选择视频类型时必须上传对应视频")
            if image_val:
                raise ValidationError("选择视频类型时不能同时上传图片")
        return cleaned_data

    class Meta:
        form_template = "blocks/media_choice_block_form.html"

2. 自定义块表单模板，添加前端联动逻辑 #

通过自定义块的表单模板，在模板内写入和当前块绑定的JS逻辑，不需要全局注入管理端脚本，不会污染其他管理页面。在项目模板目录下新建blocks/media_choice_block_form.html文件，写入以下内容：

{% extends "wagtail/blocks/struct_block_form.html" %}

{% block form %}
{{ block.super }}
<script>
(function() {
    // 定位当前块的DOM容器，避免多块实例互相干扰
    const blockContainer = document.currentScript.closest('.struct-block');
    if (!blockContainer) return;

    const typeSelect = blockContainer.querySelector('#{{ child_blocks.media_type.id_for_label }}');
    const imageField = blockContainer.querySelector('#{{ child_blocks.image.id_for_label }}').closest('.field-wrapper');
    const videoField = blockContainer.querySelector('#{{ child_blocks.video.id_for_label }}').closest('.field-wrapper');

    // 字段显隐切换逻辑
    function toggleFieldVisibility() {
        const selectedType = typeSelect.value;
        imageField.style.display = selectedType === 'image' ? 'block' : 'none';
        videoField.style.display = selectedType === 'video' ? 'block' : 'none';
    }

    // 初始化执行，适配已有内容回显场景
    toggleFieldVisibility();
    // 监听下拉选择变化
    typeSelect.addEventListener('change', toggleFieldVisibility);
})();
</script>
{% endblock %}

注意事项 #

• 模板文件路径要和Meta类中配置的form_template路径保持一致，确保Django能正常加载
• JS逻辑做了实例隔离，同一页面添加多个该媒体块时，各个块的显隐逻辑互不干扰
• 后端校验为强制逻辑，即使用户禁用JS、篡改前端请求，也无法提交不符合规则的内容

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