Linux上Swagger UI如何自定义主题

在Linux上自定义Swagger UI主题可以通过以下几种方法实现：

使用Swagger UI的默认主题

• 下载并解压Swagger UI：

  docker pull swaggerapi/swagger-ui:v4.15.5
  docker run -d -p 38081:8080 swaggerapi/swagger-ui:v4.15.5
  

• 修改配置文件： 进入Swagger UI的目录（通常位于 /usr/local/src/swagger-ui/dist），找到 index.html 文件。使用浏览器打开 http://your-server-ip:38081/swagger-ui/index.html，在页面中找到 Swagger UI 配置部分，可以修改 theme 属性来选择不同的主题。

使用第三方主题库

• 克隆第三方项目：

  git clone https://github.com/chfree/think-swagger-ui-vuele.git
  

• 安装依赖并运行项目：

  cd think-swagger-ui-vuelen
  npm install
  npm run dev
  

• 修改配置文件： 在项目中找到配置文件，修改主题相关的配置项。

使用CSS覆盖

• 找到Swagger UI生成的CSS文件： 通常位于 /usr/local/src/swagger-ui/dist/swagger-ui.css。
• 创建自定义CSS文件： 在自定义的CSS文件中编写样式规则，覆盖默认样式。
• 引入自定义CSS文件： 在 index.html 文件中引入自定义的CSS文件：

  link rel="stylesheet" type="text/css" href="path/to/custom.css">
  

使用前端框架进行定制

如果你使用的是Vue、React或Angular等前端框架，可以利用这些框架的特性来定制Swagger UI。例如，在Vue项目中，可以修改 docs.html 文件，解析JSON数据并渲染出自定义的UI界面。

直接修改Swagger UI的源代码

• 克隆Swagger UI仓库：

  git clone https://github.com/swagger-api/swagger-ui.git
  

• 修改源代码： 根据需求修改源代码，重新编译并部署。

使用配置文件和插件进行定制

在一些框架中，可以通过配置文件和插件来定制Swagger UI。例如，在Spring Boot项目中，可以使用 springfox-swagger2 和 springfox-swagger-ui 依赖，并在Spring Boot配置类中启用Swagger。

以上方法可以帮助你在Linux系统上自定义Swagger UI的主题，选择适合你项目需求的方法进行操作即可。