Wagtail 在 base.html 中的静态路径之前添加子页面目录
Wagtail adding childpage directory before static paths in base.html
我使用以下 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">
在主页上,我能够正确加载所有内容,但是当我创建 flexpage 时,出现以下错误:
[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”文件时,它似乎在我的路径中添加了一个目录。我不确定如何覆盖此行为。
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">
我使用以下 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">
在主页上,我能够正确加载所有内容,但是当我创建 flexpage 时,出现以下错误:
[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”文件时,它似乎在我的路径中添加了一个目录。我不确定如何覆盖此行为。
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">