[DevHyun's Blog] Django Template 확장하기(*재사용 가능하게끔 만들기)

D3V3L0P3R 2020. 10. 19. 19:08

장고걸스 코치들과 자원봉사자들의 수고로 번역된 글을 참고하였습니다.

tutorial.djangogirls.org/ko

Template 확장(template extending) 이란 웹사이트 안의 서로 다른 페이지에서 HTML의 일부를 동일하게 재사용 할 수 있도록 만드는 것입니다.

1. Blog/templates/Blog/base.html 생성

* base가 될 template 셋팅

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

2. base.html의 Body를 재사용 가능하게끔 확장하기

*Blog/templates/Blog/base.html

* 템플릿 태그 {% block(template tag) %}으로 HTML 내에 들어갈 수 있는 공간을 만들었습니다. base.html을 확장해 다른 템플릿에도 가져다 쓸 수 있게 되었습니다.

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

3. post_list.html 수정하기

* base.html의 block content 안에 들어갈 내용이라고 생각하면 편할듯?

*Blog/templates/Blog/post_list.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 %}

4. post_list.html과 base.html 연결하기

*Blog/templates/Blog/post_list.html

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

{% block content %}

...
..
.