如何将含CBV的Django应用集成到Wagtail CMS并实现页面融合？

1. 创建Wagtail页面模型，包装CBV逻辑 #

定义一个Wagtail Page子类，集成StreamField用于页面编辑，同时重写serve方法引入Django CBV的业务逻辑：

# myapp/models.py
from wagtail.models import Page
from wagtail.fields import StreamField
from wagtail.admin.panels import FieldPanel
from wagtail.blocks import TextBlock, ImageChooserBlock
from django.views.generic import ListView
from myapp.models import YourModel

class CBVWrapperPage(Page):
    # 定义StreamField，支持可视化编辑页面内容
    body = StreamField(
        [
            ('text', TextBlock()),
            ('image', ImageChooserBlock()),
        ],
        use_json_field=True,
        blank=True
    )

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

    # 限制页面层级关系（可根据需求调整）
    parent_page_types = ['wagtailcore.Page']
    subpage_types = []

    def serve(self, request, *args, **kwargs):
        # 实例化Django ListView，绑定模板和模型
        cbv_view = ListView.as_view(
            model=YourModel,
            template_name='myapp/cbv_page.html'
        )
        # 执行CBV视图逻辑
        response = cbv_view(request, *args, **kwargs)
        # 将Wagtail页面上下文注入CBV模板
        response.context_data.update({
            'page': self,
            'body': self.body
        })
        return response

2. 编写整合模板，统一站点样式 #

模板需继承Wagtail站点基础模板，同时渲染StreamField内容和CBV返回的业务数据：

{# myapp/templates/myapp/cbv_page.html #}
{% extends "base.html" %} {# 继承你的Wagtail站点基础模板 #}

{% block content %}
    {# 渲染Wagtail页面的StreamField内容 #}
    {{ body }}

    {# 渲染CBV返回的列表数据 #}
    <h2>业务数据列表</h2>
    <ul>
        {% for item in object_list %}
            <li>{{ item.title }}</li>
        {% endfor %}
    </ul>

    {# HTMX逻辑直接嵌入，和普通Django视图用法一致 #}
    <div id="htmx-container">
        {% include "myapp/htmx_partial.html" %}
    </div>
{% endblock %}

3. 纳入Wagtail菜单结构 #

直接在Wagtail后台创建CBVWrapperPage的实例，该页面会自动加入站点页面树，Wagtail默认菜单标签（如{% wagtail_site_menu %}）会自动识别并展示它。若需自定义菜单，可通过Wagtail菜单管理功能或自定义模板逻辑调整。

4. 处理HTMX交互 #

HTMX逻辑与普通Django视图完全兼容，可单独编写HTMX视图并挂载路由：

编写HTMX视图

# myapp/views.py
from django.views.generic import View
from django.shortcuts import render_to_string
from django.http import HttpResponse
from myapp.models import YourModel

class HTMXDataView(View):
    def get(self, request):
        data = YourModel.objects.all()[:5]
        return HttpResponse(
            render_to_string('myapp/htmx_partial.html', {'data': data})
        )

挂载路由到Wagtail

创建wagtail_hooks.py将HTMX路由注册到Wagtail：

# myapp/wagtail_hooks.py
from django.urls import include, path
from wagtail import hooks
from .views import HTMXDataView

@hooks.register('register_admin_urls')
def register_myapp_urls():
    return [
        path('myapp/htmx-data/', HTMXDataView.as_view(), name='htmx-data'),
    ]

5. 复杂路由场景（可选） #

若CBV需要带参数的路由（如详情页），使用Wagtail的RoutablePageMixin实现子路由：

from wagtail.contrib.routable_page.models import RoutablePageMixin, route
from django.views.generic import DetailView

class RoutableCBVPage(RoutablePageMixin, Page):
    body = StreamField(...)

    @route(r'^items/$')
    def list_view(self, request):
        view = ListView.as_view(model=YourModel, template_name='myapp/list.html')
        response = view(request)
        response.context_data['page'] = self
        return response

    @route(r'^items/(?P<pk>\d+)/$')
    def detail_view(self, request, pk):
        view = DetailView.as_view(model=YourModel, template_name='myapp/detail.html')
        response = view(request, pk=pk)
        response.context_data['page'] = self
        return response

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