-
[Django] Template 상속Python & Django 2021. 6. 2. 13:17
장고에서는 템플릿을 상속하여 중복되는 코드가 없도록 관리할 수 있습니다. 이번에 템플릿을 상속하는 방법을 알아보겠습니다.
방법은 프로젝트 템플릿을 만들어 앱의 템플릿 중 중복되는 코드를 넣어 상속해주는 것입니다.
1. 프로젝트 템플릿 만들기
우선 상속을 해줄 템플릿을 만들기 위해 프로젝트 디렉토리에서 template 디렉토리를 생성하고, base.html 파일을 만들어줍니다.
그리고 그 안에 중복되는 코드들을 모두 넣어줍니다. 제 경우, html 코드와 부트스트랩의 navbar 를 넣었습니다.
<!DOCTYPE html> <html lang="en"> <head> ... # 부트스트랩 CDN <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">이구의 블로그</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> ... </ul> </div> </div> </nav> </body> </html>그리고 상속받는 템플릿의 내용이 나올 부분에 아래 코드를 넣어줍니다. 저는 네브바 하단에 넣었습니다.
<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... {% block content %} {% endblock %} </body> </html>
2. 상속받을 템플릿 수정하기
이제 home.html 등 상속 받을 앱의 템플릿들을 수정합니다. 이때 base.html 과 중복되는 코드들을 지워주고 상속받을 수 있도록 코드를 추가합니다.
# home.html {% extends 'base.html' %} {% block content %} <h1>이구의 블로그</h1> <a href="{% url 'new' %}">새 글 쓰기</a> <hr> {% for blog in blogs %} <h2>{{ blog.title }}</h2> <p>{{ blog.writer }}</p> <p>{{ blog.summary }}</p> <a href="{% url 'detail' blog.id %}">게시글 보기</a> {% endfor %} {% endblock %}이때 extends 는 경로 안에 있는 파일을 확장해 상속받겠다는 의미로 base.html 을 불러오게 됩니다. 그리고 block content~endblock 사이에 home.html 의 코드를 넣어줍니다.
나머지 blog 의 템플릿들도 수정하겠습니다.
3. settings.py 설정
이제 두 템플릿을 연결해주기 위해 settings.py 를 수정해줍니다. TEMPLATES 안에 DIRS 에 '프로젝트명/templates' 를 추가해주면 됩니다.
# settings.py TEMPLATES = [ { ... 'DIRS': ['tistory/templates'], # 수정 ... }, ]이제 서버를 실행해 모든 blog 의 모든 템플릿들이 base.html 을 상속받아서 네브바가 잘 만들어져 있는지 보겠습니다.
기존에 만들어두었던 blog 앱의 home, detail, new, edit 페이지들에 네브바가 잘 들어와있습니다!
템플릿 상속을 정리하면, 프로젝트의 템플릿 생성 -> 상속할 코드 입력 + block content~endblock 추가 -> 상속받을 템플릿 수정(extend 'base.html', block content~endblock 안에 내용 추가) 라고 할 수 있습니다!
'Python & Django' 카테고리의 다른 글
[django] 블로그 카테고리 게시판 만들기(카테고리 별 게시물 리스트, 카테고리 리스트 한 화면에 구현하기) (0) 2021.08.04 [Django] URL 관리하기 (0) 2021.06.02 [Django] CRUD 로 블로그 구현하기 (DELETE) (0) 2021.06.01 [Django] CRUD로 블로그 구현하기 (Update) (0) 2021.06.01 [Django] CRUD로 블로그 구현하기(CREATE) (0) 2021.06.01