Django-allauths standardmaler ser sløve ut og passer kanskje ikke til dine behov. Slik kan du overstyre dem.

django-allauth er en Django-pakke som lar deg bygge et autentiseringssystem for Django-appene dine raskt og enkelt. Den har innebygde maler som lar deg fokusere på andre viktige deler av appen din.

Selv om de innebygde malene er nyttige, vil du endre dem fordi de ikke har det beste brukergrensesnittet.

Hvordan installere og konfigurere django-allauth

Ved å følge noen få enkle trinn kan du sømløst installere django-allauth i Django-prosjektet ditt.

  1. Du kan installere django-allauth pakke ved å bruke Pip-pakkebehandlingen:
    pip install django-allauth
  2. I prosjektets innstillingsfil legger du til disse appene i de installerte appene dine:
    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. Legg til autentiseringsbackends i innstillingsfilen din:
    instagram viewer 
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Legg til en nettsteds-ID til prosjektet ditt:
    SITE_ID = 1
  5. Konfigurer nettadressene for django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Hvis du gjør konfigurasjonene ovenfor riktig, bør du se en mal som denne når du navigerer til http://127.0.0.1:8000/accounts/signup/:

Du kan se listen over tilgjengelige URL-er ved å navigere til http://127.0.0.1:8000/accounts/ med DEBUG=Sant i innstillingsfilen din.

Hvordan overstyre påloggingsmalen i django-allauth

Først må du konfigurere din maler mappe hvis du ikke har gjort det. Åpne innstillingsfilen og naviger til MALER liste. Finn inni den DIRS listen, og endre den slik:

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

Sørg for at du har en maler mappen i rotkatalogen til prosjektet ditt. Du kan overstyre standard påloggingsmalen i django-allauth ved å følge disse neste trinnene.

Trinn 1: Lag malfilene dine

I din maler mappe, opprette en ny mappe kalt regnskap å holde malene relatert til django-allauth.

Registrerings- og påloggingsmalene skal være signup.html og login.html hhv. Du kan finne riktig malnavn ved å åpne din Python virtuelt miljø og navigerer til Lib > nettstedspakker > allauth > maler > konto mappe for å finne malene. Du bør gå gjennom koden for å forstå hvordan malene fungerer. For eksempel har påloggingsmalen denne koden:

Trinn 2: Legg til HTML-kode i malfilene dine

Etter å ha opprettet filene dine, bør du legge til den egendefinerte HTML-koden for malen. For å overstyre påloggingsmalen ovenfor, vil du kanskje kopiere alt fra {% annet %} blokk, som inneholder skjemaet og innsendingsknappen, og legg den til i din egendefinerte mal. Her er et eksempel:

{% 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 ovenfor bruker Djangos malarv å arve funksjoner fra base.html mal. Sørg for at du fjerner unødvendige tagger som f.eks {% blocktrans %} stikkord. Hvis du har gjort dette, bør påloggingssiden din ligne på denne:

Topp- og bunnteksten i bildet ovenfor vil være forskjellig fra din.

Trinn 3: Legg til egendefinerte stiler i skjemaet ditt

I forrige trinn blir påloggingsskjemaet gjengitt som et avsnitt ved å bruke {{ form.as_p }} stikkord. For å legge til stiler i skjemaet ditt, må du vite verdien av Navn attributt knyttet til hvert inndatafelt.

Du kan inspisere siden din for å få de verdiene du trenger.

Bildet ovenfor viser navneattributtet knyttet til e-post feltet i skjemaet.

Nå kan du legge til skjemafeltene individuelt i prosjektet ditt. Du kan for eksempel legge til e-postfeltet slik:

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

Du kan bruk Bootstrap med Django-prosjektet ditt for enkelt å style formen din. Her er et eksempel:

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

Koden ovenfor legger til Bootstrap-skjemaklasser til skjemaet. Nå kan du legge til de andre feltene du trenger og style dem etter dine preferanser. Hvis du ikke liker å bruke Bootstrap til styling, django-crispy-forms er et alternativ til styling av skjemaene dine. Eksemplet nedenfor bruker Bootstrap for 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>

Kodeblokken ovenfor vil produsere utdata som ligner på følgende bilde:

Du kan lære mer om skjemaer i django-allauth ved å lese offisiell dokumentasjon.

Overstyr enhver mal i django-allauth

django-allauth inneholder mange standardmaler som du kan overstyre. Med trinnene i denne veiledningen kan du overstyre enhver mal i django-allauth. Du bør vurdere å bruke denne pakken til å håndtere autentiseringssystemet ditt, slik at du kan fokusere på å bygge de andre viktige funksjonene i applikasjonen din.