Skip to content

6. Templates

1. Templates

  • FastAPI를 이용하여 원하는 template 엔진을 사용할 수 있다.
  • Flask 및 기타 도구에서 사용하는 것과 같이 일반적으로 Jinja2를 사용한다.


2. Install dependencies

  • Jinja2를 다음과 같이 설치한다.


pip install jinja2


  • 만약 정적 파일도 제공해야 하는 경우 aiofiles도 같이 설치한다.


3. Using Jinja2Templates

  • Jinja2Templates를 임포트한다.
  • 나중에 또 사용할 수 있는 templates 객체를 생성한다.
  • template을 반환하는 path operation에 매개변수 Request를 선언한다.
  • 생성한 templates를 사용하여 TemplateResponse를 렌더링하여 반환하고, Jinja2 "context"의 키-값 쌍으로 request를 전달한다.


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("item.html", {"request": request, "id": id})


4. Writing templates

  • 다음과 같이 templates/item.html에 template을 작성할 수 있다.


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


  • 전달한 "context" dict에서 가져온 id가 표시된다.


{"request": request, "id": id}


5. Templates and static files

  • mount한 StaticFiles와 함께 template 내부에서 url_for()을 사용할 수도 있다.


<html>
  <head>
    <title>Item Details</title>

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


  • 다음과 같이 static/styles.css에 CSS 파일에 연결할 수 있다.


h1 {
  color: green;
}


  • StaticFiles를 사용하고 있기 때문에 해당 CSS 파일은 /static/styles.css URL에서 FastAPI 애플리케이션에 의해 자동으로 제공된다.

References