gpt4 book ai didi

javascript - 如何从呈现的 HTML 模板呈现 JS 模板?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:21:59 24 4
gpt4 key购买 nike

如果我想通过 Jinja2 生成 JavaScript 代码,而不仅仅是 HTML,我是坚持保持 JS 代码内联,还是有办法让我引用脚本?

具体来说:

app.py

from flask import Flask, render_template
app = Flask(__name__)
app.config['DEBUG'] = True

@app.route('/')
def index():
return render_template('index.html', name='Sebastian', color='pink')

if __name__ == '__main__':
app.run()

index.html

<!DOCTYPE html>
<html>
<head>
<meta content="utf-8" http-equiv="encoding">
<script>
function myEnterFunction() {
element = document.getElementById("demo");
element.style.backgroundColor = "{{ color }}";
}
</script>
</head>
<body>
<p>Hello {{ name }}</p>
<div onmouseenter="myEnterFunction()">
<p>onmouseenter:
<span id="demo">Mouse over me!</span>
</p>
</div>
</body>
</html>

如果 JavaScript 代码是内联的,这会很好地工作,但是如果我们想保持整洁并引用一个单独的文件怎么办?

<head>
<meta content="utf-8" http-equiv="encoding">
<script src="code.js"></script>
</head>

?

可能,这可以通过将 src="code.js" 替换为

来完成
{% render_template('code.js', color=color) %}

在渲染 HTML 模板的同时,你能看到如何渲染 JS 模板吗?

最佳答案

您可以添加生成 JS 的路由。

@app.route('/script.js')
def script():
return render_template('script.js', color='pink')

在 script.js 中,这应该与您的其他模板位于同一文件夹中:

 function myEnterFunction() {
element = document.getElementById("demo");
element.style.backgroundColor = "{{ color }}";
}

在您的 layout.html 中:

<script src="{{url_for('script')}}"></script>

Jinja2 将解析任何包含其语法的文件。

关于javascript - 如何从呈现的 HTML 模板呈现 JS 模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38315368/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com