Menu
CoddyTech

Ş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 aynı <head> bölümünü, yakında da bir gezinme çubuğunu tekrar ediyor. Çerçeveyi değiştirince her dosyayı düzenlemen gerekir. Bunun yerine, tek bir şablon çerçeve olur ve sayfalar bu çerçeveyi doldurur.

Çerçeve, sayfanın dolduracağı bölümü bir {% block %} etiketi ve adıyla işaretler. Bir kütüphanenin 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 atılır: sarmalamayı unuttuğun bir başlık kaybolur.
challenge icon

Görev

Orta
  • base.html dosyasında, <main> içine content adlı boş bir blok yerleştirin.
  • home.html ve drinks.html dosyalarının "menu/base.html" dosyasını genişletmesini ve bu bloğun içine kendi HTML içeriklerini koymasını sağlayın.

Çalıştır'a basın: Her iki sayfada da base.html dosyasındaki gezinme çubuğu 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>

Django Temelleri bölümündeki tüm dersler

Kendi başına pratik yap: Django playground