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