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

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

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