개발자 리자드
이전 포스팅doongjun.tistory.com/17 에서는 html파일에 단순히 진자 템플릿을 사용했다.
이번 포스팅에서는 웹사이트를 더욱 동적으로 만들어 줄 수 있도록 상속을 사용해 볼 것이다.
우선 templates폴더 안에 base.html파일을 생성한 후 about.html과 index.html의 공통 코드 즉, head와 nav bar 등을 base.html파일에 복사-붙여넣기 하고 기존 파일에 있던 코드는 지워준다.
{% extends 'base.html' %}그리고 extends를 통해 index.html, about.html 파일에 적용해주면 base.html에 있는 코드를 상속받아 간편하게 사용할 수 있다. 굳이 이렇게 사용하는 이유는 2개의 파일을 경우 각각 고쳐주면 그게 더 편할지도 모르겠지만 html파일이 50개라고 생각해보자. 그럴경우, 간단한 수정이 필요할 때 base.html파일만 수정해준다면 모두 적용할 수 있을 것이다.
여기서 중요한 점은 block content를 사용하는 것이다!
base.html
<!doctype html>
<html lang="en">
<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="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>
{% block title %}
GENERIC TITLE
{% endblock %}
</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{url_for('index')}}">Dongjun place</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{url_for('index')}}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('about')}}">About</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>위 base파일에서 {% block content %}{% endblock %}을 확인할 수 있는데 이것은 html파일이 들어갈 수 있는 공간을 만들어 준것이다. 그리고 index.html 파일과 about.html파일을 모든 컨텐츠 블록에 대한 템플릿의 일부로 사용할 것이다. 블록 태그가 base.html의 파일과 꼭 일치해야 한다. 또 콘텐츠 플록에 속한 모든 코드를 포함하게 만들어야 할 것이다. 이를 위해서 {% block content %}{% endblock %}사이에 모든 코드를 넣어야한다. 아래처럼!
index.html
{% extends 'base.html'%}
{% block title %}Welcom To Dongjun's Website{% endblock %}
{% block content %}
<div class="container">
<h1>Hello, world!</h1>
</div>
{% endblock %}
about.html
{% extends 'base.html'%}
{% block content %}
<div class="container">
<h1>About me...</h1>
<ol>
<p>
{% for name in names %}
{% if name == 'Dongjun' %}
<li>Dongjun is Me!!</li>
{% else %}
<li>{{ name }}</li>
{% endif %}
{% endfor %}
</p>
</ol>
</div>
{% endblock %}
'Web developer > Flask' 카테고리의 다른 글
| [Flask] 플라스크 어플리케이션 (0) | 2020.12.12 |
|---|---|
| [Flask] Form (0) | 2020.10.31 |
| [Flask] Jinja2 Template #1 (0) | 2020.10.30 |
| [Flask] Bootstrap (0) | 2020.10.30 |
| [Flask] Blueprint (0) | 2020.10.24 |
댓글