Sebastián Ramírez <******@****.***> 1714689451 -0700

Die API-Dokumentation verwendet **Swagger UI** und **ReDoc**, und jede dieser Dokumentationen benötigt einige JavaScript- und CSS-Dateien.

{!../../../docs_src/templates/templates/item.html!}
```

Neste exemplo, ele seria vinculado a um arquivo CSS em `static/styles.css` com:

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

E como você está usando `StaticFiles`, este arquivo CSS será automaticamente servido pela sua aplicação FastAPI na URL `/static/styles.css`.

## Mais detalhes

<img src="/img/tutorial/extending-openapi/image01.png">

## 文档 JavaScript 与 CSS 自托管

FastAPI 支持 **Swagger UI** 和 **ReDoc** 两种 API 文档，这两种文档都需要调用 JavaScript 与 CSS 文件。

这些文件默认由 <abbr title="Content Delivery Network（内容分发网络）: 由多台服务器为 JavaScript 和 CSS 等静态文件支持的服务。一般来说，从靠近客户端的服务器提供静态文件服务可以提高性能。">CDN</abbr> 提供支持服务。

但也可以自定义设置指定的 CDN 或自行提供文件服务。

这种做法很常用，例如，在没有联网或本地局域网时也能让应用在离线状态下正常运行。

```

In diesem Beispiel würde das zu einer CSS-Datei unter `static/styles.css` verlinken, mit folgendem Inhalt:

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

Und da Sie `StaticFiles` verwenden, wird diese CSS-Datei automatisch von Ihrer **FastAPI**-Anwendung unter der URL `/static/styles.css` bereitgestellt.

## Mehr Details

    name: vi - Tiếng Việt
  - link: /yo/
    name: yo - Yorùbá
  - link: /zh/
    name: zh - 简体中文
  - link: /zh-hant/
    name: zh-hant - 繁體中文
  - link: /em/
    name: 😉
extra_css:
- css/termynal.css
- css/custom.css
extra_javascript:
- js/termynal.js
- js/custom.js
hooks:

    ] = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui-bundle.js",
    swagger_css_url: Annotated[
        str,
        Doc(
            """
            The URL to use to load the Swagger UI CSS.

            It is normally set to a CDN URL.
            """
        ),
    ] = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui.css",
    swagger_favicon_url: Annotated[
        str,
        Doc(
            """

# Static Files - `StaticFiles`

You can use the `StaticFiles` class to serve static files, like JavaScript, CSS, images, etc.

Read more about it in the [FastAPI docs for Static Files](https://fastapi.tiangolo.com/tutorial/static-files/).

You can import it directly from `fastapi.staticfiles`:

```python
from fastapi.staticfiles import StaticFiles
```

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

本例中，使用 `url_for()` 为模板添加 CSS 文件 `static/styles.css` 链接：

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

因为使用了 `StaticFiles`， **FastAPI** 应用自动提供位于 URL `/static/styles.css`

的 CSS 文件。

## 更多说明

# Statische Dateien – `StaticFiles`

Sie können die `StaticFiles`-Klasse verwenden, um statische Dateien wie JavaScript, CSS, Bilder, usw. bereitzustellen.

Lesen Sie mehr darüber in der [FastAPI-Dokumentation zu statischen Dateien](../tutorial/static-files.md).

Sie können sie direkt von `fastapi.staticfiles` importieren:

```python
from fastapi.staticfiles import StaticFiles
```