Django-allauths standardmallar ser trubbiga ut och kanske inte passar dina behov. Så här kan du åsidosätta dem.

django-allauth är ett Django-paket som låter dig bygga ett autentiseringssystem för dina Django-appar snabbt och enkelt. Den har inbyggda mallar som låter dig fokusera på andra viktiga delar av din app.

Även om de inbyggda mallarna är användbara, kommer du att vilja ändra dem eftersom de inte har det bästa användargränssnittet.

Hur man installerar och konfigurerar django-allauth

Genom att följa några enkla steg kan du sömlöst installera django-allauth i ditt Django-projekt.

  1. Du kan installera django-allauth paket genom att använda Pip-pakethanteraren:
    pip install django-allauth
  2. Lägg till dessa appar i dina installerade appar i ditt projekts inställningsfil:
    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. Lägg till autentiseringsbackends till din inställningsfil:
    instagram viewer 
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Lägg till ett webbplats-ID till ditt projekt:
    SITE_ID = 1
  5. Konfigurera webbadresserna för django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Om du gör ovanstående konfigurationer korrekt bör du se en mall som denna när du navigerar till http://127.0.0.1:8000/accounts/signup/:

Du kan se listan över tillgängliga webbadresser genom att navigera till http://127.0.0.1:8000/accounts/ med DEBUG=Sant i din inställningsfil.

Hur man åsidosätter inloggningsmallen i django-allauth

Först måste du konfigurera din mallar mapp om du inte har gjort det. Öppna din inställningsfil och navigera till MALLAR lista. Inuti den, lokalisera DIRS listan och ändra den så här:

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

Se till att du har en mallar mapp i rotkatalogen för ditt projekt. Du kan åsidosätta standardinloggningsmallen i django-allauth genom att följa dessa nästa steg.

Steg 1: Skapa dina mallfiler

I din mallar mapp, skapa en ny mapp som heter konto för att hålla mallarna relaterade till django-allauth.

Registrerings- och inloggningsmallarna ska vara signup.html och login.html respektive. Du kan bestämma rätt mallnamn genom att öppna din Python virtuell miljö och navigerar till Lib > webbplats-paket > allauth > mallar > konto mapp för att hitta mallarna. Du bör gå igenom koden för att förstå hur mallarna fungerar. Till exempel har inloggningsmallen den här koden:

Steg 2: Lägg till HTML-kod till dina mallfiler

När du har skapat dina filer bör du lägga till den anpassade HTML-koden för din mall. Till exempel, för att åsidosätta inloggningsmallen ovan, kanske du vill kopiera allt från {% annat %} block, som innehåller formuläret och inlämningsknappen, och lägg till det i din anpassade mall. Här är ett exempel:

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

Koden ovan använder Djangos mallarv att ärva egenskaper från base.html mall. Se till att du tar bort onödiga taggar som t.ex {% blocktrans %} märka. Om du har gjort detta bör din inloggningssida likna denna:

Sidhuvudet och sidfoten i bilden ovan kommer att skilja sig från dina.

Steg 3: Lägg till anpassade stilar till ditt formulär

I det föregående steget renderas inloggningsformuläret som ett stycke med hjälp av {{ form.as_p }} märka. För att lägga till stilar till ditt formulär måste du känna till värdet av namn attribut kopplat till varje inmatningsfält.

Du kan inspektera din sida för att få de värden du behöver.

Bilden ovan visar namnattributet som är kopplat till e-post formulärets fält.

Nu kan du lägga till formulärfälten individuellt i ditt projekt. Du kan till exempel lägga till e-postfältet så här:

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

Du kan använd Bootstrap med ditt Django-projekt för att enkelt styla din form. Här är ett exempel:

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

Ovanstående kod lägger till Bootstrap-formulärklasser till formuläret. Nu kan du lägga till de andra fälten du behöver och utforma dem efter dina önskemål. Om du inte gillar att använda Bootstrap för styling, django-crispy-forms är ett alternativ till att styla dina formulär. Exemplet nedan använder Bootstrap för 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>

Kodblocket ovan kommer att producera utdata som liknar följande bild:

Du kan lära dig mer om formulär i django-allauth genom att läsa officiell dokumentation.

Åsidosätt valfri mall i django-allauth

django-allauth innehåller många standardmallar som du kan åsidosätta. Med stegen i den här guiden kan du åsidosätta vilken mall som helst i django-allauth. Du bör överväga att använda det här paketet för att hantera ditt autentiseringssystem, så att du kan fokusera på att bygga de andra viktiga funktionerna i din applikation.