django运用css的方法-成都快上网建站

django运用css的方法

django运用css的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

成都创新互联专注于新晃网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供新晃营销型网站建设,新晃网站制作、新晃网页设计、新晃网站官网定制、微信小程序定制开发服务,打造新晃网络公司原创品牌,更为您提供新晃网站排名全网营销落地服务。

这个问题出在以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 %}

其他静态资源也是如此。

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

感谢各位的阅读!看完上述内容,你们对django运用css的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。


分享名称:django运用css的方法
文章链接:http://kswjz.com/article/jpcpsj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流