如何在Django python中添加Css和Js文件

时间:2015-08-23 07:20:28

标签: javascript html css django

我正面临在我的django项目中加载静态仅css和Javascript。 通过此代码图像文件正在加载但只有js和css文件未加载

 {% load staticfiles %}
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Home</title>
 <link href="{% static "pro.css" %}" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <div id="sd">
 <h1>Hi my first django application</h1>
 <img src="{% static "images/img08.jpg" %}"/>
 <div id="demo"></div>
 </div>
 </body>
 </html>

和我在浏览器中的页面来源

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="/static/pro.css rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1></h1> 
<img src="/static/images/img08.jpg"/>
<div id="demo"></div>
</div>
</body> 
</html>

我的设置文件代码`

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS=     (os.path.join(BASE_DIR,'questions','static','css'),os.path.join(BASE_DIR,'questions','static','js'),)

我在Javascript控制台中检查时收到此错误消息 - 127.0.0.1/:19资源解释为样式表但使用MIME类型application / x-css传输:

4 个答案:

答案 0 :(得分:0)

试试这个:

<link href="{% static "css/pro.css" %} rel="stylesheet" type="text/css"/>

同样适用于js。

您已将图像的路径指定为静态"images/image_name.jpg"但缺少css和js文件的路径

答案 1 :(得分:0)

我猜你错过的是collectstatic

运行此命令

python manage.py collectstatic

docs:https://docs.djangoproject.com/en/1.8/ref/contrib/staticfiles/

希望这有帮助!

答案 2 :(得分:0)

  1. 这是针对项目(常见)静态的:

    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static'),
    )
    
  2. 这适用于您的应用静态:

    STATICFILES_FINDERS = (
        'django.contrib.staticfiles.finders.FileSystemFinder',
        'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    )
    
  3. 然后在模板中,您可以使用以下方式访问它:

    {% load static %}
    
    {# this is in project static dir == tip №1 == static/... #}
    
    <script type="text/javascript" src="{% static ' js/bootstrap.min.js' %}"></script>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    
    
    
    {# suppose your app name is `questions` == tip №2 == questions/static/questions/... #}    
    
    <script type="text/javascript" src="{% static 'questions/js/some.js' %}"></script>
    <link href="{% static 'questions/css/pro.css' %}" rel="stylesheet" type="text/css">
    

答案 3 :(得分:0)

这也是我的问题! 但我解决了这个问题:

  1. 您应该转到项目设置setting.py并找到STATIC_URL
  2. 请注意STATIC_URL中的URL,然后将其更改为绝对静态文件的路径 例如我的路径是MySite/MyApp/static/My_App/'static files'
  3. 将您的My_app的路径复制到STATIC_URL之后,它应该可以工作。

注意:,您应使用以下格式在STATIC_URL中插入路径:

/file1/ or `/file1/file2/.../`

希望有用