如何在 Springfox 中更改 Swagger UI index.html 徽标和标题内容？答案

【问题标题】：How to change Swagger UI index.html logo and header contents in Springfox?如何在 Springfox 中更改 Swagger UI index.html 徽标和标题内容？
【发布时间】：2021-06-16 14:49:26
【问题描述】：

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

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

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

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

已将swagger-ui.css 导入本地并尝试修改图像路径。但这也无济于事。

有人可以在这里帮我修改徽标吗？如何覆盖标志属性？

【问题讨论】：

stackoverflow.com/questions/36165448/… 也许有帮助？
@omer，谢谢。我以前看到过。现在看来这已经过时了。没有swagger-ui.html。现在是index.html。另外我是springboot的新手，我正在寻找有关最新版本的详细答案
这对我有用.swagger-ui .topbar .topbar-wrapper img { content:url('mylogo.jpg'); }source

标签： spring-boot swagger-ui springfox

【解决方案1】：

很遗憾，Springfox 库中没有可用于自定义 UI 元素 CSS 和图标的配置。

如果您想要自己的自定义 Swagger 页面，请创建一个 static HTML page 并禁用 Springfox 自动生成的 Swagger 页面。由于它的 HTML，您可以随意更改图标和外观。

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自动生成的招摇页面吗？我应该删除一些依赖项吗？
查看这篇文章 - baeldung.com/swagger-ui-turn-off-in-production