[toc]
实验介绍
本节实验将介绍 Flask 的静态文件以及渲染模板。本实验分为静态文件和渲染模板两个部分来讲解。
知识点
- 静态文件
- 模板渲染
静态文件
动态的 web 应用同样需要静态文件。CSS 和 JavaScript 文件通常来源于此。理想情况下，你的 web 服务器已经配置好为它们服务，然而在开发过程中 Flask 就能够做到。只要在你的包中或模块旁边创建一个名为 static 的文件夹，在应用中使用 /static 即可访问。
给静态文件生成 URL ，使用特殊的 static 端点名：
url_for('static', filename='style.css')
这个文件是应该存储在文件系统上的 static/style.css 。
渲染模板
在 Python 中生成 HTML 并不好玩，实际上是相当繁琐的，因为你必须自行做好 HTML 转义以保持应用程序的安全。由于这个原因，Flask 自动为你配置好 Jinja2 模板。
你可以使用方法 render_template() 来渲染模板。所有你需要做的就是提供模板的名称以及你想要作为关键字参数传入模板的变量。
这里有个渲染模板的简单例子，修改 /home/project/hello.py 文件，清空之前的代码，并向其中添加如下代码:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None): # 默认 name 为 None
return render_template('hello.html', name=name) # 将 name 参数传递到模板变量中
Flask 将会在 templates 文件夹中寻找模板。因此如果你的应用是个模块，这个文件夹在模块的旁边，如果它是一个包，那么这个文件夹在你的包里面：
比如，应用是模块（本系列实验的应用结构都是模块型）:
/application.py
/templates
/hello.html
比如，应用是包:
/application
/__init__.py
/templates
/hello.html
对于模板，你可以使用 Jinja2 模板的全部能力。详细信息查看官方的 Jinja2 Template Documentation 。
在 /home/project 目录下新建 templates 文件夹并在其中新建 hello.html 文件：
cd /home/project
mkdir templates && cd templates
touch hello.html
然后向 hello.html 模板文件中添加如下代码：
<!DOCTYPE html>
<title>Hello From Flask</title>
{% if name %}
<!-- 如果 name 不为空则将 name 渲染出来 -->
<h1>Hello {{ name }}!</h1>
{% else %}
<!-- 如果 name 为空则打印 Hello World! -->
<h1>Hello World!</h1>
{% endif %}
按照前面的方法先激活虚拟环境，然后运行应用程序
cd /home/project
source venv/bin/activate
export FLASK_APP=hello.py
export FLASK_ENV=development
export FLASK_DEBUG=1
flask run -h 0.0.0.0 -p 8080
当访问 https://xxx/hello/ 时页面显示 Hello World! ；当访问 https://xxx/hello/shiyanlou 时页面显示 Hello shiyanlou! 。
再次提醒，https://xxx 是指点击右侧工具栏“Web 服务”自动生成的链接
在模板中你也可以使用 request、session 和 g 对象，也能使用函数 get_flashed_messages() 。
模板继承是十分有用的。如果想要知道模板继承如何工作的话，请阅读文档模板继承。基本的模板继承使得某些特定元素（如标题、导航和页脚）在每一页成为可能。
自动转义默认是开启的，因此如name包含 HTML，它将会自动转义。如果你信任一个变量，并且你知道它是安全的（例如一个模块把 wiki 标记转换到 HTML ），你可以用Markup类或|safe过滤器在模板中标记它是安全的。 在 Jinja 2 文档中，你会见到更多例子。
下面有一个Markup类如何工作的基本介绍，在 Python3 命令行交互解释器中执行如下命令：
>>> from flask import Markup
>>> Markup('<strong>Hello %s!</strong>') % '<blink>hacker</blink>'
Markup('<strong>Hello <blink>hacker</blink>!</strong>')
>>> Markup.escape('<blink>hacker</blink>')
Markup('<blink>hacker</blink>')
>>> Markup('<em>Marked up</em> » HTML').striptags()
'Marked up » HTML'
>>>
注意：在后面的 0.5 版本以上：自动转义不再在所有模板中启用。模板中下列后缀的文件会触发自动转义：.html, .htm, .xml,.xhtml 。从字符串加载的模板会禁用自动转义。
总结
本节讲解了 Flask 的静态文件和模板的基本知识，静态文件放在 static目录中，模板文件放在templates目录下。
练习
请创建一个模板和CSS文件，并在模板引入CSS文件，当访问网站首页时显示一个绿色的Hello ShiYanLou字样。关于HTML以及CSS的学习请参考在线教程
参考答案
文件目录结构如下所示：
/hello.py
/templates
/hello.html
/static
/hello.css
hello.py 文件中的代码如下所示：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def get_hello():
return render_template('hello.html')
templates/hello.html 存放的是前端代码，如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link
rel="stylesheet"
type="text/css"
href="{{ url_for('static', filename='hello.css') }}"
/>
</head>
<body>
<h1>Hello ShiYanLou</h1>
</body>
</html>
static/hello.css 存放的是 css 代码，如下所示：
h1 {
color: green;
text-align: center;
}
