Linux下Swagger UI如何自定义主题 - 问答

在Linux下，要自定义Swagger UI的主题，你需要遵循以下步骤：

安装Swagger UI：首先，确保你已经在你的项目中安装了Swagger UI。你可以使用npm或yarn来安装它。例如，使用npm：

npm install swagger-ui-dist

创建自定义CSS文件：在你的项目中创建一个新的CSS文件，例如custom.css。在这个文件中，你可以覆盖Swagger UI的默认样式。例如：

/* custom.css */
.swagger-ui .topbar {
  background-color: #007bff;
}

.swagger-ui .info .title {
  color: #007bff;
}

引入自定义CSS文件：在你的HTML文件中，确保在引入Swagger UI的CSS文件之后引入你的自定义CSS文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swagger UI</title>
  <link rel="stylesheet" type="text/css" href="node_modules/swagger-ui-dist/swagger-ui.css">
  <link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
  <div id="swagger-ui"></div>
  <script src="node_modules/swagger-ui-dist/swagger-ui-bundle.js"></script>
  <script src="node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js"></script>
  <script>
    window.onload = function() {
      const ui = SwaggerUIBundle({
        url: "your-swagger-json-url",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      window.ui = ui;
    }
  </script>
</body>
</html>

重新加载Swagger UI：保存你的更改并重新加载Swagger UI。你应该看到你的自定义样式已经应用到了Swagger UI上。

请注意，你可以根据需要修改custom.css文件中的样式规则，以实现你想要的主题效果。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

0 赞

0 踩