Question

我认为只要在base.html中包含来自CDN的jQuery，它就会在扩展基础的所有html页面中定义，就像包含静态文件一样，而不重复

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

base.html文件：

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>notifyMe</title>

<!-- Bootstrap -->

<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet"> 
</head>
<body>
<h1>NotifyMe</h1>
{% block main %}
{% endblock %}

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
</body>
</html>

修改 event_add.html：

{% extends 'base.html' %} 
{% load widget_tweaks %}
{% block main %}
<div class="container">
    <div id="form" class="col-md-6 col-md-offset-3 jumbotron">
        <div class="text-center">
            <h3>New Task</h3>
        </div>
        <form method="POST">
            {% csrf_token %}
            {% for field in form.visible_fields %}
            <div class="form-group row">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{field|add_class:'form-control'}}
                {% for error in field.errors %}
                <span class="help-block"> {{ error}} </span>
                {% endfor %}
            </div>
            {% endfor %}
            <div class="form-group">
                <button type="submit" class="btn btn-success">
                <span class="glyphicon glyphicon-ok"></span> Save
                </button>
                <a href="" class="btn btn-default">Cancel</a>
            </div>
       </form>
    </div>
</div>
<script>
$(function() {
            $(".datepicker").datepicker({
                      changeMonth: true,
                      changeYear: true,
                      yearRange: "2016:2020",
                                        });
                    });
</script>
{% endblock %}

在功能脚本之前添加CDN行之前，我的功能无法识别。

{% extends 'base.html' %}有一些限制吗？

Answer 1

您尝试使用的.datepicker()插件包含在Jquery-UI中。我建议您按照以下方式重新构建模板（为清楚起见，删除了不相关的部分）：

<强> base.html文件

<html lang="en">
    ...
    ...
    {% block main %}
    {% endblock %}

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Consider also adding Bootstrap.js here! -->
    {% block extra_js %}{% endblock extra_js %}
    </body>
</html>

并使用main阻止HTML内容和extra_js阻止Javascript。这样您就可以保证任何用户脚本都将在JQuery之后出现。例如：

<强> event_add.html

{% extends 'base.html' %} 
{% load widget_tweaks %}
{% block main %}
<div class="container">
...
...
</div>
{% endblock main %}

{% block extra_js %}
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></scrip‌t>
<script>
$(function() {
   ...
   ...
</script>
{% endblock extra_js %}

Django：从基础扩展jQuery CDN

1 个答案: