Создание вашего первого приложения 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 статических файлов.

Это все, что вам нужно сделать для разработки.

Запустите сервер (или перезапустите его, если он уже работает):

$ python manage.py runserver

...\> py manage.py runserver

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

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

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