شکل دادن به مطالب در صفحه‌ی موضوع‌ها

صفحه‌ی موضوع‌ها بیشترین محتوا را در بین صفحه‌های سایت دارد پس کمی کار بیشتری می‌برد. از مولفه‌ی کارت بوت‌استرپ استفاده می‌کنیم تا هر موضوع متمایز به نظر بیاید. کارت یک div با مجموعه‌ای از شیوه‌های منعطف و ازپیش‌تعریف‌شده است که برای نمایش مطالب مرتبط با یک موضوع عالی هستند:

{% extends 'learning_logs/base.html' %}

{% block page_header %}
  <h3>{{ topic }}</h3>
{% endblock page_header %}

{% block content %}
  <p>
  	<a href="{% url 'learning_logs:new_entry' topic.id %}">Add new entry</a>
  </p>
  {% for entry in entries %}
<div class="card mb-3">
  	   <h4 class="card-header">
        {{ entry.date_added|date:'M d, Y H:i' }}
        <small><a href="{% url 'learning_logs:edit_entry' entry.id %}">
        edit entry</a></small>
   </h4>
   <div class="card-body">
      {{ entry.text|linebreaks }}
  	   </div>
 </div>
  {% empty %}
<p>There are no entries for this topic yet.</p>
  {% endfor %}
{% endblock content %}

ابتدا در ۱ موضوع را داخل بخش page_header قرار می‌دهیم. سپس فهرست نامرتّبی را که قبلاً در این قالب به کار برده‌ایم، حذف می‌کنیم. به جای آن هر مطلب را به یک عضو فهرست تبدیل می‌کنیم و یک عنصر div با انتخاب‌گر card در ۲ درست می‌کنیم. این کارت دو عنصر داخلی دارد: یکی که برچسب زمانی و پیوند ویرایش مطلب را نگه می‌دارد و دیگری بدنه‌ی مطلب را در برمی‌گیرد.

اوّلین عنصر داخل کارت عنوانی از نوع <h4> با انتخاب‌گر card-header است (۳). این کارت شامل تاریخ نوشته شدنِ مطلب و پیوندی برای ویرایش آن است. تگ <small> پیرامون پیوند edit_entry باعث می‌شود کوچک‌تر از برچسب زمانی دیده شود (۴). دومین عنصر یک div با انتخاب‌گر card-body است (۵) که متن مطلب را داخل یک جعبه‌ی ساده در کارت قرار می‌دهد. توجّه کنید که کد جانگو برای آوردن اطّلاعات در صفحه تغییر نکرده است؛ تنها عنصرهایی تغییر کرده‌اند که ظاهراً صفحه را تحت تأثیر قرار می‌دهند.

شکل ۲۰-۳ صفحه‌ی موضوع را با ظاهر جدید نمایش می‌دهد. عملکرد سایت عوض نشده امّا اکنون به نظر کاربران حرفه‌ای‌تر و جذّاب‌تر می‌آید.

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

خودآزمایی

۲۰-۱- فرم‌های دیگر: شیوه‌های بوت‌استرپ را به صفحه‌ی ورود اعمال کردیم. تغییراتی مشابه را در بقیه‌ی صفحه‌های فرم‌دار مانند new_topic، new_entry، edit_entry و register اعمال کنید.

۲۰-۲- بلاگ خوش‌قیافه: از بوت‌استرپ برای شکل دادن به پروژه‌ی وبلاگی که در فصل ۱۹ ساختید استفاده کنید.