티스토리 뷰

Python/파이썬 플라스크

[3주차-2] render_template

JH_ 2022. 7. 11. 18:28

📄 render_template (html 연결)

from flask import Blueprint, render_template

views, auth 파일의 import 부분에 render_template를 연결해준다.

def home():
    return render_template("home.html")

함수의 return 부분에 연결해주면 괄호 안에 html이 연결된 것이다.

Bootstrap

https://startbootstrap.com/theme/clean-blog에서 미리 만들어진 html 템플릿을 다운받아 적용해보려 한다.

html 파일들을 모두 template 폴더에 넣어주고 실행하면 아래 화면이 나온다.

👇 다운받은 html 파일들은 head, nav, footer부분이 반복되는 형태인 것을 알 수 있는데 이를 base.html로 묶을 수 있다.

더보기

base.html

{# <nav>, <footer> 만 있는 파일 #}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    {# 변화하는 부분 #}
    <title>{% block title %}{% endblock %}</title>

    <link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet"
          type="text/css"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
          rel="stylesheet" type="text/css"/>


    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet"/>


</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="index.html">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto py-4 py-lg-0">
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post_detail.html">Sample Post</a>
                </li>
                <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

{# 변화하는 부분 #}
{% block header %}{% endblock %}

{# 변화하는 부분 #}
<div class="content-wrapper">
    {% block content %}{% endblock %}
</div>

<!-- Footer-->
<footer class="border-top">
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <ul class="list-inline text-center">
                    <li class="list-inline-item">
                        <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                    </span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                                    </span>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                                    </span>
                        </a>
                    </li>
                </ul>
                <div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2022</div>
            </div>
        </div>
    </div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>


<!------- 정적파일을 불러오는 코드------->
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>


</body>
</html>

 

적용되지 않은 css, js는 static 폴더를 만들어서 파일을 넣고, script src="{{ url_for ( ) }}"로 파일을 불러올 수 있다.

jinja 템플릿 엔진의 상속

base.html로 묶어 extends로 상속받았으니, {# 변화하는 부분 #}에 해당하는 부분만 추가해주면 된다.

더보기

index.html

{% extends 'base.html' %}

{% block title %}This is home.{% endblock %}

{% block header %}
    <!-- Page Header-->
    <header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>Clean Blog</h1>
                        <span class="subheading">A Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}

{% block content %}
    <!-- Main Content-->
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <!-- Post preview-->
                <div class="post-preview">
                    <a href="post_detail.html">
                        <h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
                        <h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
                    </a>
                    <p class="post-meta">
                        Posted by
                        <a href="#!">Start Bootstrap</a>
                        on September 24, 2022
                    </p>
                </div>
                
                <!-- Divider-->
                <hr class="my-4"/>
                <!-- Post preview-->
                <div class="post-preview">
                    <a href="post_detail.html"><h2 class="post-title">I believe every human has a finite number of
                        heartbeats. I don't intend to waste any of mine.</h2></a>
                    <p class="post-meta">
                        Posted by
                        <a href="#!">Start Bootstrap</a>
                        on September 18, 2022
                    </p>
                </div>
                
                <!-- Divider-->
                <hr class="my-4"/>
                <!-- Post preview-->
                <div class="post-preview">
                    <a href="post_detail.html">
                        <h2 class="post-title">Science has not yet mastered prophecy</h2>
                        <h3 class="post-subtitle">We predict too much for the next year and yet far too little for the
                            next ten.</h3>
                    </a>
                    <p class="post-meta">
                        Posted by
                        <a href="#!">Start Bootstrap</a>
                        on August 24, 2022
                    </p>
                </div>
                
                <!-- Divider-->
                <hr class="my-4"/>
                <!-- Post preview-->
                <div class="post-preview">
                    <a href="post_detail.html">
                        <h2 class="post-title">Failure is not an option</h2>
                        <h3 class="post-subtitle">Many say exploration is part of our destiny, but it’s actually our
                            duty to future generations.</h3>
                    </a>
                    <p class="post-meta">
                        Posted by
                        <a href="#!">Start Bootstrap</a>
                        on July 8, 2022
                    </p>
                </div>
                
                <!-- Divider-->
                <hr class="my-4"/>
                <!-- Pager-->
                <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older
                    Posts →</a></div>
            </div>
        </div>
    </div>
{% endblock %}

 

참고

참고한 블로그

참고한 영상

 

 

'Python > 파이썬 플라스크' 카테고리의 다른 글

[5주차] 관리자 페이지  (0) 2022.08.07
[4주차] 로그인/회원가입 처리하기  (0) 2022.07.18
[3주차] __init__ / blueprint  (0) 2022.07.11
[2주차-2] Python DB API/SQLite3  (0) 2022.07.08
[2주차] routing/url 구축/http 메소드  (0) 2022.07.07
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday