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

Question

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

Avi*_*ash 7 swagger-ui spring-boot springfox

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

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

在下添加了以下自定义代码/resource/static/swaggercustm.css。但没有任何变化。
```
.swagger-ui img {
   content: url('/static/css/mylogo.png');
   width: 140px; 
   height: 40px; 
}
```
Run Code Online (Sandbox Code Playgroud)
导入swagger-ui.css到本地并尝试修改图像路径。但这也没有帮助。

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

Answer 1

Div*_*hta 1

不幸的是，库中没有可用的配置Springfox来自定义 UI 元素 CSS 和图标。

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

资源/静态/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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，8 月前
查看次数：	7978 次
最近记录：	4 年，6 月前