如何在 <redoc> 中添加选项？答案

【问题标题】：How to add option in <redoc>?如何在 <redoc> 中添加选项？
【发布时间】：2018-10-11 15:31:00
【问题描述】：

我想为我的 ReDoc 添加一些附加选项。对于当前的实现，我使用的是从 Swagger 生成的 json 文件，它被添加到 html 页面中。示例如何完成：

  <body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
  </body>

我将其用作参考文档：https://github.com/Rebilly/ReDoc

如何在标签中添加选项对象而不使用 ReDoc 对象？以及如何使用供应商扩展，例如x标志？在文档中这是通过 json 文件设置的，但我的 json 文件是从 Swagger 自动生成的。

【问题讨论】：

标签： asp.net-mvc swagger documentation

【解决方案1】：

您只需将选项放在redoc 标记中的spec-url 之后，如下所示：

<body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json' YOUR_OPTIONS_HERE></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
</body>

在这个 ReDoc 存储库的示例中，您可以对其进行验证（此时为第 22 行）：

https://github.com/Rebilly/ReDoc/blob/master/config/docker/index.tpl.html#L22

重要：

请记住“kebab-casing the ReDoc options”，例如，如果您的选项是：

hideDownloadButton noAutoAuth disableSearch

YOUR_OPTIONS_HERE

应该是（在烤肉串后）：

hide-download-button no-auto-auth disable-search

带有这些选项的你的身体会变成这样：

<body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json' hide-download-button no-auto-auth disable-search></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
</body>

希望对你有用。

【讨论】：

【解决方案2】：

ReDoc 具有通过Redoc.init 进行的高级初始化，因此您可以手动下载规范并添加一些后处理（例如添加x-logo）。

您可以将 ReDoc 选项作为第二个参数传递给 Redoc.init：

<body>
  <div id="redoc"></div>
  <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
  <script>
    fetch('http://petstore.swagger.io/v2/swagger.json')
      .then(res => res.json())
      .then(spec => {
        spec.info['x-logo'] = { url: "link/to/image.png" };
        Redoc.init(spec, {
        // options go here (e.g. pathInMiddlePanel)
        }, document.getElementById('redoc'));
      });
</body>

注意：这要求 Fetch API 在浏览器中可用，因此它在 IE11 中不起作用。

【讨论】：

我需要在 Angular 6 应用程序中设置 Redoc.init。但不知道该怎么做。现在我正在做 redoc spec-url

【解决方案3】：

您可以将选项放在spec-url 旁边。确保您正在使用的 Redoc 版本，有您想要使用的选项，您可以通过转到特定版本来检查它。 github.com/Redocly/redoc/tree/vx.x.x。作为旁注，延迟渲染功能在 v1.22.3 之前可用。

https://github.com/Redocly/redoc#redoc-options-object

You can use all of the following options with standalone version on tag by kebab-casing them, e.g. scrollYOffset becomes scroll-y-offset and expandResponses becomes expand-responses.

【讨论】：