Урок #4 - Шаблонизатор Jinja и HTML шаблоны

Урок #4 - Шаблонизатор Jinja и HTML шаблоны

Ранее мы научились выводить на экран лишь небольшой объем текста. В видео мы познакомимся с шаблонизатором Jinja, а также научимся выводить полноценные HTML шаблоны в браузере.

Видеоурок

Шаблонизатор Jinja

С давних пор программисты стараются отделить функциональную часть сайта от визуальной. Для решения этой проблемы были созданы различные шаблонизаторы, что выполняют роль отделения логической части сайта от визуальной. В фреймворке Джанго таким шаблонизатором является Jinja.


Возможности шаблонизатора  Jinja большие. Он способен выводить стандартную HTML разметку, а также выполнять: проверку условий, вывод массивов через цикл, вывод переменных и многое другое.


Ранее для вывода информации мы использовали HttpResponse. Подобный подход неверный, так как выводить «море» HTML тегов в формате одной строки – просто ужасно. Вместо такого подхода мы будем использовать функцию render, что позволяет выводить большие HTML-шаблоны, напичканые кодом из шаблонизатора Jinja. 


В качестве параметров при вызове HTML шаблона необходимо передать обязательный параметр request, а также месторасположение файла с шаблоном.


Создание шаблона

Все шаблоны хранятся в одной общей папке templates. Django автоматически объединяет все папки templates в одну общую. Из-за такого свойства у вас могут возникать проблемы с одинаковыми именами файлов, поэтому чтобы избежать одинаковых имен стоит помещать все шаблоны в ещё одну дополнительную папку с именем вашего приложения: «home/templates/home/shablon.html».


В основном шаблоне можно прописать базовую структуру для всех HTML файлов:

<body>
	{% block content %}
	{% endblock %}
</body>

Внутрь базового шаблона можно встроить HTML блоки и заменить содержимое block content. Чтобы это сделать создаем новый HTML файл и прописываем наследование структуры из базового файла:

{% extends "ПУТЬ К HTML ФАЙЛУ" %}

{% block content %}
	<div>Здесь код, который будет добавлен</div>
{% endblock %}

Мы можем создавать небольшие кусочки кода и встраивать их в другие шаблоны. Для таких кусочков лучше создавать отдельную папку с названием includes. В папке можно создать простой HTML файл с небольшой Jinja разметкой:

{% block content %}
	<div>Здесь код, который будет добавлен</div>
{% endblock %}
Для подключения таких файлов используйте директиву «include»:
{% include "ПУТЬ К ФАЙЛУ" %}

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Изучение PyQt5 / Графический интерфейс на Python
6 уроков
Уроки ChatGPT API / Разработка программ на Python и ChatGPT
7 уроков
Изучение Flask / Создание сайта на Python
6 уроков
Разработка игр на Python с нуля / Уроки Pygame
10 уроков
Изучение Python UI (GUI Apps) / Программы на Питон
10 уроков
Уроки Python для начинающих
21 урок
Комментарии (1)
Добавить комментарий

Влад 18 сентября 2023 в 19:12

Здравствуйте, кто знает что делать если не работает Jinja2 при заходе на сайт выдает странные символы
Ответить

Георгий 22 октября 2023 в 18:45

Влад!
Там надо быть немного внимательней,
Я нашел решение проблемы в

urlpatterns = [
path('', views.index, name='index'),
path('about', views.about, name='about'),
]

Георгий 22 октября 2023 в 18:45

Потрясающие уроки, глаза просто разбегаются. Спасибо