Django 실습 5: Template 만들기

이제 blog 앱에서 사용될 template을 만들어야 합니다.

프로젝트 전체에서 사용되는 템플릿의 경우, root(루트) 폴더 속 templates 폴더에 정의할 수 있습니다.

그러나 하나의 하위 앱, 여기서는 blog 앱에서 사용될 템플릿의 경우에는 blog/templates/blog 와 같은 경로에 저장하여 사용할 수 있습니다.

먼저, 여러 템플릿의 기본(중복)이 되는 base.html 템플릿부터 만들어보도록 하겠습니다. 이렇게 중복되는 템플릿을 밖으로 빼내어 공통적으로 사용할 수 있게 하는 방식을 템플릿 상속이라고 합니다.

$ cd blog
$ mkdir templates && cd templates
$ mkdir blog

blog 앱 하위에 templates, blog 두 개의 폴더를 만들어줍니다.

<!-- blog/templates/blog/base.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{% block title %}블로그 만들기{% endblock %}</title>
  </head>
  <body>
    {% block content %}
    {% endblock %}
  </body>
</html>

base.html 파일을 생성한 뒤 위의 코드를 입력해 줍니다.

{% block content %}{% endblock %} 부분에 다양하게 바뀔 내용이 들어가게 됩니다.

{% block content %}{% endblock %} 사이에 들어가게 될 내용 중 첫 번째로 블로그 글 리스트인 post_list.html 파일을 작성해 보도록 하겠습니다.

<!-- blog/templates/blog/post_list.html -->
{% extends 'blog/base.html' %}

{% block content %}
<h1>나의 블로그</h1>
    <a href="{% url 'create' %}" class="btn btn-primary" >글 작성</a>
    <ul>
				{% if post_list %}
	        {% for post in post_list %}
	            <li><a href="{% url 'post_detail' post.pk %}">{{ post.title }}</a></li>
	        {% endfor %}
				{% else %}
					<p>아직 글이 작성되지 않았습니다.</p>
				{% endif %}
    </ul>
{% endblock %}

base.html을 기본 골격으로 이용하기 위해서는 html 파일 상단에 {% extends 'base.html' %} 내용으로 base.html을 사용한다고 선언해줍니다. 이후 {% block content %}{% endblock %}사이에 리스트 템플릿 내용을 적어줍니다. if 문과 for 문을 이용해 조건에 따라 맞는 내용을 템플릿에 출력해줍니다.

다른 템플릿 내용들도 base.html을 골격으로 생성합니다.

<!-- blog/templates/blog/post_detail.html -->
{% extends 'blog/base.html' %}

{% block content %}
		<h1>{{ post.title }}</h1>
		<p>{{ post.content }}</p>
		<p>작성시간 : {{ post.created_at }}</p>
    <p>수정시간 : {{ post.updated_at }}</p>
{% endblock %}

<!-- blog/templates/blog/post_form.html -->
{% extends 'blog/base.html' %}

{% block content %}
	{% if post_update %}
	   <h1>블로그 글 수정하기</h1>
	{% else %}
	   <h1>블로그 글 등록하기</h1>
	{% endif %}
{% endblock %}