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

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

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

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

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