当 Javascript 代码在 HTML 文件中时，这不是问题。但是，当我将脚本标记的内容移动到 js 文件以用于其他 HTML 文件时，就会出现无法读取图像的问题。代码如下。脚本.jsfunction mouseOverSelf() { let img = document.getElementById("changeImg1"); let m = document.getElementById("changeColor1"); img.src = "{{ url_for('static', filename='img/edit_w.svg') }}"; m.style.color = "white";}function mouseOutSelf() { let img = document.getElementById("changeImg1"); let m = document.getElementById("changeColor1"); img.src = "{{ url_for('static', filename='img/edit.svg') }}"; m.style.color = "black";}function mouseOverExcel() { let img = document.getElementById("changeImg2"); let m = document.getElementById("changeColor2"); img.src = "{{ url_for('static', filename='img/spreadsheet_w.svg') }}"; m.style.color = "white";}function mouseOutExcel() { let img = document.getElementById("changeImg2"); let m = document.getElementById("changeColor2"); img.src = "{{ url_for('static', filename='img/spreadsheet.svg') }}"; m.style.color = "black";}索引.html<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>我能怎么做？
1 回答
慕田峪4524236
TA贡献1875条经验 获得超5个赞
{% block %}解决方案是通过模板中的标记而不是通过<script src="..">html 标记 ( )包含 javascript 代码（与 css 相同<link rel="stylesheet" href="..">）。
您有两个选择，javascript 代码（与 css 相同）旨在加载和执行：
特定页面（本地）
所有页面（全局）
使用jinja2模板继承机制，下面你可以怎么做：
在base.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<meta name="description" content="{% block description %}{% endblock %}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
{% block stylesheets_others %}{% endblock %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-override.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-extend.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% block stylesheets_local %}{% endblock %}
{% endblock %}
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
{% block body %}
{% include 'includes/header.html' %}
{% block content %}{% endblock %}
{% include 'includes/footer.html' %}
{% endblock %}
{% block javascripts %}
<script src="{{ url_for('static', filename='js/vendor/modernizr-3.8.0.min.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{{ url_for('static', filename='js/vendor/jquery-3.4.1.min.js') }}"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% block javascripts_others %}{% endblock %}
<script src="{{ url_for('static', filename='js/vendor/vendor.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/plugins.js') }}"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block javascripts_local %}{% endblock %}
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
{% endblock %}
</body>
</html>
在my-page.html
{% extends 'base.html' %}
[..]
{% block stylesheets_local %}
{{ super() }} {# to load the parent assets #}
<style>
/* You "Local" css goes here .. (if any) */
</style>
{% endblock %}
{% block body %}
[..]
{% endblock %}
[..]
{% block javascripts_local %}
{{ super() }} {# to load the parent assets #}
<script>
// You "Local" javascript code goes here ..
</script>
{% endblock %}
如果您想通过例如加载其他 javascript 或 css外部库：cdn对于特定页面，逻辑是相同的，您需要在模板中扩展{% block javascripts_others %}{% endblock %}和{% block stylesheets_others %}{% endblock %}阻止，但不要忘记包括{{ super }}加载父资产（如果有）。
但是，如果您认为应该全局加载外部库（javascript 或 css），则将它们base.html分别添加到下面bootstrap和font awesome库中。因此，使用此逻辑，您将以正确的顺序为任何页面加载资产，而不会发生冲突。
但是碰巧您的代码（js或css）是为几个页面而不是所有页面（不是全局）加载的，在这种情况下，创建一个单独的模板并将您的js或css代码包含在正确的位置和订单（就像我们之前做的那样）
在page-1.html, page-2.html, page-3.html..
{% extends 'base.html' %}
[..]
{% block stylesheets_local %}
{{ super() }} {# to load the parent assets #}
{% include 'includes/mycss.css.html' %}
{% endblock %}
{% block body %}
[..]
{% endblock %}
[..]
{% block javascripts_local %}
{{ super() }} {# to load the parent assets #}
{% include 'includes/myscript.js.html' %}
{% endblock %}
请注意我如何将部分模板命名为约定，这是一个很好的做法。
添加回答
举报
0/150
提交
取消