如何覆寫 django-allauth 中的預設模板

django-allauth 是一個 Django 包，可讓您快速輕鬆地為 Django 應用程式建立身份驗證系統。它具有內建模板，可讓您專注於應用程式的其他重要部分。

雖然提供的預設範本可能很有用，但通常需要對其進行修改，因為它們的使用者介面 (UI) 可能與個人的偏好或要求不符。

如何安裝和設定 django-allauth

將 django-allauth 整合到 Django 專案中需要遵守一組簡單的準則，以確保安裝過程順利且不間斷。

⭐ 您可以使用 Pip 套件管理器安裝 django-allauth 套件:

 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',
]

⭐ 將網站 ID 新增到您的專案:

 SITE_ID = 1

⭐ 設定 django-allauth 的 URL:

 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 的列表，請導航至您的「DEBUG=True」設定中的「http://127.0.0.1:8000/accounts/ ”設定檔。

如何覆寫 django-allauth 中的登入模板

為了利用我們的模板系統，必須先確保其「templates」目錄已正確配置。為此，請造訪應用程式的設定檔並導航至「範本」部分。在此部分中，找到“DIRS”子清單並進行相應調整，如下所示:

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

為了促進 Django-Allauth 的集成，在專案的主目錄中建立一個「templates」資料夾至關重要。人們可以選擇透過遵守後續的一組指令來修改 Django-Allauth 提供的標準化登入範本。

第 1 步:建立範本文件

為了在專案中正確組織和管理與 Django Allauth 相關的模板，建議您在現有的「templates」目錄中建立一個名為「account」的指定資料夾。這將允許在需要時進行有效的組織和簡化對這些特定範本的存取。

為了正確識別 Allauth 的註冊和登入模板，必須導航到 Python 虛擬環境中的「Lib」目錄，然後進入「site-packages」資料夾。從那裡，導航到“allauth”資料夾並找到“templates”子資料夾。透過檢查該子資料夾的內容，特別是「account」資料夾，您將發現註冊和登入頁面的相應範本名稱，分別為「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 作為管理使用者身份驗證的全包解決方案，從而使開發人員能夠將精力集中在創建和增強其軟體應用程式的其他關鍵方面。