Поделиться через

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

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

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

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

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

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

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

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

  1. Чтобы просмотреть доступные шаблоны, перейдите к обозревателе решений в Visual Studio и откройте структуру проекта.

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

  3. Чтобы использовать шаблон, выберите нужный шаблон, введите имя файла и выберите Добавить.

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

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

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

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

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

Проект Django настроен по умолчанию для обслуживания статических файлов из статической папки приложения. Это поведение можно сделать с помощью следующего кода в файле settings.py проекта Django:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

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

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

Выполните следующие действия, чтобы добавить CSS-файл в приложение, а затем использовать таблицу стилей CSS в шаблоне index.html:

  1. В Обозревателе решенийщелкните правой кнопкой мыши папку HelloDjangoApp в проекте, выберите Добавить>Новая папкаи назовите папку static.

  2. Щелкните правой кнопкой мыши папку статических и выберите Добавить>новый элемент.

  3. В диалоговом окне Добавление нового элемента выберите шаблон таблицы стилей, назовите файл site.cs, а затем выберите Добавить.

    Visual Studio добавляет site.css файл в проект и открывает файл в редакторе. Ниже приведен пример обновленной структуры проекта Django:

    снимок экрана, показывающий статическую структуру файлов в обозревателе решений.

  4. Замените содержимое файла site.css следующими стилями:

    .message {
    font-weight: 600;
    color: blue;
}

  5. Замените содержимое файла HelloDjangoApp/templates/index.html следующим разметкой:

    <html>
   <head>
      <title>{{ title }}</title>
      {% load static %} <!-- Instruct Django to load static files -->
      <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.

  6. Сохраните изменения проекта, выбрав Файл>Сохранить Все или с помощью клавиатурной комбинации Ctrl+Shift+S. (Этот шаг не нужен, так как при разработке проекта Visual Studio автоматически сохраняет файлы.)

  7. Запустите проект и просмотрите результаты. По завершении остановите приложение.

  8. (Необязательно) Вы можете зафиксировать изменения в системе контроля версий и обновить удаленный репозиторий. Дополнительные сведения см. в разделе Фиксация изменений в системе управления версиями на шаге 2 этого руководства.

Используйте тэг {% load static %}

Оператор {% load static %} должен присутствовать в файле index.html перед относительными ссылками сайта на статические файлы в HTML-элементах, таких как <head> и <body>. В примере, приведенном в этом разделе, "статические файлы" относятся к пользовательскому набору тегов шаблона Django. Набор тегов позволяет использовать синтаксис {% static %} для ссылки на статические файлы. Без тега {% load static %} вы увидите исключение при запуске приложения.

Добавьте ссылки без тега {% load static %}

Вы также можете настроить относительные ссылки сайта на статические файлы в разметке HTML без использования тега {% load static %}. В этом случае необходимо указать расположение статической папки в иерархии папок проекта Django:

<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>

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

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

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

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

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

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

  1. В Проводнике решений кликните правой кнопкой папку templates/HelloDjangoApp в вашем проекте и выберите Добавить>Новый элемент.

    Совет

    Если команда Новый элемент в меню Добавить не отображается, не забудьте остановить приложение Django, чтобы Visual Studio выйти из режима отладки по мере необходимости.

  2. В диалоговом окне Добавление нового элемента выберите шаблон html-страницы, назовите файл about.html, а затем выберите Добавить.

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

    <html>
   <head>
      <title>{{ title }}</title>
      {% load static %}
      <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

    На следующем шаге вы замените явную ссылку на домашнюю страницу панелью навигации.

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

    def about(request):
   return render(
      request,
      "HelloDjangoApp/about.html",
      {
         'title' : "About HelloDjangoApp",
         'content' : "Example app page for Django."
      }
   )

  5. В файле BasicProject/urls.py проекта Django добавьте путь к странице about в качестве последнего элемента в массиве urlPatterns:

    # Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

  6. В файле templates/HelloDjangoApp/index.html добавьте следующую разметку в качестве первой инструкции в элементе <body>:

    <div><a href="about">About</a></div>

    Эта разметка добавляет ссылку на страницу /about для приложения Django. На следующем шаге вы замените эту ссылку панелью навигации.

  7. Сохраните изменения проекта и снова запустите проект. Перейдите на страницу /about и проверьте навигацию между различными страницами приложения.

  8. По завершении остановите приложение.

Перейти на страницу "index"

Если вы попытаетесь перейти на страницу /index для запущенного приложения, появится ошибка страница не найдена (404).

Хотя файл HelloDjangoApp/views.py имеет функцию с именем index, шаблоны маршрутизации URL-адресов в файле BasicProject/urls.py проекта Django не содержат регулярного выражения, соответствующего строковой index. Текущее выражение для страницы приложения «индекс» — ^$. Чтобы сопоставить строку index, необходимо добавить еще одну запись URL-адреса для шаблона ^index$.

В следующем разделе описывается, как лучше использовать тег {% url '<pattern_name>' %} в шаблоне страницы для ссылки на имя шаблона. В этом случае Django создает правильный URL-адрес. Например, можно заменить разметку <div><a href="home">Home</a></div> в файле templates/HelloDjangoApp/about.html разметкой <div><a href="{% url 'index' %}">Home</a></div>. Теперь используется строка 'index', так как первый шаблон URL-адреса в файле urls.py называется 'index'. Вы также можете использовать 'home' для ссылки на второй шаблон.

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

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

Система шаблонов Django предоставляет два способа повторного использования определенных элементов в нескольких шаблонах:

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

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

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

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

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

  1. В Solution Explorerщелкните правой кнопкой мыши по папке templates/HelloDjangoApp и создайте новый файл из шаблона HTML Page, присвоив ему имя layout.html.

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

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

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Django</a>
      <a href="{% url 'home' %}" class="navbar-item">Home</a>
      <a href="{% url '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, который определяет все содержимое, которое нужно заменить на ссылающихся страницах.

  3. В файле HelloDjangoApp/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;
}

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

  4. Замените содержимое файла templates/HelloDjangoApp/index.html следующим кодом:

    {% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}

    Теперь шаблон index ссылается на базовый шаблон и переопределяет блок content. Видно, что с помощью наследования этот шаблон стал проще.

  5. Замените содержимое файла templates/HelloDjangoApp/about.html следующим кодом, поэтому шаблон about также ссылается на базовый шаблон и переопределяет блок content:

    {% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}

  6. Запустите приложение еще раз и просмотрите результаты. Используйте ссылки панели навигации для переключения между страницами приложения.

    снимок экрана, на котором показан измененное приложение Django, использующее наследование шаблонов для отображения заголовка и панели навигации на всех страницах.

  7. По завершении остановите приложение и сохраните изменения проекта.

  8. Так как вы внесли существенные изменения в приложение, это хорошее время для сохранения изменений в репозитории Git. Дополнительные сведения см. в разделе "Фиксация изменений в системе контроля версий" на этапе 2 этой серии руководств.

Следующий шаг

шаг 4. Использование полного шаблона веб-проекта Django