Flask 的模版引擎使用的是Jinja2 Jinja2
示例代码（项目文件index.py）：
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
return 'hello vilay'
@app.route('/user/<username>')
def profile(username):
return render_template('user.html',name=username)
@app.route('/posts/<int:post_id>')
def posts(post_id):
return 'Posts %s' % post_id
if __name__ == '__main__':
app.run(debug=True)
目录结构
比如你项目(index.py)在目录下/www/flask/，则在该目录下,新建模版目录templates,在该目录下新建模版文件user.html
user.html内容
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
{% if name %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}
</body>
</html>
模版继承
后台我采用layui做ui框架。
首先，创建布局文件 templates/layout.html
<!DOCTYPE html>
<html>
<head>
{% block head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='modules/layui/css/layui.css') }}">
{% endblock %}
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">Vstary</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">首页</a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">内容管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">文章列表</a></dd>
<dd><a href="javascript:;">分类列表</a></dd>
<dd><a href="javascript:;">标签列表</a></dd>
<dd><a href="javascript:;">评论列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;">数据统计</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">访问数据</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">系统设置</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">系统设置</a></dd>
<dd><a href="javascript:;">管理员列表</a></dd>
<dd><a href="javascript:;">后台日志</a></dd>
<dd><a href="javascript:;">权限管理</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
{% block content %}{% endblock %}
</div>
<div class="layui-footer">
{% block footer %}
© vstary.com
{% endblock %}
</div>
</div>
<script src="{{ url_for('static', filename='modules/layui/layui.js') }}"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
子模版使用
{% extends "layout.html" %}
{% block content %}
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">单行输入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" value="{{ name }}">
</div>
</div>
</form>
{% endblock %}