除了Jinja2模板引擎,Flask还提供了托管静态文件(如CSS、JavaScript、图像等)的功能,可以用于实现多个HTML页面的Web应用程序。下面是一个示例,演示如何使用静态文件和模板继承实现带导航菜单的多页面Web应用程序。
首先,我们需要在Flask应用程序中添加静态文件和模板文件的目录,例如:
app = Flask(__name__, static_folder='static', template_folder='templates')
然后属于静态网页文件的是,我们可以在静态文件目录中添加CSS和JavaScript文件,例如在static/css目录中添加styles.css文件,其中包含了导航菜单的样式。然后,在模板文件目录中,我们可以创建一个基础模板(例如base.html),其中包含了公共的HTML结构和导航菜单代码。然后,在其他HTML页面中,我们可以继承基础模板,并添加自己的内容和样式。
下面是一个示例,演示如何使用静态文件和模板继承实现多页面Web应用程序:
from flask import Flask, render_template
app = Flask(__name__, static_folder='static', template_folder='templates')
@app.route('/')
def index():
return render_template('index.html', title='Home')
@app.route('/about')
def about():
return render_template('about.html', title='About')
if __name__ == '__main__':
app.run(debug=True)
在这个示例中,我们定义了两个视图函数,一个是index(),返回主页的内容;另一个是about(),返回关于页面的内容。同时,我们使用render_template()函数渲染不同的模板文件,其中包含了不同的页面内容和导航菜单结构。
下面是base.html基础模板文件的示例代码:
{% block title %} {% endblock %}
{% block content %} {% endblock %}
在这个基础模板文件中,我们使用Jinja2模板语言实现了模板继承和块语法。其中,{% block title %}和{% block content %}标记定义了子模板可以插入内容的位置。同时,我们加入了CSS文件的引用,并在导航菜单中添加了"Home"和"About"两个链接。
最后,我们可以创建index.html和about.html两个子模板,分别继承base.html属于静态网页文件的是,并插入自己的内容和样式:
{% extends 'base.html' %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
Welcome to {{ title }} page!
{% endblock %}
在这个子模板中,我们使用了{% extends 'base.html' %}指令继承了基础模板,并使用了{% block title %}和{% block content %}标记插入自己的标题和内容。注意,在{% block title %}中,我们传递了一个名为title的变量,这个变量是在视图函数中传递过来的。
总结
使用静态文件和模板继承,我们可以实现复杂的多页面Web应用程序,并且可以很方便地更新公共部分(如导航菜单、页脚等)。这种方式虽然不如使用现代化的前端框架或UI库炫酷,但是对于一些简单的Web应用程序而言,是一个快速、简单、可行的方案。
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论