最新消息:关注【已取消】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

django入门8:django静态文件的引入使用

扩展 太平洋学习网 0浏览 评论

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文件,如图所示。

QQ截图20170925231739.png

第二步:在需要添加静态文件的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>&nbsp;
                <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 #以前的,正式环境不能加载静态文件

运行效果如图所示,有了自己自定义的背景颜色。

QQ截图20170925233118.png

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/kuozhan/242.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论