티스토리 뷰

Python

[웹 앱프로그래밍] Jinja2 extends 사용해서 html 나누기(layout)

I like simple code 2020. 6. 5. 23:54
728x90

Jinja2 템플릿을 이용하면 html을 나누어서 페이지를 표시할 수 있습니다. 이전 글에서 부트스트랩으로 Navbar를 만들었습니다. Navbar를 페이지 마다 붙여야 하는 번거러움이 있었죠. 다른 웹언어(PHP, JSP 등)를 경험 해본 사람들은 include를 사용해서 하면 되겠다라고 생각할 겁니다. Jinja에서도 include를 사용할 수 있는데 extends로 템플릿 상속을 해서 사용 할겁니다. extends를 사용하면 사이트의 공통부분을 포함하는 레이아웃을 만들 수 있습니다. Jinja 문법이 들어 가기 때문에 복잡해 보일 수 있지만 간단한 예제로 틀을 만든다 생각하고 그 규칙만 알면 충분히 사용할 수 있습니다.

 

먼저 layout.html 파일을 만들고 이전 글에서 만들었던 main.html 파일을 복사 해서 붙여 넣습니다.

그리고 아래와 같이 수정 합니다.

<!DOCTYPE html>
<html>
  <head>
    {% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <title>{% block title %}{% endblock %} - 내가 만든 사이트</title>
    {% endblock %}
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand/logo -->
        <a class="navbar-brand" href="#">내사이트</a>
        
        <!-- Links -->
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="/">메인</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('startgame') }}">내가 만든 게임</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('join') }}">회원가입</a>
          </li>
        </ul>
    </nav>
    <div class="container-fluid">
        <div id="content">{% block content %}{% endblock %}</div>
    </div>
  </body>
</html>

중간 중간에 {% %} 태그가 보입니다. 이부분은 다음 main.html 소스를 수정한 것을 보면 이해하기 쉽습니다.

아래 main.html 코드를 봅니다.

{% extends "layout.html" %}
{% block title %}메인 페이지{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
    <h3>메인 페이지</h3>
    <p>안녕하세요. 내 사이트에 오신것을 환영 합니다. </p>
    <img src="https://lh3.googleusercontent.com/proxy/YgPOo89LUIbaUpAIvCG-MRTsuReou60Ox8h7CVVzpqyS51DX57GW4LqJI-ediKstKAkKJgP4waaoVtmi2-8k9KfY9bM2pS8rYFBGqbKgmAKdvfNyOkF2" class="rounded" alt="도라에몽">
{% endblock %}

핵심은 {% extends %} 입니다. layout.html  파일을 상속 시키고 아래

{% block title %}메인 페이지{% endblock %}부분에는 layout.html 에서 정의된 

<title>{% block title %}여기에 값이 들어 갑니다.{% endblock %} - 내가 만든 사이트</title>

그다음 {% block head %} 안에 {{ super() }} 가 있는데 부모 템플릿 즉, layout.html 파일 안에 정의된 블록의 내용을 렌더링 하게 됩니다. head블록 안에 부트스트랩을 사용하기 위한 CDN 링크들이 들어 가겠네요. 여기까지는 모든 페이지의 공통으로 작성을 하면 되고 각각 페이지 마다 다르게 작성해야 되는 부분이 {% block content %} 이 되겠습니다.

{% block content %} 여기에는 각 페이지별 마다 다르게 들어 가겠죠? {% endblock %}

아래 소스를 main.html 소스와 비교 해서 보면 반복되는 패턴이 보이게 될 겁니다.

startgame.html 파일입니다.

{% extends "layout.html" %}
{% block title %}게임 시작 페이지{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
    <h2>게임</h2>
    게임을 시작 합니다.
    <form action="/setchar" method="POST">
        <label for="fname">이름 입력 :</label>
        <input type="text" id="fname" name="name"><br>
        <input type="submit" value="확인">
    </form> 
{% endblock %}

 

test.html 파일입니다.

{% extends "layout.html" %}
{% block title %}회원 가입 페이지{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
  <h2>KIT 웹앱 프로그래밍</h2>

  <form action="/method" method="POST">
    <label for="fname">학번:</label><br>
    <input type="text" id="fname" name="num"><br>
    <label for="lname">이름:</label><br>
    <input type="text" id="lname" name="name"><br><br>
    <input type="submit" value="확인">
  </form> 
{% endblock %}

{% extends "layout.html" %} 에서 {% endblock %} 까지 상단에 넣고 {% block content %} 안에 페이지별 코드를 작성 하면 되겠다는 생각이 듭니다.

수정하고 실행해 봅니다.

 

 

 

Navbar 가 다 붙은 것을 보니 부트스트랩이 적용된 것을 확인할 수 있습니다. 이제 하나의 사이트 같은 통일감이 드네요.

이렇게 디자인을 잘 못하더라도 기본적이 페이지를 구성하는데 별 무리 없이 만들 수 있었습니다. 

온라인상에는 저 부트스트랩을 이용해서 많은 사람들이 만들어 놓은 부트스트랩 탬플릿들이 있습니다.

회원가입 폼이 마음에 들지 않으니 저 회원가입 폼은 검색해서 다른 사람이 만든 부트스트랩 탬플릿으로 바꿔 보도록 하겠습니다.

 

'Python' 카테고리의 다른 글

[웹 앱프로그래밍] 외부 DB(mysql) 사용 하기(pythonanywhere)  (0) 2020.06.09
[웹 앱프로그래밍] 부트스트랩(Bootstrap) 탬플릿 활용(회원가입폼)  (0) 2020.06.05
[웹 앱프로그래밍] 부트스트랩(Bootstrap) 활용(메인 메뉴 Navbar)  (0) 2020.06.05
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 로그인(login) 처리(session)  (0) 2020.05.29
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Request 데이터 DB 저장(SQLite3 사용)  (0) 2020.05.29
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함