Создание вашей первой 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;
}

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

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

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