תבניות ברירת המחדל של ה-django-allauth נראות בוטות ואולי לא מתאימות לצרכים שלך. כך תוכל לעקוף אותם.

django-allauth היא חבילת Django המאפשרת לך לבנות מערכת אימות עבור אפליקציות ה-Django שלך במהירות ובקלות. יש לו תבניות מובנות כדי לאפשר לך להתמקד בחלקים חשובים אחרים של האפליקציה שלך.

למרות שהתבניות המובנות מועילות, תרצה לשנות אותן כי אין להן את ממשק המשתמש הטוב ביותר.

כיצד להתקין ולהגדיר django-allauth

על ידי ביצוע מספר שלבים פשוטים, אתה יכול להתקין בצורה חלקה django-allauth בפרויקט Django שלך.

  1. אתה יכול להתקין django-allauth חבילה באמצעות מנהל החבילות Pip:
    pip install django-allauth
  2. בקובץ ההגדרות של הפרויקט שלך, הוסף את האפליקציות האלה לאפליקציות המותקנות שלך:
    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. הוסף קצה עורפי של אימות לקובץ ההגדרות שלך:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
    4. instagram viewer
  4. הוסף מזהה אתר לפרויקט שלך:
    SITE_ID = 1
  5. הגדר את כתובות האתרים עבור 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/:

תוכל לראות את רשימת כתובות האתרים הזמינות על ידי ניווט אל http://127.0.0.1:8000/accounts/ עם DEBUG=נכון בקובץ ההגדרות שלך.

כיצד לעקוף את תבנית הכניסה ב-django-allauth

ראשית, אתה צריך להגדיר את תבניות תיקייה אם לא עשית זאת. פתח את קובץ ההגדרות שלך ונווט אל תבניות רשימה. בתוכו, אתר את DIRS רשימה, ושנה אותה כך:

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

ודא שיש לך א תבניות תיקיה בספריית הבסיס של הפרויקט שלך. אתה יכול לעקוף את תבנית ההתחברות המוגדרת כברירת מחדל ב-django-allauth על ידי ביצוע השלבים הבאים.

שלב 1: צור את קובצי התבנית שלך

אצלך תבניות תיקיה, צור תיקיה חדשה בשם חֶשְׁבּוֹן להחזיק את התבניות הקשורות ל-django-allauth.

תבניות הרישום והכניסה צריכות להיות signup.html ו login.html בהתאמה. אתה יכול לקבוע את שם התבנית הנכון על ידי פתיחת שלך סביבה וירטואלית של Python ומנווט אל Lib > חבילות אתר > allauth > תבניות > חשבון תיקייה כדי למצוא את התבניות. כדאי לעבור על הקוד כדי להבין איך התבניות עובדות. לדוגמה, תבנית ההתחברות כוללת את הקוד הזה:

שלב 2: הוסף קוד HTML לקובצי התבניות שלך

לאחר יצירת הקבצים שלך, עליך להוסיף את קוד ה-HTML המותאם אישית עבור התבנית שלך. לדוגמה, כדי לעקוף את תבנית ההתחברות למעלה, אולי תרצה להעתיק הכל מה- {% אחר %} בלוק, המכיל את הטופס וכפתור השליחה, והוסיפו אותו לתבנית המותאמת אישית שלך. הנה דוגמה:

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

הקוד לעיל משתמש ירושת התבנית של ג'נגו לרשת תכונות מה base.html תבנית. ודא שאתה מסיר תגים מיותרים כגון {% blocktrans %} תָג. אם עשית זאת, דף הכניסה שלך צריך להיות דומה לזה:

הכותרת העליונה והתחתונה בתמונה למעלה יהיו שונים משלך.

שלב 3: הוסף סגנונות מותאמים אישית לטופס שלך

בשלב הקודם, טופס הכניסה מוצג כפסקה באמצעות ה- {{ form.as_p }} תָג. כדי להוסיף סגנונות לטופס שלך, עליך לדעת את הערך של ה- שֵׁם תכונה הקשורה לכל שדה קלט.

אתה יכול לבדוק את הדף שלך כדי לקבל את הערכים שאתה צריך.

התמונה למעלה מציגה את תכונת השם המשויכת ל- אימייל שדה של הטופס.

כעת, אתה יכול להוסיף את שדות הטופס בנפרד לפרוייקט שלך. לדוגמה, אתה יכול להוסיף את שדה האימייל כך:

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

אתה יכול השתמש ב-Bootstrap עם פרויקט ה-Django שלך כדי לעצב בקלות את הטופס שלך. הנה דוגמה:

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

הקוד לעיל מוסיף לטופס שיעורי טופס Bootstrap. כעת, אתה יכול להוסיף את השדות האחרים שאתה צריך ולעצב אותם לפי העדפתך. אם אתה לא נהנה להשתמש ב-Bootstrap לסטיילינג, django-crispy-forms הוא חלופה לעיצוב הטפסים שלך. הדוגמה שלהלן משתמשת ב- Bootstrap לסטיילינג.

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

בלוק הקוד שלמעלה יפיק פלט דומה לתמונה הבאה:

אתה יכול ללמוד עוד על טפסים ב-django-allauth על ידי קריאת ה תיעוד רשמי.

עוקף כל תבנית ב-django-allauth

django-allauth מכיל תבניות ברירת מחדל רבות שאתה יכול לעקוף. עם השלבים במדריך זה, אתה יכול לעקוף כל תבנית ב-django-allauth. עליך לשקול להשתמש בחבילה זו כדי לטפל במערכת האימות שלך, כדי שתוכל להתמקד בבניית התכונות החשובות האחרות של היישום שלך.