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