Шаблони¶

🌐 Переклад ШІ та людьми

Цей переклад виконано ШІ під керівництвом людей. 🤝

Можливі помилки через неправильне розуміння початкового змісту або неприродні формулювання тощо. 🤖

Ви можете покращити цей переклад, допомігши нам краще спрямовувати AI LLM.

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

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

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

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

Переконайтеся, що ви створили віртуальне оточення, активували його та встановили jinja2:

$ pip install jinja2

---> 100%

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

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

Примітка

До FastAPI 0.108.0, Starlette 0.29.0, параметр name був першим.

Також раніше, у попередніх версіях, об'єкт request передавався як частина пар ключ-значення в контексті для Jinja2.

Порада

Якщо вказати response_class=HTMLResponse, інтерфейс документації знатиме, що відповідь буде HTML.

Технічні деталі

Можна також використати from starlette.templating import Jinja2Templates.

FastAPI надає той самий starlette.templating як fastapi.templating просто для зручності для вас, розробника. Але більшість доступних відповідей надходять безпосередньо зі Starlette. Так само з Request і StaticFiles.

Створення шаблонів¶

Потім ви можете написати шаблон у 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).

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

<a href="/items/42">

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

Ви також можете використовувати 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 щодо шаблонів.