Templates¶

uvx library-skills

Sie können jede gewünschte Template-Engine mit FastAPI verwenden.

Eine häufige Wahl ist Jinja2, dasselbe, was auch von Flask und anderen Tools verwendet wird.

Es gibt Werkzeuge zur einfachen Konfiguration, die Sie direkt in Ihrer FastAPI-Anwendung verwenden können (bereitgestellt von Starlette).

Abhängigkeiten installieren¶

Fügen Sie jinja2 Ihrem Projekt hinzu:

$ uv add jinja2

---> 100%

Jinja2Templates verwenden¶

• Importieren Sie Jinja2Templates.
• Erstellen Sie ein templates-Objekt, das Sie später wiederverwenden können.
• Deklarieren Sie einen <abbr title="Request – Anfrage: Daten, die der Client zum Server sendet">Request</abbr>-Parameter in der Pfadoperation, welcher ein Template zurückgibt.
• Verwenden Sie die von Ihnen erstellten templates, um eine TemplateResponse zu rendern und zurückzugeben, übergeben Sie den Namen des Templates, das Requestobjekt und ein „Kontext“-Dictionary mit Schlüssel-Wert-Paaren, die innerhalb des Jinja2-Templates verwendet werden sollen.

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item.html", context={"id": id}
    )

Templates erstellen¶

Dann können Sie unter templates/item.html ein Template erstellen, mit z. B.:

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

Template-Kontextwerte¶

Im HTML, welches enthält:

Item ID: {{ id }}

... wird die id angezeigt, welche dem „Kontext“-dict entnommen wird, welches Sie übergeben haben:

{"id": id}

Mit beispielsweise einer ID 42 würde das wie folgt gerendert werden:

Item ID: 42

Template-url_for-Argumente¶

Sie können url_for() auch innerhalb des Templates verwenden, es nimmt als Argumente dieselben Argumente, die von Ihrer Pfadoperation-Funktion verwendet werden.

Der Abschnitt mit:

<a href="{{ url_for('read_item', id=id) }}">

... generiert also einen Link zu derselben URL, welche von der Pfadoperation-Funktion read_item(id=id) gehandhabt werden würde.

url_for() gibt eine absolute URL zurück, einschließlich Schema und Host, basierend auf dem aktuellen Request.

Wenn Ihre Anwendung beispielsweise unter https://example.com bereitgestellt wird, würde dies mit der ID 42 Folgendes ergeben:

<a href="https://example.com/items/42">

URL-Pfade in Templates¶

Für Links zur selben Website können Sie das Attribut .path verwenden, um nur den URL-Pfad zu erhalten, beispielsweise in templates/item_path.html:

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css').path }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id).path }}">Item ID: {{ id }}</a></h1>
</body>
</html>

Übergeben Sie den Namen des Templates an TemplateResponse:

# Code above omitted 👆

@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item_path.html", context={"id": id}
    )

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item_path.html", context={"id": id}
    )

Im selben Beispiel würde der Link zum Item wie folgt gerendert werden:

<a href="/items/42">

Der führende / macht diesen Pfad relativ zum Stammverzeichnis der aktuellen Website.

Das Attribut .path schließt Schema, Host, Query-Parameter und Fragment aus. Verwenden Sie für Links zu einem anderen Host die vollständige URL.

Templates und statische Dateien¶

Sie können url_for() innerhalb des Templates auch beispielsweise mit den StaticFiles verwenden, die Sie mit name="static" gemountet haben.

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

In diesem Beispiel würde das zu einer CSS-Datei unter static/styles.css verlinken, mit folgendem Inhalt:

h1 {
    color: green;
}

Und da Sie StaticFiles verwenden, wird diese CSS-Datei automatisch von Ihrer FastAPI-Anwendung unter der URL /static/styles.css ausgeliefert.

Mehr Details¶

Weitere Informationen, einschließlich, wie man Templates testet, finden Sie in Starlettes Dokumentation zu Templates.