关于CSS:无法使用bootstrap-datetimepicker

 2021-04-27 

Cannot use bootstrap-datetimepicker

我想在模板中包括日期时间选择器,但完成了本教程http://www.lisenme.com/date-time-picker-input-field-using-bootstrap/仍然找不到我的CSS和js文件由django。

在模板中:

1
2
3
4
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="js/bootstrap-datetimepicker.min.js">

和错误:

1
2
Not Found: /js/bootstrap-datetimepicker.min.js
Not Found: /css/bootstrap-datetimepicker.min.css

我在项目树中创建了css和js目录,并包含了链接所引用的文件,下载了整个bootstrap-datetime选择器。可能是问题所在,因为我不确定在哪里包括css和js文件。到目前为止,我已经尝试了两个选项:my_app / templates / my_app / css或my_app / templates / css。 django

均未找到它们


好吧Django不会自动将模板链接到URL,因为例如,一个好心的用户可能打算获取模板文件,然后使用它们来对系统进行内部检查并发现安全漏洞。

如果您希望服务器提供"静态文件",例如使用staticfiles [Django-doc]。

为了使用staticfiles,您需要将应用程序包含在INSTALLED_APPS中,并指定静态文件的根URL:

1
2
3
4
5
6
7
8
9
# settings.py

INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    # ...
]

STATIC_URL = '/static/'

如果随后将文件存储在应用程序的static目录中,例如:

1
2
3
4
5
6
my_app/
    static/
        css/
            bootstrap-datetimepicker.min.css
        js/
            bootstrap-datetimepicker.min.js
1
2
3
4
5
6
{% load static %}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link href="{% static 'css/bootstrap-datetimepicker.min.css'%}" rel="stylesheet">
<script src="{% static 'js/bootstrap-datetimepicker.min.js'%}">

请注意,部署静态文件需要一些额外的步骤。