Django高级应用之静态文件

最新推荐文章于 2025-05-30 09:03:03 发布

OnMy22

最新推荐文章于 2025-05-30 09:03:03 发布

阅读量574

点赞数

CC 4.0 BY-SA版权

分类专栏： Django高级操作

本文链接：https://blog.youkuaiyun.com/weixin_38654336/article/details/80044223

Django高级操作专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Django中管理静态文件的方法，包括创建static文件夹、配置Settings、引入css、js和图片文件，以及使用STATIC_URL来灵活引用静态资源。通过实例展示了在模板文件中引入css样式改变字体颜色，js文件，以及img图片的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在根目录创建static文件夹，用来装静态文件，然后在static文件夹下创建应用同名文件夹，在应用同名文件夹下，如图：

配置Setting文件：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')
]

一、引入css文件

在css文件夹中创建css样式：style.css

设置字体颜色为红色

h1{
    color:red;
}

再在模板文件index.html中引入css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/static/myApp/css/style.css"/>
</head>
<body>
    <h1>sunck is a good man</h1>
</body>
</html>

二、引入js文件

在js文件夹中创建sunck.js文件

在index.html文件中引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/static/myApp/css/style.css"/>   <!--引入css文件-->
    <script type="text/javascript" src="/static/myApp/js/sunck.js"></script>     <!--引入js文件-->
</head>
<body>
    <h1>sunck is a good man</h1>
</body>
</html>

结果：

三、引入图片img

将图片放入img文件夹中

在html文件中引入图片

结果：

四、引入static路径

作用：与反向解析道理相同，若路径变化了也可以随之变化

在index.html文件最前面加入

{% load static from staticfiles %}

例子：

加载另一张图片

<img src="{% static 'myApp/img/1.jpg' %}"/>

结果：浏览器中的审查元素中