Книга Изучаем Python

• Название: Книга Изучаем Python
• Дата: 10.12.2022
• Размер: 4.68 Mb.
• Имя файла: Erik_Metiz_Izuchaem_Python_Programmirovanie_igr_vizualizatsia_da.pdf
• Тип: Книга; #837531
• страница: 48 из 53

Track your learning.

{% endblock header %}
{% block content %}


Register an account to make your own Learning Log, and list the topics you're learning about.


Whenever you learn something new about a topic, make an entry summarizing what you've learned.

{% endblock content %}
В точке  мы сообщаем Django о том, что далее следует определение содержимого блока header
. В элементе jumbotron
 размещается краткий подзаголовок Track your
learning, который дает посетителям представление о том, что делает Learning Log.
В точке  добавляется текст, который поможет сориентироваться неопытным пользователям. Приложение предлагает посетителю создать учетную запись, а так- же описывает два основных действия — создание новых тем и создание записей по темам. Страница на рис. 20.1 выглядит намного лучше, чем страница нашего проекта с простейшим оформлением.
Оформление страницы входа
Мы усовершенствовали внешний вид страницы входа, но формы входа изменения пока не коснулись. Приведем внешний вид формы в соответствие с остальными элементами страницы:
login.html
{% extends "learning_logs/base.html" %}

{% load bootstrap3 %}

{% block header %}

Log in to your account.

444 Глава 20 • Оформление и развертывание приложения
{% endblock header %}
{% block content %}


{% csrf_token %}

{% bootstrap_form form %}

{% buttons %}
log in
{% endbuttons %}

{% endblock content %}
В точке  в шаблон загружаются шаблонные теги bootstrap3
. В точке  опреде- ляется блок header
, который описывает, для чего нужна страница. Обратите вни- мание: блок
{%
if form.errors
%}
удален из шаблона; django-bootstrap3
управляет ошибками формы автоматически.
В точке  добавляется атрибут
, после чего при отображении формы  используется шаблонный тег
{%
bootstrap_form
%}
; он заменяет тег
{{
form.as_p
}}
, используемый в главе 19. Шаблонный тег
{%
booststrap_form
%}
вставляет правила в стиле Bootstrap в отдельные элементы формы при ее построении. В точке  от- крывается шаблонный тег bootstrap3
{%
buttons
%}
, который добавляет стилевое оформление Bootstrap к кнопкам.
На рис. 20.2 показана форма входа так, как она выглядит сейчас. Страница стала на- много чище, ее оформление — последовательно, а предназначение — предельно ясно.
Рис. 20.2. Страница входа, оформленная с использованием Bootstrap

Оформление приложения Learning Log 445
Попробуйте выполнить вход с неверным именем пользователя или паролем; вы увидите, что даже сообщения об ошибках следуют тому же стилю оформления и хорошо интегрируются с сайтом в целом.
Оформление страницы new_topic
Приведем остальные страницы к тому же стилю оформления. Следующей будет преобразована страница new_topic
:
new_topic.html
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}

Add a new topic:

{% endblock header %}
{% block content %}


>
{% csrf_token %}

{% bootstrap_form form %}

{% buttons %}
add topic
{% endbuttons %}

{% endblock content %}
В основном эти изменения аналогичны тем, которые были применены в login .html
: мы загружаем bootstrap3
и добавляем блок header с соответствующим сообщени- ем . Затем в тег

добавляется
,
{{
form.as_p
}}
заменяется шаблонным тегом
{%
bootstrap_form
%}
, а для кнопки отправки данных исполь- зуется структура bootstrap3
. Выполните вход и перейдите к странице new_topic
; сейчас она должна быть похожа на страницу входа.
Оформление страницы со списком тем
А теперь позаботимся о том, чтобы страницы для просмотра информации также были выдержаны в том же стиле. Начнем со страницы со списком тем:
topics.html
{% extends "learning_logs/base.html" %}

{% block header %}

Topics

{% endblock header %}

446 Глава 20 • Оформление и развертывание приложения
{% block content %}

{% for topic in topics %}

• 
  
  
  {{ topic }}
  
  

{% empty %}

• No topics have been added yet.

{% endfor %}



Add new topic

{% endblock content %}
Тег
{%
load bootstrap3
%}
не нужен, потому что в этом файле не используются ни- какие шаблонные теги bootstrap3
. Заголовок
Topics добавляется в блок header
.
Каждая тема оформляется как элемент

, чтобы она выводилась чуть более крупным шрифтом на странице ; то же самое делается со ссылкой добавления новой темы .
Оформление записей на странице темы
Страница темы содержит больше контента, чем большинство страниц, поэтому над ней придется потрудиться. Чтобы записи визуально выделялись, мы вос- пользуемся панелями Bootstrap. Панель представляет собой элемент div с заранее определенным стилем и идеально подходит для отображения записей темы:
topic.html
{% extends 'learning_logs/base.html' %}

{% block header %}