如何自定义 Swagger 顶部栏

Question

我正在使用 yaml 文件来控制项目的 swagger 页面上的内容。我几乎可以让所有东西看起来都正确，除了我想让顶部栏有“选择定义”下拉菜单（或者没有任何内容，如果现在更简单的话）而不是“探索”控件。到目前为止，我已经看到了如何实现这一点的零碎内容，但还没有从头开始完成。

\n

我想要这个：\n

\n

...或者现在甚至是这样：\n

\n

但不是这个：\n

\n

问题是如何使用自定义 Swagger YML 文件在 Spring Boot 中创建自定义布局？看来你需要使用 React 创建一个自定义布局，我对此一无所知。一些进行自定义布局的示例非常简单。但是，我不知道将带有 React 代码的文件放在哪里。此外，一些示例表明 ok\xe2\x80\xa6yes 您需要通过指向 application.yml 文件中的自定义布局来配置它，如下所示：

\n

\n

我不知道以 aka MyLayout.js .jsx 或其他内容为后缀的 React 文件类型是什么。\n我也不知道在 Spring Boot 项目中的何处放置此自定义布局文件。\n我要编译它吗？如果是这样怎么办？

\n

Answer 1

我没有使用自定义 Swagger YAML 文件的自定义标题/顶部栏的解决方案。不过，我在我的一个项目中使用自定义 Springdoc CSS 文件实现了这一目标。为此，请按照下列步骤操作：

1. 加载 Swagger UI，打开开发人员控制台并导航到页面源。下载swagger-ui.css文件。

2. 将此swagger-ui.css文件放入resourcesSpring Boot 项目的文件夹中。

3. 打开swagger-ui.css文件并添加以下 CSS（在文件底部）以隐藏顶栏：

   .topbar {
       display: none;
   }
   

4. 创建 new Controller，它将“托管”您的自定义 CSS 文件：

   @Controller
   public class CustomOpenApiUiController {
   
       @Value("classpath:swagger-ui.css")
       private Resource cssFile;
   
       @GetMapping(value = "/swagger-ui/swagger-ui.css")
       public void resourceCSS(HttpServletRequest request, HttpServletResponse response) {
           setResource(cssFile, response, "text/css;charset=UTF-8");
       }
   
       private void setResource(Resource resource, HttpServletResponse response, String contentType) {
           try {
               response.setHeader("content-type", contentType);
               response.setHeader("Pragma", "no-cache");
               byte[] file = IOUtils.toByteArray(Objects.requireNonNull(resource.getURI()));
               response.getOutputStream().write(file);
           } catch (Exception e) {
               log.error("Error occurred while loading the OpenAPI CSS file: {}", e.getMessage());
           }
       }
   }
   

5. 再次加载您的 Swagger UI。顶部的栏应该消失了。您还可以在开发人员控制台中检查您的新 CSS 是否已应用于该类.topbar（该类负责您试图删除的标头）。

   

现在您已经控制了 CSS 文件，您可以编辑任何您想要的内容。