راهنما

آموزش فریمورک فلسک | قالب‌ها و نمایش داده‌ها

استفاده از Jinja2

Jinja2 یک موتور قالب‌سازی (Template Engine) برای زبان پایتون است که به طور پیش‌فرض در فریمورک فلسک استفاده می‌شود. وظیفه اصلی Jinja2 این است که به شما امکان می‌دهد کد HTML را از منطق پایتون جدا کنید و داده‌های پویا را به صفحات وب خود اضافه کنید.

چرا به Jinja2 نیاز داریم؟

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

متغیرها را درون فایل‌های HTML قرار دهید (مانند {{ name }}).
از شرط‌ها و حلقه‌ها درون قالب استفاده کنید (مانند {% if %} و {% for %}).
قالب‌های والد (Base Templates) ایجاد کنید و بخش‌های تکراری را در آن‌ها قرار دهید تا در صفحات دیگر از آن‌ها استفاده مجدد کنید.

ایجاد اولین قالب Jinja2

ساخت پوشه قالب‌ها: در پروژه فلسک خود، یک پوشه به نام templates در همان مسیری که فایل اصلی app.py قرار دارد، ایجاد کنید. فلسک به طور خودکار این پوشه را برای جستجوی قالب‌ها بررسی می‌کند.
ساخت فایل قالب: درون پوشه templates، یک فایل جدید با نام index.html ایجاد کنید و کد زیر را در آن قرار دهید:

<!DOCTYPE html>
<html>
<head>
    <title>صفحه اصلی</title>
</head>
<body>
    <h1>خوش آمدید، {{ name }}!</h1>
    <p>سن شما: {{ age }}</p>
</body>
</html>

در اینجا {{ name }} و {{ age }} متغیرهایی هستند که بعداً از سمت پایتون به آن‌ها مقدار می‌دهیم.

ارسال داده به قالب: در فایل app.py، یک مسیر (Route) تعریف کنید که این قالب را فراخوانی کرده و داده‌ها را به آن ارسال کند:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    user_name = "علی"
    user_age = 25
    return render_template('index.html', name=user_name, age=user_age)

تابع render_template دو کار انجام می‌دهد:

فایل index.html را از پوشه templates پیدا می‌کند.
متغیرهای name و age را به قالب ارسال می‌کند تا درون {{ }} جایگزین شوند.

استفاده از شرط‌ها و حلقه‌ها در Jinja2

شما می‌توانید منطق شرطی و تکرار را مستقیماً درون قالب قرار دهید. مثال زیر را در نظر بگیرید:

فایل قالب (profile.html):

<!DOCTYPE html>
<html>
<body>
    <h1>پروفایل {{ username }}</h1>
    {% if age >= 18 %}
        <p>شما بزرگسال هستید.</p>
    {% else %}
        <p>شما زیر ۱۸ سال هستید.</p>
    {% endif %}

    <ul>
    {% for skill in skills %}
        <li>{{ skill }}</li>
    {% endfor %}
    </ul>
</body>
</html>

کد پایتون:

@app.route('/profile')
def profile():
    data = {
        'username': 'رضا',
        'age': 22,
        'skills': ['Python', 'Flask', 'HTML']
    }
    return render_template('profile.html', **data)

در این مثال:

{% if %} بررسی می‌کند که آیا سن کاربر بالای ۱۸ است یا خیر.
{% for %} لیست مهارت‌ها را تکرار می‌کند و هر آیتم را به صورت یک المان لیست نمایش می‌دهد.
{% endif %} و {% endfor %} برای بستن بلوک‌های شرط و حلقه استفاده می‌شوند.

قالب‌های والد (Base Templates)

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

فایل base.html:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}صفحه پیش‌فرض{% endblock %}</title>
</head>
<body>
    <header>
        <h1>وب‌سایت من</h1>
    </header>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>تمامی حقوق محفوظ است</p>
    </footer>
</body>
</html>

فایل about.html که از base.html ارث‌بری می‌کند:

{% extends "base.html" %}

{% block title %}درباره ما{% endblock %}

{% block content %}
    <h2>این صفحه درباره ماست</h2>
    <p>ما یک تیم کوچک از توسعه‌دهندگان هستیم.</p>
{% endblock %}

حالا وقتی render_template('about.html') را فراخوانی کنید، محتوای about.html در قسمت {% block content %} قرار می‌گیرد و بقیه ساختار از base.html گرفته می‌شود.

نکات مهم

همه متغیرها و بلوک‌های Jinja2 بین {{ }}، {% %} یا {# #} (برای کامنت) قرار می‌گیرند.
اگر متغیری تعریف نشده باشد، Jinja2 به طور پیش‌فرض مقدار None را نمایش می‌دهد (می‌توانید با استفاده از or مقدار پیش‌فرض تنظیم کنید: {{ name or 'کاربر' }}).
فایل‌های قالب باید حتماً در پوشه templates قرار داشته باشند، مگر اینکه مسیر آن را در تنظیمات فلسک تغییر دهید.

با این روش می‌توانید صفحات وب پویا و قابل نگهداری با فلسک ایجاد کنید. در بخش بعدی، یاد خواهید گرفت که چگونه داده‌های ارسالی از فرم‌ها را در قالب نمایش دهید.

پرسش و پاسخ این درس

برای ثبت پرسش ابتدا در سایت وارد شوید.