模板¶

您可以搭配 FastAPI 使用任何您想要的模板引擎。

一個常見的選擇是 Jinja2，與 Flask 和其他工具所使用的相同。

有一些工具可以輕鬆地設定它，您可以直接在您的 FastAPI 應用程式中使用（由 Starlette 提供）。

安裝依賴項¶

請確保您建立一個虛擬環境，啟動它，並安裝 jinja2

$ pip install jinja2

---> 100%

使用 `Jinja2Templates`¶

匯入 Jinja2Templates。
建立一個 templates 物件，您可以在之後重複使用。
在將返回模板的*路徑操作*中宣告一個 Request 參數。
使用您建立的 templates 來渲染並返回一個 TemplateResponse，傳入模板的名稱、請求物件，以及一個包含鍵值對的「上下文」字典，以便在 Jinja2 模板內使用。

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item.html", context={"id": id}
    )

注意事項

在 FastAPI 0.108.0、Starlette 0.29.0 之前，name 是第一個參數。

此外，在此之前的版本中，request 物件是作為 Jinja2 上下文中鍵值對的一部分傳遞的。

提示

透過宣告 response_class=HTMLResponse，文件 UI 將能夠知道響應將是 HTML。

「技術細節」

您也可以使用 from starlette.templating import Jinja2Templates。

FastAPI 提供與 starlette.templating 相同的 fastapi.templating，只是為了方便您，開發者。但大多數可用的響應都直接來自 Starlette。Request 和 StaticFiles 也是如此。

撰寫模板¶

然後您可以在 templates/item.html 中撰寫一個模板，例如

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

模板上下文值¶

在包含以下內容的 HTML 中

Item ID: {{ id }}

...它將顯示從您傳遞的「上下文」dict 中取得的 id

{"id": id}

例如，如果 ID 為 42，則會渲染為

Item ID: 42

模板 `url_for` 參數¶

您也可以在模板內使用 url_for()，它接受與您的*路徑操作函式*相同的參數。

因此，包含以下內容的部分

<a href="{{ url_for('read_item', id=id) }}">

...將產生一個連結，指向由*路徑操作函式* read_item(id=id) 處理的相同 URL。

例如，如果 ID 為 42，則會渲染為

<a href="/items/42">

模板和靜態檔案¶

您也可以在模板內使用 url_for()，例如，將它與您使用 name="static" 掛載的 StaticFiles 一起使用。

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

在此範例中，它將使用以下程式碼連結到 static/styles.css 的 CSS 檔案

h1 {
    color: green;
}

而且因為您正在使用 StaticFiles，該 CSS 檔案將由您的 FastAPI 應用程式自動在 URL /static/styles.css 提供服務。

模板¶