Туториал по Jinja2

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

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

1. Создайте файл-шаблон template.html, который будет взят за основу. Мы взяли вот такой (скачать здесь):

screenshot

2. Вставьте в него места для переменных. Они отмечаются двумя фигурными скобочками {{ }}, внутри которых названия переменных. В блоке кода ниже мы создали места для переменных title и 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>
...

cap1_title и cap1_text для первой кепки, cap2_title и cap2_text для второй и т.д.

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

screenshot

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

screenshot

4. Запустите скрипт. Мы подготовили для вас готовый скрипт main.py. Скачать можно отсюда.

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

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

В браузере это выглядит вот так:

screenshot

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

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

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

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

Далее в переменную 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.

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

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

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