django静态文件的引入与使用场景介绍
在django入门7:django动态数据与模板 课程中,我们从后台获取了一个用户列表,这个列表用了bootrap框架的table样式,但如果我们想在项目中引入自己定义的css或者image图片,就需要引入静态文件,以前别的语言开发的项目引入静态文件的引入方法很简单,如下。
//引入css <link rel="stylesheet" href="static/css/myCss.css"> //引入image图片 <img src="static/images/cat.png">
但是今天在python的django项目中是不能直接这样引入静态文件的,那该怎么办呢?
第一步:在blog模块下定义一个static的文件夹(必须这个名字),然后随便新建一个css文件夹和一个images文件夹,然后放入一个图片和自定义的css文件,如图所示。
第二步:在需要添加静态文件的html网页头部第一行加入如下django标签。
{% load staticfiles %} <!DOCTYPE html>
第三步:在head标签中引入我们自定义的myCss,static为固定写法,后面的为css的路径,如下。
<head> <link rel="stylesheet" href="{% static 'css/myCss.css'%}"> </head>
如果是图片视频等其他文件可以直接在src中引入,以图片为例,用法如下所示。
<img src="{% static 'images/third.png' %}">
完整使用方法:例如我要将我们上一节中的用户列表头部设置背景颜色,在myCss.css中加入我们自己的style,如下。
#headcolor{ background-color: orange; }
然后把user_list.html改成如下这样。
{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户列表页</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="{% static 'css/myCss.css'%}"> </head> <body> <table style="width: 500px"> <tr id="headcolor"> <td>ID</td> <td>用户名</td> <td>密码</td> <td>电话</td> <td>住址</td> <td>操作</td> </tr> {% for user in users %} <tr> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.password }}</td> <td>{{ user.phone }}</td> <td>{{ user.address }}</td> <td><a href="{% url 'user_detail' pk=user.id %}">查看</a> <a href="{% url 'user_edit' pk=user.id %}">修改</a></td> </tr> {% endfor %} </table> </body> </html>
注意点:加入静态文件之后,django的运行命令要改成如下这样,否则只有在在debug模式下才会有效,而在正式生产环境下引入的静态文件会失效,
python manage.py runserver --insecure #用了静态文件需要用此方法运行项目 python manage.py runserver #以前的,正式环境不能加载静态文件
运行效果如图所示,有了自己自定义的背景颜色。