Django高级应用之静态文件

在根目录创建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文件中引入图片

<img src="/static/myApp/img/1.jpg"/>

结果:

四、引入static路径

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

index.html文件最前面加入

{% load static from staticfiles %}

例子:

加载另一张图片

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

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




猜你喜欢

转载自blog.csdn.net/weixin_38654336/article/details/80044223