为Wagtail中Page类型模型定制管理界面编辑模板

我定义了如下SomePage模型，希望在其Admin界面的编辑模板中添加按钮或图片，但未找到通过hooks实现的方法。我认为这类页面管理界面理应支持定制，恳请提供解决方案或建议。

模型代码：

class SomePage(Page):
    max_count = 1
    text = models.TextField(verbose_name='Text')
    content_panels = Page.content_panels + [
        FieldPanel("text"),
    ]

    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        return context

界面截图：

方法一：覆盖后台编辑模板 #

Wagtail支持通过模板继承定制后台页面，步骤如下：

1. 在项目中创建路径 templates/wagtailadmin/pages/edit.html
2. 继承原模板并插入自定义内容，比如在页面顶部添加按钮和图片：

{% extends "wagtailadmin/pages/edit.html" %}

{% block content %}
    <!-- 自定义内容 -->
    <div class="button-group mb-3">
        <button type="button" class="button button-secondary">我的自定义按钮</button>
        <img src="/static/images/custom-img.png" alt="自定义图片" style="max-height:40px; margin-left:10px;">
    </div>

    <!-- 保留原页面内容 -->
    {{ block.super }}
{% endblock %}

如果只想给SomePage单独定制，可通过页面类型判断：

{% extends "wagtailadmin/pages/edit.html" %}

{% block content %}
    {% if page.specific.__class__.__name__ == "SomePage" %}
        <div class="button-group mb-3">
            <button type="button" class="button button-secondary">仅SomePage显示的按钮</button>
        </div>
    {% endif %}

    {{ block.super }}
{% endblock %}

方法二：用Wagtail钩子注入内容 #

利用Wagtail的页面钩子，在Python代码中注册并添加自定义HTML：

1. 在app目录下创建wagtail_hooks.py，添加以下代码：

from wagtail import hooks
from django.utils.html import format_html

@hooks.register('insert_after_page_title')
def add_custom_elements(request, page=None):
    # 仅对SomePage生效
    if page and page.specific.__class__.__name__ == 'SomePage':
        return format_html(
            '<div class="button-group mt-2">'
            '<button type="button" class="button button-secondary" onclick="alert(\'按钮被点击\');">自定义操作</button>'
            '<img src="/static/images/icon.png" alt="图标" style="height:30px; vertical-align:middle; margin-left:8px;">'
            '</div>'
        )
    return ''

2. 确保app已加入INSTALLED_APPS，钩子会自动加载生效。

方法三：自定义Panel嵌入内容面板 #

如果想把按钮/图片放到内容编辑区域的面板里，可自定义Panel：

1. 定义自定义Panel类：

from wagtail.admin.panels import Panel
from django.utils.html import format_html

class CustomActionPanel(Panel):
    def render(self):
        return format_html(
            '<div style="padding:12px; border:1px solid #e5e5e5; border-radius:4px; margin-bottom:16px;">'
            '<button type="button" class="button button-primary">面板内操作按钮</button>'
            '<img src="/static/images/panel-icon.png" alt="面板图片" style="margin-left:12px;">'
            '</div>'
        )

2. 在SomePage的content_panels中添加该Panel：

class SomePage(Page):
    max_count = 1
    text = models.TextField(verbose_name='Text')
    content_panels = Page.content_panels + [
        CustomActionPanel(),  # 加入自定义面板
        FieldPanel("text"),
    ]

    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        return context

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