Книга «Изучаем Python»
жүктеу/скачать 7,86 Mb. Pdf көрінісі
|
| Рис. 20.1. Домашняя страница Learning Log
Теперь вы знаете, к какому результату мы стремимся, и вам будет проще понять дальнейшие пояснения. Изменение base .html Шаблон base .html необходимо изменить так, чтобы в нем был задействован шаблон Bootstrap. Новая версия base .html будет представлена в несколько этапов. 440 Глава 20 • Оформление и развертывание приложения Определение заголовков HTML Первое изменение в base .html : заголовки HTML определяются в файле, чтобы при открытии страницы Learning Log в строке заголовка браузера выводилось имя сайта. Также будут добавлены некоторые требования для использования Bootstrap в шаблонах. Удалите все содержимое base .html и замените его следующим кодом: base.html {% load bootstrap3 %}
{% bootstrap_css %} {% bootstrap_javascript %}
В точке загружается коллекция шаблонных тегов из django-bootstrap3 . Затем файл объявляется как документ HTML , написанный на английском языке . Файл HTML состоит из двух основных частей, заголовка и тела — заголовок фай- ла начинается в точке . Заголовок файла HTML не содержит контента: он всего лишь передает браузеру информацию, необходимую для правильного отображения страницы. В точке включается элемент title страницы; его содержимое будет выводиться в строке заголовка браузера при открытии Learning Log. В точке
используется один из шаблонных тегов django-bootstrap3 , который приказывает Django включить все стилевые файлы Bootstrap. Следующий тег активизирует все интерактивное поведение, которое может использоваться на странице, — напри- мер, раздвижные навигационные панели. В точке располагается закрывающий тег . Определение навигационной панели В верхней части страницы определяется навигационная панель: ...
aria-expanded="false" aria-controls="navbar">
{% if user.is_authenticated %}
{% else %}
{% endif %}
Первый элемент — открывающий тег
. Тело файла HTML содержит кон- тент, который будет виден пользователям на странице. В точке элемент
обозначает раздел навигационных ссылок на странице. Весь контент внутри этого элемента оформляется по правилам Bootstrap, определяемым селекторами navbar
, navbar-default и navbar-static-top . Селектор определяет, к каким элементам страницы должно применяться стилевое правило. В точке шаблон определяет кнопку, которая будет отображаться, если ширины окна браузера не хватает для горизонтального отображения всей навигационной панели. Когда пользователь нажимает кнопку, навигационные элементы выводятся в раскрывающемся списке. Атрибут collapse сворачивает навигационную панель при уменьшении размеров окна браузера и при отображении сайта на мобильных устройствах с малыми экранами. В точке имя проекта выводится у левого края навигационной панели. Так как это имя будет присутствовать на каждой странице проекта, оно оформляется в виде ссылки на домашнюю страницу. В точке определяется набор ссылок для навигации по сайту. Панель навигации фактически представляет собой список, начинающийся с
, а каждая ссылка является элементом списка (
Эта строка представляет одну ссылку на навигационной панели. Ссылка берется непосредственно из предыдущей версии base .html . В точке
создается второй список навигационных ссылок, на этот раз с использо- ванием селектора navbar-right . Селектор navbar-right оформляет набор ссылок
442 Глава 20 • Оформление и развертывание приложения так, что он выводится в правой части навигационной панели, где обычно отобра- жаются ссылки для входа/регистрации пользователя. В данном случае выводится либо приветствие для пользователя и ссылка для выхода, либо ссылки для реги- страции и входа. Остальной код этого раздела закрывает элементы, содержащие навигационную панель .
Оставшаяся часть base .html содержит основной контент страницы: ...
{% block header %}{% endblock header %}
{% block content %}{% endblock content %}
жүктеу/скачать 7,86 Mb. Достарыңызбен бөлісу:
|