Этот туториал начинается там, где закончился **Создайте некоторые автоматические тесты**. Мы создали веб-приложение для опросов с тестами, и теперь добавим в него таблицу стилей и изображение.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
django(("Django")) -.-> django/CoreConfigurationandRoutingGroup(["Core Configuration and Routing"])
django/CoreConfigurationandRoutingGroup -.-> django/applications("Applications")
subgraph Lab Skills
django/applications -.-> lab-153746{{"Добавьте таблицу стилей и изображение"}}
end
Настройте внешний вид вашего приложения
Сначала создайте директорию с именем 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 внутри polls/static и положить наши статические файлы прямо в polls/static, но на самом деле это было бы плохой идеей. Django будет выбирать первый статический файл, имя которого совпадает, и если у вас был бы статический файл с таким же именем в другом приложении, Django не смог бы различить между ними. Мы должны уметь указывать Django на правильный файл, и лучший способ этого сделать - это именование с учетом пространства имен. То есть, поместить эти статические файлы внутри другой директории, названной по имени самого приложения.
Вставьте следующий код в этот таблицу стилей (polls/static/polls/style.css):
li a {
color: green;
}
Далее, добавьте следующее в начало polls/templates/polls/index.html:
Запустите сервер (или перезапустите его, если он уже запущен):
python manage.py runserver 0.0.0.0:8080
Перезагрузите вкладку Web 8080 и вы должны увидеть, что ссылки на вопросы зеленые (в стиле Django!), что означает, что ваша таблица стилей была правильно загружена.
Добавление фонового изображения
Далее, мы создадим поддиректорию для изображений. Создайте поддиректорию images в директории polls/static/polls/. Внутри этой директории добавьте любое изображение, которое вы хотите использовать в качестве фона. В целях этого туториала мы используем файл с именем background.png, который можно найти в директории /tmp/background.png в виртуальной машине.
Необходимо скопировать /tmp/background.png в polls/static/polls/images/background.png.
Затем добавьте ссылку на ваше изображение в таблицу стилей (polls/static/polls/style.css):
body {
background: white url("images/background.png") no-repeat;
}
Перезагрузите вкладку Web 8080 и вы должны увидеть, что фон загружен в верхнем левом углу экрана.
Шаблонный тег {% static %} недоступен для использования в статических файлах, которые не генерируются Django, таких как ваша таблица стилей. Вы должны всегда использовать относительные пути для связывания между собой ваших статических файлов, потому что тогда вы можете изменить STATIC_URL (используемый шаблонным тегом static для генерации его URL-адресов) без необходимости также изменять кучу путей в ваших статических файлах.
Вот основы. Для получения более подробной информации о настройках и других аспектах, включенных в фреймворк, см. руководство по статическим файлам </howto/static-files/index> и справочник по staticfiles </ref/contrib/staticfiles>. Развертывание статических файлов </howto/static-files/deployment> обсуждает, как использовать статические файлы на настоящем сервере.
Когда вы будете знакомы с статическими файлами, прочитайте раздел Настройка административного сайта Django, чтобы узнать, как настроить автоматически сгенерированный административный сайт Django.
Резюме
Поздравляем! Вы завершили лабораторную работу "Добавление таблицы стилей и изображения". Вы можете практиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.
