템플릿 모듈화 및 상속

템플릿을 왜 모듈화할까?

편하니까!

 

일반적으로 메인 영역을 제외하고 나머지 영역은 디자인이 일관되게 유지되어야 한다.

즉, 그 '나머지 영역'을 미리 만들어놓고 가져다 쓰면 편할 것이다.

 

1. 프로젝트 전체적으로 쓰이는 템플릿 구성하기

우선, templates 폴더를 생성한다.

그리고 base.html, navbar.html, footer.html을 생성한다.

index.html에서 해당 영역을 가져와 base.html에 입력

templates/base.html

templates/base.html

이 base.html은 부모가 되어 자식에게 상속시켜야 한다.

그렇게 하기 위해, main area block을 명시해준다.

templates/base.html

이제, index.html로 가서 main area block을 정의해준다.

extends를 추가해 base.html의 내용을 상속받겠다는 언급도 해준다.

blog/templates/blog/index.html

blog/templates/blog/index.html

 

그러고 나서, settings.py에서 TEMPLATES의 DIRS을 아래와 같이 수정한다.

settings.py

 

2. Navbar, Footer도 완성하기

base.html에서 navbar와 footer에 해당하는 영역을 각각 navbar.html, footer.html에 옮긴다.

templates/navbar.html

templates/footer.html

이후, base.html에 include를 이용하여 두 html 템플릿을 불러온다.

templates/base.html

실제 화면은 바뀌지는 않았지만, 이러한 방식으로 간결하게 표현이 가능하다.