في الدروس السابقة أنشأنا صفحة رئيسية وصفحة “حول الموقع” باستخدام القالب الأساسي base.html.
اليوم سنتعلم كيف يمكننا إنشاء صفحات متعددة بسهولة دون تكرار نفس كود الـ HTML في كل صفحة، وذلك بفضل ميزة وراثة القوالب (Template Inheritance) في 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يحتوي على العنوان والفقرات الثلاث. - عدّلنا شريط التنقل
