Шаблоны django-allauth по умолчанию выглядят тупыми и могут не соответствовать вашим потребностям. Вот как вы можете их переопределить.

django-allauth — это пакет Django, который позволяет быстро и легко создать систему аутентификации для ваших приложений Django. Он имеет встроенные шаблоны, которые позволят вам сосредоточиться на других важных частях вашего приложения.

Хотя встроенные шаблоны полезны, вам захочется их изменить, поскольку у них не лучший пользовательский интерфейс.

Как установить и настроить Джанго-Аллаут

Выполнив несколько простых шагов, вы сможете легко установить django-allauth в свой проект Django.

  1. Вы можете установить Джанго-Аллаут пакет с помощью менеджера пакетов Pip:
    pip install django-allauth
  2. В файле настроек вашего проекта добавьте эти приложения в список установленных приложений:
    INSTALLED_APPS = [

     Add your other apps here
    # Djang-allauth configuration apps
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount', # add this if you want to enable social authentication
    ]
    3. instagram viewer
  3. Добавьте серверы аутентификации в файл настроек:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Добавьте идентификатор сайта в свой проект:
    SITE_ID = 1
  5. Настройте URL-адреса для django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Если вы правильно выполнили вышеуказанные настройки, вы должны увидеть такой шаблон при переходе к http://127.0.0.1:8000/accounts/signup/:

Вы можете просмотреть список доступных URL-адресов, перейдя к http://127.0.0.1:8000/accounts/ с ОТЛАДКА=Истина в вашем файле настроек.

Как переопределить шаблон входа в django-allauth

Во-первых, вам необходимо настроить шаблоны папку, если вы этого не сделали. Откройте файл настроек и перейдите к ШАБЛОНЫ список. Внутри него найдите ДИРС list и измените его следующим образом:

'DIRS': [BASE_DIR/'templates'],

Убедитесь, что у вас есть шаблоны папка в корневом каталоге вашего проекта. Вы можете переопределить шаблон входа по умолчанию в django-allauth, выполнив следующие шаги.

Шаг 1. Создайте файлы шаблонов

В вашей шаблоны папку, создайте новую папку с именем счет для хранения шаблонов, связанных с django-allauth.

Шаблоны регистрации и входа должны быть Signup.html и логин.html соответственно. Вы можете определить правильное имя шаблона, открыв Виртуальная среда Python и переход к Lib > пакеты сайта > allauth > шаблоны > учетная запись папку, чтобы найти шаблоны. Вам следует просмотреть код, чтобы понять, как работают шаблоны. Например, в шаблоне входа есть такой код:

Шаг 2. Добавьте HTML-код в файлы шаблонов

После создания файлов вам следует добавить собственный HTML-код для вашего шаблона. Например, чтобы переопределить приведенный выше шаблон входа, вы можете скопировать все из {% еще %} блок, содержащий форму и кнопку отправки, и добавьте его в свой собственный шаблон. Вот пример:

{% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
<ahref="{{ signup_url }}">sign upa> first.p>

<formclass="login"method="POST"action="{% url 'account_login' %}">
 {% csrf_token %}
 {{ form.as_p }}
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<aclass="button secondaryAction"href="{% url 'account_reset_password' %}">Forgot password?a>
<buttonclass="primaryAction"type="submit">SIgn inbutton>
form>
 {% endblock content %}

В приведенном выше коде используется Наследование шаблонов Django наследовать функции от base.html шаблон. Обязательно удалите ненужные теги, такие как {% блоктранс%} ярлык. Если вы это сделали, ваша страница входа должна выглядеть примерно так:

Верхний и нижний колонтитулы на изображении выше будут отличаться от ваших.

Шаг 3. Добавьте пользовательские стили в форму

На предыдущем шаге форма входа отображается в виде абзаца с использованием метода {{ form.as_p }} ярлык. Чтобы добавить стили в форму, вам необходимо знать значение имя атрибут, связанный с каждым полем ввода.

Вы можете проверить свою страницу, чтобы получить нужные значения.

На изображении выше показан атрибут имени, связанный с электронная почта поле формы.

Теперь вы можете добавлять поля формы в свой проект по отдельности. Например, вы можете добавить поле электронной почты следующим образом:

{{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
{{ form.login.errors|safe }}

Ты можешь используйте Bootstrap с вашим проектом Django чтобы легко стилизовать форму. Вот пример:

<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>

Приведенный выше код добавляет в форму классы формы Bootstrap. Теперь вы можете добавить другие необходимые поля и оформить их по своему вкусу. Если вам не нравится использовать Bootstrap для стилизации, django-crispy-forms — альтернатива стилизации ваших форм.. В приведенном ниже примере для стилизации используется Bootstrap.

<divclass="container d-flex justify-content-center align-items-center vh-100">
<formmethod="post"class="login"id="signup_form"action="{% url 'account_login' %}">
<divclass="text-center mb-4">
<h1class="h3 mb-3 font-weight-normal">Sign inh1>
div>
 {{ form.non_field_errors | safe }}
 {% csrf_token %}
<divclass="row g-3">
<divclass="col-12">
<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>
div>
<divclass="col-12">
<divclass="form-floating form-group my-3">
 {{ form.password }}
<labelfor="{{form.password.id_for_label}}">Passwordlabel>
 {{ form.password.errors|safe }}
div>
div>
<divclass="col-12">
<divclass="form-check">
<labelfor="{{form.remember.id_for_label}}"class="form-check-label">Remember melabel>
 {{ form.remember }}
div>
div>
<divclass="col-6">
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<buttonclass="btn btn-primary w-100 py-3 bg-accent"type="submit">Sign inbutton>
<aclass="button secondaryAction text-accent"href="{% url 'account_reset_password' %}">Forgot
 Password?a>
div>
div>
form>
div>

Блок кода выше выдаст результат, аналогичный следующему изображению:

Вы можете узнать больше о формах в django-allauth, прочитав официальная документация.

Переопределить любой шаблон в django-allauth

django-allauth содержит множество шаблонов по умолчанию, которые вы можете переопределить. С помощью шагов, описанных в этом руководстве, вы можете переопределить любой шаблон в django-allauth. Вам следует рассмотреть возможность использования этого пакета для управления вашей системой аутентификации, чтобы вы могли сосредоточиться на создании других важных функций вашего приложения.