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

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

home.html وdrinks.html يكرران كلاً منهما وسم <head> نفسه، وقريباً شريط تنقّل أيضاً. غيّر الإطار، وسيتعيّن عليك تعديل كل ملف. بدلاً من ذلك، يكون أحد القوالب هو الإطار، وتملأه الصفحات.

يحدّد الإطار الجزء الذي تملؤه الصفحة باستخدام وسم {% 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، ضع كتلة فارغة باسم content داخل <main>.
اجعل home.html وdrinks.html يرثان من "menu/base.html"، مع وضع 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>