Predvolené šablóny django-allauthu vyzerajú neostro a nemusia vyhovovať vašim potrebám. Tu je návod, ako ich môžete prepísať.

django-allauth je balík Django, ktorý vám umožňuje rýchlo a jednoducho vytvoriť autentifikačný systém pre vaše aplikácie Django. Má vstavané šablóny, ktoré vám umožnia sústrediť sa na iné dôležité časti vašej aplikácie.

Aj keď sú vstavané šablóny užitočné, budete ich chcieť zmeniť, pretože nemajú najlepšie používateľské rozhranie.

Ako nainštalovať a nakonfigurovať django-alluth

Nasledovaním niekoľkých jednoduchých krokov môžete bez problémov nainštalovať django-allauth do svojho projektu Django.

  1. Môžete nainštalovať django-allauth balík pomocou správcu balíkov Pip:
    pip install django-allauth
  2. V súbore nastavení projektu pridajte tieto aplikácie do nainštalovaných aplikácií:
    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. Pridajte do súboru s nastaveniami servery overenia:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Pridajte do projektu ID lokality:
    SITE_ID = 1
  5. Nakonfigurujte adresy URL pre django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Ak vykonáte vyššie uvedené konfigurácie správne, mala by sa vám pri prechode zobraziť takáto šablóna http://127.0.0.1:8000/accounts/signup/:

Zoznam dostupných adries URL môžete zobraziť tak, že prejdete na http://127.0.0.1:8000/accounts/ s DEBUG=Pravda v súbore nastavení.

Ako prepísať prihlasovaciu šablónu v django-allauth

Najprv musíte nakonfigurovať svoj šablóny priečinok, ak ste tak ešte neurobili. Otvorte súbor s nastaveniami a prejdite na ŠABLÓNY zoznam. Vo vnútri nájdite DIRS zoznam a upravte ho takto:

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

Uistite sa, že máte a šablóny priečinok v koreňovom adresári vášho projektu. Predvolenú prihlasovaciu šablónu v django-allauth môžete prepísať podľa nasledujúcich krokov.

Krok 1: Vytvorte si súbory šablón

V tvojom šablóny priečinok, vytvorte nový priečinok s názvom účtu uchovávať šablóny súvisiace s django-allauthom.

Registračné a prihlasovacie šablóny by mali byť signup.html a login.html resp. Správny názov šablóny môžete určiť otvorením svojho Virtuálne prostredie Python a navigovanie do Lib > site-packages > allauth > templates > account priečinok na vyhľadanie šablón. Mali by ste si prejsť kód, aby ste pochopili, ako šablóny fungujú. Napríklad prihlasovacia šablóna obsahuje tento kód:

Krok 2: Pridajte HTML kód do svojich súborov šablón

Po vytvorení súborov by ste mali pridať vlastný kód HTML pre svoju šablónu. Ak chcete napríklad prepísať vyššie uvedenú prihlasovaciu šablónu, možno budete chcieť skopírovať všetko z {% else %} blok, ktorý obsahuje formulár a tlačidlo odoslania, a pridajte ho do vlastnej šablóny. Tu je prí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 %}

Vyššie uvedený kód používa Dedičstvo šablóny Djanga zdediť vlastnosti z base.html šablóna. Uistite sa, že ste odstránili nepotrebné značky, ako napr {% blocktrans %} tag. Ak ste to urobili, vaša prihlasovacia stránka by mala byť podobná tejto:

Hlavička a päta na obrázku vyššie sa budú líšiť od vašich.

Krok 3: Pridajte do formulára vlastné štýly

V predchádzajúcom kroku sa prihlasovací formulár vykreslí ako odsek pomocou {{ form.as_p }} tag. Ak chcete do formulára pridať štýly, musíte poznať hodnotu názov atribút spojený s každým vstupným poľom.

Môžete skontrolovať svoju stránku a získať hodnoty, ktoré potrebujete.

Vyššie uvedený obrázok zobrazuje atribút názvu spojený s email pole formulára.

Teraz môžete polia formulára pridať jednotlivo do svojho projektu. Pole e-mailu môžete pridať napríklad takto:

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

Môžeš použite Bootstrap s vaším projektom Django na jednoduchý štýl vašej formy. Tu je príklad:

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

Vyššie uvedený kód pridá do formulára triedy formulára Bootstrap. Teraz môžete pridať ďalšie polia, ktoré potrebujete, a upraviť ich podľa svojich preferencií. Ak vás nebaví používať Bootstrap na styling, django-crispy-forms je alternatívou k úprave vašich formulárov. V nižšie uvedenom príklade sa na úpravu štýlu používa 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>

Vyššie uvedený blok kódu vytvorí výstup podobný nasledujúcemu obrázku:

Viac o formách v django-allauth sa môžete dozvedieť prečítaním oficiálna dokumentácia.

Prepísať akúkoľvek šablónu v django-allauth

django-alluth obsahuje veľa predvolených šablón, ktoré môžete prepísať. Pomocou krokov v tejto príručke môžete prepísať akúkoľvek šablónu v django-allauth. Mali by ste zvážiť použitie tohto balíka na obsluhu vášho autentifikačného systému, aby ste sa mohli sústrediť na budovanie ostatných dôležitých funkcií vašej aplikácie.