Сегодня мы немного оформим нашу главную страницу. HTML-файл, который за неё отвечает мы создали в прошлой главе, который отображается через функцию post_list файла views.py, который в свою очередь соединён с файлом urls.py
И так работаем с шаблоном: blog/templates/blog/post_list.html
Для начала немного о структуре HTML. Каждый документ стоит из:
1) <!doctype html> - указывает тип текущего элемента. Данное указание обозначает, что мы работает с 5 версией HTML.
2) head — элемент, содержащий информацию о документе, которая не отображается на экране.(Кроме заголовка title)
3) body — элемент, который содержит всё, что будет отражено на веб-странице.
<!doctype html>
<html>
<head>
<title>blog</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Немного поверстаем и оформим его. Чтобы не тратить время на творчество, воспользуюсь стандартными инструментами Bootstrap, которые предлагают все необходимое. https://getbootstrap.com/docs/4.5/components/alerts/
В тело тега head вставляем стандартный файл css от Bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
В тело тега body я выбрал некий header из компонентов:
<div class="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav offset-md-2">
<li class="nav-item active">
<a class="nav-link" href="">Main page</a>
</li>
</ul>
</div>
</nav>
</div>
Ну и завершением оформления главной страницы я добавлю блок, где будет размещён сам пост:
<div class="main_body mt-5">
<div class="row">
<div class="col-8 offset-md-2">
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"></p>
<a href="" class="btn btn-primary">Read</a>
</div>
</div>
</div>
</div>
</div>
Хорошо, HTML шаблон оформлен. Теперь нам надо наполнить его содержимым. Теми постами, которые мы создали тут.
Так, за отрисовку данного шаблона у нас отвечает функция post_list из файла blog/views.py, соответственно в ней нам и надо получить список наших постов из базы.
Для начали импортируем в файл blog/views.py модель Post.
from .models import Post
Далее в функции post_list делаем обращение к БД
posts = Post.objects.order_by('-created')
Прочитать эту строчку можно так: "Модель пост, у которой есть список объектов, отсортированных по дате создания".
Далее передаём наш список posts в render, для возможности использования его в шаблоне blog/post_list.html, и через словарь {}передаём переменную(которая будет использоваться в шаблоне)
return render(request, 'blog/post_list.html', {'posts': posts})
Переходим к шаблону:
Пока у нас в теге body свёрстана одна лишь карта, а нам надо чтобы из базы данных отображались все посты, которые мы создаём через админку.
Все посты у нас помещаются в список posts функции post_list. Соответственно мы можем их перебрать стандартным циклом for.
{% for post in posts %}
<div class="main_body mt-5">
<div class="row">
<div class="col-8 offset-md-2">
<div class="card">
<div class="card-header">
{{ post.published }}
</div>
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.text|truncatewords:15 }}</p>
<a href="" class="btn btn-primary">Read</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
Обратите внимание на синтаксис:
{% for post in posts %} - открываем цикл
{% endfor %} - закрываем цикл.
Внутри цикла мы размещаем наши посты. И так:
"Для каждого поста(post) из списка постов(posts)"
размещаем карточку. Обратите внимание что идёт после точки, сравните с моделью и с данными, как они заполняются в базу данных.
<div class="card-header">{{ post.published }}</div>
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.text|truncatewords:15 }}</p>
truncatewords:15 это форматирование текста, чтобы пост на странице не отображал больше 15 слов.
Проверяем, вот что получилось у меня:
Спасибо за внимание. Учимся Django вместе.