温馨提示×

如何在Linux上自定义Swagger API文档样式

小樊
82
2025-03-18 02:14:35
栏目: 智能运维

在Linux上自定义Swagger API文档样式,可以通过修改Swagger UI的CSS和JavaScript文件来实现。以下是一个基本的步骤指南:

1. 安装Swagger UI

首先,确保你已经安装了Swagger UI。你可以使用npm来安装Swagger UI:

npm install swagger-ui-express 

2. 创建一个Express应用

创建一个新的Express应用,并集成Swagger UI:

const express = require('express'); const swaggerUi = require('swagger-ui-express'); const YAML = require('yamljs'); const app = express(); // 读取Swagger文档 const swaggerDocument = YAML.load('./path/to/your/swagger.yaml'); // 使用Swagger UI app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); 

3. 自定义Swagger UI样式

Swagger UI的样式可以通过修改CSS文件来实现。你可以找到Swagger UI的默认CSS文件,并进行自定义。

3.1 找到Swagger UI的CSS文件

Swagger UI的CSS文件通常位于node_modules/swagger-ui-dist目录下。你可以找到swagger-ui.css文件。

3.2 复制CSS文件

swagger-ui.css文件复制到你的项目目录中,例如:

cp node_modules/swagger-ui-dist/swagger-ui.css ./public/css/ 

3.3 修改CSS文件

打开./public/css/swagger-ui.css文件,并根据需要进行修改。例如,你可以更改主题颜色、字体大小等。

/* 示例:更改主题颜色 */ .swagger-ui .topbar { background-color: #007bff; } /* 示例:更改字体大小 */ .swagger-ui .info .title { font-size: 24px; } 

4. 引入自定义CSS文件

在你的Express应用中引入自定义的CSS文件。修改你的HTML模板或直接在Express中使用express.static中间件来提供静态文件服务。

4.1 使用express.static中间件

在你的Express应用中添加以下代码:

app.use(express.static('public')); 

确保你的CSS文件路径正确,例如:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/css/swagger-ui.css"> </head> <body> <div id="swagger-ui"></div> <script src="/swagger-ui-bundle.js"></script> <script src="/swagger-ui-standalone-preset.js"></script> <script> window.onload = function() { const ui = SwaggerUIBundle({ url: "http://petstore.swagger.io/v2/swagger.json", dom_id: '#swagger-ui', deepLinking: true, presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" }); window.ui = ui; }; </script> </body> </html> 

5. 运行你的应用

现在,你可以运行你的Express应用,并访问http://localhost:3000/api-docs来查看自定义样式的Swagger UI文档。

node app.js 

通过以上步骤,你可以在Linux上自定义Swagger API文档样式。你可以根据需要进一步修改CSS和JavaScript文件,以实现更复杂的自定义效果。

0