一：渲染模版javascript
要渲染一個模板，經過render_template方法便可。css
@app.route('/about/') def about(): # return render_template('about.html',user='username') return render_template('about.html',**{'user':'username'})
渲染模版時有兩種傳遞參數的方式：用 var='value' 傳遞一個參數；使用字典組織多個參數，而且加兩個*號轉換成關鍵字參數傳入。html
二：模板概要java
Jinja模板是簡單的一個純文本文件，通常用html頁面來書寫。python
1. <html lang="en"> 2. <head> 3. <title>My Webpage</title> 4. </head> 5. <body> 6. <ul id="navigation"> 7. {% for item in navigation %} 8. <li><a href="{{ item.href }}">{{ item.caption }}</a></li> 9. {% endfor %} 10. </ul> 11. 12. {{ a_variable }} 13. {{ user.name }} 14. {{ user['name'] }} 15. 16. {# a comment #} 17. </body> 18.</html> 轉自做者：IT薔薇 連接：http://www.jianshu.com/p/31a75d3d9270
模版講解：api
{{ ... }}：裝載一個變量，模板渲染的時候，會使用傳進來的同名參數這個變量表明的值替換掉。{% ... %}：裝載一個控制語句。{# ... #}：裝載一個註釋，模板渲染的時候會忽視這中間的值。
三：變量跨域
1）在模板中添加變量，可使用（set）語句。app
{% set name='xx' %}
以後就能夠在頁面文件中使用name這個變量了。在解釋性語言中，變量的類型時運行時肯定的，所以，這裏的變量能夠賦任何類型的值。dom
上面的語句建立的是全局變量，從定義以後的文件部分中均可以訪問 。函數
2）局部變量
可使用with語句來建立一個內部的做用域，將set語句放在其中，這樣建立的變量只在with代碼塊中才有效。
{% with foo = 42 %}
{{ foo }}
{% endwith %}
這樣，foo變量就只能在with標籤間可使用。
四：控制語句
控制語句都是放在{% ... %}中，而且有一個語句{% endxxx %}來進行結束。
1:if語句
{% if kenny.sick %} Kenny is sick. {% elif kenny.dead %} You killed Kenny! You bastard!!! {% else %} Kenny looks okay --- so far {% endif %} 轉自：IT薔薇 連接：http://www.jianshu.com/p/31a75d3d9270
2:for循環
1）普通用法
<ul> {% for user in users %} <li>{{ user.username|e }}</li> {% endfor %} </ul>
2）遍歷字典
{% for key, value in my_dict.iteritems() %}
<dt>{{ key|e }}</dt> <dd>{{ value|e }}</dd> {% endfor %}
3）在循環中加入else
<ul> {% for user in users %} <li>{{ user.username|e }}</li> {% else %} <li><em>no users found</em></li> {% endfor %} </ul>
4）Jinja2中for循環內置常量
| loop.index | 當前迭代的索引（從1開始） |
| loop.index0 | 當前迭代的索引（從0開始） |
| loop.first | 是不是第一次迭代，返回True\/False |
| loop.last | 是不是最後一次迭代，返回True\/False |
| loop.length | 序列的長度 |
注意：不可使用continue和break表達式來控制循環的執行。
五：運算符
+號運算符：能夠完成數字相加，字符串相加，列表相加。可是並不推薦使用+運算符來操做字符串，字符串相加應該使用~運算符。-號運算符：只能針對兩個數字相減。/號運算符：對兩個數進行相除。%號運算符：取餘運算。*號運算符：乘號運算符，而且能夠對字符進行相乘。**號運算符：次冪運算符，好比2**3=8。in操做符：跟python中的in同樣使用，好比{{1 in [1,2,3]}}返回true。~號運算符：拼接多個字符串，好比{{"Hello" ~ "World"}}將返回HelloWorld。
{% macro input(name, value='', type='text') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value|e }}"> {% endmacro %}
在其它地方使用這個宏快速建立出符合要求的input標籤：
<p>{{ input('username') }}</p> <p>{{ input('password', type='password') }}</p>
1）頁面文件中導入宏——import
在開發中，會將一些經常使用的宏單獨放在一個文件中，在須要使用的時候，再從這個文件中進行導入。
import語句的用法跟python中的import相似，能夠直接import...as...，也能夠from...import...或者from...import...as...。
{% import 'forms.html' as forms %} //導入宏文件
<dl> <dt>Username</dt> <dd>{{ forms.input('username') }}</dd> //使用宏 <dt>Password</dt> <dd>{{ forms.input('password', type='password') }}</dd> </dl> <p>{{ forms.textarea('comment') }}</p>
導入模板並不會把當前上下文中的變量添加到被導入的模板中，咱們能夠在導入的時候使用with context 把上下文傳進去：
{% from '_helpers.html' import my_macro with context %}
2）宏文件中引用其它宏——include
include語句能夠把一個模板引入到另一個模板中，相似於把一個模板的代碼copy到另一個模板的指定位置。
{% include 'header.html' %}
Body
{% include 'footer.html' %}
七：模版文件的繼承
模板能夠繼承，經過繼承能夠把模板中許多重複出現的元素抽取出來，放在父模板中，而且父模板經過定義block給子模板開一個口，子模板根據須要，再實現這個block進行具體內容定義。
好比：父模版base.html以下：
<!DOCTYPE html> <html lang="en"> <head> {% block head %} //開放一個地方，以待具體賦值 <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - My Webpage</title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} © Copyright 2008 by <a href="http://domain.invalid/">you</a>. {% endblock %} </div> </body> </html> 轉自：IT薔薇 連接：http://www.jianshu.com/p/31a75d3d9270
而後定義子模版，對父模板中的block部分進行覆蓋書寫：
{% extends "base.html" %}//1:繼承父模板
{% block title %}Index{% endblock %}／／2:書寫title block
{% block head %}//3：書寫head block
{{ super() }}//調用父模板中的內容，若是不調用，則此處會被子模板中書寫的內容覆蓋掉
<style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %}//4:書寫content block <h1>Index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %} 轉自：IT薔薇 連接：http://www.jianshu.com/p/31a75d3d9270
另外：模板文件中對block內容的調用，可使用 self.blockName 的方式。
<title>{% block title %}{% endblock %}</title> <h1>{{ self.title() }}</h1>//調用title block的內容
注意：在子模板中，全部的標籤和代碼都要添加到從父模板中繼承的block中。不然，這些文本和標籤將不會被渲染。（由於子模板至關於把內容嵌入到父模板到block中，而沒有寫到block中的內容固然不會被嵌入，也就不會被渲染。）
八：過濾器
過濾器是經過（|）符號進行使用的，例如：{{ name|length }}：將返回name的長度。
過濾器至關因而一個函數，把當前的變量傳入到過濾器中，而後過濾器根據本身的功能，再返回相應的值，以後再將結果渲染到頁面中。
abs(value)：返回一個數值的絕對值。示例：-1|absdefault(value,default_value,boolean=false)：若是當前變量沒有值，則會使用參數中的值來代替。示例：name|default('xiaotuo')——若是name不存在，則會使用xiaotuo來替代。boolean=False默認是在只有這個變量爲undefined的時候纔會使用default中的值，若是想使用python的形式判斷是否爲false，則能夠傳遞boolean=true。也可使用or來替換。escape(value)或e：轉義字符，會將<、>等符號轉義成HTML中的符號。示例：content|escape或content|e。first(value)：返回一個序列的第一個元素。示例：names|first-
format(value,*arags,**kwargs)：格式化字符串。好比：{{ "%s" - "%s"|format('Hello?',"Foo!") }} 將輸出：Helloo? - Foo! -
last(value)：返回一個序列的最後一個元素。示例：names|last。 length(value)：返回一個序列或者字典的長度。示例：names|length。join(value,d=u'')：將一個序列用d這個參數的值拼接成字符串。safe(value)：若是開啓了全局轉義，那麼safe過濾器會將變量關掉轉義。示例：content_html|safe。int(value)：將值轉換爲int類型。float(value)：將值轉換爲float類型。lower(value)：將字符串轉換爲小寫。upper(value)：將字符串轉換爲小寫。replace(value,old,new)： 替換將old替換爲new的字符串。truncate(value,length=255,killwords=False)：截取length長度的字符串。striptags(value)：刪除字符串中全部的HTML標籤，若是出現多個空格，將替換成一個空格。trim：截取字符串前面和後面的空白字符。string(value)：將變量轉換成字符串。wordcount(s)：計算一個長字符串中單詞的個數。
九：測試器
測試器主要用來判斷一個值是否知足某種類型，語法是：if...is...：
{% if variable is escaped%}
value of variable: {{ escaped }}
{% else %}
variable is not escaped
{% endif %}
Jinja2中測試器有：
callable(object)：是否可調用。defined(object)：是否已經被定義了。escaped(object)：是否已經被轉義了。upper(object)：是否全是大寫。lower(object)：是否全是小寫。string(object)：是不是一個字符串。sequence(object)：是不是一個序列。number(object)：是不是一個數字。odd(object)：是不是奇數。even(object)：是不是偶數。
十：轉義
在模板渲染字符串的時候，字符串有可能包括一些很是危險的字符好比<、>等，這些字符會破壞掉原來HTML標籤的結構，更嚴重的可能會發生XSS跨域腳本攻擊，所以若是碰到<、>這些字符的時候，應該轉義成HTML能正確表示這些字符的寫法。
對於一些不信任的字符串，能夠經過{{ content_html|e }}或者是{{ content_html|escape }}的方式進行轉義。
若是想關閉自動轉義，能夠經過{{ content_html|safe }}的方式關閉自動轉義。
{%autoescape true/false%}...{%endautoescape%}能夠將一段代碼塊放在中間，來關閉或開啓自動轉義：
{% autoescape false %}
<p>autoescaping is disabled here <p>{{ will_not_be_escaped }} {% endautoescape %}
十一：模版頁面中引入靜態文件
靜態文件主要包括有CSS樣式文件、JavaScript腳本文件、圖片文件、字體文件等靜態資源。
在Jinja中加載靜態文件只須要經過url_for全局函數就能夠實現：
<link href="{{ url_for('static',filename='about.css') }}">
引入static目錄下的about.css文件。