레이아웃 템플릿 상속 / 재사용
- 현재 만들어진 모든 페이지들의 레이아웃은 공통된 코드 및 부분들이 많습니다.
- 이를 jinja2 템플릿 상속 기능을 사용해 공통된 부분은 상속받아 사용하고, 변화되는 부분만 수정하여 사용하겠습니다.
- jinja2 템플릿 상속 방법은 아래의 링크에 정리되어있습니다.
[Python] 5. Flask(플라스크) -jinja2 템플릿 엔진 / 템플릿 상속하기 / 재사용
jinja2 템플릿 상속 기능 - jinja의 가장 강력한 기능 중 하나는 상속 기능입니다. - php에서 include() 와 require() 함수와 비슷한 기능을 제공합니다. - 웹사이트를 제작하다보면 공통된 코드가 자주 사��
hiio.tistory.com
- 이 방법을 사용해 layout.html 파일을 만들어 각 페이지들에게 상속합니다.
layout.html 파일 생성
- 먼저 layout.html 파일을 생성하기 전에 어떤 부분이 공통된 부분인지, 어떤 곳을 오버라이딩 하면 될지 알아 보겠습니다.
- header / footer / main / main 안에 sidebar 는 공통된 부분입니다.
- maintext / mainimg 부분이 각 페이지 마다 변화되는 부분입니다.
- 이제 layout.html 파일을 생성하고 index.html 코드는 복사 하여 붙여 넣은 뒤 maintext 부터 mainimg까지 부분을 삭제하고 그 부분에 {% block content %}{% endblock %} 코드를 추가해 주겠습니다.
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{{ url_for('static', filename='css/reset.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<title>hello</title>
</head>
<body>
<header></header>
<div id="main">
<div id="sidebar">
<nav>
<ul id='sidebarul'>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/portfolio">Portfolio</a>
</li>
<li>
<a href="https://hiio.tistory.com">Blog</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</div>
{% block content %}
{% endblock %}
</div>
<footer></footer>
</body>
</html>
- index.html 코드를 수정합니다.
- {% extends 'layout.html'%}을 추가해 상속받습니다.
- {% block content %} 와 {% endblock %} 사이에 maintext 부터 mainimg 까지의 코드를 추가 하고 나머지 코드들을 삭제 합니다.
index.html
{% extends 'layout.html' %}
{% block content %}
<div id='maintext'>Welcome to My PortFolio</div>
<div id="mainsubtext">
<p>Breath</p>
<p>- Everything will be made by me.</p>
</div>
<div id='mainimg'>
<img src="../static/img/main/main_img.jpg" alt="MainImage">
</div>
{% endblock %}- 이제 웹사이트에 접속 해서 확인 해 보겠습니다.
- 잘 적용 되었습니다.!!!
- 이제 각 페이지도 똑같이 상속한 후에 {% block content %}{% endblock %} 사이를 우선은 비워두겠습니다.
{% extends 'layout.html' %}
{% block content %}
{% endblock %}Title 변수 선언 및 값 지정
- 각 페이지들 마다 타이틀 이름이 다릅니다.
- 각 페이지들의 타이틀을 페이지 주소 이름으로 정하려고 합니다.
- 이전에 동적 라우팅을 통해서 페이지 주소를 pagename이라는 변수로 받아 왔습니다.
- 이를 템플릿 변수 사용을 통해서 <title> 태그안에 변수를 선언 후 서버에서 값을 넘겨 줍니다.
- 아래의 링크에 템플릿 변수 적용에 대해 간단히 정리 해 놨습니다.
- 이를 이용해서 각 페이지 별 타이틀을 지정해 보겠습니다.
[Python] 6. Flask(플라스크) - 템플릿 변수 사용 / 변수 값 적용
플라스크 변수 사용 - 플라스크 서버에서는 html에 변수를 만들어 서버 python에서 값을 넘겨 줄 수 있습니다. - 변수 사용에는 아래의 코드를 원하는 위치에 추가해 사용합니다. {{변수명}} - 변수�
hiio.tistory.com
- 먼저 layout.html에서 <head> 태그 -> <title> 태그에 {{ title }} 변수를 선언 합니다.
<head>
<meta charset="UTF-8">
<link href="{{ url_for('static', filename='css/reset.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<title>{{title}}</title>
</head>- 서버 index() 함수에서 render_template() title변수 값으로 Home을 대입합니다.
- 서버에서 menu() 함수에서 title 변수를 선언하고 값으로 pagename을 대입합니다.
- render_template() title 변수 값으로 위에서 선언한 변수 title을 대입합니다.
@app.route("/")
def index():
return render_template('index.html',title='Home')
@app.route("/<pagename>")
def menu(pagename):
title = pagename
return render_template(f'{pagename}.html',title=title)- 웹사이트에 접속 해서 확인해 보겠습니다.
