Kế thừa mẫu

Thuộc phần Kiến thức cơ bản về Django trong hành trình Django của Coddy. Bài học 17 trên 23.

home.html và drinks.html đều lặp lại cùng một phần <head>, và sắp tới còn có cả thanh điều hướng. Khi thay đổi khung, bạn phải sửa mọi tệp. Thay vào đó, một mẫu cơ sở sẽ làm khung cho mọi trang, còn mỗi trang sẽ điền phần nội dung riêng. Django gọi khung này là mẫu cha, còn mỗi trang là mẫu con.

Khung đánh dấu phần mà một trang sẽ điền bằng thẻ {% block %} cùng một tên. Ví dụ, library/base.html của thư viện:

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

Một trang bắt đầu bằng {% extends %}, rồi điền vào khối:

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

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

{% extends %} phải là thẻ đầu tiên. Trong trang kế thừa từ một trang khác, mọi nội dung bên ngoài khối đều bị loại bỏ: nếu bạn quên đặt một tiêu đề trong khối, tiêu đề đó sẽ biến mất.

Thử thách

Trung bình

Để cả hai trang dùng chung khung trong base.html.

Trong base.html, đặt một khối rỗng có tên content bên trong <main>.
Trong home.html, viết lệnh kế thừa "menu/base.html" ở dòng đầu tiên. Chỉ giữ lại phần nằm trong <body> và đặt phần đó vào khối content.
Làm tương tự trong drinks.html.

Nhấn Run: cả hai trang đều hiển thị thanh điều hướng từ base.html.

Tự làm thử

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