Django База [2023]: Правки шаблона, добавление функционала в шапку #25
В этой статье по Django 4.1 мы поработает над шаблонной частью, а именно над аутентификацией, настроим работу некоторых ссылок, чтобы все было в нашей доступности.
Если вы хотите выразить благодарность автору сайта, статей и курса по Django, вы можете сделать это по ссылке ниже:
Перед этим уроком вам необходимо изучить все предыдущие уроки, потому что мы просто выведем ссылки на некоторый функционал сайта, и немного улучшим наш шаблон.
Меняем с этого:
<header>
<div class="px-3 py-2 text-bg-dark">
<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 my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="px-3 py-2 border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-light text-dark me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</div>
</div>
</header>
На следующий:
<header class="mt-3">
<div class="px-3 py-2 text-bg-dark" style="border-radius: 10px 10px 0 0;">
<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 my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<img width="64" src="https://cdn-icons-png.flaticon.com/512/8277/8277654.png"/>
</a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="{% url "home" %}" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"></use></svg>
Главная
</a>
</li>
<li>
<a href="{% url "articles_create" %}" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"></use></svg>
Добавить статью
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="px-3 py-2 bg-light mb-3" style="border-radius: 0 0 10px 10px;">
<div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>
{% if request.user.is_authenticated %}
<a href="{% url "profile_detail" request.user.profile.slug %}" type="button" class="btn btn-secondary me-2"> {{ request.user.username }}</a>
<a href="{% url "logout" %}" type="button" class="btn btn-primary">Деавторизация</a>
{% else %}
<div class="text-end">
<a href="{% url "login" %}" type="button" class="btn btn-light text-dark me-2">Авторизация</a>
<a href="{% url "register" %}" type="button" class="btn btn-primary">Регистрация</a>
</div>
{% endif %}
</div>
</div>
</header>
В примере выше мы немного исправили наш шаблон, вывели необходимые ссылки в шапке сайта.
Вот так получилось:
Авторизованный пользователь.
Неавторизованный пользователь.
Примечание: вы сами можете сделать себе шаблон такой, какой захотите, а также подлкючить любой вам понравившийся css-фреймворк, благо инструкции к установке на Django в большинстве есть. Ну и на сайте конечно в будущем я буду выкладывать, как и что подключить.
Также немного изменил наш articles_list.html из папки blog.
{% extends 'main.html' %}
{% block content %}
{% for article in articles %}
<div class="card mb-3">
<div class="row">
<div class="col-4">
<img src="{{ article.thumbnail.url }}" class="card-img-top" alt="{{ article.title }}">
</div>
<div class="col-8">
<div class="card-body">
<h5 class="card-title"><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h5>
<p class="card-text">{{ article.short_description }}</p>
</hr>
Категория: <a href="{% url 'articles_by_category' article.category.slug %}">{{ article.category.title }}</a>
/ Добавил: {{ article.author.username }}
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
Получилось вот так:
В следующем уроке мы вернемся к добавлению функционала в Django.