فصل ۶: تمپلیت‌ها در جنگو

""

سرفصل‌های این فصل:

  1. آشنایی با مفهوم تمپلیت در جنگو
  2. متغیرها و تگ‌ها در تمپلیت‌ها
  3. استفاده از Bootstrap در تمپلیت‌ها (برای ظاهر حرفه‌ای‌تر صفحات)

1. آشنایی با مفهوم تمپلیت (Template) در جنگو

تمپلیت‌ها فایل‌های HTML هستند که جنگو با کمک آن‌ها صفحات سایت را تولید می‌کند. با تمپلیت، می‌توانیم داده‌های داینامیک (که از View می‌فرستیم) را در قالب HTML نمایش بدهیم.

مثال:

شما در View یک لیست کتاب به تمپلیت می‌فرستید و تمپلیت آن لیست را در بخش خاصی چاپ می‌کند.

2. متغیرها و تگ‌ها در تمپلیت‌های جنگو

۲.۱ متغیرها:

هر چیزی که داخل دو آکولاد ({{ ... }}) بنویسید، مقدارش از View منتقل می‌شود.

نمونه استفاده:
فرض کنید در View این دیکشنری را ارسال می‌کنید:

# views.py
def home(request):
    context = {
        'user_name': 'علی',
        'languages': ['پایتون', 'جاوااسکریپت', 'جنگو']
    }
    return render(request, 'home.html', context)

در تمپلیت:

<!-- home.html -->
<h1>سلام {{ user_name }}!</h1>
<ul>
    {% for lang in languages %}
        <li>{{ lang }}</li>
    {% endfor %}
</ul>

نتیجه:
لیستی از زبان‌ها برای کاربر “علی” نمایش داده می‌شود.

۲.۲ تگ‌ها:

تگ‌ها قابلیت‌های بیشتری به شما می‌دهند (مثل شرط و حلقه).

  • حلقه:
  {% for x in list %}
      {{ x }}
  {% endfor %}
  • شرط:
  {% if user_name %}
      سلام {{ user_name }}
  {% else %}
      سلام مهمان!
  {% endif %}

۲.۳ فایل‌های پایه (base.html) و extend کردن:

برای اینکه کدهای تکراری (مثل هد و فوتر) ننویسیم، می‌تونیم یک فایل base.html داشته باشیم و بقیه صفحات را از آن ارث‌بری کنیم.

base.html:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}سایت من{% endblock %}</title>
</head>
<body>
    <header>هدر سایت من</header>
    <main>
        {% block content %}
        {% endblock %}
    </main>
    <footer>فوتر سایت من</footer>
</body>
</html>

home.html (ارث‌بری از base.html):

{% extends "base.html" %}
{% block title %}صفحه اصلی{% endblock %}
{% block content %}
    <h1>خوش آمدید به صفحه اصلی</h1>
{% endblock %}

3. استفاده از Bootstrap در تمپلیت‌ها

برای ظاهر حرفه‌ای‌تر صفحات می‌تونید Bootstrap را در تمپلیت‌ها اضافه کنید.
نحوه اضافه کردن:
در <head> تمپلیت اصلی (مثلاً base.html):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.rtl.min.css">

حالا می‌توانید از کلاس‌های bootstrap استفاده کنید:

<button class="btn btn-primary">کلیک کن</button>
<ul class="list-group">
    {% for lang in languages %}
        <li class="list-group-item">{{ lang }}</li>
    {% endfor %}
</ul>

جمع‌بندی سریع

  • تمپلیت‌ها رابط HTML سایت شما هستند و داده‌ها را داینامیک نمایش می‌دهند.
  • با متغیرها و تگ‌ها محتوای متغیر و منطق‌های ساده (حلقه/شرط) می‌سازید.
  • با base.html و ارث‌بری، کدنویسی تمیز و مرتب دارید.
  • با Bootstrap، بدون دردسر ظاهر صفحات را شیک و حرفه‌ای می‌کنید!

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *