模板

雖然 Flask 并不強迫我們使用任何一個特定的模板語言,它假設我們要使用 Jinja。在 Flask 社區中大部分開發者使用 Jinja,我建議你們也這樣做。有很多的擴展幫助我們使用其它的模板語言,像 Flask-Genshi 和 Flask-Mako。堅持使用默認的模板語言,除非你有更好的理由使用其它的模板語言。還不知道 Jinja 語法不是一個好的理由!你會節省大量的時間和煩惱。

<em>
當我們提及到 “Jinja” 的時候,就是在說 Jinja2。存在 Jinja1,但是我們不會與它打交道。我們討論的是這個:http://jinja.pocoo.org/
</em>

Jinja 快速入門

Jinja 官方文檔在解釋語法和語言的功能上做出很大的工作。我不會在這里重復,但是我要確保你記得這個重要的注意事項:

<em>
有兩種分隔符。{% raw %}{% ... %}{% endraw %} 和 {% raw %}{{ ... }}{% endraw %}。第一個用于執行類似 for 循環或者賦值的聲明,后者是用于輸出表達的結果到模板中。
</em>

如何組織模板

那么模板如何融入到我們的應用程序?如果你一直關注 Flask 的話,你可能注意到了 Flask 是十分靈活,它并沒有對其內容進行一些特殊的限制。模板也不例外。你可能也注意到了通常有一個推薦的地方來放置東西(比如,模板)。對于模板而言,那個地方就是在包的目錄里。

myapp/
    __init__.py
    models.py
    views/
    templates/
    static/
run.py
requirements.txt
templates/
    layout.html
    index.html
    about.html
    profile/
        layout.html
        index.html
    photos.html
    admin/
        layout.html
        index.html
        analytics.html

templates 目錄的結構是與我們路由結構平行的。對于路由 myapp.com/admin/analytics 的模板就是 templates/admin/analytics.html。在目錄里面還有一些額外的模板,它們不會直接地被渲染。layout.html 文件是為了讓其它的模板繼承。

繼承

很像蝙蝠俠的背景故事一樣,一個組織優秀的模板目錄很大程度上依靠繼承。父模板 通常定義一個通用的結構,所有 子模板 都能很好的繼承它。在我們的例子中,layout.html 就是一個父模板而其它 .html 文件就是子模板。

你通常有一個頂層的 layout.html,它定義了你的應用程序的通用布局以及你的網站的每一部分。如果你看看上面的目錄的話,你會看到一個頂層的 myapp/templates/layout.html,同樣還有 myapp/templates/profile/layout.html 和 myapp/templates/admin/layout.html。最后兩個文件繼承和修改第一個文件。

{# _myapp/templates/layout.html_ #}


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% raw %}{% block title %}{% endblock %}{% endraw %}</title>
    </head>
    <body>
    {% block body %}
        <h1>This heading is defined in the parent.</h1>
    {% endblock %}
    </body>
</html>

在子模板中,我們可以擴展父模板并且定義這些塊的內容。

{# _myapp/templates/index.html_ #}

{% extends "layout.html" %}
{% block title %}Hello world!{% endblock %}
{% block body %}
    {{ super() }}
    <h2>This heading is defined in the child.</h2>
{% endblock %}

super() 函數讓我們渲染父級塊的內容。

<em>
關于繼承的更多信息,請參閱 Jinja 模板繼承文檔
</em>

創建宏

我們可以在我們模板中堅持 DRY(不要重復自己)的原則,通過抽象出重復出現的代碼片段到 宏。如果我們正工作在為我們應用程序導航的 HTML 上,我們需要給一個 “活躍的”鏈接一個 class(class=”active”)。沒有宏的話,我們要編寫一大段 if ... else 語句,這些語句檢查每一個鏈接找到正處于活躍的一個。

宏提供了一種模塊化代碼的方式;它們像函數一樣工作。讓我們看看如何使用宏標記一個活躍的鏈接。

{# myapp/templates/layout.html #}

{% from "macros.html" import nav_link with context %}
<!DOCTYPE html>
<html lang="en">
    <head>
    {% block head %}
        <title>My application</title>
    {% endblock %}
    </head>
    <body>
        <ul class="nav-list">
            {{ nav_link('home', 'Home') }}
            {{ nav_link('about', 'About') }}
            {{ nav_link('contact', 'Get in touch') }}
        </ul>
    {% block body %}
    {% endblock %}
    </body>
</html>

在這個模板中我們現在要做的就是調用一個未定義的宏 - nav_link -接著向其傳遞兩個參數:目標端點(例如,目標視圖的函數名)以及我們要顯示的文本。

現在是時候定義在我們模板中使用的 nav_link 宏。

{# myapp/templates/macros.html #}

{% macro nav_link(endpoint, text) %}
{% if request.endpoint.endswith(endpoint) %}
    <li class="active"><a href="{{ url_for(endpoint) }}">{{text}}</a></li>
{% else %}
    <li><a href="{{ url_for(endpoint) }}">{{text}}</a></li>
{% endif %}
{% endmacro %}

現在我們已經在 myapp/templates/macros.html 中定義了宏。在這個宏中我們使用了 Flask 的 request 對象 — 默認情況下在 Jinja 上下文中是可用的 — 用來檢查傳入到 nav_link 中的路由的端點是否是當前請求。如果是,我們正在當前頁面上,接著我們標記它為活躍的。

  • 從 x 導入 y 語句采用了 x 的相對路徑。如果我們的模板是 myapp/templates/user/blog.html,我們可以在使用 from "../macros.html" 導入 nav_link

自定義過濾器

Jinja 過濾器是一個函數,它能夠在 {% raw %}{{ ... }}{% endraw %} 中用于處理一個表達式的結果。在表達式結果輸出到模板之前它就被調用。

<h2>{{ article.title|title }}</h2>

在這段代碼中,title 過濾器接收 article.title 作為參數并且返回一個過濾后的標題,接著過濾后的標題將會輸出到模板中。這就像 UNIX 的“管道化”一個程序到另一個程序的輸出。

  • 有很多像 title 一樣的內置過濾器。請參閱 Jinja 文檔中的 完整列表

我們可以在我們的 Jinja 模板中定義自己的過濾器供使用。舉例來說,我們將會實現一個簡單 caps 過濾器用來大寫一個字符串中所有的字母。

  • Jinja 已經有一個 upper 過濾器來做這樣的事情,并且還有一個 capitalize 過濾器,它能用來大寫第一個字母,小寫其余的字母。這些也能處理 unicode 轉換,但是我們會繼續我們的示例,讓大家目前能夠知道如何自定義過濾器。

我們要在 myapp/util/filters.py 中定義我們的過濾器。這里給出一個 util 包,它里面有各種各樣的模塊。

# myapp/util/filters.py

from .. import app

@app.template_filter()
def caps(text):
    """Convert a string to all caps."""
    return text.uppercase()

在這段代碼中我們使用 @app.template_filter() 裝飾器注冊我們的函數成一個 Jinja 過濾器。默認的過濾器名稱就是函數的名稱,但是你可以傳入一個參數到裝飾器中來改變它。

@app.template_filter('make_caps')
def caps(text):
    """Convert a string to all caps."""
    return text.uppercase()

現在我們可以在模板中調用 make_caps 而不是 {% raw %}caps:{{ "hello world!"|make_caps }}{% endraw %}

為了要讓我們的過濾器在模板中可用的話,我們只需要在我們的頂層 \\init.py\\ 的中導入它。

# myapp/__init__.py

# Make sure app has been initialized first to prevent circular imports.
from .util import filters

摘要

  • 使用 Jinja 模板。
  • Jinja 有兩種分隔符:{% ... %}{{ ... }}。 第一個用于執行類似 for 循環或者賦值的聲明,后者是用于輸出表達的結果到模板中。
  • 模板應該在 myapp/templates/ 中 — 例如,在應用程序包中的一個目錄。
  • 我建議模板/目錄結構反映應用程序的 URL 結構。
  • 你應該在 myapp/templates 中有一個頂層的 layout.html,同樣網站的每一部分也應該有一個。后者繼承并且擴展了前者。
  • 宏就像由模板代碼構成的函數。
  • 過濾器就是有 Python 代碼組成的函數并且能在模板中使用。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第三章 模板 序 為什么要分離 易于維護的代碼,關鍵在于保持簡單的結構。而我們之前編寫的hello.py雖然簡單,...
    科幻經典閱讀 1,546評論 0 6
  • 默認情況下,Flask 在程序文件夾中的 templates 子文件夾中尋找模板。在下一個 hello.py 版本...
    改變自己_now閱讀 8,098評論 0 8
  • 渲染模板 模板文件后綴名是 .html, 這些文件就是普通的 html 文件加上一些占位符變量, 它們都默認存放在...
    焉知非魚閱讀 703評論 0 1
  • 模板是一個包含響應文本的文件,其中包含用占位變量表示的動態部分,其具體值只在請求的上下文中才能知道。使用真實值替換...
    藕絲空間閱讀 1,284評論 0 1
  • 莫憶往昔滋滋趣事,無戀那日嘻嘻笑游。風塵黃土本自天意,無盡征途何患幽幽。天下大事何止今日,無奈我輩幾人憂愁。難覓清...
    鄭樹宏閱讀 256評論 5 3