Написание вашего первого приложения 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 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.