七、jinja2-加载静态文件一个网页中除了HTML代码外，还需要加载CSS，JavaScript和图片文件的综合应用才

一个网页中除了HTML代码外，还需要加载CSS，JavaScript和图片文件的综合应用才能更加美观和实用，静态文件默认存放到当前项目的static文件夹中，如果要修改静态文件存放的路径，可以在创建Flask对象设置static_folder参数，示例代码如下：

 app = Flase(__name__,static_folder='C:\static)

在模版文件中，可以通过url_for加载静态文件，示例代码如下

<link href="{{ url_for('static',filename="about.css")}}" >

url_for的第一个参数是固定的static，表示生成静态文件的URL，第2个参数filename是可以传递的文件名或者文件路径，路径是相对static或者static_folder参数自定义的路径

下面代码是加载img、js、css文件的示例代码

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/static')
def static_demo():
    return render_template('static.html')


if __name__ == '__main__':
    app.run(debug=True,host="0.0.0.0",port=8000)

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态文件</title>
<!-- 加载css文件使用link标签-->
<!-- 引用static静态文件中的内容要使用url_for()-->
    <link rel="stylesheet" href="{{url_for('static',filename='css/background.css')}}">
<!--引用js文件使用script标签，src是source的缩写-->
    <script src="{{url_for('static',filename='js/alert.js')}}"></script>
</head>
<body>
<!--加载图片文件使用img标签-->
<img src="{{url_for('static',filename='images/jpg300.jpg')}}" alt="">
</body>
</html>

css文件

body{
    background-color: pink;
}

alert弹窗文件

alert("我是js中执行的对话框")

图片文件可在static文件夹下，创建一个images文件，里面放图片