Руководство. Обслуживание статических файлов и использование наследования шаблонов в Flask в Visual Studio

2025-08-08

В этой статье представлен шаг 3 в серии учебников Работа с веб-платформой Flask в Visual Studio.

Предыдущие действия, описанные в этом руководстве, создают минимальное приложение Flask с одной страницей автономного HTML- кода. Современные веб-приложения обычно состоят из множества страниц и используют общие ресурсы, такие как CSS и файлы JavaScript, для обеспечения согласованной стилизации и поведения. На шаге 3 вы работаете с шаблонами элементов Visual Studio, чтобы добавить содержимое в проект Flask и расширить возможности приложения.

На шаге 3 руководства вы узнаете, как:

Использование шаблонов элементов Visual Studio для быстрого добавления новых файлов с помощью стандартного кода
Обслуживание статических файлов из кода Flask
Добавление дополнительных страниц в приложение Flask
Создание заголовка и навигации по страницам с помощью наследования шаблонов

Необходимые условия

Проект решения Visual Studio и приложения Flask, созданный на шаге 1. Создание проекта Flask и обновление в шаге 2. Рефакторинг проекта Flask.

Изучение шаблонов элементов в Visual Studio

При разработке приложения Flask обычно добавляется много других файлов Python, HTML, CSS и JavaScript. Для каждого типа файлов (и других файлов, таких как web.config, которые могут потребоваться для развертывания), Visual Studio предоставляет удобные шаблоны элементов , чтобы приступить к работе. Эти шаблоны можно использовать для быстрого добавления новых файлов различных типов с помощью стандартного кода.

Чтобы просмотреть доступные шаблоны, перейдите к обозревателе решений в Visual Studio и откройте структуру проекта.
Щелкните правой кнопкой мыши папку, в которой нужно создать файл, и выберите Добавить>новый элемент. Откроется диалоговое окно добавления нового элемента :
Чтобы использовать шаблон, выберите нужный шаблон, введите имя файла и выберите Добавить.

Visual Studio добавляет файл в текущий проект и помечает изменения для системы контроля версий.

Общие сведения о том, как Visual Studio определяет шаблоны элементов

Файл проекта Visual Studio (.pyproj) содержит идентификатор типа проекта, который помечает файл как проект Python. Visual Studio использует этот идентификатор типа для распознавания и отображения только тех шаблонов элементов, которые подходят для типа проекта. Visual Studio следует этому подходу, чтобы предоставить широкий набор шаблонов элементов для многих типов проектов, не запрашивая сортировку по ним каждый раз.

Обслуживание статических файлов из приложения

В веб-приложении, созданном с помощью Python (с помощью любой платформы), файлы Python всегда выполняются на сервере веб-узла и никогда не передаются на компьютер пользователя. Другие файлы, такие как CSS и JavaScript, используются только браузером, поэтому сервер узла просто предоставляет им as-is при запросе. Эти типы файлов называются статическими файлами, и Flask может автоматически доставлять их без необходимости писать код. Например, в HTML-файлах можно ссылаться на статические файлы с помощью относительного пути в проекте. Первая процедура в этом разделе показывает, как использовать статический CSS-файл с существующим шаблоном страницы.

Если необходимо доставить статический файл из кода, например через реализацию конечной точки API, Flask предоставляет удобный метод. Вы можете ссылаться на файлы, используя относительные пути в папке под названием static в корне проекта. Вторая процедура в этом разделе демонстрирует, как работать с простым статическим файлом данных из кода.

В обоих процедурах можно упорядочить файлы в статической папке в соответствии с вашими предпочтениями.

Использование статического CSS-файла в шаблоне

Выполните следующие действия, чтобы использовать статический файл в шаблоне:

В обозревателе решений , щелкните правой кнопкой мыши папку HelloFlask в проекте, выберите Добавить>новую папкуи назовите папку static.
Щелкните правой кнопкой мыши на статической папке и выберите Добавить>новый элемент.
В диалоговом окне Добавление нового элемента выберите шаблон таблицы стилей, назовите файл site.cs, а затем выберите Добавить.

Visual Studio добавляет site.css файл в проект и открывает файл в редакторе. Ниже приведен пример обновленной структуры проекта Flask:
Замените содержимое файла site.css следующими стилями:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Замените содержимое файла HelloFlask/templates/index.html следующим разметкой:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
Этот код заменяет элемент HTML <strong> из шага 2 в серии учебников элементом <span>, который ссылается на класс стилей message. Использование класса стилей таким образом обеспечивает большую гибкость при стилизации элемента HTML.
Сохраните изменения проекта, выбрав Файл>Сохранить все или с помощью сочетания клавиш Ctrl+Shift+S. (Этот шаг не нужен, так как при разработке проекта Visual Studio автоматически сохраняет файлы.)
Запустите проект и просмотрите результаты. По завершении остановите приложение.
(Необязательно) Вы можете закоммитить ваши изменения в систему контроля версий и обновить удалённый репозиторий. Дополнительные сведения см. в разделе Фиксация изменений в системе управления версиями на этапе 2 данного руководства.

Обслуживать статический файл из кода программы

Flask предоставляет функцию с именем send_static_file, которую можно вызвать из кода, чтобы ссылаться на любой файл в статической папке проекта . Следующий процесс создает простую конечную точку API, которая возвращает статический файл данных:

** В статической папке создайте статический файл данных JSON под названием data.json. Шаблон файла текста можно использовать в качестве основы для файла.
Замените содержимое JSON-файла следующим кодом, который предоставляет некоторые примеры данных для демонстрации механизма:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
В файле HelloFlask/views.py добавьте функцию с конечной точкой маршрута /api/data, которая возвращает статический файл данных с помощью метода send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Сохраните изменения проекта и снова запустите проект. Перейдите к конечной точке маршрута /api/data и подтвердите, что приложение возвращает статический файл:
По завершении остановите приложение.

Упорядочение статических файлов и папок

Вы можете добавить другие CSS, JavaScript и HTML-файлы в статическую папку в соответствии с потребностями проекта. Типичный способ организации статических файлов заключается в создании подпапок шрифты, скриптыи контент (для таблиц стилей и других файлов).

Использование маршрутов URL-адресов и параметров запроса из API

Переменные URL-адресов и параметры запроса можно обрабатывать с помощью API при работе с Flask. Дополнительные сведения см. в разделе Использование переменных маршрутов URL и параметров запроса на шаге 1 этой серии руководств.

Добавление страницы в приложение Flask

Добавление другой страницы в приложение Flask включает следующие задачи:

Добавление функции Python, которая определяет представление
Добавление шаблона для разметки HTML страницы
Обновление маршрутов URL-адресов в файле views.py проекта Flask

Выполните следующие действия, чтобы добавить страницу About (/about) в проект BasicProject Flask и ссылки на нее со домашней страницы:

В обозревателе решений щелкните правой кнопкой мыши папку HelloFlask/templates в проекте и выберите Добавить>новый элемент.

Совет

Если команда "Новый элемент" в меню "Добавить" не отображается, убедитесь, что вы остановили приложение Flask, чтобы Visual Studio вышла из режима отладки, если необходимо.
В диалоговом окне Добавление нового элемента выберите шаблон html-страницы, назовите файл about.html, а затем выберите Добавить.
Замените содержимое файла about.html следующей разметкой HTML:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>
```
На следующем шаге вы замените явную ссылку на домашнюю страницу панелью навигации.

В файле HelloFlask/views.py добавьте функцию с именем about, использующую шаблон:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

В файле HelloFlask/templates/index.html добавьте следующую разметку в качестве первой инструкции в элементе <body>:
```
<div><a href="about">About</a></div>
```
Эта разметка добавляет ссылку на страницу /about приложения Flask. На следующем шаге вы замените эту ссылку панелью навигации.
Сохраните изменения проекта и снова запустите проект. Перейдите на страницу /about и проверьте навигацию между различными страницами приложения.
По завершении остановите приложение.

Назовите функцию страницы

Flask не накладывает ограничения или требования к имени функции страницы. Декоратор @app.route определяет URL-адреса, для которых Flask вызывает функцию для создания ответа. Разработчики обычно сопоставляют имя функции страницы с маршрутом, но это сопоставление не является обязательным.

Используйте наследование шаблонов для заголовка и навигации

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

Система шаблонов Flask (Jinja по умолчанию) предоставляет два способа повторного использования определенных элементов в нескольких шаблонах:

Включает — это другие шаблоны страниц, вставляемые в определенное место в шаблоне ссылок с синтаксисом {% include <template_path> %}. Можно также использовать переменную, если вы хотите динамически изменить путь в коде. Включения обычно используются в тексте страницы для подключения общего шаблона в определенном месте на странице.
наследование использует синтаксис {% extends <template_path> %} в начале шаблона страницы, чтобы указать общий базовый шаблон, на котором строится ссылающийся шаблон. Наследование обычно используется для определения общего макета, панели навигации и других структур страниц приложения. Этот подход требует, чтобы ссылки на шаблоны добавляли или изменяли только определенные области базового шаблона, называемые блоками .

Для обоих подходов значение <template_path> относительно папки шаблонов приложения (../ или ./ также разрешены).

Базовый шаблон определяет блоки с помощью тегов {% block <block_name> %} и {% endblock %}. Если ссылающийся шаблон использует теги с тем же именем блока, то содержимое блока в ссылаемом шаблоне переопределяет соответствующий блок в базовом шаблоне.

Следующие шаги демонстрируют наследование шаблонов:

В обозревателе решенийщелкните правой кнопкой мыши папку HelloFlask/templates и создайте файл из шаблона HTML-страницы с именем layout.html.

Замените содержимое файла layout.html следующей разметкой HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

Этот шаблон содержит блок с именем content, который определяет все содержимое, которое нужно заменить на ссылающихся страницах.

В файле HelloFlask/static/site.css добавьте следующие стили в конец файла:

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Эти определения стиля создают интересный результат для этого упражнения. В этом пошаговом руководстве не демонстрируется адаптивный дизайн.

Замените содержимое файла HelloFlask/templates/index.html следующим разметкой:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Теперь шаблон index ссылается на базовый шаблон и переопределяет блок content. Вы можете увидеть, что с помощью наследования этот шаблон упрощен.
Замените содержимое файла HelloFlask/templates/about.html следующей разметкой, чтобы шаблон about также ссылался на базовый шаблон и переопределял блок content.
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Запустите приложение еще раз и просмотрите результаты. Используйте ссылки панели навигации для переключения между страницами приложения.
По завершении остановите приложение и сохраните изменения проекта.
Так как вы внесли существенные изменения в приложение, это хорошее время для сохранения изменений в репозитории Git. Дополнительные сведения см. в разделе Фиксация изменений в системе управления версиями на этапе 2 данного руководства.

Обзор руководства

Поздравляем с завершением этого руководства о Flask в Visual Studio.

В этом руководстве вы узнали, как:

Создание проекта Flask с несколькими страницами
Создание различных представлений страниц с помощью шаблонов
Обслуживание статических файлов, добавление страниц и использование наследования шаблонов

Документация по дизайнеру шаблонов Jinja (jinja.pocoo.org)
url_for в документации по объекту приложения Flask (flask.pocoo.org)
исходный код учебника на сайте GitHub (Microsoft/python-sample-vs-learning-flask)