swagger - 如何删除 Swagger UI 中标题下的 API 定义 URL？

Question

我正在使用 Swagger UI，并且想要删除标题部分下显示的 API 定义 URL(指向 YAML 文件的链接)，如图中突出显示的那样。这可以通过自定义 Swagger UI index.html 页面来完成吗？

Answer 1

选项 1:使用 CSS 隐藏

<!-- index.html -->

<style>
...

.swagger-ui .info hgroup.main a {
  display: none
}
</style>

选项 2:使用 JavaScript 隐藏 (v.3.13.0+)

Swagger UI 3.x 使用插件系统来控制渲染。您可以定义一个禁用 InfoUrl 组件的自定义插件 - 这将阻止呈现 API 定义链接。此方法适用于 Swagger UI 3.13.0 及更高版本。

// index.html

window.onload = function() {

  // Custom plugin to hide the API definition URL
  const HideInfoUrlPartsPlugin = () => {
    return {
      wrapComponents: {
        InfoUrl: () => () => null
      }
    }
  }

  // Build a system
  const ui = SwaggerUIBundle({
    ...
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      HideInfoUrlPartsPlugin    // <---- Apply the plugin
    ],
    ...
  })

Source