Plantillas ¶

🌐 Traducción por IA y humanos

Esta traducción fue hecha por IA guiada por humanos. 🤝

Podría tener errores al interpretar el significado original, o sonar poco natural, etc. 🤖

Puedes mejorar esta traducciónayudándonos a guiar mejor al LLM de IA.

Puedes usar cualquier motor de plantillas que desees conFastAPI.

Una elección común es Jinja2, el mismo que usa Flask y otras herramientas.

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

Instala dependencias¶

Asegúrate de crear unentorno virtual, activarlo e instalarjinja2:

$pipinstalljinja2---> 100%

Usando`Jinja2Templates`¶

ImportaJinja2Templates.
Crea un objetotemplates que puedas reutilizar más tarde.
Declara un parámetroRequest en lapath operation que devolverá una plantilla.
Usa lostemplates que creaste para renderizar y devolver unTemplateResponse, pasa el nombre de la plantilla, el objeto de request, y un diccionario "context" con pares clave-valor que se usarán dentro de la plantilla Jinja2.

Python 3.10+

fromfastapiimportFastAPI,Requestfromfastapi.responsesimportHTMLResponsefromfastapi.staticfilesimportStaticFilesfromfastapi.templatingimportJinja2Templatesapp=FastAPI()app.mount("/static",StaticFiles(directory="static"),name="static")templates=Jinja2Templates(directory="templates")@app.get("/items/{id}",response_class=HTMLResponse)asyncdefread_item(request:Request,id:str):returntemplates.TemplateResponse(request=request,name="item.html",context={"id":id})

Nota

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

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

Consejo

Al declararresponse_class=HTMLResponse, la interfaz de usuario de la documentación podrá saber que el response será HTML.

Detalles técnicos

También podrías usarfrom starlette.templating import Jinja2Templates.

FastAPI proporciona el mismostarlette.templating comofastapi.templating, solo como una conveniencia para ti, el desarrollador. Pero la mayoría de los responses disponibles vienen directamente de Starlette. Lo mismo conRequest yStaticFiles.

Escribiendo plantillas¶

Luego puedes escribir una plantilla entemplates/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 de la Plantilla¶

En el HTML que contiene:

Item ID:{{id}}

...mostrará elid tomado deldict de "contexto" que pasaste:

{"id":id}

Por ejemplo, con un ID de42, esto se renderizaría como:

Item ID: 42

Argumentos de la Plantilla`url_for`¶

También puedes usarurl_for() dentro de la plantilla, toma como argumentos los mismos que usaría tupath operation function.

Entonces, la sección con:

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

...generará un enlace hacia la misma URL que manejaría lapath operation functionread_item(id=id).

Por ejemplo, con un ID de42, esto se renderizaría como:

<ahref="/items/42">

Plantillas y archivos estáticos¶

También puedes usarurl_for() dentro de la plantilla, y usarlo, por ejemplo, con losStaticFiles que montaste con elname="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 enstatic/styles.css con:

h1{color:green;}

Y porque estás usandoStaticFiles, ese archivo CSS sería servido automáticamente por tu aplicación deFastAPI en la URL/static/styles.css.

Más detalles¶

Para más detalles, incluyendo cómo testear plantillas, revisala documentación de Starlette sobre plantillas.

Movatterモバイル変換

Plantillas¶