วิธีแทนที่เทมเพลตเริ่มต้นใน django-allauth

django-allauth เป็นแพ็คเกจ Django ที่ช่วยให้คุณสร้างระบบการตรวจสอบสิทธิ์สำหรับแอป Django ของคุณได้อย่างรวดเร็วและง่ายดาย มีเทมเพลตในตัวเพื่อให้คุณมุ่งเน้นไปที่ส่วนสำคัญอื่นๆ ของแอปได้

แม้ว่าเทมเพลตเริ่มต้นที่ให้ไว้อาจมีประโยชน์ แต่บ่อยครั้งจำเป็นต้องแก้ไขเนื่องจากอินเทอร์เฟซผู้ใช้ (UI) อาจไม่สอดคล้องกับการตั้งค่าหรือข้อกำหนดของตน

วิธีติดตั้งและกำหนดค่า django-allauth

การรวม django-allauth เข้ากับโปรเจ็กต์ Django จำเป็นต้องปฏิบัติตามชุดแนวทางง่ายๆ เพื่อให้แน่ใจว่ากระบวนการติดตั้งจะราบรื่นและไม่สะดุด

⭐ คุณสามารถติดตั้งแพ็คเกจ django-allauth ได้โดยใช้ตัวจัดการแพ็คเกจ Pip:

 pip install django-allauth

⭐ ในไฟล์การตั้งค่าของโปรเจ็กต์ของคุณ ให้เพิ่มแอปเหล่านี้ไปยังแอปที่ติดตั้งของคุณ:

 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
]

⭐ เพิ่มแบ็กเอนด์การรับรองความถูกต้องให้กับไฟล์การตั้งค่าของคุณ:

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

⭐ เพิ่มรหัสไซต์ในโครงการของคุณ:

 SITE_ID = 1

⭐ กำหนดค่า URL สำหรับ django-allauth:

 from django.urls import path, include

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

หากการกำหนดค่าของคุณดำเนินการอย่างถูกต้อง ไปที่ http://127.0.0.1:8000/accounts/signup/ ควรแสดงเทมเพลตที่มีลักษณะดังต่อไปนี้:

หากต้องการเข้าถึงรายการ URL ที่สามารถเข้าถึงได้ ให้ไปที่ “ http://127.0.0.1:8000/accounts/ ” ภายในการตั้งค่า “DEBUG=True” ในของคุณ ไฟล์การกำหนดค่า

วิธีแทนที่เทมเพลตการเข้าสู่ระบบใน django-allauth

เพื่อที่จะใช้ระบบเทมเพลตของเรา ก่อนอื่นต้องตรวจสอบให้แน่ใจว่าไดเร็กทอรี"เทมเพลต"ได้รับการกำหนดค่าอย่างเหมาะสมแล้ว โดยเข้าไปที่ไฟล์การกำหนดค่าของแอปพลิเคชันของคุณ และไปที่ส่วน “เทมเพลต” ภายในส่วนนี้ ให้ค้นหารายการย่อย “DIRS” และปรับเปลี่ยนตามที่แสดงด้านล่าง:

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

เพื่ออำนวยความสะดวกในการรวม Django-Allauth จำเป็นอย่างยิ่งที่จะต้องสร้างโฟลเดอร์ “เทมเพลต” ที่อยู่ในไดเร็กทอรีหลักของโปรเจ็กต์ของคุณ อาจเลือกที่จะแก้ไขเทมเพลตการเข้าสู่ระบบมาตรฐานที่ Django-Allauth มอบให้โดยปฏิบัติตามชุดคำสั่งที่ตามมา

ขั้นตอนที่ 1: สร้างไฟล์เทมเพลตของคุณ

เพื่อจัดระเบียบและจัดการเทมเพลตที่เกี่ยวข้องกับ Django Allauth ภายในโปรเจ็กต์ของคุณอย่างเหมาะสม ขอแนะนำให้คุณสร้างโฟลเดอร์ที่กำหนดชื่อ “บัญชี” ภายในไดเร็กทอรี “เทมเพลต” ที่มีอยู่ของคุณ ซึ่งจะช่วยให้องค์กรมีประสิทธิภาพและเพิ่มความคล่องตัวในการเข้าถึงเทมเพลตเฉพาะเหล่านี้เมื่อจำเป็น

เพื่อระบุเทมเพลตการลงทะเบียนและการเข้าสู่ระบบสำหรับ Allauth อย่างถูกต้อง เราจะต้องไปที่ไดเร็กทอรี"Lib"ภายในสภาพแวดล้อมเสมือน Python และไปที่โฟลเดอร์"site-packages"จากนั้นไปที่โฟลเดอร์ “allauth” และค้นหาโฟลเดอร์ย่อย “templates” เมื่อตรวจสอบเนื้อหาของโฟลเดอร์ย่อยนี้ โดยเฉพาะโฟลเดอร์"บัญชี"คุณจะค้นพบชื่อเทมเพลตที่เหมาะสมสำหรับหน้าการลงทะเบียนและการเข้าสู่ระบบซึ่งก็คือ"signup.html"และ"login.html"ตามลำดับ เพื่อให้เข้าใจอย่างลึกซึ้งยิ่งขึ้นว่าเทมเพลตเหล่านี้ทำงานอย่างไร อาจจำเป็นต้องตรวจสอบโค้ดที่เกี่ยวข้อง

ขั้นตอนที่ 2: เพิ่มโค้ด HTML ลงในไฟล์เทมเพลตของคุณ

หลังจากสร้างไฟล์ของคุณแล้ว จำเป็นต้องรวมโค้ด HTML ที่ปรับแต่งมาภายในเทมเพลตของคุณ ตามภาพประกอบ เพื่อแก้ไขเทมเพลตการเข้าสู่ระบบเริ่มต้น เราอาจเลือกที่จะจำลองเนื้อหาทั้งหมดที่อยู่ในบล็อก {% else %} ซึ่งรวมถึงแบบฟอร์มและปุ่มส่ง และรวมเข้ากับเทมเพลตที่กำหนดเอง การใช้งานตัวอย่างอาจปรากฏดังนี้:

 {% 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 ใช้เทคนิคที่เรียกว่าการสืบทอดเทมเพลตภายในเฟรมเวิร์กที่ช่วยให้ปรับแต่งเทมเพลตได้โดยการสืบทอดคุณลักษณะและคุณลักษณะจากเทมเพลตพื้นฐานที่มีอยู่แล้ว ในกรณีเฉพาะนี้ โค้ดจะใช้ฟีเจอร์ในตัวของ Django สำหรับการสืบทอดเทมเพลตเพื่อรวมองค์ประกอบเค้าโครงและสไตล์ที่พบในไฟล์ “base.html” ลงในหน้าเข้าสู่ระบบ เพื่อให้แน่ใจว่ามีฟังก์ชันการทำงานที่เหมาะสมที่สุด ขอแนะนำให้กำจัดส่วนประกอบ HTML ที่ไม่ต้องการหรือซ้ำซ้อน รวมถึงแท็ก “ {% blocktrans %}"” ด้วยการทำเช่นนี้ หน้าเข้าสู่ระบบที่ได้จะมีลักษณะใกล้เคียงกับโครงสร้างตัวอย่างที่ให้ไว้

กราฟิกดังกล่าวมีส่วนหัวและส่วนท้ายที่แตกต่างจากที่ปรากฎในที่นี้

ขั้นตอนที่ 3: เพิ่มสไตล์ที่กำหนดเองให้กับแบบฟอร์มของคุณ

เพื่อที่จะเติมแต่งแบบฟอร์มการเข้าสู่ระบบของเราด้วยความสวยงามและรูปลักษณ์ที่น่าดึงดูด จำเป็นต้องเข้าใจความสำคัญของการระบุชื่อเฉพาะให้กับช่องป้อนข้อมูลแต่ละช่องภายในแบบฟอร์มดังกล่าว ด้วยการใช้แท็ก {{ form.as_p }} เราอาจแสดงแบบฟอร์มการเข้าสู่ระบบของเราเป็นการเล่าเรื่องที่สอดคล้องกันเพื่อการโต้ตอบของผู้ใช้ที่ราบรื่น อย่างไรก็ตาม เพื่อที่จะปรับปรุงรูปลักษณ์ของแบบฟอร์มนี้และให้ความรู้สึกถึงการปรับแต่ง จำเป็นอย่างยิ่งที่เราต้องรับรู้ถึงตัวระบุที่ไม่ซ้ำกันที่กำหนดให้กับแต่ละองค์ประกอบภายในแบบฟอร์ม

เพื่อให้ได้ข้อมูลที่จำเป็น ขอแนะนำให้ตรวจสอบหน้าเว็บของตน

กราฟิกแสดงป้ายกำกับที่มาจากช่องป้อนข้อมูลภายในแบบฟอร์ม ซึ่งสอดคล้องกับรายการที่อยู่อีเมล

อันที่จริงอาจมีการรวมฟิลด์แบบฟอร์มแต่ละรายการไว้ภายในโครงการเฉพาะของพวกเขา ตามตัวอย่าง การรวมฟิลด์อีเมลสามารถทำได้ดังนี้:

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

เราสามารถใช้ Bootstrap ร่วมกับโปรเจ็กต์ Django เพื่อตกแต่งรูปร่างให้สวยงามได้อย่างง่ายดาย พิจารณาภาพประกอบต่อไปนี้เป็นจุดอ้างอิง:

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

รหัสที่ให้มาจะใช้การจัดรูปแบบ Bootstrap กับแบบฟอร์มที่กำหนด ซึ่งช่วยให้สามารถเพิ่มฟิลด์เพิ่มเติมรวมถึงการตั้งค่าการออกแบบส่วนบุคคลได้ สำหรับผู้ที่ไม่ต้องการใช้ Bootstrap ในสไตล์ อาจพิจารณาตัวเลือกอื่นที่เรียกว่า"django-crispy-forms"แทน ดังที่แสดงให้เห็นในตัวอย่างที่ตามมา Bootstrap ถูกใช้เพื่อจุดประสงค์ในการสร้างแบบฟอร์ม

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

ส่วนรหัสดังกล่าวคาดว่าจะสร้างผลลัพธ์ที่คล้ายกับภาพประกอบด้านล่าง:

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับแบบฟอร์มใน django-allauth ได้โดยอ่าน เอกสารอย่างเป็นทางการ

แทนที่เทมเพลตใด ๆ ใน django-allauth

Django Allauth มีเทมเพลตมาตรฐานมากมายที่สามารถปรับแต่งตามความต้องการส่วนบุคคล ขั้นตอนที่ระบุไว้ในแหล่งข้อมูลนี้มีความยืดหยุ่นในการปรับเปลี่ยนเทมเพลตใดเทมเพลตหนึ่งเหล่านี้ ขอแนะนำเป็นอย่างยิ่งให้ใช้ Django Allauth เป็นโซลูชันแบบรวมทุกอย่างสำหรับการจัดการการรับรองความถูกต้องของผู้ใช้ ดังนั้นนักพัฒนาจึงสามารถมุ่งความสนใจไปที่การสร้างและเพิ่มประสิทธิภาพด้านที่สำคัญเพิ่มเติมของแอปพลิเคชันซอฟต์แวร์ของตนโดยเฉพาะ