메뉴바나 타이틀같이 어느 페이지를 접속해도 공통적으로 쓰이는 부분이 있다. 이런 영역을 메인 메뉴 혹은 GNB(Global Navigation Bar)라고 한다.
django에서는 템플릿 확장이라는 방법을 사용한다. 레이아웃 부분을 담은 템플릿을 별도로 만들고, 다른 페이지들에서 이 템플릿을 상속받아 보여주는 것이다. 때문에 템플릿 기능을 사용하면 재사용성이 뛰어나다.
이제 템플릿 확장을 사용해보자.
1. templates 폴더 추가
프로젝트 루트에 templates란 폴더를 추가한다. 그리고 그 안에 base.html란 파일을 추가한다.
다음, 프로젝트의 config/settings.py를 변경해야한다.
TEMPLATES 변수의 DIRS라는 키 부분을 보면 비어있을 것이다. 다음과 같이 변경해준다.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]변경한 내용은, templates 기능을 사용할 때 dir에 기입한 주소를 참조해달라는 것이다.
2. base.html
이제 templates 아래 만들어 놓은 base.html을 수정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>템플릿의 확장은 block을 기준으로 동작한다. 브라우저 탭에 보이는 이름을 결정하는 title 부분을 title block으로 받고, body 태그 부분은 content block으로 받는 것이다. 다음 템플릿을 보면 조금 이해가 될 것이다.
위의 base.html을 받는 html을 생성해보겠다.
{% extends 'base.html' %}
{% block title %}Base html Test{% endblock %}
{% block content %}
<div>
<p>템플릿 확장 기능 테스트 내용입니다.</p>
</div>
{% endblock %}위에 extends 태그를 사용해 base.html 을 기준 템플릿으로 사용한다고 명시했다. 그리고 base.html의 필요한 내용인 title과 content를 block 안에 정의해 준 것을 확인할 수 있을 것이다.
이상으로 템플릿 분리 및 확장하는 방법을 알아봤다.
'프로젝트 > 파이썬 장고를 이용한 웹페이지 만들기' 카테고리의 다른 글
| [+] django project에 부트스트랩 적용하기 (0) | 2020.04.18 |
|---|---|
| 9. 튜토리얼 따라하기 - 설문조사(4) (0) | 2020.02.14 |
| 8. 튜토리얼 따라하기 - 설문조사(3) (0) | 2020.02.07 |
| 7. 튜토리얼 따라하기 - 설문조사(2) (0) | 2020.02.06 |
| 6. 튜토리얼 따라하기 - 설문조사(1) (0) | 2020.02.02 |
