أساسيات إطار العمل Flask: القوالب

يُعد إطار العمل Flask واحدًا من أشهر أُطُر العمل البرمجية في لغة بايثون لتطوير تطبيقات الويب، حيث يتميز بالبساطة والمرونة والقدرة على التخصيص، مما جعله خيارًا مثاليًا للمطورين الذين يرغبون في بناء تطبيقات ويب خفيفة الوزن وقابلة للتوسع بسهولة. أحد أهم المفاهيم الجوهرية في Flask هو مفهوم القوالب (Templates)، التي تمكّن المطورين من فصل منطق البرمجة عن واجهة المستخدم، مما يسهل عملية التصميم، الإدارة، والتطوير المستقبلي للتطبيقات.

في هذا المقال، سيتم تناول أساسيات التعامل مع القوالب في Flask بشكل معمق، بدءًا من المفهوم العام للقوالب، مرورًا بطريقة استخدامها، وصولًا إلى تفاصيل متقدمة مثل التكرار، التحقق من الشروط، وإدارة القوالب المتعددة، مع تقديم أمثلة عملية وشروحات مفصلة تتيح للمطورين فهم كيفية الاستفادة الكاملة من هذه الخاصية الحيوية في إطار العمل Flask.

---

مفهوم القوالب في Flask

القوالب هي ملفات HTML تحتوي على تعليمات برمجية يمكن إدخال بيانات متغيرة فيها لتوليد صفحات ويب ديناميكية. عند استخدام Flask، لا يتم كتابة صفحات الويب مباشرة داخل ملفات بايثون، بل يتم إنشاء ملفات القوالب بشكل منفصل باستخدام نظام القوالب Jinja2، والذي يأتي مدمجًا مع Flask.

يسمح نظام القوالب Jinja2 للمطورين بإضافة عناصر برمجية مثل المتغيرات، الحلقات، الشروط، والتكرار داخل ملفات HTML، والتي يتم تفسيرها أثناء تشغيل التطبيق، بحيث يتم توليد محتوى HTML مخصص ديناميكيًا بناءً على بيانات التطبيق أو طلبات المستخدم.

---

هيكلية مجلد القوالب في مشروع Flask

عند بدء مشروع باستخدام Flask، من الأفضل اتباع هيكلية منظمة للملفات والمجلدات، حيث يُخصص مجلد باسم templates لتخزين جميع ملفات القوالب. يقوم Flask تلقائيًا بالبحث داخل هذا المجلد عند طلب أي قالب لعرضه.

مثال على هيكلية مشروع بسيطة:

csharp
CopyEdit
my_flask_app/
│
├── app.py
├── static/
│   ├── css/
│   ├── js/
│   └── images/
└── templates/
    ├── base.html
    ├── index.html
    └── about.html

• app.py: ملف التطبيق الرئيسي.

• templates/: مجلد القوالب الذي يحتوي على ملفات HTML.

• static/: مجلد للملفات الثابتة مثل الصور، ملفات CSS، وJavaScript.

هذه الهيكلية تعزز من تنظيم المشروع وتجعل من السهل إدارة الملفات.

---

إنشاء القوالب باستخدام Jinja2

تعتمد ملفات القوالب في Flask على لغة قوالب Jinja2 التي توفر مجموعة من الأدوات الأساسية لبناء صفحات HTML ديناميكية، من أهمها:

1. المتغيرات Variables

يمكن إدخال المتغيرات من كود البايثون إلى القالب باستخدام الأقواس المعقوفة المزدوجة {{ }}.

مثال:

html
CopyEdit
<h1>مرحبًا، {{ username }}!h1>

عند تمرير متغير username من التطبيق إلى القالب، يتم استبداله بالقيمة الفعلية له.

2. التحكم في التدفق Flow Control

– الشروط Conditions

تُستخدم في القوالب للتحكم في عرض أجزاء معينة بناءً على شروط محددة:

html
CopyEdit
{% if user.is_authenticated %}
    <p>مرحبًا بك، {{ user.name }}!p>
{% else %}
    <p>الرجاء تسجيل الدخول.p>
{% endif %}

– الحلقات Loops

تستخدم لتكرار عرض مجموعة بيانات:

html
CopyEdit
<ul>
{% for item in items %}
    <li>{{ item }}li>
{% endfor %}
ul>

3. الاستدعاءات Calls والتضمين Includes

يتيح Jinja2 إمكانية إعادة استخدام القوالب أو أجزاء منها باستخدام التضمين:

html
CopyEdit
{% include 'header.html' %}

كما يدعم إنشاء قوالب أساسية يمكن للصفحات الأخرى وراثتها باستخدام مفهوم الوراثة (Inheritance) وهو ما سيتم شرحه لاحقًا.

---

طريقة ربط القوالب مع Flask

في Flask، تُستخدم الدالة render_template لربط ملفات القوالب بالبيانات التي يتم تمريرها من جانب الخادم (Server Side). هذه الدالة تُرسل المحتوى النهائي للعميل (المتصفح).

مثال بسيط على استخدام render_template:

python
CopyEdit
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    user = {'username': 'أحمد'}
    return render_template('index.html', username=user['username'])

if __name__ == '__main__':
    app.run(debug=True)

في المثال أعلاه، يتم إرسال متغير username إلى القالب index.html، حيث يتم عرضه داخل الصفحة باستخدام {{ username }}.

---

الوراثة في القوالب Template Inheritance

الوراثة في قوالب Flask (المبنية على Jinja2) تعتبر من أقوى الأدوات التي تسهل بناء واجهات متسقة وتسمح بإعادة استخدام الكود بين عدة صفحات.

المفهوم الأساسي

يمكن إنشاء قالب رئيسي (Base Template) يحتوي على الهيكل العام للصفحة مثل رأس الصفحة (Header)، قائمة التنقل (Navbar)، وتذييل الصفحة (Footer). بعدها، يمكن للصفحات الفرعية (Child Templates) وراثة هذا القالب وتحديد المحتوى الخاص بها في مناطق معينة تعرف بـ “Blocks”.

مثال عملي

1. قالب أساسي base.html:

html
CopyEdit
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}عنوان الصفحة{% endblock %}title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
head>
<body>
    <header>
        <h1>موقعي الإلكترونيh1>
        <nav>
            <a href="/">الرئيسيةa>
            <a href="/about">حولa>
        nav>
    header>

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

    <footer>
        <p>حقوق النشر © 2025p>
    footer>
body>
html>

2. قالب فرعي index.html يرث من base.html:

html
CopyEdit
{% extends "base.html" %}

{% block title %}الصفحة الرئيسية{% endblock %}

{% block content %}
    <h2>مرحبًا بك في الصفحة الرئيسيةh2>
    <p>هذا نص تعريفي للصفحة.p>
{% endblock %}

باستخدام هذه الطريقة، يمكن إضافة صفحات جديدة دون الحاجة إلى تكرار كود HTML المشترك، مما يسهل الصيانة وتحديث التصميم.

---

التعامل مع ملفات القوالب المتعددة

في المشاريع الكبيرة، غالبًا ما يحتاج المطور إلى تنظيم القوالب داخل مجلدات فرعية داخل مجلد templates لتسهيل الإدارة.

مثال:

pgsql
CopyEdit
templates/
├── admin/
│   ├── dashboard.html
│   └── users.html
├── auth/
│   ├── login.html
│   └── register.html
└── base.html

عند استدعاء قالب داخل مجلد فرعي، يتم كتابة المسار النسبي للقالب في render_template:

python
CopyEdit
return render_template('admin/dashboard.html')

---

تمرير البيانات إلى القوالب

إلى جانب المتغيرات البسيطة، يمكن تمرير أنواع بيانات معقدة إلى القوالب، مثل القوائم (Lists)، القواميس (Dictionaries)، وحتى الكائنات.

مثال مع قائمة

python
CopyEdit
items = ['تفاحة', 'موز', 'برتقال']

return render_template('list.html', items=items)

وفي القالب:

html
CopyEdit
<ul>
{% for item in items %}
    <li>{{ item }}li>
{% endfor %}
ul>

مثال مع قاموس

python
CopyEdit
user = {'name': 'علي', 'age': 30, 'city': 'الرياض'}

return render_template('profile.html', user=user)

وفي القالب:

html
CopyEdit
<p>الاسم: {{ user.name }}p>
<p>العمر: {{ user.age }}p>
<p>المدينة: {{ user.city }}p>

---

استخدام الفلاتر Filters في Jinja2

الفلاتر في Jinja2 هي أدوات تُستخدم لتعديل البيانات قبل عرضها في القالب. تُكتب بعد المتغير باستخدام علامة الـ |.

بعض الفلاتر الشائعة

• {{ name|lower }}: يحول النص إلى أحرف صغيرة.

• {{ name|upper }}: يحول النص إلى أحرف كبيرة.

• {{ text|truncate(20) }}: يختصر النص إلى 20 حرفًا.

• {{ value|default('غير متوفر') }}: يعرض القيمة الافتراضية إذا كانت القيمة فارغة.

مثال عملي:

html
CopyEdit
<p>الاسم: {{ user.name|upper }}p>
<p>الوصف: {{ description|truncate(50) }}p>

---

تضمين ملفات CSS وJavaScript في القوالب

يتيح Flask إدارة الملفات الثابتة مثل ملفات CSS وJavaScript باستخدام مجلد static. للربط بينها وبين القوالب يتم استخدام دالة url_for.

مثال داخل ملف قالب HTML:

html
CopyEdit
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/main.js') }}">script>

هذه الطريقة تضمن توليد الروابط الصحيحة للملفات الثابتة، حتى لو تغير موقع التطبيق أو تم نشره على خادم مختلف.

---

التقاط الأخطاء في القوالب

نظرًا لأن القوالب تستخدم لغة مخصصة، قد تحدث أخطاء أثناء تنفيذ القالب، مثل نسيان إغلاق قوس {% endif %} أو تمرير متغير غير معرف. يتعامل Flask مع هذه الأخطاء بشكل يسمح برصدها أثناء التطوير من خلال عرض رسالة خطأ واضحة.

لذلك من الأفضل أثناء التطوير استخدام وضع التصحيح (Debug Mode) في Flask:

python
CopyEdit
app.run(debug=True)

وهذا يُظهر الأخطاء التفصيلية المتعلقة بالقوالب في المتصفح، مما يساعد في تصحيحها بسرعة.

---

خلاصة جدولية لأنواع الأدوات في قوالب Flask (Jinja2)

---

تطبيق عملي متكامل

يمكن توضيح الاستخدام الكامل للقوالب في تطبيق Flask بسيط يعرض صفحة رئيسية وقائمة مقالات مع وراثة قالب أساسي:

ملف التطبيق app.py

python
CopyEdit
from flask import Flask, render_template

app = Flask(__name__)

articles = [
    {'title': 'مقدمة في Flask', 'author': 'محمد', 'content': 'Flask إطار عمل ويب بسيط وقوي.'},
    {'title': 'استخدام القوالب', 'author': 'علي', 'content': 'كيفية استخدام قوالب Jinja2 في Flask.'},
    {'title': 'وراثة القوالب', 'author': 'سارة', 'content': 'فهم وراثة القوالب يساعد في تصميم أفضل.'},
]

@app.route('/')
def home():
    return render_template('index.html', articles=articles)

if __name__ == '__main__':
    app.run(debug=True)

قالب أساسي templates/base.html

html
CopyEdit
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}موقعي{% endblock %}title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
head>
<body>
    <header>
        <h1>موقعي الإلكترونيh1>
        <nav>
            <a href="/">الرئيسيةa>
            <a href="/about">حولa>
        nav>
    header>
    <main>
        {% block content %}{% endblock %}
    main>
    <footer>
        <p>© جميع الحقوق محفوظة 2025p>
    footer>
body>
html>

قالب الصفحة الرئيسية templates/index.html

html
CopyEdit
{% extends "base.html" %}

{% block title %}الرئيسية{% endblock %}

{% block content %}
<h2>قائمة المقالاتh2>
<ul>
    {% for article in articles %}
        <li>
            <h3>{{ article.title }}h3>
            <p>بقلم: {{ article.author }}p>
            <p>{{ article.content }}p>
        li>
    {% endfor %}
ul>
{% endblock %}

---

تحسينات SEO باستخدام القوالب

عند بناء صفحات ويب ديناميكية باستخدام Flask والقوالب، من الضروري مراعاة قواعد تحسين محركات البحث (SEO) لتصدر نتائج البحث. بعض النصائح الأساسية تشمل:

• استخدام الوسوم المناسبة مثل