Domyślne szablony Django-allauth wyglądają na tępe i mogą nie odpowiadać Twoim potrzebom. Oto, jak możesz je zastąpić.

django-allauth to pakiet Django, który pozwala szybko i łatwo zbudować system uwierzytelniania dla aplikacji Django. Posiada wbudowane szablony, które pozwalają skupić się na innych ważnych częściach aplikacji.

Chociaż wbudowane szablony są pomocne, będziesz chciał je zmienić, ponieważ nie mają najlepszego interfejsu użytkownika.

Jak zainstalować i skonfigurować django-allauth

Wykonując kilka prostych kroków, możesz bezproblemowo zainstalować Django-allauth w swoim projekcie Django.

  1. Możesz zainstalować django-allauth pakiet za pomocą menedżera pakietów Pip:
    pip install django-allauth
  2. W pliku ustawień projektu dodaj te aplikacje do zainstalowanych aplikacji:
    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. Dodaj mechanizmy uwierzytelniania do pliku ustawień:
    instagram viewer 
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Dodaj identyfikator witryny do swojego projektu:
    SITE_ID = 1
  5. Skonfiguruj adresy URL dla Django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Jeśli poprawnie wykonasz powyższe konfiguracje, powinieneś zobaczyć taki szablon po przejściu do http://127.0.0.1:8000/accounts/signup/:

Listę dostępnych adresów URL można wyświetlić, przechodząc do http://127.0.0.1:8000/accounts/ z DEBUGOWANIE=Prawda w pliku ustawień.

Jak zastąpić szablon logowania w django-allauth

Najpierw musisz skonfigurować swój szablony folderze, jeśli jeszcze tego nie zrobiłeś. Otwórz plik ustawień i przejdź do SZABLONY lista. Wewnątrz niego zlokalizuj DYREKTY list i zmodyfikuj ją w następujący sposób:

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

Upewnij się, że masz szablony folder w katalogu głównym projektu. Możesz zastąpić domyślny szablon logowania w Django-allauth, wykonując poniższe kroki.

Krok 1: Utwórz pliki szablonów

W Twoim szablony folderze, utwórz nowy folder o nazwie konto do przechowywania szablonów związanych z Django-allauth.

Powinny być szablony rejestracji i logowania rejestracja.html I login.html odpowiednio. Możesz określić poprawną nazwę szablonu, otwierając plik Środowisko wirtualne Pythona i nawigacja do Lib > pakiety witryn > allauth > szablony > konto folder, aby znaleźć szablony. Powinieneś przejrzeć kod, aby zrozumieć, jak działają szablony. Na przykład szablon logowania zawiera następujący kod:

Krok 2: Dodaj kod HTML do plików szablonów

Po utworzeniu plików powinieneś dodać niestandardowy kod HTML swojego szablonu. Na przykład, aby zastąpić powyższy szablon logowania, możesz skopiować wszystko z pliku {% w przeciwnym razie %} blok zawierający formularz i przycisk przesyłania, a następnie dodaj go do własnego szablonu. Oto przykład:

{% 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 %}

Powyższy kod wykorzystuje Dziedziczenie szablonów Django dziedziczyć funkcje z baza.html szablon. Pamiętaj, aby usunąć niepotrzebne tagi, takie jak {% blok trans%} etykietka. Jeśli to zrobiłeś, Twoja strona logowania powinna wyglądać podobnie do tej:

Nagłówek i stopka na powyższym obrazku będą się różnić od Twoich.

Krok 3: Dodaj niestandardowe style do swojego formularza

W poprzednim kroku formularz logowania jest renderowany jako akapit za pomocą {{formularz.as_p }} etykietka. Aby dodać style do formularza, musisz znać wartość atrybutu nazwa atrybut powiązany z każdym polem wejściowym.

Możesz sprawdzić swoją stronę, aby uzyskać potrzebne wartości.

Powyższy obrazek przedstawia atrybut name powiązany z e-mail pole formularza.

Teraz możesz dodawać pola formularza pojedynczo w swoim projekcie. Możesz na przykład dodać pole e-mail w następujący sposób:

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

Możesz użyj Bootstrap w swoim projekcie Django aby łatwo stylizować swój formularz. Oto przykład:

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

Powyższy kod dodaje do formularza klasy formularzy Bootstrap. Teraz możesz dodać inne potrzebne pola i nadać im styl według własnych preferencji. Jeśli nie lubisz używać Bootstrap do stylizacji, django-crispy-forms jest alternatywą do stylizacji formularzy. Poniższy przykład wykorzystuje Bootstrap do stylizacji.

<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>

Powyższy blok kodu wygeneruje dane wyjściowe podobne do poniższego obrazu:

Możesz dowiedzieć się więcej o formularzach w Django-allauth czytając oficjalna dokumentacja.

Zastąp dowolny szablon w Django-allauth

Django-allauth zawiera wiele domyślnych szablonów, które możesz zastąpić. Wykonując kroki opisane w tym przewodniku, możesz zastąpić dowolny szablon w Django-allauth. Powinieneś rozważyć użycie tego pakietu do obsługi systemu uwierzytelniania, abyś mógł skupić się na budowaniu innych ważnych funkcji swojej aplikacji.