Шаблони¶

uvx library-skills

Ви можете використовувати будь-який рушій шаблонів з FastAPI.

Поширений вибір - Jinja2, той самий, що використовується у Flask та інших інструментах.

Є утиліти для простої конфігурації, які ви можете використовувати безпосередньо у вашому застосунку FastAPI (надає Starlette).

Встановіть залежності¶

Додайте jinja2 до вашого проєкту:

$ uv add jinja2

---> 100%

Використання Jinja2Templates¶

• Імпортуйте Jinja2Templates.
• Створіть об'єкт templates, який ви зможете перевикористовувати.
• Оголосіть параметр Request в операції шляху, яка повертатиме шаблон.
• Використайте створені templates, щоб зрендерити та повернути TemplateResponse; передайте назву шаблону, об'єкт request і словник «контекст» з парами ключ-значення, які будуть використані всередині шаблону Jinja2.

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/item.html, наприклад:

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

Значення контексту шаблону¶

У HTML, який містить:

Item ID: {{ id }}

...буде показано id, взятий із «контексту» dict, який ви передали:

{"id": id}

Наприклад, з ID 42 це буде відображено як:

Item ID: 42

Аргументи url_for у шаблоні¶

Ви також можете використовувати url_for() у шаблоні - вона приймає ті самі аргументи, що й ваша функція операції шляху.

Тож фрагмент:

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

...згенерує посилання на той самий URL, який оброблятиме функція операції шляху read_item(id=id).

url_for() повертає абсолютний URL, включно зі схемою та хостом, на основі поточного запиту.

Наприклад, якщо ваш застосунок доступний за адресою https://example.com, з ID 42 це буде відображено як:

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

Шляхи URL у шаблонах¶

Для посилань на той самий сайт ви можете використовувати атрибут .path, щоб отримати лише шлях URL, наприклад, у 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>

Передайте назву шаблону до 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}
    )

У тому самому прикладі посилання на предмет буде відображено як:

<a href="/items/42">

Початковий / робить цей шлях відносним до кореня поточного сайту.

Атрибут .path не включає схему, хост, параметри запиту та фрагмент. Використовуйте повний URL для посилань на інший хост.

Шаблони і статичні файли¶

Ви також можете використовувати url_for() у шаблоні, наприклад з StaticFiles, які ви змонтували з 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>

У цьому прикладі це посилатиметься на файл CSS у static/styles.css за допомогою:

h1 {
    color: green;
}

І оскільки ви використовуєте StaticFiles, цей файл CSS буде автоматично обслуговуватись вашим застосунком FastAPI за URL /static/styles.css.

Детальніше¶

Докладніше, зокрема як тестувати шаблони, дивіться документацію Starlette щодо шаблонів.