Написание вашей первой Django-приложения, часть 6

Этот учебник начинается там, где закончился Учебник 5. Мы построили протестированное приложение веб-опроса, и теперь добавим стили и изображение.

Помимо HTML, генерируемого сервером, веб-приложениям обычно требуется обслуживать дополнительные файлы — такие как изображения, JavaScript или CSS — необходимые для отображения полной веб-страницы. В Django эти файлы называются «статическими файлами».

Для небольших проектов это не проблема, потому что вы можете хранить статические файлы в месте, где ваш веб-сервер может их найти. Однако в больших проектах — особенно тех, которые состоят из нескольких приложений — работа с множеством наборов статических файлов, предоставляемых каждым приложением, становится сложной.

Для этого и предназначен django.contrib.staticfiles: он собирает статические файлы из каждого из ваших приложений (и любых других указанных вами мест) в одно место, которое легко обслуживать в рабочей среде.

Где получить помощь:

Если у вас возникли трудности с прохождением этого учебника, перейдите к разделу Получение помощи раздела FAQ.

Настройка внешнего вида вашего приложения

Сначала создайте директорию под названием static в вашей директории polls. Django будет искать статические файлы там, аналогично тому, как Django находит шаблоны внутри polls/templates/.

Настройка STATICFILES_FINDERS Django содержит список поисковиков, которые знают, как обнаруживать статические файлы из различных источников. Одним из значений по умолчанию является AppDirectoriesFinder, который ищет поддиректорию «static» в каждом из INSTALLED_APPS, например, в polls, который мы только что создали. Администраторский сайт использует ту же структуру каталогов для своих статических файлов.

Внутри директории static, которую вы только что создали, создайте другую директорию под названием polls и внутри неё создайте файл под названием style.css. Другими словами, ваш стилизованный файл должен располагаться по пути polls/static/polls/style.css. Из-за того, как работает поисковик статических файлов AppDirectoriesFinder, вы можете ссылаться на этот статический файл в Django как на polls/style.css, аналогично тому, как вы ссылаетесь на путь для шаблонов.

Пространство имен статических файлов

Как и в случае с шаблонами, мы, возможно, сможем обойтись без создания дополнительного подкаталога polls, разместив статические файлы напрямую в polls/static, но это было бы плохой идеей. Django выберет первый статический файл, имя которого соответствует нужному, и если у вас есть статический файл с тем же именем в другом приложении, Django не сможет их различить. Нам нужно указать Django, какой файл брать, и лучший способ сделать это — наделить их пространствами имен, то есть поместить эти статические файлы внутрь другой директории, названной по имени приложения.

Вставьте следующий код в этот стилизованный файл (polls/static/polls/style.css):

polls/static/polls/style.css

li a {
    color: green;
}

Далее, добавьте следующее в верхней части файла polls/templates/polls/index.html:

polls/templates/polls/index.html

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

Тег {% static %} генерирует абсолютный URL статических файлов.

Этого достаточно для разработки.

Запустите сервер (или перезапустите его, если он уже запущен):

$ python manage.py runserver

...\> py manage.py runserver

Перезагрузите http://localhost:8000/polls/, и вы должны увидеть, что ссылки на вопросы окрашены в зелёный цвет (стиль Django!), что означает, что ваш стилизованный файл был корректно загружен.

Добавление фонового изображения

Далее мы создадим поддиректорию для изображений. Создайте поддиректорию images в директории polls/static/polls/. Внутри этой директории добавьте любой файл изображения, который вы хотите использовать в качестве фона. Для целей этого учебника мы используем файл под названием background.png, который будет иметь полный путь polls/static/polls/images/background.png.

Затем добавьте ссылку на ваше изображение в ваш стилизованный файл (polls/static/polls/style.css):

polls/static/polls/style.css

body {
    background: white url("images/background.png") no-repeat;
}

Перезагрузите http://localhost:8000/polls/, и вы должны увидеть фоновое изображение в левом верхнем углу экрана.

Предупреждение

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

Это основы. Более подробная информация о настройках и других частях, включенных в фреймворк, см. в руководстве по статическим файлам и справке по статическим файлам. Развертывание статических файлов описывает, как использовать статические файлы на реальном сервере.

Когда вы освоитесь со статическими файлами, прочитайте часть 7 этого учебника, чтобы узнать, как настроить автоматически генерируемый администраторский сайт Django.

© Django Software Foundation and individual contributors
Licensed under the BSD License.
https://docs.djangoproject.com/en/5.2/intro/tutorial06/