개발자 리자드
이전 포스팅 참고
2020/11/13 - [Python/Django] - [Django] 장고 템플릿 #1
[Django] 장고 템플릿 #1
노마드코더의 강의를 듣고 중요한 내용을 정리하였습니다. 장고 템플릿이란? 템플릿이란 서로 다른 정보를 일정한 형태로 표시하기 위해 재사용 가능한 파일을 말한다. 장고 템플릿은 html을 사
doongjun.tistory.com
우선 아래와 같이 templates라는 이름으로 템플릿 파일을 추가해준다.
Django앱을 만들면서 계속 해오듯, templates에서도 템플릿파일을 작성할 때 중요한것은 분할(Divide)과 정복(Conquer)이다. html파일에 기본적으로 필요한 태그들을 페이지를 생성할 때마다 생성하는 것이 아니라, 생성해두고 필요할 때 갖다 쓸 수 있도록 하는 것이 효율적이다.
간단하게 home.html은 base.html을 상속받고 base.html은 partial/header.html과 partial/footer.html을 포함하도록 제작하려고 한다.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block page_name %}{% endblock page_name %}| Dbnb</title>
</head>
<body>
{% include "partial/header.html" %}
{% block content %}{% endblock content %}
{% include "partial/footer.html" %}
</body>
</html>
위에서 {% block content %}{% endblock %} 이 부분은 자식 템플릿이 들어올 수 있는 자리를 만들어 놓은 것이다. home.html에서 {% block content %}이 곳에 들어가는 내용이 위의 자리에 들어갈 것이다.{% endblock %}
{% block page_name %}{% endblock page_name %} 부분도 마찬가지 이다.
home.html
{% extends "base.html" %}
{% block page_name %}
Home
{% endblock page_name %}
{% block content %}
{% for room in rooms %}
<h1>{{room.name}} / ${{room.price}}</h1>
{% endfor %}
{% endblock content %}
장고 템플릿에서 위 for문과 같이 제어문을 사용할 수도 있다!! 이전 포스팅에서 context를 통해 넘겨준 값들을 {{ }}를 통해 받아온다.
partial/header.html와 partial/footer.html는 간단하게 구성했다.
partial/header.html
<header>
<a href="/">Dbnb</a>
<ul>
<li><a href="#">Login</a></li>
</ul>
</header>partial/footer.html
<footer>
© Dbnb
</footer>
for문을 통해 방이름과 가격이 잘 나오고 header가 잘 포함된 것을 확인할 수 있다.
footer가 잘 포함된 것을 확인할 수 있다.
'Web developer > Django' 카테고리의 다른 글
| [Django] 함수 기반 뷰 vs. 클래스 기반 뷰 #DetailView (0) | 2020.11.14 |
|---|---|
| [Django] 함수 기반 뷰 vs. 클래스 기반 뷰 #ListView (0) | 2020.11.14 |
| [Django] 장고 템플릿 #1 (0) | 2020.11.13 |
| [Django] 쿼리셋(Query sets) (0) | 2020.11.09 |
| [Django] ORM #2 (0) | 2020.11.09 |
댓글