چگونه الگوهای پیش‌فرض را در جنگو-آلاوت لغو کنیم

الگوهای پیش‌فرض django-allauth بی‌نقص به نظر می‌رسند و ممکن است متناسب با نیازهای شما نباشند. در اینجا نحوه غلبه بر آنها آورده شده است.

django-allauth یک بسته جنگو است که به شما امکان می دهد یک سیستم احراز هویت برای برنامه های جنگو خود را به سرعت و به راحتی بسازید. دارای قالب‌های داخلی است که به شما امکان می‌دهد روی سایر بخش‌های مهم برنامه خود تمرکز کنید.

اگرچه قالب‌های داخلی مفید هستند، اما می‌خواهید آنها را تغییر دهید زیرا بهترین رابط کاربری را ندارند.

چگونه django-allauth را نصب و پیکربندی کنیم

با دنبال کردن چند مرحله ساده، می توانید به طور یکپارچه django-allauth را در پروژه جنگو خود نصب کنید.

1. می توانید بسته django-allauth را با استفاده از مدیر بسته Pip نصب کنید: pip install django-allauth
2. در فایل تنظیمات پروژه‌تان، این برنامه‌ها را به برنامه‌های نصب‌شده خود اضافه کنید: INSTALLED_APPS = [    “””    برنامه‌های دیگر خود را اینجا اضافه کنید    “””    # برنامه‌های پیکربندی Djang-allauth    ‘django.contrib.sites’, ‘th, , ‘all. ‘،    ‘allauth.socialaccount’، # اگر می‌خواهید احراز هویت اجتماعی را فعال کنید، این را اضافه کنید]
3. پشتیبان‌های احراز هویت را به فایل تنظیمات خود اضافه کنید: AUTHENTICATION_BACKENDS = [    ‘django.contrib.auth.backends.ModelBackend’،    ‘allauth.account.auth_backends.AuthenticationBackend’،]
4. یک شناسه سایت به پروژه خود اضافه کنید: SITE_ID = 1
5. URL ها را برای django-allauth پیکربندی کنید: از مسیر واردات django.urls، includeurlpatterns = [    # Djang-allauth url pattern     path(‘accounts/’, include(‘allauth.urls’))،]

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

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=True در فایل تنظیمات، لیست URL های موجود را مشاهده کنید.

نحوه لغو الگوی ورود در جنگو-اللاوت

اگر این کار را انجام نداده اید ابتدا باید پوشه قالب های خود را پیکربندی کنید. فایل تنظیمات خود را باز کنید و به لیست TEMPLATES بروید. در داخل آن، لیست DIRS را بیابید و آن را به شکل زیر تغییر دهید:

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

مطمئن شوید که یک پوشه templates در پوشه اصلی پروژه خود دارید. با دنبال کردن این مراحل بعدی می‌توانید الگوی ورود پیش‌فرض را در django-allauth لغو کنید.

مرحله 1: فایل های قالب خود را ایجاد کنید

در پوشه templates خود، یک پوشه جدید به نام حساب ایجاد کنید تا قالب های مربوط به django-allauth را در خود نگه دارید.

الگوهای ثبت نام و ورود باید به ترتیب signup.html و login.html باشند. می‌توانید با باز کردن محیط مجازی پایتون و پیمایش به Lib > site-packages > allauth > templates > پوشه حساب، نام قالب صحیح را برای یافتن الگوها تعیین کنید. برای درک نحوه کار قالب ها باید کد را مرور کنید. به عنوان مثال، الگوی ورود این کد را در خود دارد:

مرحله 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 %}

کد بالا از وراثت قالب جنگو برای به ارث بردن ویژگی ها از قالب base.html استفاده می کند. اطمینان حاصل کنید که برچسب های غیر ضروری مانند تگ {% blocktrans %} را حذف کرده اید. اگر این کار را انجام داده اید، صفحه ورود شما باید مشابه این باشد:

هدر و پاورقی در تصویر بالا با شما متفاوت خواهد بود.

مرحله 3: سبک های سفارشی را به فرم خود اضافه کنید

در مرحله قبل، فرم ورود به سیستم با استفاده از تگ {{ form.as_p }} به صورت پاراگراف ارائه می شود. برای افزودن سبک به فرم خود، باید ارزش ویژگی name مرتبط با هر فیلد ورودی را بدانید.

می توانید صفحه خود را بررسی کنید تا مقادیر مورد نیاز خود را بدست آورید.

تصویر بالا ویژگی نام مرتبط با فیلد ایمیل فرم را نشان می دهد.

اکنون می توانید فیلدهای فرم را به صورت جداگانه در پروژه خود اضافه کنید. به عنوان مثال، می توانید فیلد ایمیل را مانند این اضافه کنید:

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

شما می توانید از بوت استرپ با پروژه جنگو خود استفاده کنید تا به راحتی فرم خود را فرم دهید. در اینجا یک مثال است:

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

کد بالا کلاس های فرم بوت استرپ را به فرم اضافه می کند. اکنون، می توانید سایر فیلدهای مورد نیاز خود را اضافه کنید و آنها را به دلخواه خود استایل دهید. اگر از استفاده از 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 شامل بسیاری از الگوهای پیش فرض است که می توانید آنها را لغو کنید. با مراحل این راهنما، می‌توانید هر قالبی را در جنگو-آلاوت لغو کنید. باید از این بسته برای مدیریت سیستم احراز هویت خود استفاده کنید تا بتوانید روی ساخت سایر ویژگی های مهم برنامه خود تمرکز کنید.

منبع مقاله