템플릿 확장이란?
템플릿 확장(template extending)은 사이트 안의 서로 다른 페이지에서 HTML의 일부를 재사용할 수 있는 것이다.
이것을 활용하면 모든 파일마다 같은 내용을 반복해서 입력할 필요가 없고, 수정할 부분이 생겼을 때, 딱 한번만 수정하면 된다.
기본 템플릿 생성하기
blog/templates/blog/
에 base.html
파일을 만든다.
xblog
└───templates
└───blog
base.html
post_list.html
그 다음 post_list.html
에 있는 모든 내용을 base.html
에 입력한다.
{% load static %}
<html>
<head>
<title>Django Girls blog</title>
<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="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% 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 %}
</div>
</div>
</div>
</body>
</html>
그 다음 base.html
의 <body>
태그 내의 내용을 다음과 같이 수정한다.
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
{% block content %}
{% endblock %}
위 코드는 템플릿 태그 {% block %}
으로 HTML 내에 들어갈 수 있는 공간을 만든 것이다. 이제부터 base.html
을 확장해 다른 템플릿에서 가져다 쓸 수 있다.
이제 blog/templates/blog/post_list.html
파일을 다시 열고 {% for post in posts %}
부터 {% endfor %}
까지만 남기고 모든 내용을 지운다.
xxxxxxxxxx
{% 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 %}
base.html
파일의 콘텐츠 블록에 포함하게 하기 위해서 {% block content %}
와 {% endblock %}
사이에 모든 코드를 넣는다.
{% 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 %}
이제 두 템플릿을 연결하기 위해서 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 %}
마지막으로 서버를 실행하고 페이지를 확인해본다.
'Python > Django' 카테고리의 다른 글
장고 걸즈 튜토리얼 따라하기 14 - 장고 폼 (0) | 2019.01.07 |
---|---|
장고 걸즈 튜토리얼 따라하기 13 - 어플리케이션 확장 (0) | 2019.01.05 |
장고 걸즈 튜토리얼 따라하기 11 - CSS (0) | 2019.01.03 |
장고 걸즈 튜토리얼 따라하기 10 - 장고 템플릿 (0) | 2019.01.02 |
장고 걸즈 튜토리얼 따라하기 9 - 템플릿 동적 데이터 (0) | 2018.12.27 |