장고에서는 템플릿을 상속받을 수 있다. 예를 들어 여러개의 템플릿 중에서 <body> 태그의 내용만 다르고 <head>태그 부분의 내용은 같은 경우 수정사항이 발생했을 경우 모든 파일을 다 수정해줘야하는 번거로움이 생긴다. 장고에서는 템플릿을 상속받을 수 있기 때문에 베이스가 되는 템플릿 파일을 하나 만들어놓고, 각 파일마다 다른 부분만 코딩해주면 되는 기능이 존재한다.
먼저 아래 경로에 베이스가 될 템플릿 파일을 생성해준다.
/templates/base.html
base.html
{% load static %}
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static '/review/bootstrap.min.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static '/review/style.css' %}"
/>
<title>게에시이파안</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML문서의 기본 틀이된다. body 태그 안의 {% block content %} 와 {% endblock %} 는 base.html을 상속한 템플릿에서 구현해야 하는 영역이 된다.
🤨 나는 처음에 이 base 파일을 /templates/reveiw/base.html로 경로를 잘못설정해서 에러가 발생했는데 그 이유를 찾는데 좀 애먹었다. 결국 상속하는건 부모의 속성을 받아오는것인데 같은 경로에 파일이 생성되어있어 상속 받을 base.html파일을 찾지 못해 발생한 에러였다. 이부분은 앞으로 생성할 때 주의해야겠다.
question_list.html
{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
<table class="table">
<thead>
<tr class="thead-dark">
<th>번호</th>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
{% if question_list %}
{% for question in question_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
<a href="{% url 'review:detail' question.id %}">{{ question.subject }}</a>
</td>
<td>{{ question.create_date }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3" 질문이 없습니다.></td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endblock %}최상단에 {% extends 'base.html' %}로 내가 base.html파일을 상속받는다는것을 명시해준다. 그리고 {% block content %} {% endblock %} 사이에 question_list.html 파일에서만 명시되어야 하는 부분들을 코딩해주면 된다.
question_detail.html
question_list.html과 마찬가지로 수정해주면 된다!
