在Linux系统中自定义Swagger UI展示可以通过以下几种方法实现:
docker pull swaggerapi/swagger-ui:v4.15.5
docker run -d -p 38081:8080 swaggerapi/swagger-ui:v4.15.5
index.html
文件,通常位于/usr/local/src/swagger-ui/dist
。http://your-server-ip:38081/swagger-ui/index.html
,在页面中找到Swagger UI配置部分,可以修改theme
属性来选择不同的主题。think-swagger-ui-vuele
,这是一个基于Vue.js的Swagger UI实现,支持自定义主题。git clone https://github.com/chfree/think-swagger-ui-vuele.git
cd think-swagger-ui-vuelen
npm install
npm run dev
custom.css
。/* custom.css */
.swagger-ui .topbar {
background-color: #007bff;
}
.swagger-ui .info .title {
color: #007bff;
}
index.html
文件中引入自定义的CSS文件。link rel="stylesheet" type="text/css" href="path/to/custom.css">
如果你使用Vue、React或Angular等前端框架,可以充分利用框架特性来定制Swagger UI。例如,在Vue项目中,你可以修改docs.html
文件,解析JSON数据并渲染自定义UI界面。
一些第三方库或插件能简化Swagger UI的样式定制过程。例如:
如果你具备丰富的开发经验,可以直接修改Swagger UI的源代码。从GitHub克隆Swagger UI仓库,根据你的需求修改代码,重新编译并部署即可。