Уроки Flask Python

#2 - Разработка страниц и добавление стилей

#2 - Разработка страниц и добавление стилей

При помощи Flask мы можем с легкостью работать с шаблонами, написанными на HTML и CSS. В ходе урока вы научитесь прописывать шаблоны и добавлять к ним стили во Flask проекте.

Відеоурок

Telegram group

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

Отслеживание URL

Для отслеживания URL используется файл «app.py». Внутри него вы можете отследить любой URL, а также любые параметры в URL адресе. 


Пример отслеживания URL:

@app.route('/')
@app.route('/home')
def index():
	return render_template("index.html")

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


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

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


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


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


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

Все шаблоны хранятся в одной общей папке templates.


В основном шаблоне можно прописать базовую структуру для всех 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 місяця

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

Изучение HTMX с нуля / Проект на HTMX и Flask
8 уроків
Коментарі
Додати коментар

Поки що коментарів немає