이것저것

(5) Flask Jinja2를 사용해 표준 HTML과 템플릿 상속 사용하기 본문

Python

(5) Flask Jinja2를 사용해 표준 HTML과 템플릿 상속 사용하기

곰태태 2023. 11. 25. 14:55
반응형
SMALL

먼저 회원가입 페이지나 메인페이지 등 여러 페이지를 만들게되면

navbar나 footer등 모든 페이지에 공통적으로 들어가는 부분들이 있을 것이다.

그런데 매번 그 코드를 전부 넣게되면 한 페이지당 코드의 길이가 너무 길어지게 되니 자주 쓰이는 코드들을 따로 빼서 관리하고 템플릿으로 만들어 상속하게 할것이다.

Spring boot의 thymeleaf와 같은 기능이라고 봐도 된다.

Flask에서는 Jinja2 템플릿 엔진을 사용한다고 한다.

 

먼저 navbar와 bootstrap 코드들을 템플릿화 해보자

navbar.html로 파일을 만들어주고 navbar 부분을 추가해주자

<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('main.index') }}">Pybo</a>
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-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 me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">계정생성</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">로그인</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

 

그리고 공통 레이아웃(header, footer, navbar)를 가진 기본 템플릿을 생성한다.

보통은 base.html로 이름을 작성하고 templates라는 폴더에 생성한다.

<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- meta name="viewport"는 모바일 기기에서 반응형 웹 디자인을 위한 뷰포트 설정이다. -->
    <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>
<!-- 네비게이션바 -->
{% include "navbar.html" %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
</body>
</html>

코드에서 보면

<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->

이 부분이 있는데 다른 html 코드가 block content와 endblock 사이에 들어간다고 생각하면된다.

 

그러면 main.html이 엄청나게 간단해진다....

{% extends "base.html" %}
{% block content %}
<div>메인페이지</div>
{% endblock %}

extends로 base.html을 불러오면, bootstrap과 naverbar가 적용되는 것이다.

그리고 위에 말했듯이 block content와 endblock의 사이에 코드를 작성해주면 된다.

그러면 출력 결과는 이전 navbar, bootstrap 적용하기와 똑같이 나온다.

대신에 코드가 엄청 간단해 진것을 확인 할 수 있다.

반응형
LIST

'Python' 카테고리의 다른 글

(7) 로그인 로그아웃 구현  (0) 2023.11.29
(6) 회원가입 구현하기  (1) 2023.11.26
(4) 메인 페이지 및 bootstrap, navbar 설정  (0) 2023.11.25
(3) 모델 생성하기  (5) 2023.11.23
(2) pycharm에 mysql 불러오기  (2) 2023.11.22
'Python' Related Articles more
Comments