표준 HTML 템플릿 상속
1. 템플릿 파일 기본 틀
<!-- flask > projects > firstproject > pybo > template > base.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="\{\{ url_for('static', filename='bootstrap.min.css' )\}\}"
/>
<!-- pybo CSS -->
<link rel-"stylesheet" href="\{\{ url_for('static', filename='style.css') \}\}">
<title>Hello, pybo!</title>
</head>
<body>
<!-- 기본 템플릿에 삽입할 내용 Start -->
{\% block content \%} {\% endblock \%}
<!-- 기본 템플릿에 삽입할 내용 end -->
</body>
</html>
2. 질문 목록 조회 템플릿 파일 수정하기
<!-- flask > projects > firstproject > pybo > template > question > question_list.html -->
<!--
<link
rel="stylesheet"
href="\{\{ url_for('static', filename='bootstrap.min.css') \}\}"
/> -->
{\% 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></td>
<td>
<a href="\{\{ url_for('question.detail', question_id=question.id)\}\}"
></a
>
</td>
<td></td>
</tr>
{\% endfor \%} {\% else \%}
<tr>
<td colspan="3">질문이 없습니다.</td>
</tr>
{\% endif \%}
</tbody>
</table>
</div>
{\% endblock \%}
3. 질문 상세 조회 템플릿 파일 수정하기
<!-- flask > projects > firstproject > pybo > template > question > question_detail.html -->
<!--
<link
rel="stylesheet"
href="\{\{ url_for('static', filename='bootstrap.min.css') \}\}"
/> -->
{\% extends 'base.html' \%} {\% block content \%}
<div class="container my-3">
<h2 class="border-bottom py-2"></h2>
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space: pre-line">
</div>
<div class="d-flex justify-content-end">
<div class="badge badge-light p-2"></div>
</div>
</div>
</div>
<h5 class="border-bottom my-3 py-2">
개의 답변이 있습니다.
</h5>
{\% for answer in question.answer_set \%}
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space: pre-line">
</div>
<div class="d-flex justify-content-end">
<div class="badge badge-light p-2"></div>
</div>
</div>
</div>
{\% endfor \%}
<form
action="\{\{ url_for('answer.create', question_id=question.id) \}\}"
method="post"
class="my-3"
>
<div class="form-group">
<textarea
name="content"
id="content"
class="form-control"
rows="10"
></textarea>
</div>
<input type="submit" value="답변등록" class="btn btn-primary" />
</form>
</div>
{\% endblock \%}