استایل‌دهی به اپلیکیشن وب

آموزش پایتون

مقدمه

به فصل پایانی این دوره، «استایل‌دهی و استقرار»، خوش آمدید! تاکنون، ما بر روی ساختار و عملکرد اپلیکیشن Learning Log تمرکز کرده‌ایم. در این فصل، ما ظاهر اپلیکیشن خود را بهبود خواهیم داد تا از نظر بصری جذاب‌تر و استفاده از آن ساده‌تر شود. سپس، آن را بر روی یک سرور زنده مستقر خواهیم کرد تا برای عموم قابل دسترس باشد.

برای استایل‌دهی سریع و حرفه‌ای، ما از یک فریم‌ورک محبوب CSS به نام Bootstrap استفاده خواهیم کرد.

استفاده از Bootstrap

Bootstrap مجموعه‌ای از کلاس‌های CSS و کامپوننت‌های جاوااسکریپت از پیش آماده شده است که به ما اجازه می‌دهد تا به سرعت رابط‌های کاربری زیبا و واکنش‌گرا (responsive) بسازیم. برای استفاده از آن، ما تمپلیت پایه خود (base.html) را طوری تغییر می‌دهیم که فایل‌های CSS و JS مربوط به Bootstrap را از یک CDN (Content Delivery Network) بارگذاری کند.

Copy Icon HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learning Log</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="..." crossorigin="anonymous">
  </head>
  <body>
    <!-- Page content goes here. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="..." crossorigin="anonymous"></script>
  </body>
</html>

ما لینک فایل CSS را در <head> و تگ <script> مربوط به جاوااسکریپت را در انتهای <body> قرار می‌دهیم.

استایل‌دهی به تمپلیت پایه

اکنون که Bootstrap را اضافه کرده‌ایم، می‌توانیم با استفاده از کلاس‌های CSS آن، یک نوار ناوبری (navbar) زیبا و یک کانتینر اصلی برای محتوای صفحه خود بسازیم.

Copy Icon base.html 
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 border">
  <div class="container-fluid">
    <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
      Learning Log</a>
    
    <!-- Navigation links -->
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'learning_logs:topics' %}">
            Topics</a></li>
      </ul>
      <!-- User auth links -->
      <ul class="navbar-nav ms-auto mb-2 mb-md-0">
        {% if user.is_authenticated %}
          <li class="nav-item">
            <span class="navbar-text me-2">Hello, {{ user.username }}.</span>
          </li>
        {% else %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'users:register' %}">Register</a>
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

<main class="container">
  <div class="pb-2 mb-2 border-bottom">
    {% block page_header %}{% endblock page_header %}
  </div>
  <div>
    {% block content %}{% endblock content %}
  </div>
</main>

ما از کلاس‌های navbar، container، nav-link و غیره برای استایل‌دهی به اجزای مختلف صفحه استفاده کرده‌ایم. همچنین یک بلاک جدید به نام page_header برای نمایش عنوان هر صفحه اضافه کرده‌ایم.

به‌روزرسانی تمپلیت‌های فرزند

در نهایت، تمپلیت‌های فرزند (مانند index.html و topics.html) را به‌روزرسانی می‌کنیم تا از بلاک page_header جدید استفاده کنند.

Copy Icon topics.html 
{% extends "learning_logs/base.html" %}

{% block page_header %}
  <h1>Topics</h1>
{% endblock page_header %}

{% block content %}
  <!-- ... (rest of the template) ... -->
{% endblock content %}

با این تغییرات، اپلیکیشن ما اکنون یک ظاهر تمیز، مدرن و حرفه‌ای دارد.

در این درس، ما با استفاده از فریم‌ورک Bootstrap، ظاهر اپلیکیشن وب خود را به طور کامل بازسازی کردیم. با استفاده از کلاس‌های CSS از پیش آماده شده، توانستیم به سرعت یک رابط کاربری زیبا و واکنش‌گرا ایجاد کنیم. در درس پایانی این دوره، به سراغ «استقرار اپلیکیشن وب» خواهیم رفت و یاد می‌گیریم که چگونه پروژه Django خود را روی یک سرور زنده مانند Heroku مستقر کرده و آن را در دسترس تمام دنیا قرار دهیم.