템플릿 확장하기(Template extending)
이전 문서에서 post_list.html과 blog.css 파일을 수정하였습니다. 이번 문서를 따라가면 post_list.html을 한 단계 더 폴리싱 할 수 있습니다. 이번에는 장고의 템플릿 코드 {% block content %}를 활용하여 하나의 html 문서 내용을 다른 문서에서 공유하여 사용할 수 있도록 합니다. 이렇게 작업했을 때의 장점은 공통의 포멧을 지니는 html 코드 하나를 관리함으로써 유지/보수 단계에서 유리하다는 점입니다(그렇지 않은 경우 중복되는 html 코드를 수정하기 위해서 이를 포함하는 모든 html 문서를 따로 수정해야 합니다).
우선 post_list.html과 같은 디렉토리에 base.html을 생성합니다. base.html은 장고 템플릿에서 앞서 말한 공통의 포멧을 정의하는 html 파일입니다. 파일을 생성하고, post_list.html의 내용을 모두 복사하여 붙여넣습니다. 그 다음 <body> 태그의 내용을 다음과 같이 수정합니다.
{% load static %}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Blog post list</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>block은 다른 html 문서의 내용을 포함합니다. 다시 말해서 post_list.html을 렌더링할 때 base.html의 {% block content %}와 {% endblock %} 사이에 post_list.html(그리고 다른 문서 역시)의 내용을 포함하게 됩니다.
이제 post_list.html을 아래와 같이 수정합니다.
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}extends는 다른 상위 문서가 해당 문서를 포함하고 있다는 의미입니다. 내용 그대로 앞서 작성한 base.html이 post_list.html 문서를 포함하게 됩니다. 템플릿 코드에서 상위 문서의 경로와 이름을 지정하게 되므로, 상위 문서는 꼭 base.html이 될 필요는 없습니다. 이는 각 html 문서가 서로 다른 상위 문서를 extends 할 수 있음과 동일한 의미입니다. 하위 문서(post_list.html)에서 역시 {% block content %}와 {% endblock %}를 선언해야 하며, 이는 상위 문서의 {% block content %}와 {% endblock %} 사이에 하위 문서의 이어지는 내용을 포함하겠다는 의미입니다.
웹 브라우저에서 다시 요청(http://127.0.0.1:8000/)을 보내보면 이전과 동일한 결과를 보여주지만, 실제로는 base.html에서 공통 코드를 처리하게 되므로 다른 html 문서를 작성 할 때도 통일된 스타일과 포멧을 그대로 사용 할 수 있다는 점에서 차이가 있습니다.
'Pyhon > Django' 카테고리의 다른 글
| [Pyhon/Django] 장고 기초#014. 장고 폼(ModelForm) (0) | 2022.01.02 |
|---|---|
| [Pyhon/Django] 장고 기초#013. 장고 애플리케이션 확장 (0) | 2022.01.02 |
| [Pyhon/Django] 장고 기초#011. 장고 CSS(Cascading Style Sheets) (0) | 2022.01.02 |
| [Pyhon/Django] 장고 기초#010. 장고 쿼리셋과 템플릿을 이용한 동적 HTML 문서 작성 (0) | 2022.01.02 |
| [Pyhon/Django] 장고 기초#009. 장고 ORM 쿼리셋(Queryset) (0) | 2022.01.01 |
