方法: 在Jinja中加载静态文件非常简单,只需要通过url_for全局函数就可以实现。
{{ url_for('static',filename='js/index.js') }}类似于这样的方式,从全局的角度调用url_for css的加载:
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">js的加载:
<script src="{{ url_for('static',filename='js/index.js') }}"></script>img的加载:
<img src="{{ url_for('static',filename='images/index.jpeg') }}" alt="">完整代码: python文件:
from flask import Flask,render_template app = Flask(__name__) @app.route('/') def staticFile(): return render_template('list.html') if __name__ == '__main__': app.run(debug=True)HTML文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}"> <script src="{{ url_for('static',filename='js/index.js') }}"></script> </head> <body> <img src="{{ url_for('static',filename='images/index.jpeg') }}" alt=""> </body> </html>此外,在工作路径,新建static文件夹,在static文件夹内新建css images js文件夹:在子文件夹内再新建相应的文件,通过在url_for函数内通过filename指定文件的路径。 js: 定义动作
alert('hello world');css: 定义网页格式
body{ background:pink; }网页: url_for函数默认会在项目根目录下的static文件夹中寻找about.css文件,如果找到了,会生成一个相对于项目根目录下的/static/about.css路径。当然我们也可以把静态文件不放在static文件夹中,此时就需要具体指定了
app = Flask(__name__,static_folder='C:\static')