Swagger 漂亮的 HTML 代码在哪里？

Question

只有 ugly HTML 页面可供下载（HTML、HTML2 和动态都很难看），但网站，例如。已编辑https://app.swaggerhub.com/apis/{user}/{project}/{version} （和许多其他人！）提供漂亮的 HTML 界面......如何下载这个漂亮的 HTML？

完整和自主的 HTML 代码（文件或文件的 zip）。

我的 API 有一个良好且有效的 swagger.yaml 或 swagger.json 文件，因此另一种解决方案是使用我的 API 描述文件运行开源（即插即用！）工具。

---

漂亮的：

丑陋的：

Answer 1

您屏幕截图上的“漂亮界面”是Swagger UI。它是免费和开源的。 http://petstore.swagger.io 有一个演示，您可以在其中从 URL 加载您自己的 YAML/JSON 文件并查看它们将如何呈现。

要在本地使用 Swagger UI：

1. 转到https://github.com/swagger-api/swagger-ui 并以 ZIP 格式下载存储库：

2. 编辑dist\index.html 文件并更改行

   url: "http://petstore.swagger.io/v2/swagger.json",
   

   到您的 Swagger .json 或 .yaml 文件的 URL，例如

   url: "http://api.mysite.com/swagger.json",
   

3. （可选）在SwaggerUIBundledist\index.html的初始化代码中添加/更改其他configuration parameters。

4. 在浏览器中打开 dist\index.html 文件以预览您的 API 文档。

   注意：如果规范未加载或“试用”不起作用，您可能需要在服务器上启用 CORS。请参阅https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/cors.md 和https://enable-cors.org。

5. 将文件从dist 文件夹上传到您的服务器 - 现在您也拥有漂亮的 API 文档了！

或者，SwaggerHub（您提到的）为 Swagger 规范提供云托管服务，并集成了 Swagger UI。您可以在那里导入您的 Swagger .json/.yaml 文件，并将您的 API 文档托管在 SwaggerHub 上。 free plan 可用。

Answer 2

感谢@tleyden at swagger-ui/issues 提供好的线索！

使用本项目的索引和assets文件夹https://github.com/okfn-brasil/swagger-ui-html