Создание первого приложения на Django, часть 6

В прошлый раз мы изучили Часть 5. Мы создали протестированное приложение для веб-опросов, а теперь добавим таблицу стилей и изображение.

Помимо HTML-кода, генерируемого сервером, веб-приложения обычно должны обслуживать дополнительные файлы - такие как изображения, JavaScript или CSS - необходимые для отображения всей веб-страницы. В Django мы называем эти файлы «статическими файлами».

Для небольших проектов это не имеет большого значения, потому что вы можете просто хранить статические файлы там, где их может найти ваш веб-сервер. Однако в более крупных проектах, особенно в тех, которые состоят из нескольких приложений, работа с несколькими наборами статических файлов, предоставляемых каждым приложением, начинает усложняться.

Вот для чего нужен модуль django.contrib.staticfiles: он собирает статические файлы из каждого приложения (и любых других мест, которые вы укажете) в одно место, которое можно легко обслуживать на рабочем сервере.

Настройте внешний вид вашего приложения

Сначала создайте каталог с именем static в вашем каталоге polls. Django будет искать статические файлы там, аналогично тому, как Django находит шаблоны внутри polls/templates/.

Параметр Django STATICFILES_FINDERS содержит список модулей, которые знают, как обнаруживать статические файлы из различных источников. Одним из значений по умолчанию является AppDirectoriesFinder, который ищет «статический» подкаталог в каждом из INSTALLED_APPS, подобно тому, который мы только что создали в polls. Сайт администратора использует ту же структуру каталогов для своих статических файлов.

В каталоге static, который вы только что создали, создайте другой каталог с именем polls и в нем создайте файл с именем style.css. Другими словами, ваша таблица стилей должна находиться в polls/static/polls/style.css. Из-за того, как работает поиск статических файлов AppDirectoriesFinder, вы можете ссылаться на этот статический файл в Django просто как polls/style.css, аналогично тому, как вы ссылаетесь на шаблоны.

Пространство имен статических файлов

Как и в случаях с шаблонами, мы можем избежать размещения наших статических файлов непосредственно в polls/static (вместо создания другого подкаталога polls), но на самом деле это плохая идея. Django выберет первый найденный им статический файл, имя которого совпадает, и если бы у вас был статический файл с тем же именем в другом приложении, Django не смог бы их различить. Нам нужно иметь возможность указать Django на правильный путь, и самый простой способ убедиться в этом - пространство имен. То есть, поместив эти статические файлы в другой каталог, названный как и само приложение.

Поместите следующий код в эту таблицу стилей (polls/static/polls/style.css):

polls/static/polls/style.css
li a {
    color: green;
}

Затем добавьте следующее в начало polls/templates/polls/index.html:

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):

polls/static/polls/style.css
body {
    background: white url("images/background.gif") no-repeat;
}

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

Предупреждение

Конечно, тег шаблона {% static %} недоступен для использования в статических файлах, таких как ваша таблица стилей, которые не генерируются Django. Вы всегда должны использовать относительные пути, чтобы связать ваши статические файлы между собой, потому что тогда вы можете изменить STATIC_URL (используется тегом шаблона static для генерации его URL) без необходимости измените несколько путей в ваших статических файлах.

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

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

Вернуться на верх