Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>HTML в виде строки - плохой подход</h2>

3 Представим, что мы создаем HTML-страницу в виде строки:

4 У такого подхода много недостатков:

5 <ul><li>Он небезопасен и может привести к взлому</li>

6 <li>С ростом количества HTML поддерживать такой код станет практически невозможно из-за неудобства анализа и редактирования</li>

7 <li>В таком коде будут возникать постоянные проблемы - придется экранировать одинарные или двойные кавычки</li>

8 <li>В таком коде легко допустить ошибку в HTML и сложно ее обнаружить</li>

9 <li>В типичных сайтах большая часть HTML общая для разных страниц. Выделить ее с этим подходом очень сложно</li>

10 </ul>Чтобы решать подобные проблемы, придумали шаблонизаторы.

11 <h2>Шаблонизаторы</h2>

12 Шаблонизаторы- специализированные библиотеки, которые позволяют описывать шаблон отдельно от остальной части кода. Мы будем использовать Jinja2, который по умолчанию установлен во Flask.

13 Чтобы использовать шаблонизатор Jinja2, его нужно подключить:

14 Функция render_template() выполняет рендеринг указанного шаблона и добавляет результат в ответ. Сама функция принимает на вход два параметра:

15 <ol><li>Путь до нужного шаблона</li>

16 <li>Контекст - набор именованных аргументов, который будет доступен внутри шаблона. Сюда можно передавать все что угодно.</li>

17 </ol>Далее добавляем файлtemplates/index.htmlсо следующим содержимым:

18 Теперь откройте браузер и попробуйте загрузить страницу<a>http://localhost</a>

19 <a>/users/nick</a>.

20 Вместо кода {{ name }} на экране появилось значение аргумента name. Шаблонизатор берет весь контекст, который приводится после названия шаблона, и создает внутри шаблона локальные переменные. При этом имя локальной переменной и имя передаваемого именованного аргумента совпадают. Этот принцип работает всегда. Затем все переданные контекстом переменные подставляются в их плейсхолеры в шаблоне.

21 Если вам нужно вывести данные на странице, то добавляйте новые аргументы и обращайтесь к ним в шаблоне через переменные.

22 Шаблонизатор Jinja2 отличается от обычного HTML тем, что содержит в себе дополнительные конструкции:

23 <ul><li>{{ ... }} - для вывода переменных</li>

24 <li>{% ... %} - для управления логикой шаблона</li>

25 <li>{# ... #} - для комментариев</li>

26 </ul><a>Язык шаблонов</a>Jinja отчасти похож на синтаксис языков программирования. В нем также можно использовать условия, циклы, преобразовывать данные.

27 <h2>Ипользование шаблонов</h2>

28 Теперь, когда мы добавили поддержку шаблонов во фреймворк, появляется способ создавать нетривиальные сайты. Ниже пример обработчика и шаблона для вывода курсов.

29 Обработчик:

30 Шаблон:

31 При открытии страницы/courses/у нас будет отображаться следующий список:

32 Блок {% for course in courses %} ... {% endfor %} отвечает за цикл, который выводит HTML-код, расположенный внутри него. Так мы выводим список всех записей, который передали в шаблон из представления как переменную courses.

33 Использовать HTML напрямую в виде строки можно, но это небезопасно, неудобно, проблематично и сложно. Поэтому стоит использовать шаблонизаторы. Они позволяют описывать шаблон отдельно от остальной части кода, что упрощает работу с HTML-страницами.