我正在用Django和Vanilla JS 编写一个网站
我有两个html页面，我希望它们都共享css，但我希望它们使用不同的javascript。两个页面都扩展了一个布局.html
layout.html看起来像这样开始
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
</head>
我的index.html(扩展了我的layout.html(开始时是这样的
{% extends "network/layout.html" %}
{% load static %}
<script src="{% static 'network/messages.js' %}"></script>
我的Javascript文件如下所示：
document.addEventListener('DOMContentLoaded', function() {
console.log("page loaded!")
document.addEventListener('click', event => {
const element = event.target;
console.log("Something was clicked")
})
});
它只是在加载页面和单击某个内容时打印出一行。
然而，当我使用这样的代码访问index.html时，javascript文件不会加载，当加载页面或单击任何内容时，都不会打印出任何内容。
但是，如果我将layout.html页面修改为这样：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
<script src="{% static 'network/messages.js' %}"></script>
</head>
在这里我加载messages.js，然后从index.html中删除它，如下所示：
{% extends "network/layout.html" %}
然后javascript工作，页面将正确加载它。唯一的问题是，它还为我不想要的其他页面加载它，我只想为index.html加载message.js，我不确定为什么它拒绝加载，而我只将它包含在index.html中。
我感谢你的帮助。
这不是扩展模板的方式。Django模板使用块系统。因此，index.html中的script根本没有被渲染。您必须在layout.html中有一个空块，并在index.html中覆盖该块。
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Social Network{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'network/styles.css' %}" rel="stylesheet">
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
index.html
{% extends "network/layout.html" %}
{% load static %}
{% block content %}
<script src="{% static 'network/messages.js' %}"></script>
{% endblock content %}
尝试将HTML添加到当前的index.html中。它不会显示。你必须把所有东西都放在block中，它才能工作。