在Jinja 2中在包含文件顶部插入JavaScript

Question

在Jinja2中，我希望通过运行以下代码来实现我想要的效果：

from jinja2 import Environment, FileSystemLoader
env = Environment(loader=FileSystemLoader('.'))
template = env.get_template('x.html')
print template.render()

简单来说，我的目标是把所有的JavaScript代码放到<head>标签里，方法是使用一个{% call js() %} /* 一些js代码 */ {% endcall %}的宏。

x.html

<html>
<head>
  <script type="text/javascript>
  {% block head_js %}{% endblock %}
  </script>
  </head>
<body>
  {% include "y.html" %}
</body>
</html>

y.html

{% macro js() -%}
    // extend head_js
    {%- block head_js -%}
    {{ super() }}
    try { {{ caller() }} } catch (e) {
       my.log.error(e.name + ": " + e.message);
    }
    {%- endblock -%}
{%- endmacro %}

Some ... <div id="abc">text</div> ...

{% call js() %}
    // jquery parlance:
    $(function () {
        $("#abc").css("color", "red");
    });
{% endcall %}

期望的结果

当我通过Jinja2运行X.html时，我希望得到的结果是：

<html>
<head>
  <script type="text/javascript>
  try { {{ $("#abc").css("color", "red"); }} } catch (e) {
       usf.log.error(e.name + ": " + e.message);
    }
  </script>
  </head>
<body>
      Some ... <div id="abc">text</div> ...
</body>
</html>

实际结果

但是实际结果并不理想。我遇到了一些可能有帮助的错误，比如：

TypeError: 宏 'js' 不接受关键字参数 'caller'

或者，当我尝试添加另一个基础宏时，比如：

{% macro js2() -%}
{%- block head_js -%}
//     ... something
{%- endblock -%}
{%- endmacro %}

我得到了以下异常：

jinja2.exceptions.TemplateAssertionError: block 'head_js' 被定义了两次

我感觉我遇到了一个设计问题，主要是block标签的优先级高于macro标签（也就是说，宏似乎没有像我预期的那样包裹住块标签）。

我想问的问题其实很简单：

Jinja2能做到我想要的效果吗？如果可以，怎么做？
如果不行，有没有其他基于Python的模板引擎支持这种模式（比如mako、genshi等），可以在Google App Engine上正常工作？

谢谢你的阅读 - 我很感激你的意见。

Brian

编辑：

我正在尝试写一个扩展来解决这个问题。我已经完成了一半，使用以下代码：

from jinja2 import nodes, Environment, FileSystemLoader
from jinja2.ext import Extension

class JavascriptBuilderExtension(Extension):
    tags = set(['js', 'js_content'])

    def __init__(self, environment):
        super(JavascriptBuilderExtension, self).__init__(environment)
        environment.extend(
            javascript_builder_content = [],
        )

    def parse(self, parser):
        """Parse tokens """
        tag = parser.stream.next()
        return getattr(self, "_%s" % str(tag))(parser, tag)

    def _js_content(self, parser, tag):
        """ Return the output """
        content_list = self.environment.javascript_builder_content
        node = nodes.Output(lineno=tag.lineno)
        node.nodes = []

        for o in content_list:
            print "\nAppending node: %s" % str(o)
            node.nodes.extend(o[0].nodes)
        print "Returning node: %s \n" % node
        return node

    def _js(self, parser, tag):
        body = parser.parse_statements(['name:endjs'], drop_needle=True)
        print "Adding: %s" % str(body)
        self.environment.javascript_builder_content.append(body)
        return nodes.Const('<!-- Slurped Javascript -->')

env = Environment(
    loader      = FileSystemLoader('.'),
    extensions  = [JavascriptBuilderExtension],
    )

这使得在模板的末尾添加JavaScript变得简单... 比如：

<html>
<head></head>
<body>
    {% js %}
    some javascript {{ 3 + 5 }}
    {% endjs %}
    {% js %}
    more {{ 2 }}
    {% endjs %}
    
<script type="text/javascript">
{% js_content %}
</script>
</body>
</html>

运行env.get_template('x.html').render()将会产生一些有用的注释和预期的输出：

<html>
<head>
  <script type="text/javascript>
  </script>
  </head>
<body>
    <!-- Slurped Javascript -->
    <!-- Slurped Javascript -->
<script type="text/javascript">
    some javascript 8
    more 2
</script>
</body>
</html>

当然，这和希望的把脚本放在头部不一样，但至少它方便地集中在一个地方。

不过，这个解决方案还不完整，因为当你在里面有{% include "y.html" %}时，如果"y.html"包含一个{% js %}语句，{% js_content %}会在包含的{% js %}语句之前被调用（也就是说，x.html会在y.html开始之前完全解析）。

我还需要插入一些常量节点，里面会有我想要的静态JavaScript的try/catch，这部分我还没做。这不是问题。

我很高兴能取得进展，也很感激大家的意见。

我已经提出了相关的问题：Jinja2在包含后编译扩展

错误处理 javascript google app engine 模板引擎宏 jinja2 代码扩展静态资源

在Jinja 2中在包含文件顶部插入JavaScript

x.html

y.html

期望的结果

实际结果

编辑：

5 个回答

撰写回答