템플릿 상속

Coddy Django 여정의 Django 기초 섹션에 포함된 레슨. 23개 중 17번째.

home.html과 drinks.html에는 같은 <head>가 반복되고, 곧 내비게이션 바도 반복됩니다. 프레임을 바꾸면 모든 파일을 수정해야 합니다. 대신 하나의 기본 템플릿이 모든 페이지의 프레임이 되고, 각 페이지는 자신의 부분을 채웁니다. Django에서는 이 프레임을 부모 템플릿이라 하고, 각 페이지를 자식이라고 합니다.

프레임은 페이지가 채울 부분을 이름과 함께 {% block %} 태그로 표시합니다. 라이브러리의 library/base.html은 다음과 같습니다.

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

페이지는 {% extends %}로 시작한 다음 블록을 채웁니다.

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

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

{% extends %}는 첫 번째 태그여야 합니다. 다른 템플릿을 확장하는 페이지에서는 블록 바깥에 있는 모든 내용이 버려집니다. 감싸는 것을 잊은 제목은 사라집니다.

챌린지

중급

두 페이지가 base.html의 프레임을 공유하도록 만드세요.

base.html에서 <main> 안에 content라는 빈 블록을 넣으세요.
home.html의 첫 줄에서 "menu/base.html"을 확장하세요. <body> 안에 있던 내용만 남기고 content 블록 안에 넣으세요.
drinks.html에서도 똑같이 하세요.

실행을 누르세요. 두 페이지 모두 base.html의 탐색 메뉴를 표시합니다.

직접 해보기

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