CODEWITHSUNDEEP
djangodjango-templateswagtail
AnabolicHippo
AnabolicHippo

Reputation: 45

Wagtail adding childpage directory before static paths in base.html

I have a project set up with the following models.py file:

"""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"

I also have a "base.html" that has static paths like:

<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">

On the homepage, I'm able to get everything to load properly, but when I create a flexpage, I get the following error:

[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

It seems like when I try to extend the "base.html" file, within the child pages, that it is adding a directory to my paths. I'm not sure how to override this behavior.

Upvotes: 1

Views: 57

Answers (1)

gasman
gasman

Reputation: 25292

Paths such as href="./static/SiteFiles/main.css" are calculated relative to the current page, so on a page with the URL /getting-started/ this will equal /getting-started/static/SiteFiles/main.css; on a page with the URL /getting-started/step-1/ this will equal /getting-started/step-1/static/SiteFiles/main.css, and so on. Since pages in Wagtail are arranged in a tree and can exist at any depth, relative paths like this are generally not going to be usable - a path that works for one page won't work for another.

Instead, Django provides a {% static %} template tag for building the correct absolute path:

{% 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">

Upvotes: 1

Related Questions