Шаблоните по подразбиране на django-allauth изглеждат тъпи и може да не отговарят на вашите нужди. Ето как можете да ги отмените.

django-allauth е Django пакет, който ви позволява бързо и лесно да изградите система за удостоверяване за вашите Django приложения. Той има вградени шаблони, които ви позволяват да се съсредоточите върху други важни части от вашето приложение.

Въпреки че вградените шаблони са полезни, ще искате да ги промените, защото нямат най-добрия потребителски интерфейс.

Как да инсталирате и конфигурирате django-allauth

Следвайки няколко ясни стъпки, можете безпроблемно да инсталирате django-allauth във вашия Django проект.

  1. Можете да инсталирате django-allauth пакет с помощта на мениджъра на пакети 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/ с DEBUG=Вярно във вашия файл с настройки.

Как да замените шаблона за влизане в django-allauth

Първо, трябва да конфигурирате своя шаблони папка, ако не сте го направили. Отворете вашия файл с настройки и отидете до ШАБЛОНИ списък. Вътре в него намерете DIRS списък и го променете по следния начин:

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

Уверете се, че имате a шаблони папка в основната директория на вашия проект. Можете да замените шаблона за влизане по подразбиране в django-allauth, като следвате следващите стъпки.

Стъпка 1: Създайте вашите шаблонни файлове

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

Шаблоните за регистрация и влизане трябва да бъдат signup.html и login.html съответно. Можете да определите правилното име на шаблона, като отворите своя Python виртуална среда и навигация до Lib > site-packages > allauth > templates > account папка, за да намерите шаблоните. Трябва да преминете през кода, за да разберете как работят шаблоните. Например шаблонът за влизане съдържа този код:

Стъпка 2: Добавете HTML код към вашите шаблонни файлове

След като създадете вашите файлове, трябва да добавите персонализирания HTML код за вашия шаблон. Например, за да замените шаблона за влизане по-горе, може да искате да копирате всичко от {% else %} блок, който съдържа бутона за формуляр и изпращане, и го добавете към вашия персонализиран шаблон. Ето един пример:

{% 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 да наследи функции от база.html шаблон. Уверете се, че премахвате ненужните тагове като {% blocktrans %} етикет. Ако сте направили това, вашата страница за вход трябва да е подобна на тази:

Горният и долният колонтитул в горното изображение ще бъдат различни от вашите.

Стъпка 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. Трябва да обмислите използването на този пакет за управление на вашата система за удостоверяване, така че да можете да се съсредоточите върху изграждането на другите важни функции на вашето приложение.