Cara Mengatasi Templat Lalai dalam django-allauth

Cara Mengatasi Templat Lalai dalam django-allauth
Pembaca seperti anda membantu menyokong MUO. Apabila anda membuat pembelian menggunakan pautan di tapak kami, kami mungkin mendapat komisen ahli gabungan. Baca Lagi.

django-allauth ialah pakej Django yang membolehkan anda membina sistem pengesahan untuk apl Django anda dengan cepat dan mudah. Ia mempunyai templat terbina dalam untuk membolehkan anda menumpukan pada bahagian penting apl anda yang lain.





Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN

Walaupun templat terbina dalam membantu, anda perlu mengubahnya kerana ia tidak mempunyai UI yang terbaik.





Cara Memasang dan Mengkonfigurasi django-allauth

Dengan mengikuti beberapa langkah mudah, anda boleh memasang django-allauth dengan lancar ke dalam projek Django anda.





  1. Anda boleh memasang django-allauth pakej dengan menggunakan pengurus pakej Pip:
     pip install django-allauth 
  2. Dalam fail tetapan projek anda, tambahkan apl ini pada apl anda yang dipasang:
     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. Tambahkan bahagian belakang pengesahan pada fail tetapan anda:
     AUTHENTICATION_BACKENDS = [ 
        'django.contrib.auth.backends.ModelBackend',
        'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Tambahkan ID tapak pada projek 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 betul, anda sepatutnya melihat templat seperti ini apabila anda menavigasi ke http://127.0.0.1:8000/accounts/signup/ :

  borang pendaftaran

Anda boleh melihat senarai URL yang tersedia dengan menavigasi ke http://127.0.0.1:8000/accounts/ dengan DEBUG=Benar dalam fail tetapan anda.



  Halaman 404 dalam mod Django DEBUG, menunjukkan senarai corak URL yang tersedia dalam django-allauth

Cara Mengatasi Templat Log Masuk dalam django-allauth

Pertama, anda perlu mengkonfigurasi anda templat folder jika anda belum melakukannya. Buka fail tetapan anda dan navigasi ke TEMPLAT senarai. Di dalamnya, cari DIRS senarai, dan ubah suainya seperti ini:

cara mengekalkan komputer riba semasa tingkap ditutup 10
 'DIRS': [BASE_DIR/'templates'], 

Pastikan anda mempunyai a templat folder dalam direktori akar projek anda. Anda boleh mengatasi templat log masuk lalai dalam django-allauth dengan mengikuti langkah seterusnya ini.





Langkah 1: Cipta Fail Templat Anda

dalam anda templat folder, buat folder baharu bernama akaun untuk memegang templat yang berkaitan dengan django-allauth.

Templat pendaftaran dan log masuk sepatutnya signup.html dan login.html masing-masing. Anda boleh menentukan nama templat yang betul dengan membuka anda Persekitaran maya Python dan menavigasi ke Lib > pakej tapak > allauth > templat > akaun folder untuk mencari templat. Anda harus meneliti kod untuk memahami cara templat berfungsi. Sebagai contoh, templat log masuk mempunyai kod ini di dalamnya:





  blok kod log masuk lalai django allauth

Langkah 2: Tambahkan Kod HTML pada Fail Templat Anda

Selepas membuat fail anda, anda harus menambah kod HTML tersuai untuk templat anda. Sebagai contoh, untuk mengatasi templat log masuk di atas, anda mungkin mahu menyalin segala-galanya daripada {% else %} blok, yang mengandungi butang borang dan penyerahan, dan tambahkannya pada templat tersuai anda. Berikut ialah contoh:

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

Kod di atas menggunakan Warisan templat Django untuk mewarisi ciri daripada base.html templat. Pastikan anda mengalih keluar tag yang tidak diperlukan seperti {% blocktrans %} tag. Jika anda telah melakukan ini, halaman log masuk anda sepatutnya serupa dengan ini:

  halaman log masuk dengan pengepala dan pengaki yang bagus

Pengepala dan pengaki dalam imej di atas akan berbeza daripada anda.

Langkah 3: Tambahkan Gaya Tersuai pada Borang Anda

Dalam langkah sebelumnya, borang log masuk diberikan sebagai perenggan menggunakan {{ form.as_p }} tag. Untuk menambah gaya pada borang anda, anda perlu mengetahui nilai nama atribut yang dikaitkan dengan setiap medan input.

Anda boleh memeriksa halaman anda untuk mendapatkan nilai yang anda perlukan.

  Pelayar's dev tools showing the code for a login page

Imej di atas menunjukkan atribut nama yang dikaitkan dengan emel medan borang.

Kini, anda boleh menambah medan borang secara individu dalam projek anda. Sebagai contoh, anda boleh menambah medan e-mel seperti ini:

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

Awak boleh gunakan Bootstrap dengan projek Django anda untuk menggayakan bentuk anda dengan mudah. Berikut ialah contoh:

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

Kod di atas menambah kelas borang Bootstrap ke borang. Kini, anda boleh menambah medan lain yang anda perlukan dan menggayakannya mengikut pilihan anda. Jika anda tidak gemar menggunakan Bootstrap untuk penggayaan, django-crispy-forms ialah alternatif untuk menggayakan borang anda . Contoh di bawah menggunakan Bootstrap untuk penggayaan.

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

Blok kod di atas akan menghasilkan output yang serupa dengan imej berikut:

berapa banyak data yang digunakan oleh youtube 144p
  Borang log masuk dengan tiga medan untuk e-mel, kata laluan dan ingat saya. Ia mempunyai butang kuning yang tertulis

Anda boleh mengetahui lebih lanjut tentang borang dalam django-allauth dengan membaca dokumentasi rasmi .

Override Mana-mana Templat dalam django-allauth

django-allauth mengandungi banyak templat lalai yang boleh anda ganti. Dengan langkah dalam panduan ini, anda boleh mengatasi sebarang templat dalam django-allauth. Anda harus mempertimbangkan untuk menggunakan pakej ini untuk mengendalikan sistem pengesahan anda, supaya anda boleh menumpukan pada membina ciri penting lain aplikasi anda.