Создание сайта на Django: Урок 28, правки шаблона, функция выхода с сайта

Создание сайта на Django: Урок 28, правки шаблона, функция выхода с сайта

avatar
7 | (offline)
❤️‍🔥Notehunter Developer
Добавлено:
Категория: Руководства «Django»
Комментариев: 0

Дополняем шаблон нашего Django блога

В папке templates я создал файл navbar.html с следующим содержимым:

templates/navbar.html

{% load static %}
<header class="p-3 mb-3 border-bottom">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
          <img class="bi me-2" src="{% static 'images/django.png' %}" width="40" height="40" role="img" aria-label="Project" alt="Django Blog"/>
        </a>
        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="{% url 'home' %}" class="nav-link px-2 link-secondary">Главная</a></li>
          <li><a href="{% url 'article-list' %}" class="nav-link px-2 link-dark">Статьи</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
        </form>

        {% if request.user.is_authenticated %}
        <div class="dropdown text-end">
          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="{{ request.user.profile.get_avatar }}" alt="{{ request.user }}" width="32" height="32" class="rounded-circle">
          </a>
          <ul class="dropdown-menu text-small" style="">
            <li><a class="dropdown-item" href="{% url 'article-create-view' %}">Добавить статью</a></li>
            <li><a class="dropdown-item" href="{% url 'profile' request.user.profile.slug %}">Мой профиль</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{% url 'logout' %}">Выход</a></li>
          </ul>
        </div>
        {% else %}
            <ul class="nav ">
              <li><a href="{% url 'register' %}" class="nav-link px-2 link-secondary">Регистрация</a></li>
              <li><a href="{% url 'login' %}" class="nav-link px-2 link-dark">Вход</a></li>
            </ul>
        {% endif %}
      </div>
    </div>
  </header>

Пояснения:

  • Это обычное оформление шапки из Bootstrap, взятое с сайта фреймворка.
  • Я добавил наши ссылки, которые мы добавили в уроках ранее, а именно:
    • Главная страница (blog - home)
    • Список статей (blog - article-list)
    • Добавление статьи (blog - article-create-view)
    • Мой профиль (system - profile)
    • Выход (system - logout)  - а эту ссылку и возможность мы добавим по этому уроку ниже
    • Регистрация (system - register)
    • Вход (system - login)
  • Я добавил условия, если текущий пользователь авторизован, то мы ему выводим добавление статьи, возможность перейти в профиль и выход с аккаунта, а если он как гость - то регистрацию и вход. 
  • За авторизацию мы используем конструкцию условия request.user.is_authenticated.
  • Также я добавил аватарку нашего профиля в это меню.

Верхнее меню получилось такое. 

Если смотреть с неавторизованного аккаунта:

Теперь созданный navbar.html нам нужно подключить в main.html:

templates/main.html

<!DOCTYPE html>
<html lang="ru">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- INCLUDE CSS -->
    <link href="{% static 'plugins/bootstrap-5.2.0-dist/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
    {% include 'navbar.html' %}
    <div class="row">
        <div class="col-md-8">
            {% include 'includes/messages.html' %}
            {% block content %}

            {% endblock %}
            {% include 'pagination.html' %}
        </div>
        <div class="col-md-4">
            some...
        </div>
    </div>
</div>
<script src="{% static 'plugins/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

Также я подправил шаблон списка статей:

templates/modules/blog/articles/article-list.html

{% extends 'main.html' %}

{% block content %}
    {% for article in articles %}
        <div class="card mb-3">
            <div class="row">
                <div class="col-md-4">
                    <figure class="mb-0">
                        <img src="{{ article.get_thumbnail }}" class="img-fluid h-100" alt="{{ article.title }}">
                    </figure>
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h4 class="card-title"><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h4>
                        <a class="card-subtitle" href="{% url 'article-by-cat' article.category.pk article.category.slug %}">#{{ article.category }}</a> / <time>{{ article.created_at }}</time>
                        <p class="card-text">
                            {{ article.short_description|safe }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

И изменил paginate_by в ArticleListView с 1 до 10.

А теперь добавим представление для выхода с сайта:

modules/system/views/authenticated.py


from django.contrib.auth.views import LogoutView
    
class UserLogoutView(LogoutView):
    """
    Выход с сайта
    """
    next_page = 'home'

Пояснения:

  • Наследуемся от встроенного представления LogoutView в Django
  • После выхода перенаправляем пользователя на главную, с помощью свойства next_page = 'home'
Теги записи: DjangoDev, Уроки Django, Создание сайта,
Комментарии к статье 0
Комментариев нет
Форма добавления комментария (необходима регистрация)