Wagtail Headless CMS下如何修改PageModel预览模式的模板文件？

解决方法 #

Wagtail默认会按照{应用名}/{页面模型名小写}.html的规则自动查找对应模板，你遇到的报错就是因为没有创建对应路径的模板文件，你可以通过以下几种方式自定义模板加载逻辑，统一使用base.html：

方案1：直接给单个页面模型指定模板 #

在你的BlogPage类中直接定义template属性，指向你要用的base.html路径即可：

class BlogPage(Page):
    template = "base.html" # 新增这一行，路径对应你实际的base.html存放位置

    # 剩余原有代码不变
    body = RichTextField()
    date = models.DateField("Post date")
    # ... 剩下的字段、配置和之前一样

方案2：全局统一所有页面的模板 #

如果你有多个自定义页面模型，不想每个都单独指定模板，可以定义一个公共的基础页面类，所有自定义页面都继承它：

# 比如在你的app的models.py里先定义基础类
class BasePage(Page):
    class Meta:
        abstract = True # 设为抽象模型，不会生成数据表
    
    def get_template(self, request, *args, **kwargs):
        # 所有继承该类的页面都统一返回base.html
        return "base.html"

# 后续自定义页面都继承BasePage即可
class BlogPage(BasePage):
    # 原有字段、配置不变
    pass

额外适配预览场景的建议 #

你后续要在base.html上部署React应用，可以在页面模型的get_context方法中将当前页面的序列化数据注入到模板上下文，再在base.html中将数据挂载到window对象，方便React读取预览数据：

class BlogPage(BasePage):
    # 原有配置不变
    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        # 把页面数据序列化成json塞到上下文里
        context["page_data"] = json.dumps({
            "title": self.title,
            "body": self.body,
            "date": self.date.strftime("%Y-%m-%d"),
            # 其他你需要传给前端的字段
        })
        return context

之后在base.html里加一行即可把数据传给前端：

<script>window.PAGE_DATA = {{ page_data|safe }};</script>

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