快捷導(dǎo)航

Flask框架Jinjia模板常用語法總結(jié)

更新時(shí)間：2018年07月19日 11:22:25 作者：站在兩個(gè)世界的邊緣

這篇文章主要介紹了Flask框架Jinjia模板常用語法,結(jié)合實(shí)例形式總結(jié)分析了Jinjia模板的變量、賦值、流程控制、函數(shù)、塊、宏等基本使用方法,需要的朋友可以參考下

本文實(shí)例總結(jié)了Flask框架Jinjia模板常用語法。分享給大家供大家參考，具體如下：

1. 變量表示

{{ argv }}

2. 賦值操作

{% set links = [
  ('home',url_for('.home')),
  ('service',url_for('.service')),
  ('about',url_for('.about')),
] %}

3. if判斷

{% if not loop.first %}|{% endif %}

4. for 循環(huán)

{% for label,link in links %}
   {% if not loop.first %}|{% endif %}
   <a href="{{ link }}" rel="external nofollow" >{{ label }}</a>
{% endfor %}

5. 定義測(cè)試函數(shù)

上面 loop.first 就是一個(gè)測(cè)試函數(shù)，這個(gè)我們也可以自定義

定義是在Sample.py 里定義的，current_link是HTML中可使用測(cè)試函數(shù)名稱（可選）

@app.template_test('current_link')
def is_current_link(link):
  return link == request.path

HTML中，使用例子

<body>
{% set links = [
  ('home',url_for('.home')),
  ('service',url_for('.service')),
  ('about',url_for('.about')),
] %}
<nav>
  {% for label,link in links %}
    {% if not loop.first %}|{% endif %}
    <a href="{% if link is current_link %}#
    {% else %}
    {{ link }}
    {% endif %}
    ">{{ label }}</a>
  {% endfor %}
</nav>
</body>

6. 塊block

Flask強(qiáng)大的地方就可以引用模板，而且非常方便。

這里不得不介紹block這個(gè)概念。

模板的文件一般放在templates文件夾下，我們這里新建一個(gè)HTML文件，存放模板，'base.html'

在這里面也，編排了整個(gè)頁面的排版，里面會(huì)用到很多block的占位符。

每個(gè)block都代表一段html語句塊，而這些塊在哪里定義呢，可以在當(dāng)前的base.html中定義，也可以在別的html中定義。反正要有一處定義，沒有定義塊只是沒有效果而已

定義的時(shí)候，home.html 頂部必須說明繼承關(guān)系(如果py文件鏈接的是home.html，但home.html引用了base.html的模板，就要說明)

{% extends 'base.html' %}

塊的定義格式，endblock 后面塊名可以省略，有時(shí)候加上會(huì)讓結(jié)構(gòu)更加明晰

{% block 塊名 %}
  塊內(nèi)容
{% endblock (塊名)%}

定義了塊之后，base.html中對(duì)應(yīng)的塊，就會(huì)被這些塊內(nèi)容覆蓋。

塊的覆蓋情況

有一種情況，base.html中定義了block B 塊內(nèi)容1，但是在home.html也定義block B 塊內(nèi)容2，注意這時(shí)會(huì)優(yōu)先顯示內(nèi)容2，因?yàn)榘褍?nèi)容1覆蓋了。

理解起來，就是base.html是通用模板，我們可以直接引用過來，沒有問題，但是也可以自定義塊，修改通用模板的內(nèi)容，達(dá)到我們想要的效果。

還有一種情況，我們既不想不覆蓋通用模板的內(nèi)容，又想在其基礎(chǔ)上，增加一些東西，這也是可以的。

舉個(gè)例子：在base.html中

<footer>
  {% block footer %}
  <p>Posted:Bikmin</p>
    <p>Contact with:<a href="someone@example.com" rel="external nofollow" rel="external nofollow" >someone@example.com</a> </p>
  {% endblock %}
</footer>

如果我們不再自定義塊，就會(huì)使用base.html通用模板的內(nèi)容，效果如下

覺得這個(gè)模板還行，不想覆蓋，還想在這個(gè)基礎(chǔ)上再添加些東西，想要上面添加一條水平線作為分隔符，該怎么做呢

做法是，也是在home.html重新定義塊，但是需要用到super()函數(shù)

{% block footer %}
  <hr>
  {{ super() }}
{% endblock %}

{{ super() }} 就表示了通用模板里的內(nèi)容

在一個(gè)項(xiàng)目HTML中，塊被定義多次，是會(huì)被覆蓋的。

有時(shí)候，我們想引用塊的內(nèi)容，又不想寫一串很長(zhǎng)的塊內(nèi)容，這時(shí)候可以用下面的語法，不管在哪個(gè)html文件里定義的都可以，只要有繼承關(guān)系

{{ self.塊名() }}

7. 包含頁

如果有一些HTML代碼是經(jīng)常用到的固定的，為了避免整個(gè)HTML文檔看起來很擁擠，內(nèi)容嘈雜。

可以將這一部分的代碼，保存為了一個(gè)HTML模板，然后要用的時(shí)候，再用

{% include 'includes/_head.html' %}

包含的方法引用過來，引號(hào)里是路徑，includes是templates下的一個(gè)文件夾，這個(gè)看你放在哪里，就填哪里的路徑了。

8. 宏macro

學(xué)了這么多，發(fā)現(xiàn)Flask中到處都是模板，仔細(xì)想想Python中的函數(shù)不也像是模板嗎？只要輸入?yún)?shù)，就可以實(shí)現(xiàn)特定的功能。

所以Jinjia里當(dāng)然少不了。

宏的定義（舉個(gè)例子）

下面定義一個(gè)<input/>的函數(shù)，通過做成宏，可以將一些參數(shù)修改成我們想要的默認(rèn)值，然后調(diào)用的時(shí)候就像函數(shù)一樣調(diào)用，很方便。

{# 定義宏 #}
{% macro input(name,value='',type='text',size=20) %}
  <input type="{{ type }}"
    name="{{ name }}"
    value="{{ value }}"
    size="{{ size }}"/>
{% endmacro %}

宏的調(diào)用

{{ input('username') }}
{{ input('password',type='password') }}

宏的集合做成庫

宏跟函數(shù)差不多，Python的函數(shù)可以封裝在庫里，那么是不是也可以將很多宏集合在一起（一個(gè)HTML中）,要用的時(shí)候像調(diào)用庫函數(shù)一樣import使用呢？

答案是當(dāng)然可以的。這個(gè)做法還有一個(gè)好處，就是讓我們的主HTML文件，內(nèi)容更加簡(jiǎn)練。節(jié)省空間，可讀性更強(qiáng)。

下面我們舉例將一個(gè)macro放在'_macro.html'中

然后如何引入到我們的文件里呢

{% import '_macro.html' as ui %}

這里注意，必須要加 as 庫名，不然我們引用函數(shù)的時(shí)候，都不知道從哪里來的函數(shù)

調(diào)用的方式也有點(diǎn)改變，如下

{{ ui.input('username') }}
{{ ui.input('password',type='password') }}

是不是跟Python的使用函數(shù)一模一樣？

小項(xiàng)目實(shí)戰(zhàn)

#Sample.py

# coding:utf-8
from flask import Flask,render_template,request,url_for
app = Flask(__name__)
@app.route('/')
def home():
  return render_template('home.html',title_name = 'welcome')
@app.route('/service')
def service():
  return 'service'
@app.route('/about')
def about():
  return 'about'
@app.template_test('current_link')
def is_current_link(link):
  return link == request.path
if __name__ == '__main__':
  app.run(debug=True)

#home.html

{% extends 'base.html' %}
{% import '_macro.html' as ui %}
{% block title %}{{ title_name }}{% endblock %}
{% block content %}
{% set links = [
  ('home',url_for('.home')),
  ('service',url_for('.service')),
  ('about',url_for('.about')),
] %}
<nav>
  {% for label,link in links %}
    {% if not loop.first %}|{% endif %}
    <a href="{% if link is current_link %}#
    {% else %}
    {{ link }}
    {% endif %}
    ">{{ label }}</a>
  {% endfor %}
</nav>
  <p>{{ self.title() }}</p>
  {{ ui.input('username') }}
  {{ ui.input('password',type='password') }}
{% endblock content %}
{% block footer %}
  <hr>
  {{ super() }}
{% endblock %}

#base.html

<!DOCTYPE html>
<html lang="en">
<head>
  {% block head %}
    {% include 'includes/_head.html' %}
  {% endblock %}
</head>
<body>
  <header>{% block header %}{% endblock %}</header>
  <div>{% block content %}<p>hello</p>{% endblock %}</div>
  {% for item in items %}
    <li>{% block loop_item scoped %}{{ item }}{% endblock %}</li>
  {% endfor %}
  <footer>
    {% block footer %}
    <p>Posted:Bikmin</p>
      <p>Contact with:<a href="someone@example.com" rel="external nofollow" rel="external nofollow" >someone@example.com</a> </p>
    {% endblock %}
  </footer>
</body>
</html>

#_head.html

<meta charset="UTF-8">
<link href="{{ url_for('static',filename='site.css') }}" rel="external nofollow" rel="stylesheet">
<title>{% block title %}{% endblock %}</title>

#macro

{# 定義宏 #}
{% macro input(name,value='',type='text',size=20) %}
  <input type="{{ type }}"
    name="{{ name }}"
    value="{{ value }}"
    size="{{ size }}"/>
{% endmacro %}

運(yùn)行項(xiàng)目