Bagaimana Mengganti Templat Default di Django-allauth

Django-allauth adalah paket Django yang memungkinkan Anda membangun sistem otentikasi untuk aplikasi Django Anda dengan cepat dan mudah. Ini memiliki templat bawaan untuk memungkinkan Anda fokus pada bagian penting lainnya dari aplikasi Anda.

Meskipun templat bawaannya berguna, Anda sebaiknya mengubahnya karena templat tersebut tidak memiliki UI terbaik.

Cara Memasang dan Mengonfigurasi Django-allauth

Dengan mengikuti beberapa langkah mudah, Anda dapat dengan mudah menginstal Django-allauth ke dalam proyek Django Anda.

1. Anda dapat menginstal Django-allauth paket dengan menggunakan manajer paket Pip:

   pip install django-allauth
   

2. Di file pengaturan proyek Anda, tambahkan aplikasi ini ke aplikasi yang Anda instal:

   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
   ]
   

instagram viewer
3. Tambahkan backend autentikasi ke file pengaturan Anda:

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

4. Tambahkan ID situs ke proyek Anda:

   SITE_ID = 1
   

5. Konfigurasikan URL untuk Django-allauth:

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

Jika Anda melakukan konfigurasi di atas dengan benar, Anda akan melihat template seperti ini saat Anda menavigasi http://127.0.0.1:8000/accounts/signup/:

Anda dapat melihat daftar URL yang tersedia dengan menavigasi ke http://127.0.0.1:8000/accounts/ dengan DEBUG=Benar di file pengaturan Anda.

Bagaimana Mengganti Templat Login di Django-allauth

Pertama, Anda perlu mengkonfigurasi templat folder jika Anda belum melakukannya. Buka file pengaturan Anda dan navigasikan ke TEMPLATE daftar. Di dalamnya, temukan DIRS list, dan modifikasi seperti ini:

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

Pastikan Anda memiliki templat folder di direktori root proyek Anda. Anda dapat mengganti templat login default di Django-allauth dengan mengikuti langkah berikutnya.

Langkah 1: Buat File Templat Anda

Di dalam kamu templat folder, buat folder baru bernama akun untuk menyimpan templat yang berhubungan dengan Django-allauth.

Templat registrasi dan login seharusnya pendaftaran.html Dan login.html masing-masing. Anda dapat menentukan nama template yang benar dengan membuka Lingkungan virtual Python dan menavigasi ke Lib > paket situs > allauth > templat > akun folder untuk menemukan template. Anda harus mempelajari kode untuk memahami cara kerja templat. Misalnya, templat login memiliki kode ini di dalamnya:

Langkah 2: Tambahkan Kode HTML ke File Template Anda

Setelah membuat file, Anda harus menambahkan kode HTML khusus untuk template Anda. Misalnya, untuk mengganti template login di atas, Anda mungkin ingin menyalin semuanya dari {% kalau tidak %} blok, yang berisi tombol formulir dan pengiriman, dan menambahkannya ke templat khusus Anda. Berikut ini contohnya:

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

Kode di atas menggunakan Warisan cetakan Django untuk mewarisi fitur dari base.html templat. Pastikan Anda menghapus tag yang tidak perlu seperti {% bloktrans %} menandai. Jika Anda sudah melakukan ini, halaman login Anda akan terlihat seperti ini:

Header dan footer pada gambar di atas akan berbeda dengan milik Anda.

Langkah 3: Tambahkan Gaya Kustom ke Formulir Anda

Pada langkah sebelumnya, form login dirender sebagai paragraf menggunakan {{form.as_p }} menandai. Untuk menambahkan gaya ke formulir Anda, Anda perlu mengetahui nilai dari nama atribut yang terkait dengan setiap kolom input.

Anda dapat memeriksa halaman Anda untuk mendapatkan nilai yang Anda butuhkan.

Gambar di atas menunjukkan atribut nama yang terkait dengan surel bidang formulir.

Sekarang, Anda dapat menambahkan kolom formulir satu per satu di proyek Anda. Misalnya, Anda dapat menambahkan kolom email seperti ini:

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

Kamu bisa gunakan Bootstrap dengan proyek Django Anda untuk menata formulir Anda dengan mudah. Berikut ini contohnya:

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

Kode di atas menambahkan kelas formulir Bootstrap ke formulir. Sekarang, Anda dapat menambahkan bidang lain yang Anda perlukan dan menatanya sesuai keinginan Anda. Jika Anda tidak suka menggunakan Bootstrap untuk penataan gaya, Django-crispy-forms adalah sebuah alternatif untuk menata bentuk Anda. Contoh di bawah ini menggunakan Bootstrap untuk penataan gaya.

<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 kode di atas akan menghasilkan output seperti gambar berikut:

Anda dapat mempelajari lebih lanjut tentang formulir di Django-allauth dengan membaca dokumentasi resmi.

Ganti Templat Apa Pun di Django-allauth

Django-allauth berisi banyak templat bawaan yang dapat Anda timpa. Dengan langkah-langkah dalam panduan ini, Anda dapat mengganti templat apa pun di Django-allauth. Anda harus mempertimbangkan untuk menggunakan paket ini untuk menangani sistem autentikasi Anda, sehingga Anda dapat fokus membangun fitur penting lainnya dari aplikasi Anda.