A django-allauth alapértelmezett sablonjai tompának tűnnek, és előfordulhat, hogy nem felelnek meg az Ön igényeinek. A következőképpen írhatja felül őket.

A django-allauth egy Django-csomag, amellyel gyorsan és egyszerűen hozhat létre hitelesítési rendszert Django-alkalmazásaihoz. Beépített sablonokkal rendelkezik, amelyek segítségével az alkalmazás más fontos részeire összpontosíthat.

Bár a beépített sablonok hasznosak, érdemes módosítani őket, mert nem a legjobb felhasználói felülettel rendelkeznek.

A django-allauth telepítése és konfigurálása

Néhány egyszerű lépést követve zökkenőmentesen telepítheti a django-allauth-ot Django projektjébe.

  1. Telepítheti django-allauth csomag a Pip csomagkezelő segítségével:
    pip install django-allauth
  2. A projekt beállításfájljában adja hozzá ezeket az alkalmazásokat a telepített alkalmazásokhoz:
    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. Adjon hozzá hitelesítési háttérprogramokat a beállításfájlhoz:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Helyazonosító hozzáadása a projekthez:
    SITE_ID = 1
  5. Állítsa be a django-allauth URL-címeit:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Ha a fenti konfigurációkat helyesen végzi el, egy ehhez hasonló sablont kell látnia, amikor oda navigál http://127.0.0.1:8000/accounts/signup/:

Az elérhető URL-ek listáját a következő helyre navigálva tekintheti meg http://127.0.0.1:8000/accounts/ val vel DEBUG=Igaz a beállítások fájljában.

Hogyan lehet felülbírálni a bejelentkezési sablont a django-allauthban

Először is be kell állítania a saját sablonokat mappát, ha még nem tette meg. Nyissa meg a beállításfájlt, és keresse meg a SABLONOK lista. Keresse meg benne a DIRS listát, és módosítsa a következőképpen:

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

Győződjön meg arról, hogy rendelkezik a sablonokat mappát a projekt gyökérkönyvtárában. A következő lépések végrehajtásával felülírhatja a django-allauth alapértelmezett bejelentkezési sablonját.

1. lépés: Hozd létre a sablonfájlokat

A tiédben sablonokat mappát, hozzon létre egy új mappát fiókot hogy tartsa a django-allauthhoz kapcsolódó sablonokat.

A regisztrációs és bejelentkezési sablonok legyenek signup.html és login.html illetőleg. A megfelelő sablonnevet a saját megnyitásával határozhatja meg Python virtuális környezet és navigáljon ide Lib > webhelycsomagok > allauth > sablonok > fiók mappát a sablonok megtalálásához. A sablonok működésének megértéséhez végig kell mennie a kódon. Például a bejelentkezési sablonban ez a kód található:

2. lépés: Adjon hozzá HTML-kódot a sablonfájlokhoz

A fájlok létrehozása után adja hozzá az egyéni HTML-kódot a sablonhoz. Például a fenti bejelentkezési sablon felülbírálásához érdemes lehet mindent átmásolni a {% más %} blokkot, amely tartalmazza az űrlapot és a benyújtás gombot, és adja hozzá egyéni sablonjához. Íme egy példa:

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

A fenti kódot használja Django sablon öröklődése tulajdonságokat örökölni a base.html sablon. Győződjön meg arról, hogy eltávolította a felesleges címkéket, például a {% blocktrans %} címke. Ha ezt megtette, a bejelentkezési oldalának ehhez hasonlónak kell lennie:

A fenti képen látható fejléc és lábléc különbözni fog az önétől.

3. lépés: Adjon egyéni stílusokat az űrlaphoz

Az előző lépésben a bejelentkezési űrlap bekezdésként jelenik meg a {{ form.as_p }} címke. Ha stílusokat szeretne hozzáadni az űrlaphoz, ismernie kell az értékét név minden egyes beviteli mezőhöz társított attribútum.

Megnézheti az oldalt, hogy megtalálja a szükséges értékeket.

A fenti képen a név attribútuma látható email az űrlap mezője.

Most egyenként is hozzáadhatja az űrlapmezőket a projekthez. Például az e-mail mezőt a következőképpen adhatja hozzá:

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

tudsz használja a Bootstrapet a Django projektjéhez hogy könnyen formálja formáját. Íme egy példa:

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

A fenti kód Bootstrap űrlaposztályokat ad hozzá az űrlaphoz. Most hozzáadhatja a többi szükséges mezőt, és ízlése szerint alakíthatja azokat. Ha nem szereti a Bootstrap használatát stílushoz, A django-crispy-forms a formák stílusának alternatívája. Az alábbi példa a Bootstrapet használja a stílushoz.

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

A fenti kódblokk a következő képhez hasonló kimenetet produkál:

A django-allauth űrlapjairól többet megtudhat, ha elolvassa a hivatalos dokumentáció.

Bármely sablon felülírása a django-allauthban

A django-allauth számos alapértelmezett sablont tartalmaz, amelyeket felülbírálhat. Az útmutató lépéseivel felülírhatja a django-allauth bármely sablonját. Érdemes megfontolni ennek a csomagnak a használatát a hitelesítési rendszerének kezelésére, így az alkalmazás egyéb fontos funkcióinak kialakítására összpontosíthat.