Оформим внешний вид страницы нашего сайта. Продолжим разработку проекта MySite из предыдущей статьи.
1. Общая структура документа
1.1. В файле views.py приложения AppMySite импортируем два класса SitiesOfSiberia и SitiesOfEurope и в процедуре index_page для возвращаемой функции renderer указать контекст (данные) из этих классов через переменные data и data2. Переменной data присваиваются все объекты из класса SitiesOfSiberia, а data2 - все объекты из SitiesOfEurope.
1.2. В папке Temlpates изменим файл Index.html. В нём находится html код описывающий структуру документа. Для начала (1) заменим текст в заголовке h1 "Привет, Мир!" на "Города России" и (2) добавим два блочных элемента div со списком и его названием внутри. В каждом блоке название списка выводится в теге параграф p с текстом "Сибирь" для одного и "Европейская часть" для другого. После вывода текста в теге p следующий текст начинается с новой строки. Далее воспользуемся языком Templates Django для (3) вывода списков городов в цикле для каждого блочного элемента.
В скобках {% %} находится код языка Templates Django, а в скобках {{ }} находятся переменные, значения которых нужно вывести на экран. Для вывода списка городов из переменных data и data2 созданы два цикла {% for i in data %} {% endfor %}. В цикле переменной i по очереди присваиваются объекты из data для первого блочного элемента и из data2 - для второго. Объект содержит запись о городе из баз данных "Города Сибири" и "Города Европейской части". Между скобками цикла выводятся по очереди название {{i.nameOfSity}}, локация {{i.locationOfSity}} и численность {{i.sizeOfSity}} каждого города в строчку через пробел, который добавляется автоматически. Подробнее о языке Templates Django можно узнать на сайте разработчика. Тег br кода html начинает текст с новой строки, в которой будет выводится информация о следующем городе.
1.3. Для каждого цикла добавим: (1) нумерацию городов в списке; (2) надпись "Город" до его названия и запятую после; (3) запятую после локации; (4) надпись "человек" после указания численности города. Для номера используем счётчик циклов {{forloop.counter}}, а для дополнительных надписей и запятых используем тег для гиперссылки a, который без указания гиперссылки является обычным текстом.
2. Настройка стилей элементов
2.1. Во фреймворке Django для файлов стилей, скриптов и картинок необходима специальная папка static, которая указанна в settings.py.
Сервер ищет её в папке приложения AppMySite, поэтому через контекстное меню создаём её именно там. Для стилей нужно создать папку css в папке static. В папке css создадим файл styles.css для настройки стилей отображения элементов страницы. Выделив этот файл во вкладке EXPLORER бокового меню слева добавим в него настройки для отображения тегов body, h1, p и div.
Параметр background-color задаёт цвет фона элемента, color - цвет текста.
2.2. В Index.html в теге head укажем ссылку на этот файл styles.css используя тег link. В теге link для параметра href укажем команду {% static 'css/styles.css' %}. Обязательно написать команду {% load static %} в начале документа Index.html до <!DOCTYPE html> для загрузки всех статических элементов.
Вместо отдельного файла можно было добавить все стили в теге style в голове head, но это годится только для небольших сайтов.
3. Создание скриптов
3.1. Создадим в папке static папку скриптов js и в ней файл script.js. Откроем его в EXPLORER и добавим код для изменения цвета фона строки при наведении курсора.
При наведении курсора мыши на объект вызывается функция change_color_1 с аргументом id, номером ID тега для которого вызвана функция. В ней сохраняется цет текста до наведения в глобальной переменой color, после чего цвет текста меняется на "green" (зелёный). Доступ к цвету текста, который расположен в теге, получен через команду DOM модели html-разметки document.getElementById(id).style.color. В команде передан ID номер тега через переменную id. Когда курсор мыши выходит за границы объекта, вызывается функция change_color_2 с тем же аргументом id, что и change_color_1. Во второй функции тексту в теге возвращается исходный текст через команду document.getElementById(id).style.color упомянутую выше.
3.2. Загрузим описанный выше скрипт в нашу страницу через тег script в голове документа head. Адрес статического файла скрипта script.js задан аналогично css, через команду {% static 'js/script.js' %} языка Templates Django.
Как мы видим, в теге h1 и тегах p указаны их номера ID и вызываемая функция change_color_1 при наведении курсора мыши onmouseover, а также функция change_color_2 вызываемая при выходе курсора мыши за границы тега onmouseout.
По итогу четырёх последовательных частей статьи о создании сайта в Python на Django получили мини сайт из одной страницы с одним эффектом, но научились: (1) работать с базой данных, (2) автоматизировать пуск локального сервера, (3) работать с шаблонами, стилями и скриптами сайта. Теперь при добавлении городов в списки через админ-панель нет необходимости лезть в сам код блоков фреймворка Django, а также HTML/CSS/JS файлов при сохранении общего стиля и функциональности сайта.
Подписывайтесь на канал чтобы не пропустить новые статьи.
