如何在 Django 中向我的脚本添加静态
how to add static to my scripts in django
我有一个在 js 中创建的日期时间选择器,但是我在向我的 base.html 添加静态标签时遇到了一点问题,如果我这样做,我将得不到我想要的或我在我的 js 中写的东西只是渲染一个正常的 html,我希望它以一种方式显示,一旦单击它就会显示我的 js 中所述的日期和时间,这是我尝试过的,除了日期和时间之外,一切都运行良好选择器[] 1
base.html
##header
{% load static %}
<html lang="en">
<head>
<title>{% block title %}Jazeera{% endblock title %}</title>
<meta charset="utf-8">
<meta name="description" content="{% block meta %}welcome to jazeera medical healthcare {% endblock meta %}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block all %}
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
</head>
##页脚
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/aos.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.backstretch.min.js' %}"></script>
检查以下步骤:
1- 检查您的 settings
以发现一切都在正确的位置,像这样:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
2- 使用开发者工具 (F12
) 检查是否加载了静态文件,不要忘记重启服务器。
3- 确保您用来创建 datetime
的页面可以访问父模板,以防您继承,如下所示:
other.html
{% extends 'base.html' %}
4- 将您的静态文件放在页面顶部的块中 base.html
然后从其他继承页面添加到此块(如果您按照我在步骤 3 中所说的那样实现)下面可能是一个示例:
base.html
{% block head %}
.......
{% endblock head %}
other.html
{% block head %}
<script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
{% endblock head %}
5- 检查您的页面顶部有以下内容:
{% load staticfiles %}
{% load static %}
并且不要忘记某些 libs
具有必须在调用其他 libs
之前调用的依赖项,调用顺序很重要。
我做到了,我添加了它,并自己添加了一些样式
<script src="{% static 'js/bootstrap-datepicker.js' %}" type="text/javascript"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}" type="text/javascript"></script>
我有一个在 js 中创建的日期时间选择器,但是我在向我的 base.html 添加静态标签时遇到了一点问题,如果我这样做,我将得不到我想要的或我在我的 js 中写的东西只是渲染一个正常的 html,我希望它以一种方式显示,一旦单击它就会显示我的 js 中所述的日期和时间,这是我尝试过的,除了日期和时间之外,一切都运行良好选择器[
base.html
##header
{% load static %}
<html lang="en">
<head>
<title>{% block title %}Jazeera{% endblock title %}</title>
<meta charset="utf-8">
<meta name="description" content="{% block meta %}welcome to jazeera medical healthcare {% endblock meta %}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block all %}
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
</head>
##页脚
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/aos.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.backstretch.min.js' %}"></script>
检查以下步骤:
1- 检查您的 settings
以发现一切都在正确的位置,像这样:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
2- 使用开发者工具 (F12
) 检查是否加载了静态文件,不要忘记重启服务器。
3- 确保您用来创建 datetime
的页面可以访问父模板,以防您继承,如下所示:
other.html
{% extends 'base.html' %}
4- 将您的静态文件放在页面顶部的块中 base.html
然后从其他继承页面添加到此块(如果您按照我在步骤 3 中所说的那样实现)下面可能是一个示例:
base.html
{% block head %}
.......
{% endblock head %}
other.html
{% block head %}
<script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
{% endblock head %}
5- 检查您的页面顶部有以下内容:
{% load staticfiles %}
{% load static %}
并且不要忘记某些 libs
具有必须在调用其他 libs
之前调用的依赖项,调用顺序很重要。
我做到了,我添加了它,并自己添加了一些样式
<script src="{% static 'js/bootstrap-datepicker.js' %}" type="text/javascript"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}" type="text/javascript"></script>