شکل دادن به پروژه

ما عمداً تا الان به شکل و قیافه‌ی سایت توجّهی نکردیم تا ابتدا روی کارآمدی سایت تمرکز کرده باشیم. این راه خوبی برای توسعه دادن است زیرا یک برنامه تنها زمانی سودمند است که کار کند. البته به محض اطمینان از کارایی، ظاهر آن حیاتی می‌شود تا افراد به استفاده از آن تمایل داشته باشند.

در این بخش برنامه‌ی django-bootstrap4 را معرّفی می‌کنم و به شما نشان می‌دهم که چگونه می‌توان آن را در یک پروژه تجمیع کرد تا برای استقرار آماده شود.

برنامه django-bootstrap4

برای مجتمع کردن بوت‌استرپ در پروژه‌ی خود از django-bootstrap4 استفاده می‌کنیم. این برنامه فایل‌های مورد نیاز بوت‌استرپ را دریافت کرده و آن‌ها را در مکان مناسب داخل پروژه‌ی شما قرار می‌دهد و استفاده از راهنماهای شیوه‌دهی را در قالب‌های پروژه ممکن می‌سازد.

برای نصب django-bootstrap4 فرمان زیر را در یک محیط مجازی فعّال صادر کنید:

1
2
3

(ll_env)learning_log$ pip install django-bootstrap4
--snip--
Successfully installed django-bootstrap4-0.0.7

سپس باید کد زیر را به settings.py اضافه کنید تا django-bootstrap4 در INSTALLED_APPS قرار بگیرد:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

--snip--
INSTALLED_APPS = [
    # My apps.
    'learning_logs',
    'users',
    # Third party apps.
    'bootstrap4',
    # Default django apps.
    'django.contrib.admin',
--snip--

بخش جدیدی به نام Third party apps (برنامه‌های شخص ثالث) برای برنامه‌هایی ایجاد کنید که دیگر توسعه‌دهندگان ساخته‌اند و 'bootstrap4' را به آن بیفزایید. مطمئن شوید که این بخش را پس از # My apps و پیش از بخشی که برنامه‌های پیش‌فرض جانگو را در برمی‌گیرد قرار دهید.

استفاده از بوت‌استرپ برای شکل دادن به Learning Log

بوت‌استرپ مجموعه‌ای بزرگ از ابزارهای شکل‌دهی است.¹⁷³ همچنین تعدادی قالب دارد که می‌توانید آن‌ها را به پروژه‌ی خود اعمال کنید تا شکلی کلّی پیدا کند. استفاده کردن از این قالب‌ها به مراتب ساده‌تر از به‌کارگیری ابزارهای شکل‌دهی متفرقّه است. برای دیدن قالب‌هایی که بوت‌استرپ عرضه می‌کند به https://getbootstrap.com/ بروید، روی Examples کلیک کنید و به دنبال بخش Navbars بگردید. ما از قالب نوار پیمایش ایستا (Navbar Static) استفاده می‌کنیم که یک نوار پیمایش ساده در بالا و یک دربردارنده برای مطالب سایت ارائه می‌کند.

شکل ۲۰-۱ صفحه‌ی خانه را پس از اعمال قالب بوت‌استرپ به base.html و تغییر جزئی index.html نشان می‌دهد.

شکل ۲۰-۱- صفحه‌ی خانه با استفاده از بوت‌استرپ