Şablon Kalıtımı

Coddy'nin Django Journey'sinin Django Temelleri bölümünün bir parçası. Ders 17 / 23.

home.html ve drinks.html dosyalarının her ikisinde de aynı <head> bölümü tekrarlanıyor; yakında bir gezinme çubuğu da eklenecek. Çerçeveyi değiştirirsen her dosyayı düzenlemen gerekir. Bunun yerine, tek bir temel şablon her sayfanın çerçevesi olur ve her sayfa kendi bölümünü doldurur. Django bu çerçeveye üst şablon, her sayfaya da alt şablon der.

Çerçeve, sayfanın dolduracağı bölümü bir adla birlikte {% block %} etiketiyle belirtir. Bir kitaplığın library/base.html dosyası:

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

Bir sayfa {% extends %} ile başlar, ardından bloğu doldurur:

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

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

{% extends %} ilk etiket olmalıdır. Başka bir şablonu genişleten bir sayfada, bloğun dışındaki her şey silinir: sarmalamayı unuttuğun bir başlık kaybolur.

Görev

Orta

Her iki sayfanın da base.html içindeki çerçeveyi paylaşmasını sağlayın.

base.html dosyasında, <main> içine content adlı boş bir blok ekleyin.
home.html dosyasında, ilk satırda "menu/base.html" dosyasını genişletin. Yalnızca <body> içindeki içeriği bırakın ve bunu content bloğuna yerleştirin.
Aynısını drinks.html dosyasında da yapın.

Çalıştır düğmesine basın: her iki sayfada da base.html dosyasındaki gezinme menüsü görünür.

Kendin dene

<!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>