Asosiy (master) shablon qo‘shish

extends tegi

Oldingi sahifalarda ikkita shablon yaratdik: biri barcha a’zolar ro‘yxati uchun, ikkinchisi esa a’zo haqidagi tafsilotlar uchun.

Bu shablonlarda ikkalasi uchun bir xil bo‘lgan HTML kod qismlari bor.

Django barcha sahifalarda bir xil bo‘lgan qismlarni bajarish uchun barcha sahifalarga ulash mumkin bo‘lgan "ota shablon" (parent template) yaratish imkonini beradi.

Avval barcha kerakli HTML elementlariga ega master.html nomli shablon yarating:

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
</head>
<body>

{% block content %}
{% endblock %}

</body>
</html>

<title> va <body> elementlari ichidagi Django block tegini ko‘ryapsizmi?

Ular joy egalari (placeholder) bo‘lib, Django’ga bu blokni boshqa manbalardagi kontent bilan almashtirishni bildiradi.

Shablonlarni o‘zgartirish

Endi ikkala shablon (all_members.html va details.html) ushbu master.html shablonidan foydalanishi mumkin.

Bu master shablonni {% extends %} tegi yordamida ulash hamda title va content bloklarini qo‘shish orqali amalga oshiriladi:

{% 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 %}

{% 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 %}

Agar barcha qadamlarni o‘z kompyuteringizda bajargan bo‘lsangiz, natijani o‘z brauzeringizda ko‘rishingiz mumkin: 127.0.0.1:8000/members/.

Agar server to‘xtagan bo‘lsa, uni runserver buyrug‘i bilan qayta ishga tushirishingiz kerak: