欢迎来到Python教程自学网!
当前位置: 首页 > django > django项目如何引入css文件

django项目如何引入css文件

   

django项目如何引入css文件

大多数初学者都会疑惑这样一个问题:Django中如何引入css,html文件呢?问什么总是报错呢?下面我们来探讨一下这个问题。

这个问题出在以Djiango做后台的前端界面上。按以往的习惯,css,js,image等静态文件直接在前端html中写好链接,直接丢上去就可以,但当把含外部css的html在丢到Django后发现,css并没有载入,自然,其他静态文件也是如此。

原因分析

出现这个问题其实是因为程序员太想当然了。在以往的php做后端的例子中,我们只要知道url就可以访问网站根目录下的任何文件。以外部css为例,在浏览器获得html文件后会对资源进行链接,链接css文件时,将向服务器请求css的url对应的css文件,该css文件确实存在,于是服务器将之返回,浏览器成功链接到外部css文件。整个过程十分简单。

那么为什么Django链接不到?原因出在一开始,css对应的url不存在。Django并不像php那样可以访问网站根目录下的文件,它只会对路由所包含的路径进行对应的响应。简单来说,你随便往Django根目录丢给文件,在不编写路由的情况下,是不可能通过url获得的。同样,如果尝试访问没有写进路由的css文件,那么返回只可能是404。既然资源404了,那么浏览器请求不到,导入失败就是理所当然的。

解决方法

在settings.py中导入静态资源

既然是url不存在,那么让它存在就好。理论上只要把css对应的url编写进路由使其返回css文件,那么就能请求到了。当然我不会这么干,因为,Django理所当然地提供了解决方案。

在settings.py的INSTALLED_APPS中,我们可以找到django.contrib.staticfiles这项,它的作用就是管理静态文件。它的功能大致可以理解为将settings.py中的STATICFILES_DIRS列表中的路径变为可访问。同时对于路径,django的settings.py中存在一个保存根路径的变量:

BASE_DIRos.path.dirname(os.path.dirname(os.path.abspath(__file__)))

对于官方的解决方案,静态文件是保存在根目录下的static文件夹中,所以使用一个变量指向static文件夹(当然具体情况可以视实际路径而更改):

STATIC_ROOT= os.path.join(BASE_DIR,'static')

然后,在settings.py中,存在这样一个变量(如果没有就自己加上吧):

STATIC_URL = '/static/'

这个变量的功能稍后再提。在这些准备好之后,就可以将静态文件路径加到STATICFILES_DIRS列表中了。比如,如果css文件相对static文件夹的路径为“css/test.css”,那么写入后:

STATICFILES_DIRS=[os.path.join(STATIC_ROOT,'css'),]

那么现在试着访问路径(以本地端口127.0.0.1:8000为例):127.0.0.1:8000/static/css/test.css,会发现成功获取。同样,在html文件link时写 href="static/css/test.css",就可以成功获得。

这里大概就能看出STATIC_URL的作用了。路径中存在/static/这一部分,和STATIC_URL有没有关系呢?

尝试这样修改:

STATIC_URL = '/stardust/'

再访问127.0.0.1:8000/static/css/test.css,返回404。但改为访问127.0.0.1/stardust/css/test.css,访问成功。确认这个变量是静态文件的url的目录。

我们再尝试将图片文件添加进去。比如在static文件夹下有一个src文件夹保存图片等文件,src/img文件夹保存图片,其中有mio.jpg,于是如此修改:

STATICFILES_DIRS=[
    os.path.join(STATIC_ROOT,'css'),
    os.path.join(STATIC_ROOT,'src/img'),
    ]

访问127.0.0.1:8000/static/src/img/mio.jpg,访问成功。其他静态资源添加方式也是如此,只用添加文件夹,就能访问内部文件。

值得多提的是,STATICFILES_DIRSSTATICFILES_DIRS支持添加二元元组,第一个值作为url中的路径,第二个值作为实际路径举个例子,将它如此修改

STATICFILES_DIRS=[
    ('css',os.path.join(STATIC_ROOT,'css')),
    ('img',os.path.join(STATIC_ROOT,'src/img')),
]

127.0.0.1:8000/static/css/test.css依然访问成功,但是127.0.0.1:8000/static/src/img/mio.jpg访问失败。而访问127.0.0.1:8000/static/img/mio.jpg却能成功。就是这样。

在上一步前提下使用html导入静态资源

以css文件为例,在上一步做到后,href属性写为href="static/css/test.css"即可。不过django推荐的方案是使用模板导入。对于模板我的理解并不太少所以只贴方案。

现在文件前方使用{%load static %},之后在使用中(以同样的css文件为例)如此写:href="{%static '/css/main.css'%}"。这样也可以成功访问。如下是官方文档给出的关于图片的例子:

{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">

其他静态资源也是如此。

至此,Django导入静态文件的问题得以解决。