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

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

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

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

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

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

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

Настройка Django STATICFILES_FINDERS содержит список поисковиков, которые знают, как обнаруживать статические файлы из различных источников. Одним из значений по умолчанию является 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 static %}

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

Тег {% 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/ и вы увидите фон, загруженный в нижнем правом углу экрана.

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

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