البرمجة

توجيه الهيدر والفوتر في قوالب Django

عند العمل مع قوالب Django، تواجهك حاجة إلى إضافة هيدر وفوتر مشتركين في العديد من الصفحات. يمكنك تجنب كتابة هذه الأجزاء في كل صفحة عن طريق استخدام الوراثة في قوالب Django. لتحقيق ذلك، يمكنك إنشاء قوالب أساسية (base templates) تحتوي على الهيدر والفوتر وأي محتوى مشترك آخر، ثم استخدام هذه القوالب الأساسية كقوالب لباقي الصفحات.

مقالات ذات صلة

للبداية، يجب أن تقوم بإنشاء ملفين قالبين رئيسيين. الأول هو للهيدر (base_header.html) والثاني للفوتر (base_footer.html). في هذه الملفات، ضعي العناصر المشتركة مثل روابط CSS والسكربتات. على سبيل المثال:

base_header.html:

html
html>
<html>
<head>
    <title>عنوان الصفحةtitle>
    <link rel="stylesheet" href="path/to/your/style.css">
head>
<body>

base_footer.html:

html
    <script src="path/to/your/script.js">script>
body>
html>

بعد ذلك، قم بإنشاء قالب أساسي (base template) يستخدم الهيدر والفوتر السابقين. قم بتسميته base.html مثلاً وضع الكود التالي فيه:

base.html:

html
{% include 'base_header.html' %}
    
{% include 'base_footer.html' %}

الآن يمكنك استخدام قالب base.html كقالب أساسي لكافة الصفحات الأخرى في مشروعك. عندما تقوم بإنشاء صفحة جديدة، فقط استورد قالب base.html وقم بوضع محتوى الصفحة داخل العنصر المحدد بالتعليق “محتوى الصفحة” في قالب base.html.

المزيد من المعلومات

بالطبع! إضافة إلى استخدام {% include %} لتضمين الهيدر والفوتر، يمكنك أيضًا استخدام الوراثة (inheritance) في قوالب Django لتحقيق هذا الهدف. في هذه الحالة، يمكنك إنشاء قالب أساسي (base template) يحتوي على هيدر وفوتر وهيكل عام للصفحة، ثم يمكنك إنشاء قوالب فرعية (child templates) تورث من القالب الأساسي وتحتوي على المحتوى الخاص بها.

للقيام بذلك، قم بإنشاء قالب أساسي يحتوي على الهيكل العام لصفحتك واسمه base.html مثلاً:

base.html:

html
html>
<html>
<head>
    <title>{% block title %}عنوان الصفحة{% endblock %}title>
    <link rel="stylesheet" href="path/to/your/style.css">
head>
<body>
    <header>
        
    header>

    <div class="content">
        {% block content %}
        {% endblock %}
    div>

    <footer>
        
    footer>

    <script src="path/to/your/script.js">script>
body>
html>

ثم، في كل صفحة جديدة، قم بإنشاء قالب فرعي يورث من القالب الأساسي ويحتوي على المحتوى الخاص بها داخل بلوك (block) محدد. على سبيل المثال، إذا كان لديك صفحة تسمى home.html:

home.html:

html
{% extends 'base.html' %}

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

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

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

الوسوم
زر الذهاب إلى الأعلى