如何从渲染的 HTML 模板渲染 JS 模板？答案

【问题标题】：How can I render a JS template from a rendered HTML template?如何从渲染的 HTML 模板渲染 JS 模板？
【发布时间】：2016-11-13 21:33:05
【问题描述】：

如果我想通过 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 模板吗？

【问题讨论】：

Use Jinja2 template engine in external javascript file的可能重复
你是对的。问题是类似的。但是那里的首选答案不合适，因为问题过于简单。为了清楚起见，这里也简化了代码。没有说明替代答案“可能不是一个好主意”的原因（我也不清楚）。这里的答案刚刚好。

标签： javascript python flask jinja2

【解决方案1】：

您可以添加一个生成 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 将解析任何包含其语法的文件。

【讨论】：

工作得很好... @Sinan Guclu，如果你想将 js 文件保存在 static 文件夹中，你如何在 render_template() 中引用它？
有可能吗？
@YoungMillie 虽然使用render_template_string 是可能的，但除非您只有一组想要呈现到所有静态文件中的python 变量，否则它没有多大意义。有一个示例实现on this Gist