Hoe de standaardsjablonen in django-allauth overschrijven

Alicia Brunner included in Programming Python Web Development Coding Tutorials

2023-10-02 1225 words 6 minutes

Contents

django-allauth is een Django-pakket waarmee u snel en eenvoudig een authenticatiesysteem voor uw Django-apps kunt bouwen. Het heeft ingebouwde sjablonen zodat u zich kunt concentreren op andere belangrijke onderdelen van uw app.

Hoewel de standaard meegeleverde sjablonen nuttig kunnen zijn, is het vaak nodig om ze aan te passen omdat hun gebruikersinterface (UI) mogelijk niet overeenkomt met iemands voorkeuren of vereisten.

Hoe django-allauth te installeren en configureren

Het integreren van django-allauth in een Django project vereist het volgen van een eenvoudige set van richtlijnen die zorgen voor een soepel en ononderbroken installatieproces.

⭐ U kunt het django-allauth pakket installeren met behulp van de Pip package manager:

 pip install django-allauth

⭐ Voeg in het instellingenbestand van uw project deze apps toe aan uw geïnstalleerde apps:

 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
]

⭐ Voeg authenticatie backends toe aan uw instellingenbestand:

 AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

⭐ Voeg een site ID toe aan je project:

 SITE_ID = 1

⭐ Configureer de URL’s voor django-allauth:

 from django.urls import path, include

urlpatterns = [
    # Djang-allauth url pattern
    path('accounts/', include('allauth.urls')),
]

Als je configuratie nauwkeurig is uitgevoerd, zou het navigeren naar http://127.0.0.1:8000/accounts/signup/ een sjabloon moeten weergeven dat op het volgende lijkt:

Om een lijst met toegankelijke URL’s te openen, navigeer je naar " http://127.0.0.1:8000/accounts/ " binnen de “DEBUG=True” instelling in je configuratiebestand.

Om ons sjabloon systeem te gebruiken, moet je er eerst voor zorgen dat de “templates” directory correct is geconfigureerd. Ga hiervoor naar het configuratiebestand van uw applicatie en navigeer naar de sectie “TEMPLATES”. Zoek in deze sectie naar de sublijst “DIRS” en pas deze aan zoals hieronder wordt getoond:

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

Om de integratie van Django-Allauth te vergemakkelijken, is het van cruciaal belang om de aanwezigheid van een map “templates” in de hoofdmap van uw project aan te geven. Je kunt ervoor kiezen om het gestandaardiseerde inlogsjabloon van Django-Allauth aan te passen door de volgende instructies op te volgen.

Stap 1: Creëer uw sjabloonbestanden

Om de sjablonen geassocieerd met Django Allauth goed te organiseren en te beheren binnen uw project, is het aanbevolen dat u een map aanmaakt met de naam “account” binnen uw bestaande map “sjablonen”. Dit zorgt voor een efficiënte organisatie en gestroomlijnde toegang tot deze specifieke sjablonen wanneer dat nodig is.

Om de registratie- en aanmeldingssjablonen voor Allauth goed te identificeren, moet u naar de map “Lib” in uw virtuele Python-omgeving navigeren en naar de map “site-packages” gaan. Van daaruit navigeert u naar de map “allauth” en zoekt u de submap “templates”. Door de inhoud van deze submap te bekijken, met name de map “account”, ontdekt u de juiste sjabloonnamen voor registratie- en aanmeldpagina’s, respectievelijk “signup.html” en “login.html”. Om beter te begrijpen hoe deze sjablonen werken, kan het nodig zijn om de relevante code te bekijken.

Stap 2: HTML-code toevoegen aan uw sjabloonbestanden

Na het genereren van uw bestanden is het essentieel om de HTML-code op maat in uw sjabloon op te nemen. Ter illustratie, als u het standaard inlogsjabloon wilt wijzigen, kunt u ervoor kiezen om alle inhoud van het {% else %} blok, dat het formulier en de verzendknop bevat, te kopiëren en te integreren in een aangepaste sjabloon. Een voorbeeldimplementatie zou er als volgt uit kunnen zien:

 {% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
    <a href="{{ signup_url }}">sign up</a> first.</p>
    
    <form class="login" method="POST" action="{% url 'account_login' %}">
      {% csrf_token %}
      {{ form.as_p }}
      {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
      {% endif %}
      <a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
      <button class="primaryAction" type="submit">SIgn in</button>
    </form>
    {% endblock content %}

Django gebruikt in zijn framework een techniek die bekend staat als sjabloonovererving, die het mogelijk maakt sjablonen aan te passen door attributen en kenmerken te erven van reeds bestaande basissjablonen. In dit specifieke geval maakt de code gebruik van Django’s ingebouwde functie voor sjabloonovererving om de opmaak- en stylingelementen uit het bestand “base.html” op te nemen in de inlogpagina. Voor een optimale functionaliteit wordt aanbevolen om alle ongewenste of overbodige HTML-componenten te verwijderen, waaronder de tag " {% blocktrans %}" “. Door dit te doen, zal de resulterende aanmeldpagina sterk lijken op de geleverde voorbeeldstructuur.

De bovenstaande afbeelding bevat kop- en voetteksten die afwijken van de hierin afgebeelde.

Stap 3: Aangepaste stijlen aan uw formulier toevoegen

Om ons aanmeldingsformulier esthetische allure en visuele aantrekkingskracht te geven, is het nodig om het belang te begrijpen van het toekennen van specifieke namen aan individuele invoervelden binnen dat formulier. Door de tag {{ form.as_p }} te gebruiken, kunnen we ons aanmeldformulier effectief weergeven als een samenhangend verhaal voor naadloze gebruikersinteractie. Echter, om het uiterlijk van dit formulier te verbeteren en het een gevoel van verfijning te geven, is het cruciaal dat we ons bewust zijn van de unieke identificatie die is toegewezen aan elk individueel onderdeel binnen het formulier.

Om de benodigde gegevens te verkrijgen, wordt aanbevolen om de webpagina te onderzoeken.

De afbeelding toont een label dat is toegewezen aan een invoerveld in een formulier, overeenkomend met de invoer van het e-mailadres.

Het is inderdaad mogelijk om individuele formuliervelden op te nemen in een specifiek project. Het opnemen van een e-mailveld kan bijvoorbeeld als volgt worden uitgevoerd:

 {{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}

U kunt Bootstrap gebruiken in combinatie met een Django-project om uw formulier moeiteloos een aantrekkelijk uiterlijk te geven. Beschouw de volgende illustratie als referentiepunt:

 <div class="form-floating form-group">
 {{ form.login }}
 <label for="{{form.login.id_for_label}}">Email</label>
 {{ form.login.errors|safe }}
</div>

De meegeleverde code past Bootstrap opmaak toe op een bepaald formulier, waardoor het mogelijk wordt om extra velden toe te voegen en het ontwerp te personaliseren. Voor degenen die Bootstrap niet willen gebruiken in hun opmaak, kan in plaats daarvan een alternatieve optie, bekend als “django-crispy-forms”, worden overwogen. Zoals het volgende voorbeeld laat zien, wordt Bootstrap gebruikt om het formulier vorm te geven.

 <div class="container d-flex justify-content-center align-items-center vh-100">
    <form method="post" class="login" id="signup_form" action="{% url 'account_login' %}">
        <div class="text-center mb-4">
            <h1 class="h3 mb-3 font-weight-normal">Sign in</h1>
        </div>
        {{ form.non_field_errors | safe }}
        {% csrf_token %}
        <div class="row g-3">
            <div class="col-12">
                <div class="form-floating form-group">
                    {{ form.login }}
                    <label for="{{form.login.id_for_label}}">Email</label>
                    {{ form.login.errors|safe }}
                </div>
            </div>
            <div class="col-12">
                <div class="form-floating form-group my-3">
                    {{ form.password }}
                    <label for="{{form.password.id_for_label}}">Password</label>
                    {{ form.password.errors|safe }}
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                    <label for="{{form.remember.id_for_label}}" class="form-check-label">Remember me</label>
                    {{ form.remember }}
                </div>
            </div>
            <div class="col-6">
                {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                {% endif %}
                <button class="btn btn-primary w-100 py-3 bg-accent" type="submit">Sign in</button>
                <a class="button secondaryAction text-accent" href="{% url 'account_reset_password' %}">Forgot
                    Password?</a>
            </div>
        </div>
    </form>
</div>

Het bovenstaande code segment zal naar verwachting een resultaat genereren dat lijkt op de onderstaande afbeelding:

Je kunt meer leren over formulieren in django-allauth door de officiële documentatie te lezen.

Een willekeurig sjabloon in django-allauth overschrijven

Django Allauth biedt een groot aantal gestandaardiseerde sjablonen die kunnen worden aangepast aan individuele voorkeuren. De procedures in deze bron bieden de flexibiliteit om elk van deze sjablonen aan te passen. Het wordt ten zeerste aanbevolen om Django Allauth te gebruiken als een allesomvattende oplossing voor het beheren van gebruikersauthenticatie, zodat ontwikkelaars hun inspanningen uitsluitend kunnen richten op het creëren en verbeteren van andere kritieke aspecten van hun softwaretoepassingen.