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

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

 5. 定義測試函數

  上面 loop.first 就是一個測試函數,這個我們也可以自定義

  定義是在Sample.py 里定義的,current_link是HTML中可使用測試函數名稱(可選)

@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強大的地方就可以引用模板,而且非常方便。

  這里不得不介紹block這個概念。

 

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

  在這里面也,編排了整個頁面的排版,里面會用到很多block的占位符

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

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

{% 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 %}

運行項目

---------------------@@完成@@---------------------


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM