在Linux上自定义Swagger API文档样式,可以通过修改Swagger UI的CSS和JavaScript文件来实现。以下是一个基本的步骤指南:
首先,确保你已经安装了Swagger UI。你可以使用npm来安装Swagger UI:
npm install swagger-ui-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'); }); Swagger UI的样式可以通过修改CSS文件来实现。你可以找到Swagger UI的默认CSS文件,并进行自定义。
Swagger UI的CSS文件通常位于node_modules/swagger-ui-dist目录下。你可以找到swagger-ui.css文件。
将swagger-ui.css文件复制到你的项目目录中,例如:
cp node_modules/swagger-ui-dist/swagger-ui.css ./public/css/ 打开./public/css/swagger-ui.css文件,并根据需要进行修改。例如,你可以更改主题颜色、字体大小等。
/* 示例:更改主题颜色 */ .swagger-ui .topbar { background-color: #007bff; } /* 示例:更改字体大小 */ .swagger-ui .info .title { font-size: 24px; } 在你的Express应用中引入自定义的CSS文件。修改你的HTML模板或直接在Express中使用express.static中间件来提供静态文件服务。
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> 现在,你可以运行你的Express应用,并访问http://localhost:3000/api-docs来查看自定义样式的Swagger UI文档。
node app.js 通过以上步骤,你可以在Linux上自定义Swagger API文档样式。你可以根据需要进一步修改CSS和JavaScript文件,以实现更复杂的自定义效果。