تقنيات نور التعليمية تقنيات نور التعليمية

آخر الأخبار

جاري التحميل ...

🧩 الدرس الثالث: إنشاء صفحات متعددة باستخدام وراثة القوالب في Flask
أكتوبر 07, 2025
الصفحة الرئيسية

في الدروس السابقة أنشأنا صفحة رئيسية وصفحة “حول الموقع” باستخدام القالب الأساسي base.html.

اليوم سنتعلم كيف يمكننا إنشاء صفحات متعددة بسهولة دون تكرار نفس كود الـ HTML في كل صفحة، وذلك بفضل ميزة وراثة القوالب (Template Inheritance) في Flask.

وراثة القوالب في Flask

🔹 ما هي وراثة القوالب؟

هي طريقة ذكية في Flask (باستخدام Jinja2) تسمح بأن تكون هناك صفحة رئيسية (قالب أساسي) تحتوي على الهيكل العام للموقع — مثل الـ Header و Footer —
ثم تقوم كل صفحة فرعية بـ وراثة هذا القالب وتغيير الجزء الداخلي فقط.

🏗️ مثال عملي:

افترض أن لدينا الموقع التالي:

  • الصفحة الرئيسية: /
  • صفحة “من نحن”: /about
  • صفحة “اتصل بنا”: /contact

سنقوم بإنشائها باستخدام قالب واحد فقط.

🔹 الخطوة 1: تعديل ملف app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', title="الرئيسية")

@app.route('/about')
def about():
    return render_template('about.html', title="من نحن")

@app.route('/contact')
def contact():
    return render_template('contact.html', title="اتصل بنا")

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

لاحظ أننا أضفنا متغيرًا جديدًا title لكل صفحة ليُعرض في عنوان المتصفح.

🔹 الخطوة 2: القالب الأساسي base.html

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} | Flask</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h2>مشروع Flask التعليمي</h2>
        <nav>
            <a href="/">الرئيسية</a> |
            <a href="/about">من نحن</a> |
            <a href="/contact">اتصل بنا</a>
        </nav>
    </header>

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

    <footer>
        <p>جميع الحقوق محفوظة © تقنيات نور التعليمية</p>
    </footer>
</body>
</html>

🔹 الخطوة 3: الصفحات الفرعية

كل صفحة ترث القالب الأساسي وتضيف المحتوى الخاص بها داخل {% block content %}.

🏠 index.html

{% extends "base.html" %}
{% block content %}
  <h1>مرحبًا بك في الصفحة الرئيسية</h1>
  <p>استكشف دروس Flask خطوة بخطوة.</p>
{% endblock %}

ℹ️ about.html

{% extends "base.html" %}
{% block content %}
  <h1>من نحن</h1>
  <p>نحن فريق تقنيات نور التعليمية نهدف لتبسيط تعلم تطوير الويب باستخدام Flask.</p>
{% endblock %}

📞 contact.html

{% extends "base.html" %}
{% block content %}
  <h1>اتصل بنا</h1>
  <p>يمكنك التواصل معنا عبر البريد الإلكتروني: support@noortq.com</p>
{% endblock %}

💡 النتيجة:

الآن كل صفحة تستخدم نفس التنسيق العام (العنوان، الترويسة، الألوان، الفوتر)
لكن بمحتوى مختلف دون الحاجة لتكرار الكود في كل ملف.

🧠 تمرين الدرس الثالث:

أضف صفحة جديدة بعنوان “خدماتنا” (services) تحتوي على:

  • عنوان رئيسي “خدماتنا”
  • ثلاث فقرات قصيرة تشرح الخدمات التي يقدمها الموقع.
  • رابط في القائمة العلوية (navbar) يقود إليها.

✅ حل تمرين الدرس الثالث: صفحة “خدماتنا” (services)

📁 هيكل المشروع:

/my_flask_app
│
├── app.py
└── templates/
    ├── index.html
    ├── about.html
    └── services.html

🧠 ملف app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/about")
def about():
    return render_template("about.html")

@app.route("/services")
def services():
    return render_template("services.html")

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

🎨 ملف القالب المشترك (يمكن نسخه في كل صفحة):

📄 مثال على templates/index.html (يحتوي على شريط التنقل Navbar)

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>الصفحة الرئيسية</title>
    <style>
        body {
            font-family: "Cairo", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }
        nav {
            background-color: #007bff;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }
        nav a:hover {
            text-decoration: underline;
        }
        h1 {
            text-align: center;
            margin-top: 50px;
            color: #333;
        }
    </style>
</head>
<body>
    <nav>
        <a href="/">الرئيسية</a>
        <a href="/about">من نحن</a>
        <a href="/services">خدماتنا</a>
    </nav>

    <h1>مرحبًا بك في موقع Flask التعليمي</h1>
</body>
</html>

🧩 صفحة “خدماتنا” templates/services.html:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>خدماتنا</title>
    <style>
        body {
            font-family: "Cairo", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
            color: #333;
        }
        nav {
            background-color: #007bff;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .container {
            max-width: 800px;
            margin: 60px auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #007bff;
            text-align: center;
        }
        p {
            line-height: 1.8;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="/">الرئيسية</a>
        <a href="/about">من نحن</a>
        <a href="/services">خدماتنا</a>
    </nav>

    <div class="container">
        <h1>خدماتنا</h1>
        <p>نقدم حلول تطوير ويب متكاملة باستخدام Flask لتمكين أصحاب المشاريع من إنشاء مواقع احترافية بسرعة وكفاءة.</p>
        <p>نوفر أيضًا دروسًا تعليمية شاملة لمساعدتك على تعلم Python و Flask خطوة بخطوة بأسلوب عملي ومبسط.</p>
        <p>كما نقدم دعمًا فنيًا واستشارات تقنية لتطوير مشاريع الويب وتوسيع نطاق عملك على الإنترنت.</p>
    </div>
</body>
</html>

🧠 شرح سريع:

  • أضفنا صفحة جديدة /services ضمن Flask.
  • أنشأنا ملف services.html يحتوي على العنوان والفقرات الثلاث.
  • عدّلنا شريط التنقل

عن الكاتب

Tamer Ahmed

شاهد أيضاً

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

تقنيات نور التعليمية