Flask建站筆記-使用jinjia模板

jinjia語法類似於JavaWeb中的jsp。可以以特定語法規則直接在html中與後臺產生交互,並實現一些簡單的邏輯操作。

  1. 後臺函數
@blog.route("/blog")
def blog():
    data = [...]
    return render_templates("index.html", data=data)
  1. 變量表示
{{ data[0] }}
  1. if判斷
{% if data %}
<p>{{ one }}<p>
{% endif %}
  1. for循環
{% for one in data %}
<p>{{ one }}<p>
{% endfor %}
  1. block塊

使用block塊,我們可以定義一個模板html,實現頁面風格的統一

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Title{% endblock %}</title>
</head>
<body style="background-color:#eeeeee">
    <!--頁頭-->
    <div id="divHead" class="row" style="background-color: #4d91a1">
    </div>

    <!--內容塊-->
    {% block content %}
    {% endblock %}

    <!--頁尾-->
    <div class="row" style="background-color: #333333; width: 100%; height: 40px; position: fixed; bottom: 0px"></div>
    <script src="/static/plugin/jquery/jquery-1.9.1.min.js"></script>
    <script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <!--JS加載塊-->
    {% block js %}
    {% endblock %}
</body>
</html>

在base.html中定義的block塊,均可在被繼承的頁面中覆寫

extend.html

```html
<!-- 聲明當前頁面繼承自base -->
{% extends 'base.html' %}

{% block title %}NewTitle{% endblock %}

{% block content %}
<p>NewHtml</p>
{% endblock %}

{% block js %}
<script src="/static/js/add.js"></script>
{% endblock %}
  1. macro宏

使用宏可以定義一個在html中使用的函數,函數獲取參數,返回值(內容處理)或文本(動態元素)。我們可以將常用的函數放在一個html文件內,在需要使用的地方導入即可

  1. 定義一個宏集合 ‘_macro.html’
{# 定義一個可動態生成的input元素 #}
{% macro input(name,value='',type='text',size=20) %}
    <input type="{{ type }}"
        name="{{ name }}"
        value="{{ value }}"
        size="{{ size }}"/>
{% endmacro %}

  1. 使用宏
{% import '_macro.html' as macro %}

<label for="username">用戶名:</label>
{{ macro.input('username') }}
  1. 自定義全局函數

自定義全局函數在python文件中定義,通過’add_template_global’方法傳入模板使用

  1. 定義一個全局函數
def time_format(str_time):
    return str_time.sub[0: 10]

app.add_template_global(time_format, "time_format")
  1. 在html中使用
{% time_new = time_format("2018-01-01 09:33:24") %}
<p>{{ time_new }}</p>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章