[ 다루는 내용 ]
$ vim app/routes.py
$ mkdir app/templates
$ vim app/templates/index.html
$ vim app/templates/base.html
이전에 실습한 내용
또는
외부 IP에서 접속 가능한 웹서버 run 및 기본 5000 포트가 아닌 다른 포트로 서버 run을 원하면
아래 링크를 참조해주세요.
https://growingsaja.tistory.com/266
1. 간단한 템플릿 예시 작성
$ vim app/routes.py
from app import app
@app.route('/')
@app.route('/index')
def index():
user = {'username':'Miguel'}
return '''
<html>
<head>
<title>Home Page - Microblog</title>
</head>
<body>
<h1>Hello, ''' + user['username'] + '''!</h1>
</body>
</html>'''
2. 좀 더 체계화된 템플릿 세팅
$ vim app/routes.py
from app import app
from flask import render_template
@app.route('/')
@app.route('/index')
def index():
testuser = {'username':'Miguel'}
testposts = [
{
'author': {'username': 'John'},
'body': 'Beautiful day in Portland!'
},
{
'author': {'username': 'Susan'},
'body': 'The Avengers movie was so cool!'
}
]
return render_template('index.html', title='Home', user=testuser, posts=testposts)$ mkdir app/templates
$ vim app/templates/index.html
위의 render_template 의 title 값이 누락되었을 경우를 대비하여 title쪽에 조건문을 넣어주었고, for문으로 여러줄을 출력하도록 작성했습니다. html을 모른다면 그냥 넘어가도 무방합니다.
<html>
<head>
{% if title %}
<title>{{ title }} - Microblog</title>
{% else %}
<title>Welcome to Microblog</title>
{% endif %}
</head>
<body>
<h1>Hi, {{ user.username }}!</h1>
{% for post in posts %}
<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
{% endfor %}
</body>
</html>
3. 템플릿 상속시키기
갑자기 html 강의처럼 보이는 건 기분탓입니다.
이런 부분들 역시 html과 거리가 멀다면 무시하셔도 무방합니다.
$ vim app/templates/base.html
<html>
<head>
{% if title %}
<title>{{ title }} - Microblog</title>
{% else %}
<title>Welcome to Microblog</title>
{% endif %}
</head>
<body>
<div>Microblog: <a href="/index">Home</a></div>
<hr>
{% block content %}{% endblock %}
</body>
</html>$ vim app/templates/index.html
{% extends "base.html" %}
{% block content %}
<h1>Hi, {{ user.username }}!</h1>
{% for post in posts %}
<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
{% endfor %}
{% endblock %}