Linux系统中Swagger UI如何自定义 - 问答

在Linux系统中自定义Swagger UI可以通过以下几种方法实现：

1. 自定义样式

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

.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上。

2. 基于前端框架的定制

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

3. 借助第三方库或插件

一些第三方库或插件能简化Swagger UI的样式定制过程。例如：

swagger-ui-layer：一个基于Vue的项目，允许通过修改源码实现样式自定义。
swagger-bootstrap-ui：一个为Java项目提供的Swagger UI实现，允许你使用Bootstrap快速定制UI。

4. 直接修改Swagger UI源代码

如果你具备丰富的开发经验，可以直接修改Swagger UI的源代码。从GitHub克隆Swagger UI仓库，根据你的需求修改代码，重新编译并部署即可。

5. 配置文件自定义

Swagger UI支持通过配置文件自定义样式。你可以修改 swagger-ui.css 和 swagger-ui.js 文件，或者引入自定义CSS文件来覆盖默认样式，从而实现个性化定制。

6. 安全配置

如果你需要在生产环境中使用Swagger，确保配置适当的安全措施，例如使用Spring Security。

通过以上方法，你可以在Linux系统上成功自定义Swagger UI，提升接口文档的可读性和美观度。

0 赞

0 踩