Ga naar hoofdinhoud

Static files

Hier bouw je op verder

In de vorige les zette je CSS in een <style> tag in je Python code. Dat wordt snel rommelig. In deze les leer je hoe je bestanden (CSS, afbeeldingen, etc.) in een aparte folder zet.

Mappenstructuur​

Maak een static folder met een css subfolder:

je-project/
├── main.py
└── static/
    └── css/
        └── style.css

Static files configureren​

Pas je main.py aan:

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")
  1. Regel 3:

    StaticFiles is het stuk van FastAPI dat bestanden ongewijzigd doorgeeft, zonder dat er een functie van jou aan te pas komt.

  2. Regel 7:

    app.mount hangt de map static aan de URL /static. Alles in die map is daarmee bereikbaar in de browser: static/css/style.css staat op /static/css/style.css. De name is verplicht en mag zo blijven staan.

CSS in apart bestand​

Maak static/css/style.css:

h1 {
    color: blue;
}

p {
    color: gray;
}

CSS koppelen aan HTML​

@app.get("/mooi", response_class=HTMLResponse)
async def mooi():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Mooi</title>
            <link rel="stylesheet" href="/static/css/style.css">
        </head>
        <body>
            <h1>Mooie pagina</h1>
            <p>De CSS komt uit een apart bestand!</p>
        </body>
    </html>
    """
  1. Regel 8:

    De <link> laadt de CSS uit het aparte bestand, via de URL die app.mount net heeft aangemaakt. De browser vraagt dat bestand zelf op, als tweede verzoek na de pagina. Dezelfde regel kun je op elke pagina zetten; dan delen ze één stylesheet.

Testen​

Ga naar http://127.0.0.1:8000/mooi. De heading is blauw en de tekst grijs — de CSS uit het aparte bestand werkt.

Gaat er iets mis?

CSS werkt niet? Check of app.mount("/static", ...) in je code staat en of het pad in <link> klopt. Bekijk de troubleshooting pagina voor meer oplossingen.

Opdrachten​

Opdracht 1: Predict - Wat gebeurt er?​

Je maakt twee endpoints die allebei dezelfde CSS laden:

@app.get("/pagina1", response_class=HTMLResponse)
async def pagina1():
    return """...<link rel="stylesheet" href="/static/css/style.css">..."""

@app.get("/pagina2", response_class=HTMLResponse)
async def pagina2():
    return """...<link rel="stylesheet" href="/static/css/style.css">..."""

Vraag: Wat gebeurt er met pagina2 als je de CSS in style.css aanpast?

Tip

Beide pagina's laden hetzelfde bestand. Wat betekent dat als je dat ene bestand aanpast?

Antwoord

Pagina2 verandert ook. Beide pagina's laden hetzelfde CSS bestand. Als je dat bestand aanpast, veranderen alle pagina's die het gebruiken.

Opdracht 2: Run​

Maak de static/css/style.css en het /mooi endpoint uit het voorbeeld. Start de server en controleer of de styling werkt.

Opdracht 3: Investigate - Ander pad​

Wat gebeurt er als je app.mount("/static", ...) verandert naar app.mount("/bestanden", ...)? Laadt de CSS dan nog?

Antwoord

Nee. De CSS laadt niet meer, want de <link> tag verwijst naar /static/css/style.css, maar dat pad bestaat niet meer. Je zou de link moeten aanpassen naar /bestanden/css/style.css.

Opdracht 4: Make - Eigen CSS​

Maak een eigen style.css met minimaal 3 CSS regels en een endpoint dat deze CSS gebruikt.

Tip

Maak een CSS bestand in static/css/ en koppel het met <link rel="stylesheet" href="/static/css/style.css"> in de <head> van je HTML.

Antwoord

static/css/style.css:

h1 { color: darkblue; }
p { font-size: 18px; }
body { background-color: lightyellow; }

main.py:

@app.get("/mijn_pagina", response_class=HTMLResponse)
async def mijn_pagina():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="/static/css/style.css">
        </head>
        <body>
            <h1>Mijn pagina</h1>
            <p>Met eigen styling!</p>
        </body>
    </html>
    """

Opdracht 5: Make - Twee CSS bestanden​

Maak twee CSS bestanden (style1.css en style2.css) met verschillende kleuren. Maak twee endpoints die elk een ander CSS bestand gebruiken.

Tip

Maak twee bestanden in static/css/. Gebruik in het ene endpoint href="/static/css/style1.css" en in het andere href="/static/css/style2.css".

Antwoord

static/css/style1.css:

h1 { color: red; }
body { background-color: lightyellow; }

static/css/style2.css:

h1 { color: green; }
body { background-color: lightblue; }
@app.get("/rood", response_class=HTMLResponse)
async def rood():
    return """
    <!DOCTYPE html>
    <html>
        <head><link rel="stylesheet" href="/static/css/style1.css"></head>
        <body><h1>Rode pagina</h1></body>
    </html>
    """

@app.get("/groen", response_class=HTMLResponse)
async def groen():
    return """
    <!DOCTYPE html>
    <html>
        <head><link rel="stylesheet" href="/static/css/style2.css"></head>
        <body><h1>Groene pagina</h1></body>
    </html>
    """