Șabloanele implicite ale django-allauth arată clar și s-ar putea să nu se potrivească nevoilor dvs. Iată cum le puteți suprascrie.

django-allauth este un pachet Django care vă permite să construiți rapid și ușor un sistem de autentificare pentru aplicațiile Django. Are șabloane încorporate pentru a vă permite să vă concentrați asupra altor părți importante ale aplicației dvs.

Deși șabloanele încorporate sunt utile, veți dori să le schimbați deoarece nu au cea mai bună interfață de utilizare.

Cum se instalează și se configurează django-allauth

Urmând câțiva pași simpli, puteți instala fără probleme django-allauth în proiectul dvs. Django.

  1. Puteți instala django-allauth pachet folosind managerul de pachete Pip:
    pip install django-allauth
  2. În fișierul de setări al proiectului, adăugați aceste aplicații la aplicațiile instalate:
    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. instagram viewer
  3. Adăugați backend-uri de autentificare în fișierul dvs. de setări:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Adăugați un ID de site la proiectul dvs.:
    SITE_ID = 1
  5. Configurați adresele URL pentru django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Dacă faceți corect configurațiile de mai sus, ar trebui să vedeți un șablon ca acesta când navigați la http://127.0.0.1:8000/accounts/signup/:

Puteți vedea lista de adrese URL disponibile navigând la http://127.0.0.1:8000/accounts/ cu DEBUG=Adevărat în fișierul dvs. de setări.

Cum să suprascrieți șablonul de conectare în django-allauth

În primul rând, trebuie să configurați șabloane folder dacă nu ați făcut acest lucru. Deschideți fișierul de setări și navigați la ȘABLONE listă. În interiorul acestuia, localizați DIRS listă și modificați-o astfel:

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

Asigurați-vă că aveți un șabloane folderul din directorul rădăcină al proiectului dvs. Puteți suprascrie șablonul de autentificare implicit în django-allauth urmând acești pași următori.

Pasul 1: Creați fișierele șablon

În dumneavoastră șabloane folder, creați un nou folder numit cont pentru a deține șabloanele legate de django-allauth.

Șabloanele de înregistrare și autentificare ar trebui să fie signup.html și login.html respectiv. Puteți determina numele corect al șablonului prin deschiderea dvs Mediul virtual Python și navigarea către Lib > site-packages > allauth > templates > account folder pentru a găsi șabloanele. Ar trebui să parcurgeți codul pentru a înțelege cum funcționează șabloanele. De exemplu, șablonul de autentificare are acest cod în el:

Pasul 2: Adăugați cod HTML la fișierele șablon

După crearea fișierelor, ar trebui să adăugați codul HTML personalizat pentru șablonul dvs. De exemplu, pentru a înlocui șablonul de autentificare de mai sus, este posibil să doriți să copiați totul din {% altfel %} bloc, care conține formularul și butonul de trimitere și adăugați-l la șablonul dvs. personalizat. Iată un exemplu:

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

Codul de mai sus folosește Moștenirea șablonului lui Django a moșteni caracteristici de la baza.html șablon. Asigurați-vă că eliminați etichetele inutile, cum ar fi {% blocktrans %} etichetă. Dacă ați făcut acest lucru, pagina dvs. de autentificare ar trebui să fie similară cu aceasta:

Antetul și subsolul din imaginea de mai sus vor fi diferite de ale dvs.

Pasul 3: Adăugați stiluri personalizate în formularul dvs

În pasul anterior, formularul de autentificare este redat ca un paragraf utilizând {{ form.as_p }} etichetă. Pentru a adăuga stiluri în formularul dvs., trebuie să cunoașteți valoarea Nume atribut asociat fiecărui câmp de intrare.

Vă puteți inspecta pagina pentru a obține valorile de care aveți nevoie.

Imaginea de mai sus arată atributul nume asociat cu e-mail câmpul formularului.

Acum, puteți adăuga câmpurile de formular individual în proiectul dvs. De exemplu, puteți adăuga câmpul de e-mail astfel:

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

Puteți utilizați Bootstrap cu proiectul dvs. Django pentru a vă stila cu ușurință formularul. Iată un exemplu:

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

Codul de mai sus adaugă clase de formular Bootstrap la formular. Acum, puteți adăuga celelalte câmpuri de care aveți nevoie și le puteți modela după preferințele dvs. Dacă nu vă place să utilizați Bootstrap pentru coafare, django-crispy-forms este o alternativă la stilarea formularelor. Exemplul de mai jos folosește Bootstrap pentru stil.

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

Blocul de cod de mai sus va produce rezultate similare cu următoarea imagine:

Puteți afla mai multe despre formularele din django-allauth citind documentație oficială.

Ignorați orice șablon în django-allauth

django-allauth conține multe șabloane implicite pe care le puteți suprascrie. Cu pașii din acest ghid, puteți suprascrie orice șablon în django-allauth. Ar trebui să luați în considerare utilizarea acestui pachet pentru a gestiona sistemul dvs. de autentificare, astfel încât să vă puteți concentra pe construirea altor caracteristici importante ale aplicației dvs.