이번에는 여러분들이 만드신 templates를 상속하는 방법에 대해서 이야기하고자 합니다.
혹시 여러 html을 작업하시다가 navbar 같은 곳에 메뉴 하나를 추가해주기 위해서 눈물을 흘리며 모든 html에 다 들어가서 navbar 태그를 찾고 하나하나 다 수정하셨던 경험이 있으신가요? 있으시다면 더 이상 그렇게 할 일은 없습니다.
템플릿 상속은, 기반이 되는 하나의 template을 만들고, 그것을 기반으로 다른 html을 작성하는 기법입니다.
우리가 만들 base.html은 앞으로 상속받을 모든 html들의 기반이 될 예정입니다.
프로젝트명, 앱명은 사용자마다 다를 수도 있습니다!
그 동안 우리는 app의 templates 폴더 안에서 계속 html파일을 만들곤 했죠? 이번에는 조금 다릅니다.
이번에는 project 폴더 안에 templates라는 폴더를 생성하고, 그 안에 base.html을 만들어봅시다.
그리고, 이 곳에 상속할 코드를 작성해 줍시다. 저는 bootstrap navbar를 임의로 가져와 보겠습니다. 저는 base.html을 다음과 같이 작성해 주었습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css>"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">글쓰기</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">준비중입니다</a>
</li>
</ul>
</div>
</nav>
**<div class='container'>
{% block content %}
{% endblock %}
</div>**
</body>
<!-- JS, Popper.js, and jQuery -->
<script src="<https://code.jquery.com/jquery-3.5.1.slim.min.js>"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js>"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="<https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js>"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</html>
이렇게 한다면, 우리는 위의 코드를 통째로 상속이 되도록 할 예정입니다.
여기서 주목할 것은, 굵게 칠해진 코드인데요, 장고 내장 명령어를 이용해서 뭔가 새로운게 나왔습니다. 저 {% block content %}와 {% endblock %} 사이에 페이지마다 변경될 내용이 들어갈 예정입니다.