Wagtail 在 base.html 中的静态路径之前添加子页面目录答案

【问题标题】：Wagtail adding childpage directory before static paths in base.htmlWagtail 在 base.html 中的静态路径之前添加子页面目录
【发布时间】：2021-01-24 02:31:50
【问题描述】：

我有一个使用以下 models.py 文件设置的项目：

"""Flexible page."""
from django.db import models

from wagtail.admin.edit_handlers import FieldPanel
from wagtail.core.models import Page
from wagtail.core.fields import RichTextField

class FlexPage(Page):
    """Flexibile page class."""

    template = "flex/flex_page.html"

    # @todo add streamfields 
    # content = StreamField()

    subtitle = models.CharField(max_length=100, null=True, blank=True)
    Flexbody = RichTextField(blank=True)
    content_panels = Page.content_panels + [
        FieldPanel("subtitle"),
        FieldPanel('Flexbody', classname="full"),
        
    ]

    class Meta:  # noqa 
        verbose_name = "Flex Page"
        verbose_name_plural = "Flex Pages"

我还有一个“base.html”，它有如下静态路径：

<link rel="stylesheet" id="main-css" href="./static/SiteFiles/main.css" type="text/css" media="all">
<link rel="stylesheet" id="tether-css" href="./static/SiteFiles/Sitetether.css" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="./static/SiteFiles/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" id="font-awesome-css" href="./static/SiteFiles/font-awesome.css" type="text/css" media="all">

在主页上，我能够正确加载所有内容，但是当我创建弹性页面时，出现以下错误：

[23/Jan/2021 21:07:44] "GET /getting-started/static/SiteFiles/Sitetether.css HTTP/1.1" 404 3333
Not Found: /getting-started/.static/SiteFiles/wp-emoji-release.min.js.download

似乎当我尝试在子页面中扩展“base.html”文件时，它正在向我的路径添加一个目录。我不确定如何覆盖此行为。

【问题讨论】：

./static 很可能是您的问题的根源。尝试更改为“/static/SiteFiles/..”，看看您的问题是否已解决。

标签： django django-templates wagtail

【解决方案1】：

href="./static/SiteFiles/main.css" 等路径是相对于当前页面计算的，因此在 URL 为 /getting-started/ 的页面上，这将等于 /getting-started/static/SiteFiles/main.css；在 URL 为 /getting-started/step-1/ 的页面上，这将等于 /getting-started/step-1/static/SiteFiles/main.css，依此类推。由于 Wagtail 中的页面排列在树中并且可以存在于任何深度，因此像这样的相对路径通常不可用 - 适用于一个页面的路径不适用于另一个页面。

相反，Django 提供了a {% static %} template tag 来构建正确的绝对路径：

{% load static %}
<link rel="stylesheet" id="main-css" href="{% static 'SiteFiles/main.css' %}" type="text/css" media="all">
<link rel="stylesheet" id="tether-css" href="{% static 'SiteFiles/Sitetether.css' %}" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="{% static 'static/SiteFiles/bootstrap.min.css' %}" type="text/css" media="all">
<link rel="stylesheet" id="font-awesome-css" href="{% static 'static/SiteFiles/font-awesome.css' %}" type="text/css" media="all">

【讨论】：