Cách ghi đè các mẫu mặc định trong django-allauth

Maya Patel included in Programming Python Web Development Coding Tutorials

2023-10-03 1557 words 8 minutes

Contents

django-allauth là gói Django cho phép bạn xây dựng hệ thống xác thực cho ứng dụng Django của mình một cách nhanh chóng và dễ dàng. Nó có các mẫu dựng sẵn để cho phép bạn tập trung vào các phần quan trọng khác của ứng dụng.

Mặc dù các mẫu mặc định được cung cấp có thể hữu ích nhưng thường cần phải sửa đổi chúng vì giao diện người dùng (UI) của chúng có thể không phù hợp với sở thích hoặc yêu cầu của một người.

Cách cài đặt và cấu hình django-allauth

Việc tích hợp django-allauth vào dự án Django yêu cầu phải tuân thủ một bộ nguyên tắc đơn giản để đảm bảo quá trình cài đặt suôn sẻ và không bị gián đoạn.

⭐ Bạn có thể cài đặt gói django-allauth bằng cách sử dụng trình quản lý gói Pip:

 pip install django-allauth

⭐ Trong tệp cài đặt dự án của bạn, hãy thêm các ứng dụng này vào các ứng dụng đã cài đặt của bạn:

 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
]

⭐ Thêm phần phụ trợ xác thực vào tệp cài đặt của bạn:

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

⭐ Thêm ID trang web vào dự án của bạn:

 SITE_ID = 1

⭐ Định cấu hình URL cho django-allauth:

 from django.urls import path, include

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

Nếu cấu hình của bạn được thực thi chính xác, việc điều hướng đến http://127.0.0.1:8000/accounts/signup/ sẽ hiển thị một mẫu giống như sau:

Để truy cập danh sách các URL có thể truy cập, hãy điều hướng đến “ http://127.0.0.1:8000/accounts/ ” trong cài đặt “DEBUG=True” trong tập tin cấu hình.

Cách ghi đè mẫu đăng nhập trong django-allauth

Để sử dụng hệ thống mẫu của chúng tôi, trước tiên người ta phải đảm bảo rằng thư mục “mẫu” của họ đã được cấu hình đúng cách. Để làm như vậy, vui lòng truy cập vào tệp cấu hình ứng dụng của bạn và điều hướng đến phần “MẪU”. Trong phần này, tìm danh sách phụ “DIRS” và điều chỉnh nó cho phù hợp như minh họa bên dưới:

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

Để tạo điều kiện thuận lợi cho việc tích hợp Django-Allauth, điều quan trọng là phải thiết lập sự hiện diện của thư mục “mẫu” nằm trong thư mục chính của dự án của bạn. Người ta có thể chọn sửa đổi mẫu đăng nhập được tiêu chuẩn hóa do Django-Allauth cung cấp thông qua việc tuân thủ bộ hướng dẫn tiếp theo.

Bước 1: Tạo tệp mẫu của bạn

Để tổ chức và quản lý hợp lý các mẫu được liên kết với Django Allauth trong dự án của bạn, bạn nên thiết lập một thư mục được chỉ định có tên “tài khoản” trong thư mục “mẫu” hiện có của bạn. Điều này sẽ cho phép tổ chức hiệu quả và hợp lý hóa khả năng truy cập vào các mẫu cụ thể này khi cần.

Để xác định chính xác các mẫu đăng ký và đăng nhập cho Allauth, người ta phải điều hướng đến thư mục “Lib” trong môi trường ảo Python của họ và tiến tới thư mục “gói trang web”. Từ đó, điều hướng đến thư mục “allauth” và tìm thư mục con “templates”. Bằng cách kiểm tra nội dung của thư mục con này, cụ thể là thư mục “tài khoản”, bạn sẽ phát hiện ra tên mẫu thích hợp cho các trang đăng ký và đăng nhập lần lượt là “signup.html” và “login.html”. Để hiểu sâu hơn về cách các mẫu này hoạt động, có thể cần phải xem lại mã liên quan.

Bước 2: Thêm mã HTML vào tệp mẫu của bạn

Sau khi tạo tệp, điều cần thiết là phải kết hợp mã HTML phù hợp trong mẫu của bạn. Như một minh họa, để sửa đổi mẫu đăng nhập mặc định, người ta có thể chọn sao chép tất cả nội dung có trong khối {% else %}, bao gồm biểu mẫu và nút gửi, đồng thời tích hợp nó vào một mẫu tùy chỉnh. Việc triển khai mẫu có thể xuất hiện như sau:

 {% 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 sử dụng một kỹ thuật được gọi là kế thừa mẫu trong khuôn khổ của nó, cho phép tùy chỉnh mẫu bằng cách kế thừa các thuộc tính và đặc điểm từ các mẫu cơ sở có sẵn. Trong trường hợp cụ thể này, mã sử dụng tính năng tích hợp sẵn của Django để kế thừa mẫu nhằm kết hợp các phần tử bố cục và kiểu dáng có trong tệp “base.html” vào trang đăng nhập. Để đảm bảo chức năng tối ưu, bạn nên loại bỏ mọi thành phần HTML không mong muốn hoặc dư thừa, bao gồm thẻ “ {% blocktrans %}"”. Bằng cách đó, trang đăng nhập thu được sẽ gần giống với cấu trúc ví dụ được cung cấp.

Đồ họa nói trên có chứa đầu trang và chân trang khác với những gì được mô tả ở đây.

Bước 3: Thêm kiểu tùy chỉnh vào biểu mẫu của bạn

Để làm cho biểu mẫu đăng nhập của chúng tôi có sức hấp dẫn về mặt thẩm mỹ và hình ảnh, cần phải hiểu tầm quan trọng của việc gán tên cụ thể cho các trường nhập riêng lẻ trong biểu mẫu nói trên. Bằng cách sử dụng thẻ {{ form.as_p }}, chúng tôi có thể hiển thị biểu mẫu đăng nhập của mình một cách hiệu quả dưới dạng một câu chuyện gắn kết để người dùng tương tác liền mạch. Tuy nhiên, để nâng cao hình thức của biểu mẫu này và mang lại cho nó cảm giác tinh tế hơn, điều quan trọng là chúng ta phải nhận thức được mã định danh duy nhất được gán cho từng thành phần riêng lẻ trong biểu mẫu.

Để có được dữ liệu cần thiết, bạn nên kiểm tra trang web của họ.

Đồ họa mô tả nhãn được gán cho trường đầu vào trong biểu mẫu, tương ứng với mục nhập địa chỉ email.

Thật vậy, người ta có thể bao gồm các trường biểu mẫu riêng lẻ trong dự án cụ thể của họ. Ví dụ: việc kết hợp trường email có thể được thực thi như sau:

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

Người ta có thể sử dụng Bootstrap kết hợp với dự án Django để dễ dàng tạo cho hình thức của mình một diện mạo trực quan hấp dẫn. Hãy xem hình minh họa sau đây làm điểm tham khảo:

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

Mã được cung cấp áp dụng định dạng Bootstrap cho một biểu mẫu nhất định, cho phép bổ sung các trường khác cũng như các tùy chọn thiết kế được cá nhân hóa. Đối với những người không muốn sử dụng Bootstrap trong phong cách của họ, một tùy chọn thay thế được gọi là “django-crispy-forms” có thể được xem xét thay thế. Như được minh họa bằng ví dụ tiếp theo, Bootstrap được sử dụng cho mục đích tạo kiểu cho biểu mẫu.

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

Đoạn mã nói trên dự kiến sẽ tạo ra kết quả giống như hình minh họa được mô tả bên dưới:

Bạn có thể tìm hiểu thêm về các biểu mẫu trong django-allauth bằng cách đọc tài liệu chính thức.

Ghi đè bất kỳ mẫu nào trong django-allauth

Django Allauth cung cấp vô số mẫu tiêu chuẩn có thể được điều chỉnh theo sở thích cá nhân. Các quy trình được nêu trong tài nguyên này mang lại sự linh hoạt để sửa đổi bất kỳ mẫu nào trong số này. Chúng tôi khuyên bạn nên sử dụng Django Allauth như một giải pháp toàn diện để quản lý xác thực người dùng, từ đó cho phép các nhà phát triển tập trung nỗ lực hoàn toàn vào việc tạo và nâng cao các khía cạnh quan trọng bổ sung của ứng dụng phần mềm của họ.