Работа с DetailView, форматирование и обработка кириллицы в Slug

Как установить Bootstrap в Django

Существует два способа использования Bootstrap 5 в проекте Django. Вы можете установить его в своем приложении или ссылаться на файлы, используя CDN Bootstrap . Первый метод мы рассмотрели при создании блога на основе функций, а в этом проекте будет использоваться второй метод.

Для этого перейдем по адресу https://getbootstrap.com/docs/5.3/getting-started/download/ и скопируем код в разделе CDN. Вставим данный код в базовый шаблон main.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
</head>
<body>
{% block content %}

{% endblock %}
</body>
</html>

Также в папке templates создадим три файла: header.html, sidebar.html, footer.html.

А в шаблон main.html добавляем следующую разметку и подключим эти шаблоны:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
</head>
<body class="d-flex flex-column min-vh-100">
{% include 'header.html' %}
<div class="container">
    <div class="row">
        <div class="col-lg-8 p-4">
            {% block content %}
            {% endblock %}
        </div>
        <div class="col-4 p-4">
            {% include 'sidebar.html' %}
        </div>
    </div>
</div>
{% include 'footer.html' %}
</body>
</html>

В файл header.html добавим следующий код:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">My Django Blog 2.0</a>
        </div>
</nav>

В файл footer.html добавим следующий код:

<footer class="py-5 bg-dark mt-2 mt-auto">
    <div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2023, Powered by
        Django</p></div>
</footer>

А в файле sidebar.html сделаем вывод дерева наших категорий:

{% load mptt_tags %}

<div class="card mb-4">
    <div class="card-header">Categories</div>
    <div class="card-body ">
        {% full_tree_for_model blog.Category as categories %}
        <ul>
            {% recursetree categories %}
                <li>
                    <a href="{{ node.get_absolute_url }}">{{ node.title }}</a>
                </li>

                {% if not node.is_leaf_node %}
                    <ul>{% endif %}
            {{ children }}
            {% if not node.is_leaf_node %}</ul>{% endif %}
            {% endrecursetree %}
        </ul>
    </div>
</div>

Также изменим вывод списка постов, для этого в шаблоне blog/post_list.html изменим код:

{% extends 'main.html' %}

{% block content %}
    {% for post in posts %}
        <div class="card mb-3">
            <div class="row">
                <div class="col-4">
                    <img src="{{ post.thumbnail.url }}" class="card-img-top" alt="{{ post.title }}">
                </div>
                <div class="col-8">
                    <div class="card-body">
                        <h5 class="card-title">
                            <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
                        </h5>
                        <p class="card-text">{{ post.description }}</p>
                        <small>Добавил {{ post.author.username }}, {{ post.create }}</small>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

Давайте проверим наш дизайн сайта, запустим сервер и перейдем на главную страницу сайта:

Мы видим что наш дизайн изменился, Bootstrap через CDN работает. В следующем шаге мы добавим отображение наших записей по категориям.