itProger Відеокурси Уроки Python Django / Розробка сайту #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 "ШЛЯХ ДО ФАЙЛУ" %}

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

django-html.zip

Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт

Завдання до уроку

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

Велике завдання за курсом

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

Також варто подивитися