Важно: примеры кода готовы к использованию в учебном проекте. Перед деплоем приведите конфигурацию в соответствие с требованиями безопасности и окружения.
Jinja — это мощный движок шаблонов для Python. Он позволяет генерировать HTML на основе шаблонов с поддержкой наследования, условных операторов, циклов и фильтров. Кратко: Jinja помогает отделить HTML (представление) от Python-логики (контроллеров/эндпоинтов).
Краткое определение терминов:
Подключите Jinja2Templates в приложении FastAPI, смонтируйте статические файлы, создайте шаблоны в папке templates и возвращайте TemplateResponse из эндпоинтов.
Пример создания и активации виртуального окружения (терминал):
python -m venv env
# На Unix/MacOS:
source env/bin/activate
# На Windows PowerShell:
.\env\Scripts\Activate.ps1
# На Windows cmd:
.\env\Scripts\activateУстановка зависимостей:
pip install "fastapi[all]"Создайте директорию проекта, например my_blog, и внутри неё — подпапки для шаблонов и статических файлов:
Ниже — минимальный рабочий код приложения, упрощённая «in-memory» база данных и простая точка /about.
from fastapi import FastAPI
fake_posts_db = [
{
'title': 'First Blog Post',
'content': 'Content of the first blog post.',
'author': 'John Doe',
'publication_date': '2023-06-20',
'comments': [
{'author': 'Alice', 'content': 'Great post!'},
{'author': 'Bob', 'content': 'Intresting read.'}
],
'status': 'published'
},
{
'title': 'Second Blog Post',
'content': 'Content of the second blog post.',
'author': 'Jane Smith',
'publication_date': None,
'comments': [],
'status': 'draft'
}
]
app = FastAPI()
@app.get("/about")
def about():
return "All you need to know about Simple Blog"Запустите сервер разработки:
uvicorn main:app --reloadОткройте http://localhost:8000/about, чтобы проверить, что приложение отвечает.
Добавим поддержку шаблонов и статических файлов.
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
from fastapi import Request
from fastapi.responses import HTMLResponse
app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")
@app.get("/", response_class=HTMLResponse)
async def read_posts(request: Request):
return templates.TemplateResponse("blog.html", {"request": request, "posts": fake_posts_db})Пояснения:
Пример базового шаблона templates/base.html:
{% block title %}Simple Blog{% endblock %}
{% block heading %}Simple Blog{% endblock %}
{% block content %}
{% endblock %}
{% include "footer.html" %}
Пример включаемого шаблона templates/footer.html:
Пример дочернего шаблона templates/blog.html:
{% extends "base.html" %}
{% block title %}Simple Blog - Blog Page{% endblock %}
{% block heading %}Simple Blog - Blog Page{% endblock %}
{% block content %}
Total Number of Posts: {{ posts|length }}
{% for post in posts %}
{% if post.status == 'published' %}
{{ post.title }}
{{ post.content|truncate }}
Published on: {{ post.publication_date }}
Comments:
{% for comment in post.comments %}
- {{ comment.author }}: {{ comment.content }}
{% endfor %}
{% else %}
This post is still in draft mode.
{% endif %}
{% endfor %}
{% endblock %}Jinja поддерживает арифметику, сравнения и логические операции. Примеры:
{{ 2 + 2 }} {# вывод: 4 #}
{{ post.title }} {# выводит заголовок поста #}
{{ posts|length }} {# количество постов #}Если нужно форматировать дату, лучше передавать объект datetime из Python и использовать фильтры:
from datetime import datetime
# при формировании данных
post['publication_date'] = datetime(2023, 6, 20)В шаблоне:
Published on: {{ post.publication_date.strftime('%d.%m.%Y') }}Если дата приходит как строка, преобразуйте её на стороне Python для надёжного форматирования.
Встроенные комментарии Jinja не попадают в рендер:
{# однострочный комментарий #}
{% comment %} многострочный комментарий {% endcomment %}Используйте url_for(‘static’, path=’/имяфайла’) для корректной генерации путей к статике:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
h1, h2, h3, h4 {
color: #333;
}
.post {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.post h3 {
margin-top: 0;
}
.post p {
margin-bottom: 10px;
}
.post ul {
list-style-type: none;
padding-left: 0;
}
.comment {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}После применения стилей страница выглядит аккуратнее.
Когда использовать серверные шаблоны (Jinja + FastAPI):
Когда шаблоны не лучшая идея:
Jinja макрос для вывода комментария (templates/_macros.html):
{% macro render_comment(comment) %}
{{ comment.author }}: {{ comment.content }}
{% endmacro %}Использование макроса в шаблоне:
{% from "_macros.html" import render_comment %}
{% for comment in post.comments %}
{{ render_comment(comment) }}
{% endfor %}
Мини-шаблон для пагинации — идея: вынести в include и передавать текущую страницу и количество страниц.
Разработчик:
Дизайнер:
DevOps:
flowchart TD
A[Нужно ли SEO и быстрый первый рендер?] -->|Да| B[Серверный рендеринг 'Jinja']
A -->|Нет| C[API-only + SPA]
B --> D{Нужна динамика на клиенте?}
D -->|Да| E[Гибрид: шаблоны + AJAX]
D -->|Нет| F[Чистый серверный HTML]