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

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

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

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

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

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

Сначала создайте директорию 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/static/polls/style.css):

li a {
    color: green;
}

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

{% load staticfiles %}

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

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

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

Добавление изображения в качестве фона

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

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

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

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

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

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