在Django中使用css，js等静态文件

最新推荐文章于 2024-08-17 18:21:01 发布

黄山路443号

最新推荐文章于 2024-08-17 18:21:01 发布

阅读量1.4w

点赞数 6

分类专栏：菜鸡的Django学习笔记文章标签： django css python javascript

本文链接：https://blog.csdn.net/dong_W_/article/details/78767573

版权

菜鸡的Django学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

捣鼓了三个晚上才成功，遇到了好多麻烦，发现别人的博客都操作不了，赶紧把自己的操作分享出来
下面是方法：
1. settings 中有三个地方要写

# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'templates/Web/static')

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

这里STATIC_URL通常设为’/static/’，当然设成别的也可以，它的作用其实就是当我们想要引用在STATIC_ROOT中静态文件时可以有一个URL值来调用，其实我觉得设成空也没什么关系吧，具体调用在后面讲；
STATIC_ROOT 这个很关键
通常我们设成STATIC_ROOT = os.path.join(BASE_DIR, "templates/Web/static/")（Linux下这样，Windows下斜杠不一样，要用replace换一下），BASE_DIR是整个项目的根目录，所以后面的设成到你的static文件夹的路径就行，没有必要跟我一样
STATIC_DIRS,这也是我和别人的过程不一样的地方
格式跟我那个一样就好，最开始这里我写的就是

STATICFILES_DIRS = [
        STATIC_ROOT，
]

结果浏览器报错
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
也就是STATICFILES_DIRS 和 STATIC_ROOT一定不能相同！！！
之后百度一搜写成最后那样，发现还是不行，
问题出在当我HTML访问的是××××/static/××××.css时，我用××××/SpiderWeb/static/××××.css可以访问到
但是当我把HTML改为××××/SpiderWeb/static/××××.css，我用××××/SpiderWeb/static/××××.css就访问不到了
F12发现浏览器还是找不到静态文件，最后搜百度看源码文件，发现这个DIR的作用是
collect static files for deployment.
可以通过collectstatic指令把静态文件自动收集一下！！！也就是上面讲的STATIC_ROOT 的地址，这里很关键就不用管django怎么找这些静态文件了，Tool下面进 manage.py，然后输入collectstatic，之后选yes，大功告成！
其实，执行collectstatic命令后，所有static文件都收在STATIC_ROOT的子目录css,js,img中，所以我们引用静态文件的时候，也可以直接使用/static/css，而不使用…/templates/Web/static/css了
2. urls中直接引用的方法

from django.conf import settings
from django.views.static import serve
#urlpartterns中加
url(r'^static/(?P<path>.*)$',serve,{'document_root': settings.STATIC_ROOT}),

前面讲引用就在这里前面把静态文件收集到ROOT里，现在直接用settings.STATIC_ROOT，在浏览器里输入http://127.0.0.1:8000/static/style.css 就可以访问啦（当然要runserver)
3. HTML 中很简单，大家的博客都有写，两个要点
- load staticfiles
- {% static '*****'%}
比如我的是这样的：

<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <title>1</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/pace.css' %}">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <!-- js -->
    <script src="{% static 'js/jquery-2.1.3.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/pace.min.js' %}"></script>
    <script src="{% static 'js/modernizr.custom.js' %}"></script>