Pewarisan Template

Termasuk bagian Dasar-Dasar Django dalam perjalanan Django di Coddy. Pelajaran 17 dari 23.

home.html dan drinks.html masing-masing mengulang <head> yang sama, dan sebentar lagi juga bilah navigasi. Ubah kerangkanya, lalu kamu harus mengedit setiap file. Sebagai gantinya, satu templat dasar menjadi kerangka untuk setiap halaman, dan setiap halaman mengisi bagiannya sendiri. Django menyebut kerangka ini templat induk dan setiap halaman sebagai templat anak.

Kerangka menandai bagian yang diisi halaman dengan tag {% block %} dan sebuah nama. Contoh dari library library/base.html:

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

Halaman dimulai dengan {% extends %}, lalu mengisi blok:

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

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

{% extends %} harus menjadi tag pertama. Pada halaman yang memperluas halaman lain, apa pun yang berada di luar blok akan dibuang: judul yang lupa kamu bungkus akan menghilang.

Tantangan

Sedang

Buat kedua halaman menggunakan bingkai yang sama dari base.html.

Di base.html, letakkan blok kosong bernama content di dalam <main>.
Di home.html, gunakan "menu/base.html" sebagai templat induk pada baris pertama. Sisakan hanya bagian yang ada di dalam <body>, lalu letakkan di dalam blok content.
Lakukan hal yang sama di drinks.html.

Tekan Jalankan: kedua halaman menampilkan navigasi dari base.html.

Coba sendiri

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