728x90

jinja2 템플릿 상속 기능

- jinja의 가장 강력한 기능 중 하나는 상속 기능입니다.

- php에서 include() 와 require() 함수와 비슷한 기능을 제공합니다.

- 웹사이트를 제작하다보면 공통된 코드가 자주 사용될때가 있습니다.

- 페이지를 구성하는 파일들이 많아지면 이러한 코드들을 수정할때 많은 시간이 쓰입니다.

- 이러한 문제를 해결 하기 위해 jinja2 템플릿 엔진에서 제공하는 상속기능을 사용하면 편리합니다.

 

  템플릿 상속  

- 먼저 templetes디렉토리에 부모 템플릿인 animal.html 과 dog.html 파일을 생성하고 html 기본 코드들을 입력하고 title을 각각 animal / dog를 입력합니다.

- <body> 태그안에 <h1>태그를 추가 하고 , animal / dog 텍스트를 각가 추가 해 주겠습니다.

 

  animal.html  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animal</title>
</head>
<body>
    <h1>animal</h1>
</body>
</html>

  dog.html  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dog</title>
</head>
<body>
    <h1>dog</h1>
</body>
</html>

- 이제 플라스크 서버에 animal과 dog를 각각 라우팅 해 줍니다.

@app.route("/animal")
def animal():
    return render_template('animal.html')
@app.route("/dog")
def dog():
    return render_template('dog.html')

- 해당 주소로 접속 해 보겠습니다.

- animal.html 을 dog.html 에 상속합니다.

- 상속할때는 아래의 코드를 상속할 위치에 추가해 사용합니다.

{% block 이름 %}

{% endblock %}

- 상속받을 때는 아래의 코드를 사용합니다.

{% extends '상속받을 파일이름'}
{% block 이름 %}
소스코드
...
{% endblock %}

- 이제 animal.html 과 dog.html 코드를 수정해 보겠습니다.

 

animal.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>animal</title>
</head>

<body>
    <h1>animal</h1>
    {% block content %}
    {% endblock %}
</body>

</html>

dog.html

{% extends 'animal.html'%}
{% block content %}
<h2>dog</h2>
{% endblock %}

- 코드량이 줄고 간결해 졌습니다.

- 이제 /dog 에 접속해서 확인해 보겠습니다.

- animal.html 이 상속 되었음을 확인 할 수 있습니다.

728x90

+ Recent posts