来自base.html的jQuery在Django的其他模板中不起作用 [英] jquery from base.html not working in other templates in django
问题描述
我正在开发 django 应用程序.使用 django 中的 templates ，我用一个基本模板创建了多个页面. index.html ， about.html 和 contact.html 之类的页面继承了 base.html 的代码. base.html 模板内部是导航栏的代码.
I am working on a django application. With templates in django I created multiple pages with one base template. pages like index.html, about.html and contact.html inherit the code from base.html. Inside the base.html template is code for a navbar.
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Anton|Open+Sans&display=swap" rel="stylesheet">
<!-- base.css -->
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<!-- base.js -->
<script src="{% static 'js/base.js' %}"></script>
<title>{% block title %}base{% endblock %}</title>
{% block header %}{% endblock %}
</head>
<body>
{% block content %}
{% endblock content %}
<!-- navbar -->
<nav class="navbar fixed-top navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link hover_effect" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link hover_effect" href="{% url 'about' %}">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link hover_effect" href="{% url 'contact_us' %}">Contact Us</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
在浏览器中查看时，导航栏默认情况下没有背景颜色，但是当向下滚动时，背景色会添加到导航栏中.我可以通过 jquery 来实现.
When viewed in a browser the navbar by default has no background color, but when scrolled down, background-color is added to the navbar. I achieve this with jquery.
$(document).ready(function() {
$('.nav-link').css('color', '#F2B705')
})
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 80) {
$(".navbar").css('background', 'transparent');
$('.nav-link').css('color', '#F2B705')
}
if(scroll_pos > 100) {
$(".navbar").css('background', 'linear-gradient(to right, #ffb347, #ffcc33)');
$('.nav-link').css('color', '#141259')
}
});
});
我面临的问题是当我继承其他页面中的基本模板时，我希望 jquery 也可以在所有页面上使用.我可以在所有页面中查看导航栏本身，但是出于某些奇怪的原因， base.js jquery 代码仅在 index.html 模板中有效，而在其他模板.以下是 index.html 和 contact.html
The problem I am facing is when I inherit the base template in other pages, I want the jquery to also work on all pages. I am able to view the navbar itself in all the pages but for some weird reason, the base.js jquery code only works in the index.html template and not in the other templates. Below is the code for index.html and contact.html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Home{% endblock title %}
{% block header %}
<!-- index.css -->
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<!-- index.js -->
<script src="{% static 'js/index.js' %}"></script>
{% endblock header %}
{% block content %}
...
{% endblock content %}
contact.html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Contact Us{% endblock title %}
{% block header %}
<!-- contact.css -->
<link rel="stylesheet" href="{% static 'css/contact.css' %}">
<!-- contact.js -->
<script src="{% static 'js/contact.js' %}"></script>
{% endblock header %}
{% block content %}
...
{% endblock content %}
引导程序和jquery的CDN仅在基本模板内给出.我也尝试将CDN添加到其他模板，但这不起作用.尽管CDN仅存在于基本模板中，尽管代码的引导部分在所有页面中都可以正常工作，但 base.js 中的jquery代码仅在 index.html 模板，不在其他页面中.
The CDNs for bootstrap and jquery is given only inside the base template. I tried adding the CDNs to the other templates as well, but that does not work. While the bootstrap part of the code works fine in all the pages even though the CDN only exists in the base template, the jquery code inside base.js only works in index.html template and not in other pages.
这 是一个链接我发现有类似的问题.但是这个问题的解决方案对我不起作用
This is one link I found that had a similar problem. But the solutions for this question does not work for me
推荐答案
我刚刚解决了此类问题-脚本在扩展页面上不起作用.以这种方式尝试:
i've just resolve such problem - scripts didn't work on extended pages. try in this way:
在加载jquery之类的内容后，放在base.html中，例如 {％block jquery％} {％endblock％} ，因此代码应如下所示:
in your base.html put after loading jquery somethin like that {% block jquery %}{% endblock %}, so the code should be like this:
base.html的底部
<!-- End footer Area -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="{% static 'js/jquery-ui.js' %}"></script>
<script src="{% static 'js/easing.min.js' %}"></script>
<script src="{% static 'js/hoverIntent.js' %}"></script>
<script src="{% static 'js/superfish.min.js' %}"></script>
<script src="{% static 'js/jquery.ajaxchimp.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/jquery.nice-select.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/mail-script.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block jquery %}
{% endblock %}
</body>
</html>
然后在扩展文件的底部创建jquery块(在您的情况下，它可以是contact.html.在我的情况下，它将由create.html:
then in your extended file on the bottom create jquery block (in your case it could be contact.html. in my case it's going to by create.html:
create.html
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- start banner Area -->
<section class="about-banner relative">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row d-flex align-items-center justify-content-center">
<div class="about-content col-lg-12">
<h1 class="text-white">
Dodaj
</h1>
<p class="text-white link-nav"> <a href="{% url 'home' %}">Home </a> <span class="lnr lnr-arrow-right"></span> <a href="{% url 'create-flight' %}"> Dodaj </a></p>
</div>
</div>
</div>
</section>
<!-- End banner Area -->
<!-- Start create Area -->
{% endblock %}
{% block jquery %}
<script src="{% static 'products/app.js' %}"></script>
{% endblock %}
效果很好.在出现以下错误之前:未捕获的ReferenceError:未定义$错误
it's working nice. before i had errors like: Uncaught ReferenceError: $ is not defined Error
这篇关于来自base.html的jQuery在Django的其他模板中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
