Использование шаблонов страниц сайта
Продолжаем изучение Flask и вначале хочу обратить ваше внимание, что программа из прошлого занятия возвращала довольно простую информацию. Но реальные страницы имеют довольно внушительную структуру, и даже используя многострочные строки, программа будет не очень читабельной:
from flask import Flask app = Flask(__name__) @app.route("/") def index(): return ''' ''' @app.route("/about") def about(): return "Про Flask
" if __name__ == "__main__": app.run(debug=True)
Кроме того структура страницы может меняться и вносить изменения непосредственно в программе – это плохой подход к программированию. Поэтому все HTML-шаблоны хранятся в виде отдельных файлов и загружаются по мере необходимости.
Для работы с шаблонами Flask использует стандартный модуль Jinja (если вы не знаете что это такое и как происходит обработка шаблонов, то смотрите занятия по этой ссылке).
Чтобы воспользоваться шаблонизатором во Flask нужно импортировать его элемент render_template:
from flask import Flask, render_template
и, затем, в обработчике index вызвать его:
@app.route("/") def index(): return render_template('index.html')
Следующий вопрос: где расположить шаблон ‘index.html’, чтобы он был найден и загружен модулем Flask. Существует следующее простое соглашение: по умолчанию все шаблоны берутся из подкаталога templates, относительно рабочего каталога программы (или соответствующем подкаталоге пакета). Так мы и сделаем. Разместим в этом подкаталоге файл index.html со следующим содержимым:
DOCTYPE html> html> head> title>Главная страница сайта/title> /head> body> h1>Главная страница сайта/h1> /body> /html> Обратите внимание, для корректного отображения кириллицы все шаблоны рекомендуется сохранять в кодировке utf-8. Тем более, что сам Python, начиная с версии 3, по умолчанию использует юникод.
Запустим программу и при переходе на главную страницу увидим отображение нашего шаблона в браузере:
По аналогии создадим такой же шаблон about.html и также будем загружать его при обращении по URL /about:
@app.route("/about") def about(): return render_template('about.html')
Теперь, посещая эту страницу, пользователь увидит:
Вот так легко и просто мы добавили два шаблона для наших двух страниц. Далее, можно их редактировать, не меняя код самой программы, что очень удобно.
Передача шаблонам параметров
Я много раз произносил слово «шаблон», но что оно означает? Если посмотреть на файлы index.html или about.html, то это просто текст, который загружается и отдается браузеру по соответствующему запросу. Все так, но в этих же файлах можно прописать конструкции для отображения информации, например, из БД. Давайте для начала сделаем так, чтобы на каждой странице был свой заголовок, переданный ей через параметр title. Это можно сделать так:
DOCTYPE html> html> head> title>{{title}}/title> /head> body> h1>{{title}}/h1> /body> /html> А в обработчике указать этот параметр:
return render_template('index.html', title="Про Flask")
Все, теперь вместо title будет подставлена строка «Про Flask». Удобно, правда? Вот в этом и есть роль шаблонов: они описывают структуру страницы, а ее наполнение происходит динамически в самой программе.
Но какие вообще конструкции можно использовать в шаблонах? Как я уже отмечал, модуль Flask использует шаблонизатор Jinja и шаблоны строятся по его правилам. Если вы не знаете как работать с шаблонами, то под этим видео увидите ссылку на этот курс.
Давайте для примера еще добавим в документ простой список, пусть он символизирует наше меню. Шаблон для него можно прописать так (в файле index.html):
ul> {% for m in menu %} li>{{m}}/li> {% endfor %} /ul> А в программе добавить список и передать его шаблону:
menu = ["Установка", "Первое приложение", "Обратная связь"] @app.route("/") def index(): return render_template('index.html', title="Про Flask", menu = menu)
При обновлении страницы увидим следующее:
Добавим большей гибкости нашему шаблону и для заголовка пропишем следующую конструкцию:
{% if title %} title>Про Flask - {{title}}/title> {% else %} title>Про Flask/title> {% endif %}
И то же самое для тега h1:
{% if title -%} h1>{{title}}/h1> {% else -%} h1>Про Flask/h1> {% endif %}
Теперь в обработчике можно не указывать параметр title, тогда будет отображаться строка «Про Flask», а иначе, подставляться другой заголовок, причем во вкладке браузеры будем видеть «Про Flask — ». Например, пропишем такой же шаблон для about.html и в обработчике добавим:
def about(): return render_template('about.html', title = "О сайте", menu = menu)
В результате, вид страницы будет такой:
Но, наши созданные шаблоны, мягко говоря, не очень, т.к. они содержат много повторяющегося кода. Лучшим вариантом будет воспользоваться механизмом расширения (наследования) шаблона для создания дочерних страниц сайта. Для начала определим базовый шаблон страницы – ее структуру, следующим образом (файл base.html):
DOCTYPE html> html> head> {% block title -%} {% if title %} title>Про Flask - {{title}}/title> {% else %} title>Про Flask/title> {% endif %} {% endblock %} /head> body> {% block content -%} {%- block mainmenu -%} ul> {% for m in menu -%} li>{{m}}/li> {% endfor -%} /ul> {% endblock mainmenu -%} {% if title -%} h1>{{title}}/h1> {% else -%} h1>Про Flask/h1> {% endif -%} {% endblock -%} /body> /html> А в дочерних расширим этот базовый шаблон:
— для index.html:
{% extends 'base.html' %} {% block content %} {{ super() }} Содержимое главной страницы {% endblock %}
— для about.html:
{% extends 'base.html' %} {% block content %} {{ super() }} Содержимое страницы "о сайте" {% endblock %}
Все, теперь никакого дублирования в наших шаблонах нет и мы можем достаточно просто создавать множество страниц сайта и при необходимости менять их структуру, просто меняя базовый шаблон base.html.
Видео по теме
Flask #1: Что это такое? Простое WSGI-приложение
Flask #2: Использование шаблонов страниц сайта
Flask #3: Контекст приложения и контекст запроса
Flask #4: Функция url_for и переменные URL-адреса
Flask #5: Подключение внешних ресурсов и работа с формами
Flask #6: Мгновенные сообщения — flash, get_flashed_messages
Flask #7: Декоратор errorhandler, функции redirect и abort
Flask #8: Создание БД, установление и разрыв соединения при запросах
Flask #9: Добавление и отображение статей из БД
Flask #10: Способ представления полноценных HTML-страниц на сервере
Flask #11: Формирование ответа сервера, декораторы перехвата запроса
Flask #12: Порядок работы с cookies (куками)
Flask #13: Порядок работы с сессиями (session)
Flask #14: Регистрация пользователей и шифрование паролей
Flask #15: Авторизация пользователей на сайте через Flask-Login
Flask #16: Улучшение процесса авторизации (Flask-Login)
Flask #17: Загрузка файлов на сервер и сохранение в БД
Flask #18: Применение WTForms для работы с формами сайта
Flask #19: Обработка ошибок во Flask-WTF
Flask #20: Blueprint — что это такое, где и как использовать
Flask #21: Blueprint — подключение к БД и работа с ней
Flask #22: Flask-SQLAlchemy — установка, создание таблиц, добавление записей
Flask #23: Операции с таблицами через Flask-SQLAlchemy
© 2023 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
#6 Шаблоны во Flask
До этого момента HTML-строки записывались прямо в функцию представления. Это нормально в демонстрационных целях, но неприемлемо при создании реальных приложений. Большинство современных веб-страниц достаточно длинные и состоят из множества динамических элементов. Вместо того чтобы использовать огромные блоки HTML-кода прямо в функциях (с чем еще и неудобно будет работать), применяются шаблоны.
Шаблоны
Шаблон — это всего лишь текстовый файл с HTML-кодом и дополнительными элементами разметки, которые обозначают динамический контент. Последний станет известен в момент запроса. Процесс, во время которого динамическая разметка заменяется, и генерируется статическая HTML-страница, называется отрисовкой (или рендерингом) шаблона. Во Flask есть встроенный движок шаблонов Jinja, который и занимается тем, что конвертирует шаблон в статический HTML-файл.
Jinja — один из самых мощных и популярных движков для обработки шаблонов для языка Python. Он должен быть известен пользователям Django. Но стоит понимать, что Flask и Jinja – два разных пакета, и они могут использоваться отдельно.
Отрисовка шаблонов с помощью render_template()
По умолчанию, Flask ищет шаблоны в подкаталоге templates внутри папки приложения. Это поведение можно изменить, передав аргумент template_folder конструктору Flask во время создания экземпляра приложения.
Этот код меняет расположение шаблонов по умолчанию на папку jinja_templates внутри папки приложения.
app = Flask(__name__, template_folder="jinja_templates") Сейчас в этом нет смысла, поэтому пока стоит продолжать использовать папку templates для хранения шаблонов.
Создаем новую папку templates внутри папки приложения flask_app . В templates — файл index.html со следующим кодом:
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>Name: >p> body> html> Стоит обратить внимание, что в «базовом» HTML-шаблоне есть динамический компонент > . Переменная name внутри фигурных скобок представляет собой переменную, значение которой будет определено во время отрисовки шаблона. В качестве примера можно написать, что значением name будет Jerry . Тогда после рендеринга шаблона выйдет следующий код.
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>Name: Jerryp> body> html> Flask предоставляет функцию rended_template для отрисовки шаблонов. Она интегрирует Jinja во Flask. Чтобы отрисовать шаблон, нужно вызвать rended_template() с именем шаблона и данными, которые должны быть в шаблоне в виде аргументов-ключевых слов. Аргументы-ключевые слова, которые передаются шаблонам, известны как контекст шаблона. Следующий код показывает, как отрисовать шаблон index.html с помощью render_template() .
from flask import Flask, request, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html', name='Jerry') #. Важно обратить внимание, что name в name=’Jerry’ ссылается на переменную, упомянутую в шаблоне index.html .
Если сейчас зайти на https://localhost:5000/ , выйдет следующий ответ:
Если render_template() нужно передать много аргументов, можно не разделять их запятыми ( , ), а создать словарь и использовать оператор ** , чтобы передать аргументы-ключевые слова функции. Например:
@app.route('/') def index(): name, age, profession = "Jerry", 24, 'Programmer' template_context = dict(name=name, age=age, profession=profession) return render_template('index.html', **template_context) Шаблон index.html теперь имеет доступ к трем переменным шаблона: name , age и profession .
Что случится, если не определить контекст шаблона?
Ничего не случится, не будет ни предупреждений, ни исключений. Jinja отрисует шаблон как обычно, а на местах пропусков использует пустые строки. Чтобы увидеть это поведение, необходимо изменить функцию представления index() следующим образом:
#. @app.route('/') def index(): return render_template('index.html') #. Теперь при открытии https://localhost:5000/ выйдет следующий ответ:
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>Name: p> body> html> Сейчас должна сложиться картина того, как используются шаблоны во Flask, а в следующем разделе речь пойдет о том, как рендерить их в консоли.
Отрисовка шаблонов в консоли
Для тестирования рендерить шаблоны можно и в консоли. Это просто и не требует создания нескольких файлов. Для начала нужно запустить Python и импортировать класс Template из пакета jinja2 следующим образом.
>>> from jinja2 import Template Для создания объекта Templates нужно передать содержимое шаблона в виде строки.
Чтобы отрендерить шаблон, нужно вызвать метод render() объекта Template вместе с данными аргументами-ключевыми словами
>>> t.render(name='Jerry') 'Name: Jerry' В следующем уроке речь пойдет о шаблонизаторе Jinja.