Verwenden Sie ein CSS-Stylesheet für eine jinja2-Vorlage

Lesezeit: 3 Minuten

Benutzer-Avatar
Ptolemäus0

Ich mache eine Website mit HTML, CSS, Flask und Jinja2.

Ich habe eine Seite, die auf einem Flaschenserver arbeitet, die Schaltflächen und Beschriftungen usw. werden angezeigt, aber das CSS-Stylesheet, das ich habe, ist nicht geladen.

Wie würde ich ein Stylesheet mit einer Jinja2-Vorlage verknüpfen? Ich habe mich im Internet umgesehen, kann aber nicht herausfinden, wie.

Hier ist der CSS-Stylesheet-Link; soll ich das oder den Python-Code ändern?

<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/25034812/styles.css">

Hier ist mein Flaschencode:

@app.route("https://stackoverflow.com/")
def resultstemplate():
    return render_template('questions.html', head='Welcome!')

Hier sind die Speicherorte der Dateien:

/python-code.py
/templates/template.html
/templates/styles.css

Benutzer-Avatar
Andrejs Cainikovs

Alle öffentlichen Dateien (diejenigen, die nicht verarbeitet werden, wie Vorlagen oder Python-Dateien) sollten in dedizierten statischen Ordnern abgelegt werden. Standardmäßig hat Jinja2 einen statischen Ordner namens static.

Das sollte dein Problem beheben:

  1. Bewegen /templates/styles.css zu /static/styles.css

  2. Aktualisieren Sie Ihren Code mit dem folgenden Code, der in den richtigen Dateispeicherort übersetzt wird:

    <link rel="stylesheet" href="https://stackoverflow.com/questions/25034812/{{ url_for("static', filename="https://stackoverflow.com/questions/25034812/styles.css") }}">
    

Weitere Informationen zu statischen Dateien in Jinja2 finden Sie unter hier.

  • ja, es funktioniert irgendwie. Der Schriftstil und die Größe (und vielleicht andere, aber ich kann es nicht sagen) haben funktioniert, aber sonst nichts, daher funktioniert die Seite nicht vollständig.

    – Ptolemäus0

    30. Juli 2014 um 13:00 Uhr

  • Wenn ich Sie richtig verstanden habe, wird CSS geladen und funktioniert, was in dieser Frage/Antwort behandelt wurde. Wenn Sie andere Probleme haben, akzeptieren Sie diese Antwort und posten Sie sie in separaten Fragen.

    – Andrejs Cainikovs

    30. Juli 2014 um 15:09 Uhr

  • Ja, es funktioniert perfekt, tut mir leid, es sah komisch aus, als ich es mit Chrome gemacht habe, und habe es jetzt in Firefox angezeigt. Jetzt gibt es eine Inkompatibilität.

    – Ptolemäus0

    30. Juli 2014 um 18:41 Uhr

  • Wenn Sie immer noch Probleme damit haben, dass das Design nach der Verwendung des obigen Codes nicht geladen wird, versuchen Sie entweder, den Cache Ihres Browsers zu leeren oder eine „harte Aktualisierung“ durch Drücken von durchzuführen ctrl+shift+r.

    – Botschafter Kosh

    13. April 2021 um 14:01 Uhr

<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/25034812/styles.css">

Der href-Wert muss in Anführungszeichen gesetzt werden.

Stellen Sie sicher, dass Dateiname und Pfad korrekt sind ODER versuchen Sie Folgendes

<link rel="stylesheet" href="https://stackoverflow.com/questions/25034812/{{ url_for("static', filename="https://stackoverflow.com/questions/25034812/styles.css") }}"/>

  • Ja, Sie haben Recht, mein Code ist falsch, aber das macht es nicht funktionieren; Ich denke, der Weg ist richtig; Ich habe jetzt die Pfade auf die Frage gepostet

    – Ptolemäus0

    30. Juli 2014 um 11:00 Uhr

Benutzer-Avatar
George Nguyen

Die Reihenfolge der Handler kann die Probleme verursachen:

url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application

wird stattdessen funktionieren

url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets

Benutzer-Avatar
Stephen Mbelenga

Sie sollten den Blockstil super() verwenden. siehe den Code unten:

{% block style %}

{{ super() }}

<link rel="stylesheet" href="{{ url_for('static', filename="css/styles.css") }}"/>

{% endblock %}

Benutzer-Avatar
wcyn

Versuchte fast jede Lösung auf Stack Overflow. Es funktionierte nur für mich, als ich die platzierte static Ordner im gleich Verzeichnis als mein run.py Datei. Ich habe meine Ordnerstruktur geändert von:

app/
    views
    static
    templates
run.py

Zu:

app/
    views
    templates
static
run.py

Ich vermute, das Verschieben run.py stattdessen würde auch funktionieren. Schau dir das an Jinja-Template-Tutorial für zusätzliche Informationen. Ich bin mir nicht sicher, warum ich die Struktur ändern musste, damit es funktioniert.

  • Hier ist eine funktionierende Lösung, mit der Sie das Refactoring vermeiden können: stackoverflow.com/questions/58961132/…

    – joeyagreco

    13. November 2021 um 21:39 Uhr


Benutzer-Avatar
jaredgorski

Als Ergänzung zu dem, was hier gesagt wurde, stellen Sie sicher, dass Sie Jinja2 auf v2.10 aktualisieren, da niedrigere Versionen denselben Fehler zu verursachen scheinen. Prost!

  • Hier ist eine funktionierende Lösung, mit der Sie das Refactoring vermeiden können: stackoverflow.com/questions/58961132/…

    – joeyagreco

    13. November 2021 um 21:39 Uhr


1229170cookie-checkVerwenden Sie ein CSS-Stylesheet für eine jinja2-Vorlage

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy