<본 강좌는 에 의해 제작되었으며, 제가 정리한 내용이 도움이 된다고 생각되시면 반드시 유투브 페이지에 방문하셔서 추천과 구독을 눌러주세요>
이번 강좌에서는 전 강좌에서 urls.py를 app안에 넣었던 것과 같이 templates을 app안에서 쓸 수 있는 방법을 소개한다고 합니다.
template의 modulerize라고 하는데...뭐 자세한 내용은 동영상을 들으시고,
우선 template을 최초에 만든 django_test/templates 에서도 쓸수 있고, article/templates에서도 쓸수 있으려면 어떻게 해야 할까요?
이 경우에는 django_test/settings.py를 변경하면 된다.
위 화면 가장 하단에 있는 TEMPLATE_DIRS = ( ROOT_PATH + '/templates') 으로 되어 있던 설정을 다음과 같이 변경한다.
TEMPLATE_DIRS = ( ROOT_PATH + '/templates',
ROOT_PATH + '/articles/templates',
)
위와 같이 변경할 경우 articles/templates에서도 지정한 html 파일이 있는지 확인하기 시작한다.
따라서, article app에 해당하는 내용에 대한 template들만 별도로 모아서 관리할 수 있게 됐다고 볼 수 있다.
Django에서 제공하는 Template 문법
자 그럼 django에서 제공하는 template 문법을 보다 구체적으로 살펴보도록 하자.
전장에서 쓴 articles.html파일의 내용을 보면 다음과 같다.
{% for article in articles %}
<div>
<h2><a href="/articles/get/{{ article.id }}/">{{article.title}}</a></h2>
<p>{{article.body}}</p>
</div>
{% endfor %}
<결과 화면>
위에 출력되는 내용들을 django template문법으로 제공하는 일부 기능을 제공하면 다른 결과를 얻을 수 있다.
Django 문법은 "|" 를 사용한다.
예를들어 <p>{{article.body}}</p> 를 <p>{{article.body|upper|truncatewords:"10"}}</p> 와 같이 변경하면,
출력되는 내용이 upper 즉 모두 대문자로 변경되며, truncatewords:"10"는 출력되는 글의 길이가 10으로 조정되고 나머지는 ...으로 요약 된다.(lower로 변경하면 모두 소문자가 된다.)
{% for article in articles %}
<div>
<h2><a href="/articles/get/{{ article.id }}/">{{article.title}}</a></h2>
<p>{{article.body|upper|truncatewords:"10"}}</p>
</div>
{% endfor %}
<결과화면>
django Template에서는 python의 if문과 유사한 if문을 제공한다.]
아래와 같이 if문을 쓰는 방법은 python문법과 거의 동일하다고 보면 된다.
{% if articles.count > 0 %}
{% for article in articles %}
<div>
<h2><a href="/articles/get/{{ article.id }}/">{{article.title}}</a></h2>
<p>{{article.body|upper|truncatewords:"10"}}</p>
</div>
{% endfor %}
{% else %}
<p>None to show!!</p>
{% endif %}
<결과화면>
if문에서 <를 반대로 설정하면 else에 설정해 놓은 구문이 출력된다.
{% if articles.count < 0 %}
{% for article in articles %}
<div>
<h2><a href="/articles/get/{{ article.id }}/">{{article.title}}</a></h2>
<p>{{article.body|upper|truncatewords:"10"}}</p>
</div>
{% endfor %}
{% else %}
<p>None to show!!</p>
{% endif %}
<결과화면>
다음으로는 기본적인 layout을 설정하는 방법을 보자. 어찌보면 가장 핵심적인 내용인데, Tutorial에는 나중에 나온다.ㅎㅎ
우선 기본적인 layout역할을 할 파일을 articles/templates에 base.html이란 이름으로 만들어보자
base.html에 들어갈 내용은 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<title> {% block title %}My Base Template{% endblock %}</title>
<style type="text/css">
body {
text=align:center;
}
#page {
width:960px;
text-align:left;
margin: 10px auto 20px auto;
background-color:#0c0c0c;
}
#sidebar {
float: left;
width: 200px;
border: 1px solid #000;
}
#content {
float: left;
width: 600px;
border: 1px solid #f00;
padding: 10px;
}
</style>
</head>
<body>
<div id="page">
</div>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/articles/all"> Articles </a></li>
<li><a href="/admon/"> Admin</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}This is content area {% endblock %}
</div>
</body>
</html>
약간의 css가 들어가서 다소 복잡해 보일 수 있으나 핵심은 {% block something %}으로 정리되는 부분이다.
기본적인 layout 외 변경이 될 부분들을 {% block somting %}{% endblock %}으로 설정해 놓으면 그 부분에 변경될 내용을 HTML파일로 만들어서 삽입할 수 있게 된다. 좀 더 쉬운 이해를 위해서 위 파일을 브라우져에서 실행한 화면을 보자.
위 화면을 보면 {% block sidebar %}{% endblock %}과 {% block content %} {% endblock %}으로 설정된 두 영역이 보인다.
위 두 영역은 다른 html 파일을 만들어서 {% extends 'base.html' %} 을 입력하면 기본 layout으로 사용할 수 있고, 삽입을 원하는 영역을 선택하기 위해서 {% block sidebar %} 또는 {% block content %}을 입력하면 html에 작성된 내용이 layout 상의 block 영역에 삽입된다.
아까 만들었던 articles.html / article.html 파일을 적용시키면 다음과 같다.
articles.html
{% extends 'base.html' %}
{% block content %}
{% if articles.count > 0 %}
{% for article in articles %}
<div>
<h2><a href="/articles/get/{{ article.id }}/">{{article.title}}</a></h2>
<p>{{article.body|upper|truncatewords:"10"}}</p>
</div>
{% endfor %}
{% else %}
<p>None to show!!</p>
{% endif %}
{% endblock %}
<결과 화면>
article.html
{% extends 'base.html' %}
{% block sidebar %}
<ul>
<li><a href="/articles/all"> Articlse</a></li>
<li><a href="/admin/"> Admin</a></li>
</ul>
{% endblock %}
{% block content %}
<h1> {{article.title}}</h1>
<p>{{article.body}}</p>
{% endblock %}
<결과 화면>
