Go!: 10. Template

사이트의 통일성을 위해 Page별로 기본 골격은 유지한채 들어가는 내용과 이미지등만 바꿔서 제작을 합니다.

이때 기본 골격 즉, 기본 구조는 동일하게 두고 내용만 바뀌는 것이므로 기본 골격에 대한 기본 Template을 작성하고 각 페이지들은 기본 Template을 상속받아 작성될 내용을 집어넣습니다.

이를 구현하기 위한 django의 template 상속에 대해 알아보도록 하겠습니다.

설명을 위해 기본 Template 으로 사용될 예를 들어보겠습니다. template 디렉토리에 base.html이란 이름으로 다음 내용을 저장해 주시기 바랍니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Django Page | {% block title %}{% endblock %}</title>
    </head>
    <body>
        <h1>{% block head %}{% endblock %}</h1>
{% if user.username %}
<h4 align="right">{{user.username}} 님 반갑습니다.(<a href='/accounts/logout'>로그아웃</a>)</h4>
{% else %}
            <h4 align="right"><a href="/accounts/login">로그인</a>하세요</h4>

        {% endif %}

        {% block content%}{% endblock %}

<hr align="center" />

<p align="center">Site managed by yoonani(yoonani72@gmail.com)</p>
</body>
</html>

위의 예에서는 세군데의 block이 있습니다. 앞서 설명한 변수를 사용한 Template 예와 잘 비교해 주시기 바랍니다.

앞서 설명드린 Template의 예는 다음과 같습니다.

<title>{{header_title}}</title></head>

<h1>{{header_h1}}</h1>

<p>{{contents}}</p>

후자의 변수를 사용한 예는 값을 전달받아 바로 출력하는 것입니다. 이와 비교하여 지금 설명드린 것은 block 태그를 사용한 예로써 일단 상속을 받아 사용할 Template 에서 내용을 채워넣습니다.

그럼 이 기본 구조 Template을 상속받아 구현할 index.html을 다음과 같이 변경하여 보도록 하겠습니다.

첫줄의 {% extends "base.html" %} 에서 앞서 작성한 기본 Template을 가져오겠다는 선언입니다.

지금 작성한 index.html을 기존의 index.html과 비교하여 보시면 많은 부분에서 간략해 졌으며 구조에 대한 선언은 없어지고 내용에 대한 것만 남아 있음을 알 수 있습니다.

이제 위와 같은 기본 Template을 바탕으로 앞서 작성한 사용자 홈페이지도 변경해 보도록 하겠습니다.

다음은 변경된 userHome.html입니다.

앞으로 우리는 기본 구조를 상속받아 각 페이지를 작성하도록 하겠습니다.

이 방법을 통해서 사이트에 통일된 구조를 적용하는 데 보다 수월하게 되었습니다.

수고하셨습니다.

앞서 작성한 login.html 을 Template 상속을 통해 구현하여 개인 학습노트에 "template 연습"이라는 제목으로 작성하시기 바랍니다.

이 글은 스프링노트에서 작성되었습니다.

Go!