FastAPI 如何为FastAPI文档添加CSS样式

在本文中，我们将介绍如何为FastAPI文档添加CSS样式。FastAPI是一个基于Python的现代、快速（高性能）的web框架，用于构建API。它提供了一种简单而高效的方式来创建强大的Web API，并自动生成互动的API文档。

FastAPI使用ReDoc来生成API文档，并默认为文档应用了一种基本的样式。但是，有时候我们可能希望将自定义的CSS样式应用到FastAPI文档中，以使其更符合我们的应用需求或品牌形象。下面是一些添加CSS样式到FastAPI文档的方法和示例说明。

阅读更多：FastAPI 教程

方法1：直接修改ReDoc样式文件

FastAPI使用ReDoc库来生成API文档，并提供了默认的ReDoc样式。要为FastAPI文档添加自定义CSS样式，我们可以直接修改ReDoc样式文件。首先，我们需要安装ReDoc的npm包。如果你已经安装了Node.js和npm，可以通过以下命令安装ReDoc：

npm install redoc

安装完成后，可以在node_modules目录下找到redoc文件夹。在redoc文件夹中，我们可以找到bundle.js和rebundles.js等文件。这些文件包含了ReDoc的JavaScript和CSS代码。我们可以直接修改这些文件中的CSS样式来自定义FastAPI文档的外观。

方法2：使用外部CSS文件

另一种为FastAPI文档添加自定义CSS样式的方法是使用外部CSS文件。首先，我们需要创建一个自定义的CSS文件，例如custom.css。在该CSS文件中，我们可以定义任何我们想要的样式，并且可以通过类选择器来选择FastAPI文档中的特定元素。

/* custom.css */
.redoc-logo {
  display: none;
}

.redoc-info {
  background-color: #000;
  color: #fff;
  padding: 10px;
}

.redoc-info h3 {
  font-size: 20px;
}

接下来，我们将自定义的CSS文件链接到FastAPI应用程序中。在主文件中，我们可以使用fastapi.staticfiles.StaticFiles中间件来提供静态文件，并使用fastapi.applications.FastAPI.add_middleware方法将其添加到应用程序中。

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

# 链接自定义CSS文件
app.mount("/static", StaticFiles(directory="static"), name="static")

我们需要将自定义的CSS文件保存在static目录下。这里，我们假设我们将custom.css文件保存在static目录下。此时，我们可以通过/static/custom.css路径来访问该文件。

最后，我们需要在FastAPI文档中引用自定义的CSS文件。我们可以通过修改ReDoc的配置文件来完成这个任务。在主文件中，我们可以使用fastapi.openapi.docs_url配置项来指定API文档的URL，并使用fastapi.openapi.get_redoc_html方法来生成带有自定义CSS的ReDoc HTML。

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.openapi.utils import get_openapi
from fastapi.openapi.docs import get_redoc_html

app = FastAPI()

# 链接自定义CSS文件
app.mount("/static", StaticFiles(directory="static"), name="static")

# 指定API文档的URL并生成带有自定义CSS的ReDoc HTML
docs_url = "/docs"
redoc_html = get_redoc_html(openapi_url=app.openapi_url, title=app.title, redoc_url="/static/custom.css")

app.get(docs_url)(redoc_html)

现在，我们可以通过访问/docs路径来查看带有自定义CSS样式的FastAPI文档。