如何在 Springfox 中更改 Swagger UI index.html 徽标和标题内容? [英] How to change Swagger UI index.html logo and header contents in Springfox?

查看：32
本文介绍了如何在 Springfox 中更改 Swagger UI index.html 徽标和标题内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 springfox-swagger 3.0.0 记录使用 Spring Boot 2.4.3 创建的 API.所以我现在有下面的页面.

我的客户想要将 Swagger UI 徽标更改为他们自己的徽标.我不能这样做.我已经搜索并找到了几个解决方案，但它不起作用.

  1. 在 /resource/static/swaggercustm.css 下添加了以下自定义代码.但没有变化.

    .swagger-ui img {内容:url('/static/css/mylogo.png');宽度:140px；高度:40px；}

  2. 将 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");}</html>

I'm documenting my API created using Spring Boot 2.4.3 using springfox-swagger 3.0.0. So I have the below page now.

My client wants to change the Swagger UI logo to their own. I'm not able to do so. I have searched and found few solutions and it is not working.

  1. Added the below custom code under /resource/static/swaggercustm.css. But no changes.

    .swagger-ui img {
   content: url('/static/css/mylogo.png');
   width: 140px; 
   height: 40px; 
}

  2. Imported swagger-ui.css to local and triede modifying image path. But this also didn't help.

Can somebody please help me here to just modify the logo? How to override the logo properties?

解决方案

Unfortunately, There is no Configuration available in Springfox library to Customise UI elements CSS and Icons.

If you want your own customised Swagger Page then create a static HTML page and disable usage of auto-generated swagger page from Springfox. Since its HTML, you can change ICONS and the look of it however you want.

resources/static/new_swagger.html

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Custom 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" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }

      .top-nav-bar{
        position: fixed;
        top: 0;
        z-index: 99;
        width: 100%;
        overflow: hidden;
        background: #333;
        padding: 15px;
      }
      .nav-bar-icon{
        margin-top: 1px;
        float: left;
        display: block;
        text-decoration: none;
      }
      .nav-bar-title{
        float: left;
        display: block;
        text-decoration: none;
        margin-top: 7px;
        margin-left: 10px;
        font-size: 18px;
        color: #ffffff;
        font-family: sans-serif;
      }
      .nav-bar-select{
        width: 30%;
        float: right;
        font-family: sans-serif;
        display: inline-block;
        cursor: pointer;
        padding: 10px 15px;
        outline: 0;
        border-radius: 2px;
        border: none;
        background: #fafafa;
        color: #3b4151;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
      }
      select.classic {
        background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
        background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
        background-size: 5px 5px, 5px 5px, 3.5em 3.5em;
        background-repeat: no-repeat;
      }
    </style>
  </head>

  <body>
    <div class="top-nav-bar">
      <a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a>
      <a class="nav-bar-title"><b>X name</b></a>
      <select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()">
        <option value="./swagger.json">X service</option>
      </select>
    </div>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"> </script>
    <script>
      function changeSwaggerUI(){
        let selected_service_swaggerURL = document.getElementById("service-selector").value;
        loadUI(selected_service_swaggerURL);
      }

      function loadUI(swaggerJsonURL){
        // Begin Swagger UI call region
        const ui = SwaggerUIBundle({
          url: swaggerJsonURL,
          validatorUrl: "",
          dom_id: '#swagger-ui',
          deepLinking: true,
          docExpansion: 'none',
          presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIStandalonePreset
          ],
          plugins: [
            CustomTopbarPlugin
          ],
          layout: "StandaloneLayout"
        });
        // End Swagger UI call region

        window.ui = ui
      }

      function CustomTopbarPlugin() {
        // this plugin overrides the Topbar component to return nothing
        return {
          components: {
            Topbar: () => null
          }
        }
      }

      window.onload = function() {
        loadUI("./swagger.json");
      }
  </script>
  </body>
</html>

这篇关于如何在 Springfox 中更改 Swagger UI index.html 徽标和标题内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆