django项目如何引用css[Django框架]

  • Z时代
  • 2024-01-10
  • 分类：综合

大多数初学者都会疑惑这样一个问题：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导入静态文件的问题得以解决。

以上是 django项目如何引用css[Django框架] 的全部内容， 来源链接： utcz.com/z/539767.html

回到顶部