Jinja2 — это инструмент для html-шаблонизации. Он позволяет подставлять переменные из Python прямо на странички в браузере.

Вот как это работает:

1. Создайте файл

Создайте файл template.html с таким содержимым — это вёрстка сайта, с ней будем работать в туториале.

2. Откройте сайт в браузере

Если вы работаете с файлом на своём компьютере, то посмотреть сайт можно кликнув по файлу template.html, выберите в контекстном меню пункт “Открыть в браузере”.

В случае Repl.it понадобится такой Python скрипт:

from http.server import HTTPServer, SimpleHTTPRequestHandler

server = HTTPServer(('0.0.0.0', 8000), SimpleHTTPRequestHandler)
server.serve_forever()

Это веб-сервер — он умеет делать две вещи: общаться с браузером и искать файлы на диске. В адресной строке браузера вы указываете сайт, браузер отправляет запрос серверу, а тот находит подходящий файл и всё его содержимое отправляет обратно браузеру. Если файл не найден, то веб-сервер предложит выбрать один из списка доступных.

Попробуйте открыть сайт, с вашим template.html. Не забудьте дописать название файла в адресной строке. Выглядеть он будет так:

3. Вставьте в шаблон места для переменных

Места для переменных отмечаются двумя фигурными скобочками {{ }}, внутри которых названия переменных. В блоке кода ниже мы создали места для переменных cap1_title и cap1_text для первой кепки, cap2_title и cap2_text для второй и так далее:

<div class="card-body">
   <h5 class="card-title">{{cap1_title}}</h5>
   <p class="card-text">{{cap1_text}}</p>
   <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
...
<div class="card-body">
   <h5 class="card-title">{{cap2_title}}</h5>
   <p class="card-text">{{cap2_text}}</p>
   <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
...

Если теперь открыть сайт в браузере, то выглядеть он будет странно. Это нормально, не переживайте:

4. Установите Jinja2

Установить Jinja2 можно командой pip install Jinja2, либо, если вы работаете в repl.it, в меню Packages в меню слева:

5. Запустите скрипт

Мы подготовили для вас готовый скрипт main.py. Скачайте его.

Запустите скрипт командой python main.py, либо кнопкой Run, если вы работаете в repl.it.

У вас появится новый файл index.html, в котором переменные cap1_title заменится на Красная кепка, а cap1_text заменится на $ 100.00.

Теперь сайт выглядит так:

Как это работает

Первые пара строк отвечают за то, чтобы Python-скрипт нашёл HTML-шаблон:

env = Environment(
    loader=FileSystemLoader('.'),
    autoescape=select_autoescape(['html'])
)
template = env.get_template('template.html')

Разберем построчно что здесь написано.

loader=FileSystemLoader('.') — тут говорится о том, что файл шаблона template.html нужно искать в том же каталоге, где лежит скрипт main.py. Точка — это так в программировании обозначается “текущая папка”.

autoescape=select_autoescape(['html']) — это стандартные настройки для работы с HTML. Можно это пропустить. Если интересно, то читайте подробно здесь.

template = env.get_template('template.html') — в переменную template загружается шаблон из файла template.html.

Следующие строчки кода:

rendered_page = template.render(
    cap1_title="Красная кепка",
    cap1_text="$ 100.00",
    cap2_title="Чёрная кепка",
    cap2_text="$ 120.00",
    cap3_title="Ещё одна чёрная кепка",
    cap3_text="$ 90.00",
)

Из них Jinja2 подхватила значения аргументов и подставила их в шаблон: на место, где было написано {{cap1_title}} подставилось значение аргумента cap1_title="Красная кепка".

Новый HTML, в котором значения подставлены, теперь лежит в переменной rendered_page. Это обычная строка текста.

Далее строка с HTML сохраняется в файл с именем index.html:

with open('index.html', 'w', encoding="utf8") as file:
    file.write(rendered_page)

Последние строчки кода запускают веб-сервер:

server = HTTPServer(('0.0.0.0', 8000), SimpleHTTPRequestHandler)
server.serve_forever()

Обратите внимание, что функция serve_forever будет работать вечно. Об этом недвусмысленно сообщает её название serve forever, и это надо учитывать при написании программы. Не помещайте никакой код следом за вызовом serve_forever() — он никогда не будет запущен.

Узнать больше

• Документация Jinja2
• Шаблонные операторы if и for