Flask入門之Jinjia模板的一些語法

時間 2019-11-21

原文原文鏈接

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 循環

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

5. 定義測試函數

　　上面 loop.first 就是一個測試函數，這個咱們也能夠自定義css

　　定義是在Sample.py 裏定義的，current_link是HTML中可以使用測試函數名稱（可選）html

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

　　HTML中，使用例子flask

<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>

---------------------------------------------分割線---------------------------------------------app

6. 塊block

　　Flask強大的地方就能夠引用模板，並且很是方便。函數

　　這裏不得不介紹block這個概念。oop

　　模板的文件通常放在templates文件夾下，咱們這裏新建一個HTML文件，存放模板，'base.html'測試

　　在這裏面也，編排了整個頁面的排版，裏面會用到不少block的佔位符。ui

　　每一個block都表明一段html語句塊，而這些塊在哪裏定義呢，能夠在當前的base.html中定義，也能夠在別的html中定義。反正要有一處定義，沒有定義塊只是沒有效果而已url

　　定義的時候，home.html 頂部必須說明繼承關係(若是py文件連接的是home.html，但home.html引用了base.html的模板，就要說明)spa

{% extends 'base.html' %}

　　塊的定義格式，endblock 後面塊名能夠省略，有時候加上會讓結構更加明晰

{% block 塊名 %}
    塊內容
{% endblock (塊名)%}

　　定義了塊以後，base.html中對應的塊，就會被這些塊內容覆蓋。

塊的覆蓋狀況

　　有一種狀況，base.html中定義了block B 塊內容1，可是在home.html也定義block B 塊內容2，注意這時會優先顯示內容2，由於把內容1覆蓋了。

理解起來，就是base.html是通用模板，咱們能夠直接引用過來，沒有問題，可是也能夠自定義塊，修改通用模板的內容，達到咱們想要的效果。

　　還有一種狀況，咱們既不想不覆蓋通用模板的內容，又想在其基礎上，增長一些東西，這也是能夠的。

　　舉個例子：在base.html中

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

　　若是咱們再也不自定義塊，就會使用base.html通用模板的內容，效果以下

　　以爲這個模板還行，不想覆蓋，還想在這個基礎上再添加些東西，想要上面添加一條水平線做爲分隔符，該怎麼作呢

　　作法是，也是在home.html從新定義塊，可是須要用到super()函數

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

　　{{ super() }} 就表示了通用模板裏的內容

　　在一個項目HTML中，塊被定義屢次，是會被覆蓋的。

　　有時候，咱們想引用塊的內容，又不想寫一串很長的塊內容，這時候能夠用下面的語法，無論在哪一個html文件裏定義的均可以，只要有繼承關係

{{ self.塊名() }}

7. 包含頁

　　若是有一些HTML代碼是常常用到的固定的，爲了不整個HTML文檔看起來很擁擠，內容嘈雜。

能夠將這一部分的代碼，保存爲了一個HTML模板，而後要用的時候，再用

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

包含的方法引用過來，引號裏是路徑，includes是templates下的一個文件夾，這個看你放在哪裏，就填哪裏的路徑了。

8. 宏macro

　　學了這麼多，發現Flask中處處都是模板，仔細想一想Python中的函數不也像是模板嗎？只要輸入參數，就能夠實現特定的功能。

因此Jinjia裏固然少不了。

宏的定義（舉個例子）

下面定義一個<input/>的函數，經過作成宏，能夠將一些參數修改爲咱們想要的默認值，而後調用的時候就像函數同樣調用，很方便。

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

宏的調用

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

宏的集合作成庫

　　宏跟函數差很少，Python的函數能夠封裝在庫裏，那麼是否是也能夠將不少宏集合在一塊兒（一個HTML中）,要用的時候像調用庫函數同樣import使用呢？

答案是固然能夠的。這個作法還有一個好處，就是讓咱們的主HTML文件，內容更加簡練。節省空間，可讀性更強。

　　下面咱們舉例將一個macro放在'_macro.html'中

而後如何引入到咱們的文件裏呢

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

這裏注意，必需要加 as 庫名 ，否則咱們引用函數的時候，都不知道從哪裏來的函數

調用的方式也有點改變，以下

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

　　是否是跟Python的使用函數如出一轍？

小項目實戰

#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">someone@example.com</a> </p>
        {% endblock %}
    </footer>
</body>
</html>

#_head.html

<meta charset="UTF-8">
<link href="{{ url_for('static',filename='site.css') }}" 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 %}