템플릿 상속
웹사이트를 만들다보면 많은 .html 파일로 구성되어 있을 것이다.
html 상에서 navbar 또는 menu 부분은 겹치는 부분들인데
이런 내용들을 새로운 html을 만들 때마다 복붙 해야할까 ?
.html 파일 이 적으면 괜찮겠지만 많은 .html 이라면 힘들것이다.
그래서 우리는 하나의 .html 에 겹치는 내용을 다 때려놓고
new.html 에 base.html 내용을 불러오고 겹치지 않는 내용만 new.html 에 작성
이러한 과정을 템플릿 상속이라고 한다.
장점 = 코드 재사용 , 일관된 UI 구성 및 변경 용이
템플릿 상속의 구현
- 최상위 폴더에 templates 폴더 만들기
- templates 폴더에 베이스가 되는 .html 파일 만들기
ex) base.html - base.html에 중복되는 코드들 채워넣기
- settings.py 에 base.html 위치 알리기 //TEMPLATES 라고 하는 곳
‘DIRS’ : [‘이부분’]
주로os.path.join(BASE_DIR, 'templates')이 내용이 들어간다. - 사용하고자 하는 html에서 겹치는 내용 삭제, base.html 불러오기.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['이부분'],
'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',
],
},
},
]'DIRS': [os.path.join(BASE_DIR, 'templates')],
base.html 작성법
- 겹치는 내용들을 다 적어준다.
- 컨텐츠가 들어올 곳을 아래와 같이 적어준다.
<body>
<!--중복되는 코드들-->
.
.
.
.
.
.
.
<!--이 아래에 컨텐츠가 올 예정입니다.-->
{% block contents %}
{% endblock%}
</body>base.html 불러오는 코드
- 불러야하는 .html 파일 상단에
{% extends 'base.html' %}을 추가한다. extends.라고 하는 태그는 모든 태그에 비해 우선순위가 높다.
{% extends 'base.html' %}
{% block contents %}
<!--컨텐츠-->
{% endblock %}
focus on why