Jinja2----------模板继承、加载静态文件

最新推荐文章于 2024-07-14 21:02:13 发布

头秃小程

最新推荐文章于 2024-07-14 21:02:13 发布

阅读量807

点赞数

分类专栏： Flask 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/Maruko_428/article/details/129285979

版权

Flask 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.模板继承

一个网站中，大部分网页的模块是重复的，比如顶部的导航栏，底部的备案信息。如果在每个页面中都重复的去写这些代码，会让项目变得臃肿，提高后期维护成本。比较好的做法是，通过模板继承，把一些重复性的代码写在父模板中，子模板继承父模板后，再分别实现自己页面的代码。我们首先来看一个父模板 base.html 的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
</ul>

{% block body %}
{% endblock %}
<footer>这是底部的标签</footer>
</body>
</html>

以上父模板中，编写好了网页的整体结构，并且把所有子模板都需要用到的样式文件base.css也提前引用好了。然后针对子模板需要重写的地方，则定义成了block，比如以上定义了title、head、body、footer这几个block，子模板在继承了父模板后，重写对应block的代码，即可完成子模板的渲染。这里我们用继承 base.html 的方式，实现child1.html 、child2.html文件，代码如下。

child1.html

{% extends "base.html" %}

{% block title %}
    我是子模板的标题
{% endblock %}

{% block body %}
    我是子模板的body
{% endblock %}

child2.html

{% extends "base.html" %}

{% block title %}
    我是child2
{% endblock %}

{% block body %}
    我是child2
{% endblock %}

app.py

@app.route("/child1")
def child1():
    return render_template("child1.html")

@app.route("/child2")
def child2():
    return render_template("child2.html")

效果如下：

2.加载静态文件

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

一个网页中，除了HTML代码以外，还需要CSS、JavaScript 和图片文件才能更加美观和实用。静态文件默认是存放到当前项目的static文件夹中。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
    <script src="{{ url_for('static',filename='js/my.js') }}"></script>
</head>
<body>
<img src="{{ url_for('static',filename='images/hlbt.jpg') }}" alt="">
</body>
</html>

第一个参数 static是一个固定的，表示构建Flask内置的static视图这个URL，第二个filename是可以传递文件名或者文件路径,路径是相对于static或者static_folder参数自定义的路径。

头秃小程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jinja2----------模板继承、加载静态文件

以上父模板中，编写好了网页的整体结构，并且把所有子模板都需要用到的样式文件base.css也提前引用好了。然后针对子模板需要重写的地方，则定义成了block，比如以上定义了title、head、body、footer这几个block，子模板在继承了父模板后，重写对应block的代码，即可完成子模板的渲染。一个网站中，大部分网页的模块是重复的，比如顶部的导航栏，底部的备案信息。比较好的做法是，通过模板继承，把一些重复性的代码写在父模板中，子模板继承父模板后，再分别实现自己页面的代码。我们首先来看一个父模板。
复制链接

扫一扫

专栏目录