Flask学习之旅——2.8 配置静态文件

最新推荐文章于 2024-04-18 00:12:16 发布

未来程序猿小吕

最新推荐文章于 2024-04-18 00:12:16 发布

阅读量1k

点赞数

分类专栏： Flask 文章标签： flask python 后端

本文链接：https://blog.csdn.net/weixin_44186593/article/details/122014575

版权

Flask 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

Flask学习之旅——2.8 配置静态文件

前言

本文为《知了传课—— 配置静态文件》的学习笔记。
原文地址：第十一节：配置静态文件 - Python框架Flask基础教程 - 知了传课 (zlkt.net)

配置静态文件

在WEB应用中，常常会使用大量的CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源让网页更加的美观生动。
在Flask中，加载静态文件很简单，使用url_for全局函数就可以使用了，如：
```
<link href="{{ url_for('static',filename='xxx.css') }}">
```
url_for函数默认会在项目根目录下的static文件夹中寻找about.css文件，如果找到了，会生成一个相对于项目根目录下的/static/about.css路径。
当静态文件不在static文件夹时，可以使用以下语句进行调用：
```
app = Flask(__name__,static_folder='static文件夹的路径')
```

栗子

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{%  block title %}这是标题{% endblock %}</title>
    {% block head %}{% endblock %}  //需要加上这一句
</head>
<body>
    <ul>
        <li><a href="/" >首页</a></li>
        <li><a href="/conttol" >控制</a></li>
        <li><a href="/about" >关于我们</a></li>
    </ul>
{% block body %}{% endblock %}
<footer style="background-color: pink">底部</footer>
</body>
</html>

about.css

h1{
    background-color: blue ;
}

about.html

{% extends "base.html" %}

{% block title %}关于我{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/about.css') }}">
{% endblock %}
{% block body %}
    <h1>观察这句的背景变化</h1>
{% endblock %}

未来程序猿小吕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flask学习之旅——2.8 配置静态文件

Flask学习之旅——2.8 配置静态文件前言本文为《知了传课—— 配置静态文件》的学习笔记。原文地址：第十一节：配置静态文件 - Python框架Flask基础教程 - 知了传课 (zlkt.net)配置静态文件在WEB应用中，常常会使用大量的CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源让网页更加的美观生动。在Flask中，加载静态文件很简单，使用url_for全局函数就可以使用了，如：<link href="{{ url_for('stat
复制链接

扫一扫