-
초간단 Django 게시판 11. templetes 상속Python/초간단 장고 Django 2021. 5. 30. 09:47반응형
소스 코드 : https://github.com/pycrawling/betterSimpleDjangoBBS
1. templete을 모으자.
템플릿 상속을 하기 위해서,
기존에 작업했던 템플릿 폴더를 'BASE_DIR/templates'에 모으자.
지금까지 작성된 템플릿들에는 공통 부분이 많다.
만약 제목을 Simple Django BBS로 바꾼다면..
지금까지 작업한 9개의 파일 모두를 바꿔야 한다.만약 큰 프로젝트라서...
수백개의 파일을 고쳐야 한다면?공통부분을 따로 뽑아두고,
상속을 이용해서 재활용하면,
1번만 바꿔주면 되기 때문에
유지보수가 편리해진다.이렇게 공통 부분을 처리하려면
템플릿도 모으는 것이 편하다.우리는 이미 config/settings.py에서
BASE_DIR에 templates를 설정에 두었다.TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [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', ], }, }, ]2. 상속: 공통 부분들을 뽑아내자.
공통부분을 뽑아서 모을
상위 폴더의 base.html을 만들자.
지금까지 만든 템플릿 파일에서
공통 부분은 다음과 같고,
그 사이에 각각의 개별 코드들이 들어 있다.따라서 base.html의 내용은 다음과 같아야 한다.
<!-- templates/base.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 개별 부분 --> </body> </html>개별 부분의 처리는 이렇게 한다.
{% block 블럭이름 %}
{% endblock %}블럭 이름은 content로 했다.
여러 개의 블럭을 상속해야하는 경우도 있기 때문에
이름이 필요하다.저렇게 블럭 처리된 부분은
자식 코드들이 들어가는 부분이다.<!-- templates/base.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% block content %} {% endblock %} </body> </html>모든 파일을 다 수정해야하지만,
대표로 하나만 수정해 보자.수정 전 파일이다.
<!--templates/board/article_detail.html--> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>{{object.title}}</title> </head> <body> <p>title: {{object.title}}</p> <p>author: {{object.author}}</p> <p>content: {{object.content}}</p> <p>created_at: {{object.created_at|date:'Y-m-d, H:i'}}</p> <p>modified_at: {{object.modified_at|date:'Y-m-d, H:i'}}</p> <div> <a href="{% url 'update' object.id %}">수정</a> <a href="{% url 'delete' object.id %}">삭제</a> <a href="{% url 'index' %}">목록</a> </div> </body> </html>{% extends 'base.html' %} 로
부모 html을 설정하고,{% block 블럭이름 %}
{% endblock %}
개별적인 코드들을
블럭 사이에 넣어두면 된다.그러면 장고가 조합을 딱!
수정 후
<!--templates/board/article_detail.html--> {% extends 'base.html' %} {% block content %} <p>title: {{object.title}}</p> <p>author: {{object.author}}</p> <p>content: {{object.content}}</p> <p>created_at: {{object.created_at|date:'Y-m-d, H:i'}}</p> <p>modified_at: {{object.modified_at|date:'Y-m-d, H:i'}}</p> <div> <a href="{% url 'update' object.id %}">수정</a> <a href="{% url 'delete' object.id %}">삭제</a> <a href="{% url 'index' %}">목록</a> </div> {% endblock %}3. 모든 템플릿 파일을 수정하자.
4. 수정 확인
정상적으로 수정이 되었는지 확인하자.
크롬에서 F12 로 element를 확인하자.
5. 응용
각 게시물마다 타이틀이 달라지도록 할 수 있다.
어렵지 않으니 적용하자.
수정 후 templates/base.html
<!-- templates/base.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %} - Simple Django BBS</title> </head> <body> {% block content %} {% endblock %} </body> </html>수정 후 templates/board/article_detail.html
<!--templates/board/article_detail.html--> {% extends 'base.html' %} {% block title %}{{object.title}}{% endblock %} {% block content %} <p>title: {{object.title}}</p> <p>author: {{object.author}}</p> <p>content: {{object.content}}</p> <p>created_at: {{object.created_at|date:'Y-m-d, H:i'}}</p> <p>modified_at: {{object.modified_at|date:'Y-m-d, H:i'}}</p> <div> <a href="{% url 'update' object.id %}">수정</a> <a href="{% url 'delete' object.id %}">삭제</a> <a href="{% url 'index' %}">목록</a> </div> {% endblock %}수정 후 templates/accounts/signup.html
<!--templates/accounts/signup.html--> {% extends 'base.html' %} {% block title %}Sign up{% endblock %} {% block content %} <h2>Sign up</h2> <form method="post"> {% csrf_token %} {{ form.as_p }} <button type="submit">Sign Up</button> </form> {% endblock %}반응형