파드레의 요모조모

=====================

call.html

=====================

{% macro render_dialog(title, class='dialog')-%}

   <div class = "{{ class }}">

      <h2>{{title}}</h2>

      <div class = "contents">

         {{caller()}}

      </div>

   </div>

 {%- endmacro %}

 {% call render_dialog('Call Blocl') %}

     call block과 매크로 동시 사용

 {% endcall%}

===========

execution.py

===========

from jinja2 import Environment, FileSystemLoader

file_loader = FileSystemLoader('templates')

env = Environment(loader=file_loader)

template = env.get_template("call.html")

template.render()

print(template.render())

==============================

실행결과

==============================

○ 이스케이핑

   - 적은 단위 작업: 작은 따옴표 ( 특수문자를 일반 문자로 처리 )

     '&nbsp'같은 공백문자를 jinja2에서는 '로 감싸서 표시 ''&nbsp''

  - 큰 단위 블럭 구문의 경우

     {% raw %}

         ---

         ---

     {% rawend %}

○ jinja2 template engine의 주석처리

   {#     #}

○ html 주석처리

   (!--    

           ---

           ---

           ---

   ->

○  jinja2에서 불필요 개행("/n")문자삭제

   {# #}

- "/n" 문자 제거 : {%   -%}   

○ 매크로 만들기 : 

   - {% macro <macro name>(macro argument1, arg2,,,)  %}

     <action script 실행코드 >

     {% endmacro %}

   - 예제 -

    {% macro input(name, value='',type='text',size=30)%}

       <input type="{{type}}" name="{{name}}" value="{{value}}" size="size}}">

    {% endmacro%}  ==> 매크로 작성

     <p>{{input('username')}}</p>

     <p>{{input('password',type='password')}}</p>

실행코드

from jinja2 import Environment, FileSystemLoader

file_loader = FileSystemLoader('templates')

env = Environment(loader=file_loader)

template = env.get_template("macro.html")

template.render()

print(template.render())

===macro.html에서 개행문자 제거 명령 적용

{% macro input(name='', value='',type='text',size=30) -%}

  <input type="{{type}}" name="{{name}}" value="{{value}}" size="{{size}}">

{%- endmacro %}

  <p> {{input('username')}}</p>

  <p> {{input('password',type='password')}}</p>

--실행 결과 --

gseek의 flask 강좌를 공부하며 학습한 내용을 공유하고 소스를 공유하고자 포스팅합니다.

include 기능 및 super 코드를 학습했는데 잘 안되는 부분은 삭제를 했습니다.

template 상속은 

   {% extends "<부모템플리트 이름>" %}

   {% block %} 대체할 코드 {% endblock %}

=====  app.py  ====

from flask import Flask, render_template

app=Flask(__name__)

@app.route("/")

def temp_test():

    return render_template("super.html",my_string="템플릿 테스트",my_list=[11,22,33,44,55,66,77])

if __name__=="__main__":

   app.run()

====== super.html ====

{% block content %}

  <h4>자식 템플릿의 시작</h4>

  <br/>

  <p>My String : {{my_string}}</p>

  <p>리스트 값:{{my_list[2]}}</p>

  <p>전체 리스트</p>

  <ul>

     {% for i in my_list%}

     <li>{{i}}</li>

     {% endfor%}

  </ul>

  <h4>자식 템플릿의 끝</h4>

 {% block footer %}

  {{ super()}}

 {% endblock footer %}

{% endblock content%}

===nav.html =====

<nav class="navbar navbar-inverse" role="navigation">

      <div class="container-fluid">

         <div class = "navbar-header">

           <a clas="navbar-brand" href="/">Logo!</a>

         </div>

      </div>

      <div class = "collapse navbar-collapse">

        <ul class="nav navbar-nav">

          <li class="active"><a href="#">메뉴1</a></li>

          <li><a href="#">메뉴2</a></li>

          <li><a href="#">메뉴3</a></li>

          <li><a href="#">메뉴4</a></li>         

        </ul>

        <form class="navbar-form navbar-left" role="search">

           <div class="form-group">

             <input type="text" class="form-control" placeholder="검색하기">

           </div>

           <button type="submit" class = "btn btn-default">확인</button>

        </form>

        <ul class = "nav navbar-nav navbar-right">

           <li><a href="#">회원가입</a></li>

           <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">사용자<b class"caret"></b></a>

              <ul class="dropdown-menu">

                 <li><a href="#">나의 프로필</a></li>

                 <li><a href="#">주문내역</a></li>

                 <li class="divider"></li>

                 <li><a href="#">로그인</a></li>

              </ul>

            </li>

        </ul>

      </div>

    </nav>

==== layout.html ====

<!DOCTYPE html>

  <head>

    <title>Flask Template Example</title>

    <meta name="veiwport" content = "width=device-width, initial-scal=1.0">

  </head>

    <style type="text/css">

      h3 {color:blue}

      h4 {color:red}

      .footer{color:green}

    </style>

  <body>

  {% include 'nav.html'%}

   {% block heading %}

    <h1>jinja super test</h1>

   {% endblock heading %}

    <div class ='wrap'>

       <h3>기본 템플릿</h3>

       <br/>

       {% block content %}{% endblock content %}

       <br/>

       <h3> 기본 템플릿</h3>

       <br/>

       <div class = "footer">

         {% block footer%}

             추가된 footer 영역

         {% endblock footer%}

    </div>

  </body>

</html>

Python에서 Flask는 웹을 만들수 있는 프레임워크의 하나입니다.

Flask를 학습하면서 만든 소스코드를 올려 학습한 내용을 잊지않고 필요시 찾아 볼수있도록 해보겠습니다.

학습은 gseek의 flask강좌의 내용을 학습하며 만든 소스 코드입니다.

app.py실행==>temp2.html==>layout.html실행

=================================================================

mysite/app.py

=================================================================

from flask import Flask, render_template

app=Flask(__name__)

@app.route("/")

def temp_test():

    return render_template("temp2.html",my_string="템플릿 테스트",my_list=[11,22,33,44,55,66,77])

if __name__=="__main__":

   app.run()

================================================================

mysite/templates/temp2.html

=================================================================

{% extends "layout.html"%}

{% block content %}

  <h4>자식 템플릿의 시작</h4>

  <br/>

  <p>My String : {{my_string}}</p>

  <p>리스트 값:{{my_list[2]}}</p>

  <p>전체 리스트</p>

  <ul>

     {% for i in my_list%}

     <li>{{i}}</li>

     {% endfor%}

  </ul>

  <h4>자식 템플릿의 끝</h4>

{% endblock%}

=================================================================

mysite/templates/layout.html

=================================================================

<!DOCTYPE html>

  <head>

    <title>Flask Template Example</title>

    <meta name="veiwport" content = "width=device-width, initial-scal=1.0">

  </head>

    <style type="text/css">

      h3 {color:blue}

      h4 {color:red}

    </style>

  <body>

    <nav class="navbar navbar-inverse" role="navigation">

      <div class="container-fluid">

         <div class = "navbar-header">

           <a clas="navbar-brand" href="/">Logo!</a>

         </div>

      </div>

      <div class = "collapse navbar-collapse">

        <ul class="nav navbar-nav">

          <li class="active"><a href="#">메뉴1</a></li>

          <li><a href="#">메뉴2</a></li>

          <li><a href="#">메뉴3</a></li>

          <li><a href="#">메뉴4</a></li>         

        </ul>

        <form class="navbar-form navbar-left" role="search">

           <div class="form-group">

             <input type="text" class="form-control" placeholder="검색하기">

           </div>

           <button type="submit" class = "btn btn-default">확인</button>

        </form>

        <ul class = "nav navbar-nav navbar-right">

           <li><a href="#">회원가입</a></li>

           <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">사용자<b class"caret"></b></a>

              <ul class="dropdown-menu">

                 <li><a href="#">나의 프로필</a></li>

                 <li><a href="#">주문내역</a></li>

                 <li class="divider"></li>

                 <li><a href="#">로그인</a></li>

              </ul>

            </li>

        </ul>

      </div>

    </nav>

    <div class ='wrap'>

       <h3>기본 템플릿</h3>

       <br/>

       {% block content %}{% endblock %}

       <br/>

       <h3> 기본 템플릿</h3>

    </div>

  </body>

</html>

===============================================

pythonanywhere에서는 학습당시에 에러가 발생해 애를 먹게 했었는데 메일을 보내고 응답이 구체적인 에러 내용을 알려 달라해서 다시 해보니 에러가 없어 결과를 올립니다.

 pythonanywhere에서는 cdn은 동작하지않네요..

그래도 나머지는 잘 동작해서 행복했습니다.