Výchozí šablony django-allauthu vypadají neomalené a nemusí vyhovovat vašim potřebám. Zde je návod, jak je můžete přepsat.

django-allauth je balíček Django, který vám umožní rychle a snadno vytvořit ověřovací systém pro vaše aplikace Django. Má vestavěné šablony, které vám umožní soustředit se na další důležité části vaší aplikace.

Přestože jsou vestavěné šablony užitečné, budete je chtít změnit, protože nemají nejlepší uživatelské rozhraní.

Jak nainstalovat a nakonfigurovat django-allauth

Pomocí několika jednoduchých kroků můžete bez problémů nainstalovat django-allauth do svého projektu Django.

  1. Můžete nainstalovat django-allauth balíček pomocí správce balíčků Pip:
    pip install django-allauth
  2. V souboru nastavení projektu přidejte do nainstalovaných aplikací tyto aplikace:
    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. Přidejte ověřovací backendy do souboru nastavení:
    instagram viewer 
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Přidejte do projektu ID webu:
    SITE_ID = 1
  5. Nakonfigurujte adresy URL pro django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Pokud provedete výše uvedené konfigurace správně, měla by se vám při přechodu zobrazit šablona podobná této http://127.0.0.1:8000/accounts/signup/:

Seznam dostupných adres URL můžete zobrazit tak, že přejdete na http://127.0.0.1:8000/accounts/ s DEBUG=Pravda ve vašem souboru nastavení.

Jak přepsat přihlašovací šablonu v django-allauth

Nejprve musíte nakonfigurovat svůj šablony složku, pokud jste tak neučinili. Otevřete soubor nastavení a přejděte na ŠABLONY seznam. Uvnitř najděte DIRS seznam a upravte jej takto:

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

Ujistěte se, že máte a šablony složku v kořenovém adresáři vašeho projektu. Výchozí přihlašovací šablonu v django-allauth můžete přepsat podle následujících kroků.

Krok 1: Vytvořte soubory šablon

Ve vašem šablony složku, vytvořte novou složku s názvem účet uchovávat šablony související s django-allauthem.

Registrační a přihlašovací šablony by měly být registrace.html a login.html respektive. Správný název šablony můžete určit otevřením svého Virtuální prostředí Python a navigace do Lib > balíčky stránek > allauth > šablony > účet složku, kde najdete šablony. Měli byste si projít kód, abyste pochopili, jak šablony fungují. Například přihlašovací šablona obsahuje tento kód:

Krok 2: Přidejte HTML kód do souborů šablon

Po vytvoření souborů byste měli přidat vlastní kód HTML pro vaši šablonu. Chcete-li například přepsat výše uvedenou přihlašovací šablonu, možná budete chtít zkopírovat vše z {% else %} blok, který obsahuje formulář a tlačítko pro odeslání, a přidejte jej do vlastní šablony. Zde je příklad:

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

Výše uvedený kód používá Dědictví Django šablony zdědit vlastnosti z základna.html šablona. Ujistěte se, že jste odstranili nepotřebné značky, jako je {% blocktrans %} štítek. Pokud jste to udělali, vaše přihlašovací stránka by měla být podobná této:

Záhlaví a zápatí na obrázku výše se budou lišit od vašich.

Krok 3: Přidejte do formuláře vlastní styly

V předchozím kroku je přihlašovací formulář vykreslen jako odstavec pomocí {{ form.as_p }} štítek. Chcete-li do formuláře přidat styly, musíte znát hodnotu název atribut spojený s každým vstupním polem.

Můžete zkontrolovat svou stránku a získat hodnoty, které potřebujete.

Obrázek výše ukazuje atribut názvu spojený s e-mailem pole formuláře.

Nyní můžete pole formuláře přidat jednotlivě do svého projektu. Pole e-mailu můžete přidat například takto:

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

Můžeš použijte Bootstrap s vaším projektem Django pro snadný styl vaší formy. Zde je příklad:

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

Výše uvedený kód přidá do formuláře třídy formuláře Bootstrap. Nyní můžete přidat další potřebná pole a upravit je podle svých preferencí. Pokud vás nebaví používat Bootstrap pro styling, django-crispy-forms je alternativou ke stylování vašich formulářů. Níže uvedený příklad používá pro styling Bootstrap.

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

Blok kódu výše vytvoří výstup podobný následujícímu obrázku:

Více o formách v django-allauth se můžete dozvědět přečtením oficiální dokumentace.

Přepište jakoukoli šablonu v django-allauth

django-allauth obsahuje mnoho výchozích šablon, které můžete přepsat. Pomocí kroků v této příručce můžete přepsat jakoukoli šablonu v django-allauth. Měli byste zvážit použití tohoto balíčku pro správu vašeho ověřovacího systému, abyste se mohli soustředit na vytváření dalších důležitých funkcí vaší aplikace.