وراثة القوالب

جزء من قسم أساسيات Django في رحلة Django على Coddy. الدرس 17 من 23.

يكرّر كلٌّ من home.html وdrinks.html العنصر <head> نفسه، وقريبًا سيكرّران شريط التنقّل أيضًا. إذا غيّرت الإطار، فستضطر إلى تعديل كل ملف. بدلًا من ذلك، يكون قالب أساسي واحد هو الإطار المحيط بكل صفحة، وتملأ كل صفحة الجزء الخاص بها. يسمّي Django الإطار القالبَ الأب، وكل صفحة قالبًا ابنًا.

يحدّد الإطار الجزء الذي تملؤه الصفحة باستخدام وسم {% block %} واسم. قالب library/base.html للمكتبة:

<body>
    <nav>...</nav>
    <article>{% block body %}{% endblock %}</article>
</body>

تبدأ الصفحة بـ {% extends %}، ثم تملأ الكتلة:

{% extends "library/base.html" %}

{% block body %}
    <p>We are open until 20:00.</p>
{% endblock %}

يجب أن يكون {% extends %} الوسم الأول. في الصفحة التي ترث من صفحة أخرى، يُحذف كل ما يقع خارج كتلة: فإذا نسيتَ إحاطة عنوان بكتلة، فسيختفي.

التحدي

متوسط

اجعل الصفحتين تشتركان في الإطار الموجود في base.html.

في base.html، ضع كتلة فارغة اسمها content داخل <main>.
في home.html، استخدم القالب الأب "menu/base.html" في السطر الأول. أبقِ فقط ما كان داخل <body>، وضعه في كتلة content.
افعل الشيء نفسه في drinks.html.

اضغط على Run: ستعرض كلتا الصفحتين شريط التنقل من base.html.

جرّب بنفسك

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Corner Café</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        <!-- each page's content goes here -->
    </main>
</body>
</html>