个人中心
gpt4 book ai didi

spring-boot - 如何在 Springfox 中更改 Swagger UI index.html Logo 和标题内容？

转载 作者：行者123 更新时间：2023-12-04 17:20:05 35 4
gpt4 key购买 nike

我正在使用 springfox-swagger 记录使用 Spring Boot 2.4.3 创建的 API 3.0.0。所以我现在有下面的页面。
enter image description here
我的客户想要将 Swagger UI Logo 更改为他们自己的 Logo 。我不能这样做。我已经搜索并找到了几个解决方案，但它不起作用。

  • 在 /resource/static/swaggercustm.css 下添加以下自定义代码.但没有任何变化。
    .swagger-ui img {
       content: url('/static/css/mylogo.png');
       width: 140px; 
       height: 40px; 
    }
  • 进口swagger-ui.css到本地和尝试修改图像路径。但这也无济于事。

    • 有人可以在这里帮我修改 Logo 吗？如何覆盖 Logo 属性？

    最佳答案

    不幸的是，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>

    关于spring-boot - 如何在 Springfox 中更改 Swagger UI index.html Logo 和标题内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66704031/

    35 4 0
    文章推荐： r - 为什么用伪 Huber 损失训练 Xgboost 模型会返回一个恒定的测试指标？
    文章推荐： hash - 如何将哈希键添加到 firebase OTP 短信正文部分
    文章推荐： python - 从 tf.keras.utils.Sequence 构建的自定义数据生成器不适用于 tensorflow 模型的 fit api
    文章推荐： android - 配置项目 ':@react-native-firebase_messaging' 时出现问题。 > compileSdkVersion 未指定
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com