De standaardsjablonen van de django-allauth zien er bot uit en passen mogelijk niet bij uw behoeften. Hier leest u hoe u ze kunt overschrijven.

django-allauth is een Django-pakket waarmee u snel en eenvoudig een authenticatiesysteem voor uw Django-apps kunt bouwen. Het heeft ingebouwde sjablonen zodat u zich kunt concentreren op andere belangrijke delen van uw app.

Hoewel de ingebouwde sjablonen nuttig zijn, zult u ze willen wijzigen omdat ze niet de beste gebruikersinterface hebben.

Hoe django-allauth te installeren en configureren

Door een paar eenvoudige stappen te volgen, kunt u django-allauth naadloos in uw Django-project installeren.

  1. Je kunt installeren django-allauth pakket met behulp van de Pip-pakketbeheerder:
    pip install django-allauth
  2. Voeg deze apps toe aan uw geïnstalleerde apps in het instellingenbestand van uw project:
    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. Voeg authenticatie-backends toe aan uw instellingenbestand:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Voeg een site-ID toe aan uw project:
    SITE_ID = 1
  5. Configureer de URL's voor django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Als u de bovenstaande configuraties correct uitvoert, zou u een sjabloon als deze moeten zien wanneer u naar navigeert http://127.0.0.1:8000/accounts/signup/:

U kunt de lijst met beschikbare URL's bekijken door naar te navigeren http://127.0.0.1:8000/accounts/ met DEBUG=Waar in uw instellingenbestand.

Hoe u de aanmeldingssjabloon in django-allauth kunt overschrijven

Eerst moet u uw Sjablonen map als u dat nog niet heeft gedaan. Open uw instellingenbestand en navigeer naar het SJABLONEN lijst. Zoek daarin de DIRS lijst en wijzig deze als volgt:

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

Zorg ervoor dat u een Sjablonen map in de hoofdmap van uw project. U kunt de standaard inlogsjabloon in django-allauth overschrijven door deze volgende stappen te volgen.

Stap 1: Maak uw sjabloonbestanden

In uw Sjablonen map, maak een nieuwe map genaamd rekening om de sjablonen met betrekking tot django-allauth te bewaren.

De registratie- en login-sjablonen zouden dat moeten zijn aanmelden.html En inloggen.html respectievelijk. U kunt de juiste sjabloonnaam bepalen door uw Virtuele Python-omgeving en navigeren naar Lib > sitepakketten > allauth > sjablonen > account map om de sjablonen te vinden. U moet de code doornemen om te begrijpen hoe de sjablonen werken. De inlogsjabloon bevat bijvoorbeeld deze code:

Stap 2: Voeg HTML-code toe aan uw sjabloonbestanden

Nadat u uw bestanden heeft gemaakt, moet u de aangepaste HTML-code voor uw sjabloon toevoegen. Als u bijvoorbeeld de bovenstaande aanmeldingssjabloon wilt overschrijven, wilt u misschien alles uit het {% anders %} blok, dat het formulier en de indieningsknop bevat, en voeg dit toe aan uw aangepaste sjabloon. Hier is een voorbeeld:

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

De bovenstaande code gebruikt Django's sjabloonovererving eigenschappen overerven van de basis.html sjabloon. Zorg ervoor dat u onnodige tags verwijdert, zoals de {% bloktrans %} label. Als u dit heeft gedaan, zou uw inlogpagina er ongeveer zo uit moeten zien:

De kop- en voettekst in de bovenstaande afbeelding zullen verschillen van die van u.

Stap 3: Voeg aangepaste stijlen toe aan uw formulier

In de vorige stap wordt het inlogformulier weergegeven als een paragraaf met behulp van de {{ formulier.as_p }} label. Om stijlen aan uw formulier toe te voegen, moet u de waarde van de naam attribuut dat aan elk invoerveld is gekoppeld.

U kunt uw pagina inspecteren om de waarden te verkrijgen die u nodig heeft.

De afbeelding hierboven toont het naamattribuut dat is gekoppeld aan de e-mail veld van het formulier.

Nu kunt u de formuliervelden afzonderlijk aan uw project toevoegen. U kunt het e-mailveld bijvoorbeeld als volgt toevoegen:

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

Jij kan gebruik Bootstrap met uw Django-project om uw formulier eenvoudig te stylen. Hier is een voorbeeld:

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

De bovenstaande code voegt Bootstrap-formulierklassen toe aan het formulier. Nu kunt u de andere benodigde velden toevoegen en deze naar eigen voorkeur opmaken. Als je Bootstrap niet graag gebruikt voor styling, django-crispy-forms is een alternatief voor het opmaken van uw formulieren. In het onderstaande voorbeeld wordt Bootstrap gebruikt voor styling.

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

Het bovenstaande codeblok produceert uitvoer die lijkt op de volgende afbeelding:

Je kunt meer leren over formulieren in django-allauth door de officiële documentatie.

Overschrijf elke sjabloon in django-allauth

django-allauth bevat veel standaardsjablonen die u kunt overschrijven. Met de stappen in deze handleiding kunt u elke sjabloon in django-allauth overschrijven. U kunt overwegen dit pakket te gebruiken om uw authenticatiesysteem af te handelen, zodat u zich kunt concentreren op het bouwen van de andere belangrijke functies van uw applicatie.