Уроки Flask

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

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

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

Видеоурок

Отслеживание 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 месяца

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

Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Изучение JavaScript: от нуля и до создания сайта
Уроки PhotoShop для начинающих
6 уроков
Создание Андроид игры на движке Unity
Комментарии для сайта Cackle