如何删除 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
    ],
    ...
  })

来源