Django Thêm mẫu chính
Thẻ mở rộng
Trong các trang trước, chúng tôi đã tạo hai mẫu, một mẫu để liệt kê tất cả các thành viên và một mẫu để liệt kê thông tin chi tiết về một thành viên.
Các mẫu có một bộ mã HTML giống nhau cho cả hai mẫu.
Django cung cấp cách tạo "mẫu gốc" mà bạn có thể đưa vào tất cả các trang để thực hiện những nội dung giống nhau trong tất cả các trang.
Bắt đầu bằng cách tạo một mẫu có tên master.html
, với tất cả các thành phần HTML cần thiết:
Bậc thầy
my_tennis_club/members/templates/master.html
:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Bạn có thấy Thẻ chặn Django bên trong phần tử <title>
và phần tử <body>
không?
Họ là những người giữ chỗ, yêu cầu Django thay thế khối này bằng nội dung từ các nguồn khác.
Sửa đổi mẫu
Bây giờ hai mẫu ( all_members.html
và details.html
) có thể sử dụng mẫu master.html
này.
Điều này được thực hiện bằng cách bao gồm mẫu chính với thẻ {% extends %}
và chèn khối title
và khối content
:
Các thành viên
my_tennis_club/members/templates/all_members.html
:
{% extends "master.html" %}
{% block title %}
My Tennis Club - List of all members
{% endblock %}
{% block content %}
<h1>Members</h1>
<ul>
{% for x in mymembers %}
<li><a href="details/{{ x.id }}">{{ x.firstname }} {{ x.lastname }}</a></li>
{% endfor %}
</ul>
{% endblock %}
Chạy ví dụ »Chi tiết
my_tennis_club/members/templates/details.html
:
{% extends "master.html" %}
{% block title %}
Details about {{ mymember.firstname }} {{ mymember.lastname }}
{% endblock %}
{% block content %}
<h1>{{ mymember.firstname }} {{ mymember.lastname }}</h1>
<p>Phone {{ mymember.phone }}</p>
<p>Member since: {{ mymember.joined_date }}</p>
<p>Back to <a href="/members">Members</a></p>
{% endblock %}
Chạy ví dụ » Nếu bạn đã làm theo tất cả các bước trên máy tính của mình, bạn có thể xem kết quả trong trình duyệt của riêng mình: 127.0.0.1:8000/members/
.
Nếu máy chủ ngừng hoạt động, bạn phải khởi động lại bằng lệnh runserver
:
py manage.py runserver