在Web开发中,处理静态文件(如CSS、JavaScript和图片)和使用模板继承来简化模板管理是两个重要的知识点。Flask提供了简单的方法来处理这些需求。
1. 处理静态文件
Flask默认将静态文件放在名为static
的目录中,可以通过url_for()
函数生成静态文件的URL。
示例:处理静态文件
首先,创建一个名为static
的目录,并在其中创建一个名为style.css
的文件:
/* static/style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
然后,修改Flask应用代码,使用CSS文件:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html', name="Flask")
if __name__ == '__main__':
app.run(debug=True)
在templates
目录中创建一个名为index.html
的文件:
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Hello, {{ name }}!</h1>
</body>
</html>
访问http://127.0.0.1:5000/
,你将看到应用使用了CSS样式。
2. 模板继承
模板继承是模板引擎的一项强大功能,允许你定义一个基础模板,然后在其他模板中继承这个基础模板,从而简化模板管理。Jinja2模板引擎支持模板继承。
示例:使用模板继承
首先,创建一个基础模板base.html
:
<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Flask App{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>My Flask App</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
然后,创建继承基础模板的页面模板:
<!-- templates/index.html -->
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<h2>Hello, {{ name }}!</h2>
{% endblock %}
<!-- templates/about.html -->
{% extends "base.html" %}
{% block title %}About{% endblock %}
{% block content %}
<h2>This is the About page.</h2>
{% endblock %}
修改Flask应用代码,添加新的路由:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html', name="Flask")
@app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)
访问以下URL:
http://127.0.0.1:5000/
:显示"Hello, Flask!"http://127.0.0.1:5000/about
:显示"This is the About page."
3. 可运行的Python案例
下面是一个完整的Python程序,演示了如何处理静态文件和使用模板继承。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html', name="Flask")
@app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)
在static
目录中创建style.css
文件:
/* static/style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
h2 {
color: #555;
}
在templates
目录中创建以下文件:
base.html
:
<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Flask App{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>My Flask App</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
index.html
:
<!-- templates/index.html -->
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<h2>Hello, {{ name }}!</h2>
{% endblock %}
about.html
:
<!-- templates/about.html -->
{% extends "base.html" %}
{% block title %}About{% endblock %}
{% block content %}
<h2>This is the About page.</h2>
{% endblock %}
可以将上面的代码保存到相应的文件中,然后运行app.py
,观察程序的输出。这个案例综合了Flask处理静态文件和模板继承的基本知识,帮助你理解和掌握这些操作。继续加油,学习Python会越来越有趣和有用!