如何在Wagtail ModelAdmin的基于Page的列表视图中添加Live链接？

当然有简便方法啦！我给你整理了具体的实现步骤，能让你在ModelAdmin列表里得到和页面树界面完全一致的“Live”链接效果：

步骤1：自定义列表显示字段函数 #

直接在你的wagtail_hooks.py里，给ArticlePageModelAdmin类添加一个自定义方法来生成Live链接，替换掉原来的live字段：

from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register

class ArticlePageModelAdmin(ModelAdmin):
    model = ArticlePage
    menu_label = 'Articles'
    menu_icon = 'folder-open-inverse'
    menu_order = 200
    add_to_settings_menu = False
    exclude_from_explorer = False
    # 把原来的'live'替换成自定义的live_link字段
    list_display = ('title', 'author','article_type', 'featured_status', 'first_published_at','live_link',)
    list_filter = ('article_type', 'featured_status', 'author')
    search_fields = ('title',)

    def live_link(self, obj):
        # 根据页面发布状态生成对应内容
        if obj.live:
            # 用Wagtail页面自带的full_url获取前端访问地址，样式和页面树的Live按钮一致
            return f'<a href="{obj.full_url}" target="_blank" class="button button-small button-secondary">Live</a>'
        else:
            # 未发布时显示灰色提示，和页面树的状态统一
            return '<span class="text-muted">Not live</span>'
    
    # 设置列表头显示的名称
    live_link.short_description = 'Live'
    # 告诉ModelAdmin这个字段包含HTML，需要渲染出来
    live_link.allow_tags = True

modeladmin_register(ArticlePageModelAdmin)

关键细节说明 #

• 替换list_display里的默认live字段为我们自定义的live_link方法，这样就能完全控制显示内容
• 用obj.full_url可以直接获取页面的完整前端访问地址，不用手动拼接URL
• allow_tags = True是必须的，否则ModelAdmin会把HTML代码当成纯文本显示
• 链接的样式类button button-small button-secondary和Wagtail原生页面树里的Live按钮样式完全一致，保证视觉统一

可选优化 #

如果你想让未发布页面的提示更贴近页面树的风格，也可以把else分支改成：

else:
    return '<span class="label label-warning">Draft</span>'

这样调整后，你的ModelAdmin列表里的“Live”列就和页面树界面的效果一模一样啦！

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