讓 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 暫未測試，歡迎瞭解的同窗反饋兼容狀況。