הורשה של תבניות

חלק מהיחידה יסודות 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>