Flask Templates laden css nur teilweise

Django, Flask, Bottle, WSGI, CGI…
Antworten
NPC
User
Beiträge: 54
Registriert: Dienstag 8. Januar 2019, 17:51

Hey Leute,

wie der Titel schon sagt habe ich das Problem, dass nur ein Teil der Templates in Flask die zugehörige CSS file läd.
Selbst wenn ich ein funktionierendes Template kopiere und unter der anderen URL/Funktion auffrufe, funktioniert das einbinden des CSS nicht mehr.
Da die CSS file in base.html eingebunden wird und sowohl die Funktionierenden als auch das nicht Funktioniernde von diesem "Erben" vermute ich, dass es kein Problem auf der HTML-Seite sein sollte. Die beiden Funktionen ( add_article_to_project funktioniert nicht) sind:

Code: Alles auswählen

@app.route("/project/<project_name>")
def project(project_name):
    return render_template("project.html", project_name=project_name)


@app.route("/project/<project_name>/add_article/")
def add_article_to_project(project_name):
    return render_template("project.html", project_name=project_name)
Im obigen Fall wird das CSS erfolgreich eingebunden und der Link im Quellcode der Seite zeigt es an.
Im zweiten Fall wird es nicht gefunden.

Die Struktur in meinem PyCharm project ist:

Code: Alles auswählen

Project
    |- tempates
        |- <html-files>
    |- static
        |- css
            |- <css-files>

Gebt mir bitte bescheid, wenn ich die beiden HTML files ebenfalls reinladen soll.

Vielen Dank schonmal im Voraus
NPC
Benutzeravatar
__blackjack__
User
Beiträge: 13079
Registriert: Samstag 2. Juni 2018, 10:21
Wohnort: 127.0.0.1
Kontaktdaten:

Klingt als wäre der Link zum CSS relativ angegeben und funktioniert deswegen nur bei einer der beiden URLs die ja verschiedene Pfadlängen haben.
„All religions are the same: religion is basically guilt, with different holidays.” — Cathy Ladman
NPC
User
Beiträge: 54
Registriert: Dienstag 8. Januar 2019, 17:51

@__blackjack__
erstmal danke für deine Antwort. Ich verstehe sie jedoch nicht ganz.
Ja der Pfad zur CSS datei ist relativ zur Project-Root angegeben. Die Zugehörige Zeile ist

Code: Alles auswählen

<link href="../static/styles/base.css" type="text/css" rel="stylesheet">
Wenn ich es zum vollen Pfad erweitere, funktioniert es auch bei dem Ersten nicht mehr.
Unabhänig davon, warum kann die URL der Funktionen einen Einfluss darauf haben?

Viele Grüße
NPC
__deets__
User
Beiträge: 14529
Registriert: Mittwoch 14. Oktober 2015, 14:29

Weil der relative Pfad sich auf die URL bezieht, und nicht die Dateistruktur serverseitig. Die kennt dein Browser nicht. Der löst nur anhand der URL des HTTP requests auf, also der Route.

Es gibt in Flask eine Funktion, die du im Template nutzen kannst, welche dir einen absoluten Pfad ausrechnet, der im Template benutzt werden sollte. Die habe ich nicht im Kopf, findest du aber bestimmt schnell.
NPC
User
Beiträge: 54
Registriert: Dienstag 8. Januar 2019, 17:51

@__deets__
Ah ja das ergbit sinn. Danke an euch beide :)
NPC
User
Beiträge: 54
Registriert: Dienstag 8. Januar 2019, 17:51

Nur falls jemand anderes nochmal auf den Thread kommt:
Die Lösung ist

Code: Alles auswählen

<link href="{{ url_for('static', filename='styles/base.css') }}" type="text/css" rel="stylesheet">
wobei static anscheinend automatisch auf meinen static Ordner im Projekt referenziert.
Antworten