آراستن صفحه‌ی ورود

ما ظاهر کلی صفحه‌ی ورود را بازنگری کردیم امّا هنوز به فرم ورود نپرداخته‌ایم. حال با تغییر دادن فایل login.html کاری می‌کنیم که این فرم مشابه بخش‌های صفحه به نظر بیاید:

{% extends "learning_logs/base.html" %}
{% load bootstrap4 %}

{% block page_header %}
  <h2>Log in to your account.</h2>
{% endblock page_header %}

{% block content %}
  <form method="post" action="{% url 'users:login' %}" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
  <button name="submit" class="btn btn-primary">Log in</button>
{% endbuttons %}
<input type="hidden" name="next"
   value="{% url 'learning_logs:index' %}" />
  </form>
{% endblock content %}

در ۱ تگ‌های قالبی bootstrap4 را وارد قالب خود می‌کنیم. در ۲ قسمت page_header را تعریف می‌کنیم که به کاربر توضیح می‌دهد این صفحه چه می‌کند. دقّت کنید که بخش {% if form.errors %} را از قالب حذف کرده‌ایم زیرا django-bootstrap4 به طور خودکار خطاهای فرم را مدیریّت می‌کند.

در ۳ مشخّصه‌ی class="form" را اضافه می‌کنیم و سپس از تگ قالبی {% bootstrap_form %} برای نمایش فرم استفاده می‌کنیم (۴)؛ این تگ جایگزین {{ form.as_p }} به‌کاررفته در فصل ۱۹ می‌شود. تگ قالبی {% bootstrap_form %} هنگام تولید فرم قواعد شکل‌دهی بوت‌استرپ را به تک تک اعضای آن اعمال می‌کند. در ۵ یک تگ قالبی {% buttons %} باز می‌کنیم که شکل‌دهی بوت‌استرپ را به دکمه‌ها اعمال می‌کند.

شکل ۲۰-۲ فرم ورود را پس از تغییرات نشان می‌دهد. این صفحه بسیار تمیزتر شده، شکل آن مشابه بقیه‌ی صفحه‌ها شده و هدف مشخّصی دارد. سعی کنید با نام کاربری یا گذرواژه‌ای نادرست وارد شوید؛ خواهید دید که حتّی شیوه‌ی پیام‌های خطا هم یک‌شکل است و به کلیّت سایت می‌خورد.

شکل ۲۰-۲: صفحه‌ی ورود به کمک بوت‌استرپ شکل گرفته است.