템플릿 확장하기

장고의 또 다른 멋진 기능은 템플릿 확장이에요!

즉, 여러분의 웹사이트 내 각기 다른 페이지에서 HTML의 일부를 똑같이 재사용할 수 있다는 의미입니다!

이 방법을 쓰면, 같은 정보/레이아웃을 쓸 때, 모든 파일에 똑같은 내용을 반복 입력할 필요가 없어집니다.

덕분에, 수정할 부분이 생겼을 때, 딱 한번만 수정할 수 있는 장점을 갖는거죠.

기본 템플릿 생성하기

기본 템플릿은 웹사이트 내 모든 페이지에 확장되어 사용되는 가장 기본적인 템플릿입니다.

blog/templates/blog/에 base.html 파일을 새로 만들어 봅시다.

blog

└───templates

└───blog

base.html

post_list.html

이후, post_list.html에 있는 모든 내용을 base.html에 아래 내용을 복사해 붙여넣습니다.

그 다음 base.html에서 <body> (<body>와 </body> 사이에 있는 모든 내용)의 모든 내용을 아래와 같이 바꿉니다. :

blog/templates/blog/base.html

<body>

<h1><a href="/">Django Girls Blog</a></h1>

</div>

{% block content %}

{% endblock %}

</div>

</body>

전체 base.html코드입니다!

blog/templates/blog/base.html

{% load static %}

<html>

<head>

<title>Django Girls blog</title>

</head>

<body>

<h1><a href="/">Django Girls Blog</a></h1>

</div>

{% for post in posts %}

</div>

<h1><a href="">{{ post.title }}</a></h1>

<p>{{ post.text|linebreaksbr }}</p>

</div>

{% endfor %}

</div>

</body>

</html>

즉, 원래 {% for post in posts %}{% endfor %} 사이에 있는 모든 내용을

⁠

⁠

이렇게 {% block content %}{% endblock %}로 바꾼겁니다.

⁠

⁠

이 코드는 무엇을 의미일까요? 우리는 block을 만든 거에요! 템플릿 태그 {% block %}으로 HTML 내에 들어갈 수 있는 공간을 만들었어요. base.html을 확장해 다른 템플릿에도 가져다 쓸 수 있게 한 거죠. 어떻게 동작하는지 보여 드릴게요.

post_list.html 파일을 다시 엽니다. {% for post in posts %}부터 {% endfor %}까지만 남기고 나머지는 전부 지우세요.

이렇게 이 부분 빼고 다 지우는 것이죠!

⁠

⁠

한 가지만 남았습니다. 이 두 템플릿을 연결해야해요. 지금까지 실습한 내용이 바로 확장 템플릿의 전부입니다! 확장 태그를 파일 맨 처음에 추가합니다.

blog/templates/blog/post_list.html

{% extends 'blog/base.html' %}

{% block content %}

{% for post in posts %}

</div>

<h1><a href="">{{ post.title }}</a></h1>

<p>{{ post.text|linebreaksbr }}</p>

</div>

{% endfor %}

{% endblock %}

그럼 이제 다음 장으로 넘어가볼까요??

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.