Django-allauths standardskabeloner ser stumpe ud og passer muligvis ikke til dine behov. Sådan kan du tilsidesætte dem.

django-allauth er en Django-pakke, der lader dig bygge et autentificeringssystem til dine Django-apps hurtigt og nemt. Den har indbyggede skabeloner, så du kan fokusere på andre vigtige dele af din app.

Selvom de indbyggede skabeloner er nyttige, vil du gerne ændre dem, fordi de ikke har den bedste brugergrænseflade.

Sådan installeres og konfigureres django-allauth

Ved at følge et par enkle trin kan du problemfrit installere django-allauth i dit Django-projekt.

  1. Du kan installere django-allauth pakke ved at bruge Pip-pakkehåndteringen:
    pip install django-allauth
  2. Tilføj disse apps til dine installerede apps i dit projekts indstillingsfil:
    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. Tilføj godkendelses-backends til din indstillingsfil:
    instagram viewer 
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Tilføj et websteds-id til dit projekt:
    SITE_ID = 1
  5. Konfigurer URL'erne for django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Hvis du gør ovenstående konfigurationer korrekt, bør du se en skabelon som denne, når du navigerer til http://127.0.0.1:8000/accounts/signup/:

Du kan se listen over tilgængelige URL'er ved at navigere til http://127.0.0.1:8000/accounts/ med DEBUG=Sandt i din indstillingsfil.

Sådan tilsidesætter du login-skabelonen i django-allauth

Først skal du konfigurere din skabeloner mappe, hvis du ikke har gjort det. Åbn din indstillingsfil og naviger til Skabeloner liste. Find inde i den DIRS liste, og modificer den sådan:

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

Sørg for at du har en skabeloner mappe i dit projekts rodmappe. Du kan tilsidesætte standard login-skabelonen i django-allauth ved at følge disse næste trin.

Trin 1: Opret dine skabelonfiler

I din skabeloner mappe, skal du oprette en ny mappe kaldet konto at holde skabelonerne relateret til django-allauth.

Registrerings- og login-skabelonerne skal være signup.html og login.html henholdsvis. Du kan bestemme det korrekte skabelonnavn ved at åbne din Python virtuelt miljø og navigerer til Lib > site-pakker > allauth > skabeloner > konto mappe for at finde skabelonerne. Du bør gennemgå koden for at forstå, hvordan skabelonerne fungerer. For eksempel har login-skabelonen denne kode i sig:

Trin 2: Tilføj HTML-kode til dine skabelonfiler

Når du har oprettet dine filer, skal du tilføje den tilpassede HTML-kode til din skabelon. For at tilsidesætte login-skabelonen ovenfor vil du måske kopiere alt fra {% andet %} blok, som indeholder formularen og indsendelsesknappen, og føj den til din tilpassede skabelon. 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 %}

Ovenstående kode bruger Djangos skabelonarv at arve træk fra base.html skabelon. Sørg for at fjerne unødvendige tags som f.eks {% blocktrans %} tag. Hvis du har gjort dette, skal din login-side ligne denne:

Sidehovedet og sidefoden i ovenstående billede vil være anderledes end din.

Trin 3: Føj brugerdefinerede stilarter til din formular

I det foregående trin gengives loginformularen som et afsnit ved hjælp af {{ form.as_p }} tag. For at tilføje stilarter til din formular skal du kende værdien af navn attribut knyttet til hvert inputfelt.

Du kan inspicere din side for at få de værdier, du har brug for.

Billedet ovenfor viser navneattributten forbundet med e-mail skemaets felt.

Nu kan du tilføje formularfelterne individuelt i dit projekt. For eksempel kan du tilføje e-mail-feltet sådan her:

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

Du kan brug Bootstrap med dit Django-projekt for nemt at style din form. Her er et eksempel:

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

Ovenstående kode tilføjer Bootstrap-formularklasser til formularen. Nu kan du tilføje de andre felter, du har brug for, og style dem efter dine præferencer. Hvis du ikke kan lide at bruge Bootstrap til styling, django-crispy-forms er et alternativ til styling af dine formularer. Eksemplet nedenfor bruger Bootstrap til 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 producere output svarende til følgende billede:

Du kan lære mere om formularer i django-allauth ved at læse officiel dokumentation.

Tilsidesæt enhver skabelon i django-allauth

django-allauth indeholder mange standardskabeloner, som du kan tilsidesætte. Med trinene i denne guide kan du tilsidesætte enhver skabelon i django-allauth. Du bør overveje at bruge denne pakke til at håndtere dit autentificeringssystem, så du kan fokusere på at bygge de andre vigtige funktioner i din applikation.