В этом шаге мы начнем с переделки нашего шаблона вывода списка постов. Для этого откроем наш шаблон list.html и изменим в нем код:

{% extends "blog/base.html" %}
{% load blog_tags %}

{% block title %}My Blog{% endblock %}

{% block content %}
    <h1>My Blog</h1>
    {% if tag %}
        <h2>Posts tagged with "{{ tag.name }}"</h2> {% endif %}
    {% for post in posts %}
        <h2 class="fw-bolder">
            <a href="{{ post.get_absolute_url }}">
                {{ post.title }}
            </a>
        </h2>
            {% if post.tags.all %}
            Tags:
            {% for tag in post.tags.all %}
                <a class="badge bg-secondary text-decoration-none link-light" href="{% url "blog:post_list_by_tag" tag.slug %}">
                    {{ tag.name }}
                </a>
                {% if not forloop.last %}, {% endif %}
            {% endfor %}
        {% endif %}
        <div class="text-muted fst-italic mb-2">
            Published {{ post.publish }} by {{ post.author }}
        </div>
        <div  class="mb-5">{{ post.body|markdown|truncatewords_html:30 }}</div>
    {% endfor %}
    {% include "pagination.html" with page=posts %}
{% endblock %}

В этом шаблоне мы не стали перерабатывать структуру отображения наших постов, лишь только добавили Bootstrap 5 стили.

Давайте посмотрим что у нас получилось:

Далее давайте изменим нашу пагинацию, для этого откроем pagination.html и изменим на следующий код:

<div class="pagination p-3">
        {% if page.has_previous %}
            <a class="page-link" href="?page={{ page.previous_page_number }}">Previous</a>
        {% endif %}
        <a class="page-link disabled">
            Page {{ page.number }} of {{ page.paginator.num_pages }}.</a>

        {% if page.has_next %}
            <a class="page-link" href="?page={{ page.next_page_number }}">Next</a>
        {% endif %}
</div>

Проверим нашу пагинацию:

Как мы видим, все выглядит прекрасно, идем дальше. Следующим шагом отредактируем наш detail.html:

{% extends "blog/base.html" %}
{% load blog_tags %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
    <h1 class="fw-bolder">{{ post.title }}</h1>
    <p class="text-muted fst-italic mb-2 text-end">
        Published {{ post.publish }} by {{ post.author }}
    </p>
    {{ post.body|markdown }}
    <div class="d-flex justify-content-end">
        <a class="btn btn-primary float-left" href="{% url "blog:post_share" post.id %}">
            Share this post
        </a>
    </div>
    {% if similar_posts %}
        <div class="row card mt-2">
            <h2>Similar posts</h2>
            {% for post in similar_posts %}
                <p>
                    <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
                </p>
            {% endfor %}
        </div>
    {% endif %}
    <div class="row card mt-2">
        {% with comments.count as total_comments %}
            <h2>
                {{ total_comments }} comment{{ total_comments|pluralize }}
            </h2>
            <hr class="mt-1 mb-1"/>
        {% endwith %}
        {% for comment in comments %}

            <div class="comment">
                <p class="text-muted fst-italic mb-2">
                    Comment {{ forloop.counter }} by {{ comment.name }}
                    {{ comment.created }}
                </p>
                {{ comment.body|safe }}

            </div>
            <hr class="mt-1 mb-1"/>
        {% empty %}
            <p>There are no comments.</p>
        {% endfor %}

        {% include "blog/post/includes/comment_form.html" %}
    </div>
{% endblock %}

В данном коде мы добавили стили к нашим элементам страницы.

Также мы переработали систему отображения Similar posts, добавив проверку {% if similar_posts %}, чтобы не отображать данное поле, когда данный блок не содержит в себе постов.

Давайте проверим что у нас получилось:

Все выглядит довольно неплохо, а в следующем шаге мы переработаем отображение формы комментариев.