问题描述
我正在使用 springfox-swagger
3.0.0 记录使用 Spring Boot 2.4.3 创建的 API.所以我现在有下面的页面.
我的客户想要将 Swagger UI 徽标更改为他们自己的徽标.我不能这样做.我已经搜索并找到了几个解决方案,但它不起作用.
在
/resource/static/swaggercustm.css
下添加了以下自定义代码.但没有变化..swagger-ui img {内容:url('/static/css/mylogo.png');宽度:140px;高度:40px;}
将
swagger-ui.css
导入到本地并尝试修改图像路径.但这也无济于事.
有人可以在这里帮我修改徽标吗?如何覆盖徽标属性?
不幸的是,Springfox
库中没有可用的配置来自定义 UI 元素 CSS 和图标.
如果您想要自己的自定义 Swagger 页面,则创建一个 静态 HTML 页面
并禁用 Springfox 自动生成的 swagger 页面.由于是 HTML,您可以随意更改图标及其外观.
resources/static/new_swagger.html
<!-- 用于静态分发包构建的 HTML --><!DOCTYPE html><html lang="zh-cn"><头><meta charset="UTF-8"><title>自定义 Swagger UI</title><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" ><link rel="icon" type="image/png" href="./swagger-favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="./swagger-favicon-16x16.png" size="16x16"/><风格>html{box-sizing: 边框框;溢出:-moz-scrollbars-vertical;溢出-y:滚动;}*,*:之前,*:之后{box-sizing:继承;}身体{保证金:0;背景:#fafafa;}.top-nav-bar{位置:固定;顶部:0;z-索引:99;宽度:100%;溢出:隐藏;背景:#333;填充:15px;}.nav-bar-icon{边距顶部:1px;浮动:左;显示:块;文字装饰:无;}.nav-bar-title{浮动:左;显示:块;文字装饰:无;边距顶部:7px;左边距:10px;字体大小:18px;颜色:#ffffff;字体系列:无衬线;}.nav-bar-select{宽度:30%;浮动:对;字体系列:无衬线;显示:内联块;光标:指针;填充:10px 15px;大纲:0;边界半径:2px;边界:无;背景:#fafafa;颜色:#3b4151;外观:无;-webkit 外观:无;-moz-外观:无;}选择.经典{背景图像:线性渐变(45 度,透明 50%,#111 50%),线性渐变(135度,#111 50%,透明 50%);背景位置:calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;背景尺寸:5px 5px、5px 5px、3.5em 3.5em;背景重复:不重复;}</风格>头部><身体><div class="top-nav-bar"><a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a><a class="nav-bar-title"><b>X 名称</b></a><select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()"><option value="./swagger.json">X 服务</option></选择>
<div style="margin-top: 100px" id="swagger-ui"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js"><script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"><脚本>函数 changeSwaggerUI(){让 selected_service_swaggerURL = document.getElementById("service-selector").value;加载UI(selected_service_swaggerURL);}功能加载UI(swaggerJsonURL){//开始 Swagger UI 调用区域const ui = SwaggerUIBundle({网址:swaggerJsonURL,验证器网址:"",dom_id: '#swagger-ui',深度链接:真实,docExpansion: '无',预设:[SwaggerUIBundle.presets.apis,SwaggerUIStandalonePreset],插件: [自定义顶栏插件],布局:独立布局"});//结束 Swagger UI 调用区域窗口.ui = ui}函数 CustomTopbarPlugin() {//此插件覆盖 Topbar 组件不返回任何内容返回{组件:{顶栏:() =>空}}}window.onload = 函数(){loadUI("./swagger.json");}