让 Flask 模板引擎 Jinja2 和 JavaScript 模板引擎和平共存

Jinja2 有三种定界符语法：

• {{ ... }} 用来标记变量；
• {% ... %} 用来标记语句；
• {# ... #} 用来标记注释；

若是你同时使用了 JavaScript 模板引擎，而该 JavaScript 模板引擎也使用相同的语法标记符，那就会产生冲突。通常来讲，有下面三种兼容性处理方式：

1. 使用 Jinja2 的 raw 标签标记 JavaScript 模板代码

第一种方式最直观，使用 Jinja2 的 raw 标签声明原生代码块，也就是不须要进行后端渲染的代码块。使用 raw 和 endraw 标签把 JavaScript 模板部分标记出来便可，好比：

{% raw %}
<div id="app">
    {{ js_var }}
</div>
{% endraw %}复制代码

这种方式的反作用最少，尽管须要多几行代码，但不会影响你写 Jinja2 或其余 JavaScript 库的语法习惯。

2. 修改 Jinja2 的语法定界符号

第二种方式是修改 Jinja2 的语法定界符号，通常只修改变量定界符便可，其余的按需修改。具体经过修改程序实例的下面几个属性来实现：

from flask import Flask

app = Flask(__name__)

app.jinja_env.block_start_string = '(%'  # 修改块开始符号
app.jinja_env.block_end_string = '%)'  # 修改块结束符号
app.jinja_env.variable_start_string = '(('  # 修改变量开始符号
app.jinja_env.variable_end_string = '))'  # 修改变量结束符号
app.jinja_env.comment_start_string = '(#'  # 修改注释开始符号
app.jinja_env.comment_end_string = '#)'  # 修改注释结束符号复制代码

3. 修改 JavaScript 模板的语法定界符号

第三种方式是修改 JavaScript 模板的语法定界符号，具体方法因 JavaScript 模板/框架而异，能够参见相关文档了解。以 Vuejs 为例，下面将模板定界符改成中括号：

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})复制代码

折中方案

若是你以为使用 raw 标签太麻烦，而修改语法定界符又不习惯，这里还有一个折中方法：两边都使用双花括号做为定界符，但根据花括号内部是否添加空格来进行区分。

具体来讲，对 Jinja2 变量使用 Jinja2 标准语法，也就是使用 {{ 做为变量开始符号，注意花括号右侧有一个空格，结束符号相似，须要在花括号左侧加入一个空格，即 }}。实际示例以下：

{{ jinja_var }}复制代码

而 JavaScript 模板使用没有空格的双花括号，即：

{{js_var}}复制代码

这是一种更适合心细的懒人的方法，若是是团队项目，可能会对不习惯这种用法的人形成困扰，记得在文档里注明。这种方式只须要修改 Jinja2 定界符：

app.jinja_env.variable_start_string = '{{ '
app.jinja_env.variable_end_string = ' }}'复制代码

另外须要注意的是，若是你使用了其余 Flask 扩展的内置 Jinja2 模板或宏，须要确保它们都使用了包含空格的标准 Jinja2 语法。举例来讲，用来方便集成 Bootstrap 的 Flask-Bootstrap 就无法使用，须要使用替代的 Bootstrap-Flask。其余扩展，好比 Flask-Admin，Flask-Security 暂未测试，欢迎了解的同窗反馈兼容状况。