Die Standardvorlagen von Django-Allauth sehen langweilig aus und entsprechen möglicherweise nicht Ihren Anforderungen. So können Sie sie überschreiben.

django-allauth ist ein Django-Paket, mit dem Sie schnell und einfach ein Authentifizierungssystem für Ihre Django-Apps erstellen können. Es verfügt über integrierte Vorlagen, damit Sie sich auf andere wichtige Teile Ihrer App konzentrieren können.

Obwohl die integrierten Vorlagen hilfreich sind, möchten Sie sie möglicherweise ändern, da sie nicht über die beste Benutzeroberfläche verfügen.

So installieren und konfigurieren Sie django-allauth

Indem Sie ein paar einfache Schritte befolgen, können Sie django-alauth nahtlos in Ihr Django-Projekt installieren.

  1. Sie können installieren django-allauth Paket mithilfe des Pip-Paketmanagers:
    pip install django-allauth
  2. Fügen Sie in der Einstellungsdatei Ihres Projekts diese Apps zu Ihren installierten Apps hinzu:
    INSTALLED_APPS = [

     Add your other apps here
    # Djang-allauth configuration apps
    'django.contrib.sites'
    




instagram viewer

    ,
    'allauth',
    'allauth.account',
    'allauth.socialaccount', # add this if you want to enable social authentication
    ]
  3. Fügen Sie Ihrer Einstellungsdatei Authentifizierungs-Backends hinzu:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Fügen Sie Ihrem Projekt eine Site-ID hinzu:
    SITE_ID = 1
  5. Konfigurieren Sie die URLs für django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Wenn Sie die oben genannten Konfigurationen korrekt durchführen, sollte beim Navigieren eine Vorlage wie diese angezeigt werden http://127.0.0.1:8000/accounts/signup/:

Sie können die Liste der verfügbaren URLs anzeigen, indem Sie zu navigieren http://127.0.0.1:8000/accounts/ mit DEBUG=Wahr in Ihrer Einstellungsdatei.

So überschreiben Sie die Anmeldevorlage in django-allauth

Zuerst müssen Sie Ihre konfigurieren Vorlagen Ordner, falls Sie dies noch nicht getan haben. Öffnen Sie Ihre Einstellungsdatei und navigieren Sie zu VORLAGEN Liste. Suchen Sie darin nach DIRS Liste und ändern Sie sie wie folgt:

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

Stellen Sie sicher, dass Sie eine haben Vorlagen Ordner im Stammverzeichnis Ihres Projekts. Sie können die Standard-Anmeldevorlage in django-allauth überschreiben, indem Sie die folgenden Schritte ausführen.

Schritt 1: Erstellen Sie Ihre Vorlagendateien

In deinem Vorlagen Ordner, erstellen Sie einen neuen Ordner mit dem Namen Konto um die Vorlagen im Zusammenhang mit Django-Allauth zu speichern.

Die Registrierungs- und Anmeldevorlagen sollten vorhanden sein signup.html Und login.html jeweils. Sie können den richtigen Vorlagennamen ermitteln, indem Sie Ihr öffnen Virtuelle Python-Umgebung und navigieren zu Lib > Site-Pakete > Allauth > Vorlagen > Konto Ordner, um die Vorlagen zu finden. Sie sollten den Code durchgehen, um zu verstehen, wie die Vorlagen funktionieren. Die Anmeldevorlage enthält beispielsweise diesen Code:

Schritt 2: Fügen Sie HTML-Code zu Ihren Vorlagendateien hinzu

Nachdem Sie Ihre Dateien erstellt haben, sollten Sie den benutzerdefinierten HTML-Code für Ihre Vorlage hinzufügen. Um beispielsweise die obige Anmeldevorlage zu überschreiben, möchten Sie möglicherweise alles aus kopieren {% anders %} Block, der das Formular und die Übermittlungsschaltfläche enthält, und fügen Sie ihn Ihrer benutzerdefinierten Vorlage hinzu. Hier ist ein Beispiel:

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

Der obige Code verwendet Djangos Vorlagenvererbung um Funktionen von zu erben base.html Vorlage. Stellen Sie sicher, dass Sie unnötige Tags wie z. B. entfernen {% blocktrans %} Etikett. Wenn Sie dies getan haben, sollte Ihre Anmeldeseite etwa so aussehen:

Die Kopf- und Fußzeile im obigen Bild unterscheidet sich von Ihrer.

Schritt 3: Fügen Sie Ihrem Formular benutzerdefinierte Stile hinzu

Im vorherigen Schritt wurde das Anmeldeformular mithilfe von als Absatz gerendert {{ form.as_p }} Etikett. Um Ihrem Formular Stile hinzuzufügen, müssen Sie den Wert kennen Name Attribut, das jedem Eingabefeld zugeordnet ist.

Sie können Ihre Seite überprüfen, um die benötigten Werte zu erhalten.

Das Bild oben zeigt das mit dem verknüpfte Namensattribut Email Feld des Formulars.

Jetzt können Sie die Formularfelder einzeln in Ihrem Projekt hinzufügen. Sie können das E-Mail-Feld beispielsweise wie folgt hinzufügen:

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

Du kannst Verwenden Sie Bootstrap mit Ihrem Django-Projekt um Ihr Formular ganz einfach zu gestalten. Hier ist ein Beispiel:

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

Der obige Code fügt dem Formular Bootstrap-Formularklassen hinzu. Jetzt können Sie die anderen benötigten Felder hinzufügen und sie nach Ihren Wünschen gestalten. Wenn Sie Bootstrap nicht gerne zum Stylen verwenden, django-crispy-forms ist eine Alternative zum Gestalten Ihrer Formulare. Das folgende Beispiel verwendet Bootstrap für das 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>

Der obige Codeblock erzeugt eine Ausgabe ähnlich der folgenden Abbildung:

Sie können mehr über Formulare in Django-Allauth erfahren, indem Sie die lesen offizielle Dokumentation.

Überschreiben Sie jede Vorlage in Django-Allauth

django-allauth enthält viele Standardvorlagen, die Sie überschreiben können. Mit den Schritten in dieser Anleitung können Sie jede Vorlage in Django-Allauth überschreiben. Sie sollten erwägen, dieses Paket für die Verwaltung Ihres Authentifizierungssystems zu verwenden, damit Sie sich auf die Entwicklung der anderen wichtigen Funktionen Ihrer Anwendung konzentrieren können.