Templates¶

Puedes usar cualquier motor de templates que quieras con FastAPI.

Una opción común es Jinja2, el mismo usado por Flask y otras herramientas.

Hay utilidades para configurarlo fácilmente que puedes usar directamente en tu aplicación FastAPI (proporcionadas por Starlette).

Instalar dependencias¶

Asegúrate de crear un entorno virtual, activarlo, e instalar jinja2:


pip install jinja2fast →pip install jinja2
████████████████████████████████████████ 100%
restart ↻

Usar `Jinja2Templates`¶

Importa Jinja2Templates.
Crea un objeto templates que puedes reutilizar más adelante.
Declara un parámetro Request en la path operation que devolverá un template.
Usa los templates que creaste para renderizar y devolver un TemplateResponse, pasa el nombre del template, el objeto request, y un diccionario "context" con pares clave-valor para usar dentro del template de Jinja2.

Python 3.10+


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}
    )

Nota

Antes de FastAPI 0.108.0, Starlette 0.29.0, el name era el primer parámetro.

Además, antes de eso, en versiones anteriores, el objeto request se pasaba como parte de los pares clave-valor en el context para Jinja2.

Consejo

Al declarar response_class=HTMLResponse la interfaz de documentación podrá saber que la respuesta será HTML.

Detalles Técnicos

También podrías usar from starlette.templating import Jinja2Templates.

FastAPI proporciona el mismo starlette.templating como fastapi.templating solo como conveniencia para ti, el desarrollador. Pero la mayoría de las respuestas disponibles vienen directamente de Starlette. Lo mismo con Request y StaticFiles.

Escribir templates¶

Luego puedes escribir un template en templates/item.html con, por ejemplo:


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

Valores de Contexto del Template¶

En el HTML que contiene:

{% raw %}


Item ID: {{ id }}

{% endraw %}

...mostrará el id tomado del dict "context" que pasaste:


{"id": id}

Por ejemplo, con un ID de 42, esto renderizaría:


Item ID: 42

Argumentos de `url_for` en Templates¶

También puedes usar url_for() dentro del template, toma como argumentos los mismos argumentos que usaría tu función path operation.

Así, la sección con:

{% raw %}


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

{% endraw %}

...generará un link a la misma URL que sería manejada por la función path operation read_item(id=id).

Por ejemplo, con un ID de 42, esto renderizaría:


<a href="/items/42">

Templates y archivos estáticos¶

También puedes usar url_for() dentro del template, y usarlo, por ejemplo, con los StaticFiles que montaste con name="static".


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

En este ejemplo, enlazaría a un archivo CSS en static/styles.css con:


h1 {
    color: green;
}

Y como estás usando StaticFiles, ese archivo CSS sería servido automáticamente por tu aplicación FastAPI en la URL /static/styles.css.

Más detalles¶

Para más detalles, incluyendo cómo probar templates, revisa la documentación de Starlette sobre templates.