如何在Linux上自定义Swagger主题 - 问答

在Linux上自定义Swagger主题，可以通过修改Swagger UI的CSS和JavaScript文件来实现。以下是一个简单的步骤指南：

下载Swagger UI：首先，你需要下载Swagger UI的资源文件。你可以从Swagger UI的GitHub仓库（https://github.com/swagger-api/swagger-ui）下载，或者使用npm/yarn来安装。
```
npm install swagger-ui-dist
```
或者
```
yarn add swagger-ui-dist
```

创建自定义CSS文件：在你的项目中创建一个新的CSS文件，例如custom.css，并在其中添加你的自定义样式。

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

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

引入自定义CSS文件：在你的HTML文件中引入这个自定义CSS文件。确保它在Swagger UI的CSS文件之后加载。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom 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-api-spec.json",
                dom_id: '#swagger-ui',
                deepLinking: true,
                presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                ],
                plugins: [
                    SwaggerUIBundle.plugins.DownloadUrl
                ],
                layout: "StandaloneLayout"
            });
            window.ui = ui;
        }
    </script>
</body>
</html>

自定义JavaScript（可选）：如果你需要更复杂的自定义，比如动态修改UI元素，你可以在HTML文件中引入自定义的JavaScript文件。

// custom.js
document.addEventListener('DOMContentLoaded', function() {
    const ui = window.ui;
    if (ui) {
        // 你的自定义代码
    }
});

然后在HTML文件中引入这个JavaScript文件：

<script src="custom.js"></script>

运行你的应用：使用你喜欢的开发服务器来运行你的应用。例如，如果你使用的是Node.js，你可以使用http-server模块：
```
npx http-server .
```
然后在浏览器中访问http://localhost:8080，你应该能看到你的自定义Swagger UI。

通过以上步骤，你可以在Linux上自定义Swagger UI的主题。你可以根据需要修改CSS和JavaScript文件，以实现你想要的效果。

0 赞

0 踩