【发布时间】：2019-10-23 21:56:43
【问题描述】：
这是一个奇怪的错误。我有一个扩展名为 base.html 的基本模板的 html 文件。我注意到基本模板中 body 标记结束之前的 script 标记没有显示在 Chrome 开发工具的 Elements 选项卡中的 DOM 中，并且该标记与其余部分一起被完全切断源选项卡中的 html 文件。这发生在 Chrome、Mozilla 和 Safari 中，所以它一定是 Django 端的问题。显然，脚本应该创建的页面上的可观察效果也不会发生。
这是 Sources 选项卡中呈现的 html 的结尾：
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/ba
完全切断。这是该基本模板的结尾：
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
现在，这就是有趣的地方。问题出在文件末尾，所以我只是添加了一些换行符，以查看渲染的 DOM 是否有任何差异：
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
而且 Sources 选项卡在标签后面显示了一个截断：
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.j
我不会在此处粘贴它，但我在文件末尾添加了大约 35 个换行符，然后才能在 Sources 中获得我想要的内容。似乎每个换行符都会在一个字符后切断呈现的 html。
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.js"></script>
</body>
</html>
脚本的效果终于奏效了。这感觉像是对需要修复的更深层问题的临时解决方案。有人知道到底发生了什么或去哪里看吗？
编辑：这是扩展base.html（位于home 应用程序），称为 work.html：
{% extends 'home/base.html' %}
{% block css %}
<link rel="stylesheet" href="{% static 'work/css/work.css' %}">
{% endblock %}
{% block main %}
<section>
hello
</section>
{% endblock %}
这是呈现它的视图：
from django.shortcuts import render
def work(request):
return render(request, 'work/work.html', {})
编辑 2： 一些更意想不到的结果：
当我删除脚本时（以便我可以按照 cmets 中的建议将其粘贴到 head 中），呈现的 html 的结尾是这样的：
<section> what is going on </section>
并在</head> 标记之前粘贴导致：
<section> what is going on </section>
<
当我在头脑中将其注释掉时，上面的结果相同。
在 </body> 之前注释掉脚本会导致：
<section> what is going on </section>
<footer></footer>
<!-- <script src="/static/home/js/base.j
用双引号替换单引号导致呈现的 html 显示双引号而不是单引号作为唯一的区别。 ：/
然后我删除了几乎所有内容，所以我的代码是这样的：
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
然后渲染：
<!DOCTYPE html>
<html lang="en-US">
<head>
<scrip
我添加了一些标签：
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
结果：
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://127.0.0.1:357
由于某种原因，django-livereload-server 生成的脚本标签仍然存在。这是完整的脚本标签的样子：
<script src="http://127.0.0.1:35729/livereload.js"></script></head>
【问题讨论】：
-
这很好奇 :) 你能告诉我们你用什么来渲染这个模板吗？
-
@bug 是的，所以基础模板在 home 应用中，而 work.html 是扩展基础模板的模板，是位于 work 应用程序中。我在上面的编辑中添加了呈现 work.html 的 views.py 和模板本身。
-
这很奇怪！这仅发生在最后一个脚本标签上吗？如果脚本标签在 中会发生什么？尝试在 html 注释中渲染 script 标签： 你能展示一下，结果是什么？
-
使用双引号，例如 。并在基础文件中添加了 {% load static %}
-
@w4113 我做了你要求的事情并在我的编辑 2 中发布了结果。然后我开始大肆删除，发现 django-livereload-server 是罪魁祸首。请参阅编辑 2 的结尾和下面的答案。花了一整天的时间，phewwww。