如何在Wagtail中创建Block/Template/Snippet？自定义轮播实现求助

一、项目文件目录结构 #

your-codered-project/
├── your_project/
│   ├── blocks/
│   │   ├── __init__.py
│   │   └── carousel_blocks.py  # 轮播Snippet与Block定义
│   ├── templates/
│   │   ├── blocks/
│   │   │   └── carousel_block.html  # 轮播Block前端模板
│   │   └── static/  # 存放slick-slider静态资源（本地部署用）
│   │       ├── css/
│   │       │   └── slick/
│   │       │       ├── slick.css
│   │       │       └── slick-theme.css
│   │       └── js/
│   │           ├── jquery.min.js
│   │           └── slick/
│   │               └── slick.min.js
│   └── settings/
│       └── base.py  # 注册自定义Block

二、定义轮播Snippet与Block #

在your_project/blocks/carousel_blocks.py中编写以下代码：

from django.db import models
from wagtail.admin.panels import FieldPanel, MultiFieldPanel
from wagtail.snippets.models import register_snippet
from wagtail.images.models import Image
from wagtail.snippets.edit_handlers import SnippetChooserPanel
from coderedcms.blocks.base_blocks import BaseBlock

# 单个轮播项：可复用的内容单元
@register_snippet
class CarouselItem(models.Model):
    title = models.CharField(max_length=255, blank=True)
    subtitle = models.TextField(blank=True)
    image = models.ForeignKey(
        Image,
        on_delete=models.SET_NULL,
        null=True,
        blank=False,
        related_name='+'
    )
    link_url = models.URLField(max_length=500, blank=True)
    link_text = models.CharField(max_length=100, blank=True, default='Learn More')

    panels = [
        FieldPanel('title'),
        FieldPanel('subtitle'),
        FieldPanel('image'),
        MultiFieldPanel([
            FieldPanel('link_url'),
            FieldPanel('link_text'),
        ], heading='Link Settings'),
    ]

    def __str__(self):
        return self.title or 'Unnamed Carousel Item'

    class Meta:
        verbose_name = 'Carousel Item'
        verbose_name_plural = 'Carousel Items'

# 轮播容器：可复用的完整轮播配置
@register_snippet
class Carousel(models.Model):
    name = models.CharField(max_length=255, help_text="Internal name for identifying this carousel")
    items = models.ManyToManyField(CarouselItem, related_name='carousels')
    autoplay = models.BooleanField(default=True, help_text="Enable automatic sliding")
    slide_speed = models.PositiveIntegerField(default=3000, help_text="Milliseconds between slides")

    panels = [
        FieldPanel('name'),
        FieldPanel('items', widget=models.widgets.SelectMultiple),
        MultiFieldPanel([
            FieldPanel('autoplay'),
            FieldPanel('slide_speed'),
        ], heading='Slider Settings'),
    ]

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = 'Carousel'
        verbose_name_plural = 'Carousels'

# 自定义Block：用于在页面中插入轮播
class CarouselBlock(BaseBlock):
    carousel = models.ForeignKey(
        Carousel,
        on_delete=models.SET_NULL,
        null=True,
        blank=False,
        related_name='+'
    )

    panels = [
        SnippetChooserPanel('carousel'),
    ]

    class Meta:
        template = 'blocks/carousel_block.html'
        icon = 'image'
        label = 'Custom Carousel'

在your_project/blocks/__init__.py中导出Block：

from .carousel_blocks import CarouselBlock

三、注册自定义Block到CoderedCMS #

编辑your_project/settings/base.py，找到CRX_BLOCKS配置项，添加自定义Block：

CRX_BLOCKS = [
    # 保留原有Block配置，新增以下行
    'your_project.blocks.CarouselBlock',
]

四、编写轮播前端模板 #

创建your_project/templates/blocks/carousel_block.html，添加以下代码：

{% load wagtailimages_tags %}

<div class="custom-carousel" data-autoplay="{{ self.carousel.autoplay|lower }}" data-speed="{{ self.carousel.slide_speed }}">
    <div class="slick-slider">
        {% for item in self.carousel.items.all %}
            <div class="carousel-slide">
                {% image item.image fill-1920x800 class="slide-image" %}
                <div class="slide-content">
                    {% if item.title %}
                        <h2 class="slide-title">{{ item.title }}</h2>
                    {% endif %}
                    {% if item.subtitle %}
                        <p class="slide-subtitle">{{ item.subtitle }}</p>
                    {% endif %}
                    {% if item.link_url %}
                        <a href="{{ item.link_url }}" class="slide-link">{{ item.link_text }}</a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const carouselContainer = document.querySelector('.custom-carousel');
        if (!carouselContainer) return;

        const slider = carouselContainer.querySelector('.slick-slider');
        $(slider).slick({
            autoplay: carouselContainer.dataset.autoplay === 'true',
            autoplaySpeed: parseInt(carouselContainer.dataset.speed),
            dots: true,
            arrows: true,
            infinite: true,
            speed: 500,
            fade: true,
            cssEase: 'linear'
        });
    });
</script>

<style>
    .custom-carousel {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .carousel-slide {
        position: relative;
        height: auto;
    }
    .slide-image {
        width: 100%;
        height: auto;
        display: block;
    }
    .slide-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        z-index: 10;
        padding: 0 2rem;
    }
    .slide-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .slide-subtitle {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .slide-link {
        background-color: #2563eb;
        color: #fff;
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
        transition: background-color 0.3s ease;
    }
    .slide-link:hover {
        background-color: #1d4ed8;
    }
</style>

五、部署Slick-Slider资源 #

将slick-slider的CSS、JS文件下载到项目static目录（参考目录结构），并在项目基础模板（如base.html）中引入：

{% load static %}
<link rel="stylesheet" href="{% static 'css/slick/slick.css' %}">
<link rel="stylesheet" href="{% static 'css/slick/slick-theme.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/slick/slick.min.js' %}"></script>

使用说明 #

1. 登录Wagtail后台，先在Snippets菜单下创建Carousel Item和Carousel实例
2. 编辑页面时，在Block选择器中找到Custom Carousel，选择已创建的轮播即可插入

内容的提问来源于stack exchange，提问作者Lucas Duarte Almeida