**FastAPI** bietet dasselbe `starlette.templating` auch via `fastapi.templating` an, als Annehmlichkeit für Sie, den Entwickler. Aber die meisten der verfügbaren Responses kommen direkt von Starlette. Das Gleiche gilt für `Request` und `StaticFiles`.

///

## Templates erstellen { #writing-templates }

Dann können Sie unter `templates/item.html` ein Template erstellen, mit z. B. folgendem Inhalt:

```jinja hl_lines="7"

你也可以在模板中使用 `url_for()`，例如搭配你以 `name="static"` 掛載的 `StaticFiles` 使用。

```jinja hl_lines="4"
{!../../docs_src/templates/templates/item.html!}
```

在這個例子中，它會連結到 `static/styles.css` 的 CSS 檔案，內容為：

```CSS hl_lines="4"
{!../../docs_src/templates/static/styles.css!}
```

而且因為你使用了 `StaticFiles`，該 CSS 檔案會由你的 **FastAPI** 應用程式在 URL `/static/styles.css` 自動提供。

## 更多細節 { #more-details }

テンプレート内で `url_for()` を使用し、例えば `name="static"` でマウントした `StaticFiles` に対して利用できます。

```jinja hl_lines="4"
{!../../docs_src/templates/templates/item.html!}
```

この例では、`static/styles.css` の CSS ファイルにリンクします:

```CSS hl_lines="4"
{!../../docs_src/templates/static/styles.css!}
```

また、`StaticFiles` を使用しているため、その CSS ファイルは **FastAPI** アプリケーションから URL `/static/styles.css` で自動的に配信されます。

└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Обслуговуйте статичні файли { #serve-the-static-files }

- Імпортуйте `StaticFiles`.
- Змонтуйте екземпляр `StaticFiles()` у певному шляху.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Перевірте статичні файли { #test-the-static-files }

└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Sirve los archivos estáticos { #serve-the-static-files }

* Importa `StaticFiles`.
* "Monta" una instance de `StaticFiles()` en un path específico.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Prueba los archivos estáticos { #test-the-static-files }

└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Prover os arquivos estáticos { #serve-the-static-files }

* Importe `StaticFiles`.
* "Monte" a instância `StaticFiles()` em um caminho específico.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Teste os arquivos estáticos { #test-the-static-files }

└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Die statischen Dateien bereitstellen { #serve-the-static-files }

* Importieren Sie `StaticFiles`.
* „Mounten“ Sie eine `StaticFiles()`-Instanz in einem bestimmten Pfad.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Die statischen Dateien testen { #test-the-static-files }

    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Предоставьте доступ к статическим файлам { #serve-the-static-files }

* Импортируйте `StaticFiles`.
* Смонтируйте экземпляр `StaticFiles()` в определённый путь.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Протестируйте статические файлы { #test-the-static-files }

└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Statik dosyaları servis edin { #serve-the-static-files }

* `StaticFiles` içe aktarın.
* Belirli bir path'te bir `StaticFiles()` instance'ını "mount" edin.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Statik dosyaları test edin { #test-the-static-files }

└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Servir les fichiers statiques { #serve-the-static-files }

- Importer `StaticFiles`.
- « Monter » une instance `StaticFiles()` sur un chemin spécifique.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Tester les fichiers statiques { #test-the-static-files }