Django：从基础扩展 jQuery CDN

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>

并为 HTML 内容使用 main 块，为 Javascript 使用 extra_js 块。这样你就可以保证任何用户脚本都在 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

Django: Extend jQuery CDN from base

django

cdn