Github 페이지 및 Swagger UI로 Swagger 파일 호스팅 🦜

tmforum ProductOrder specification 에서와 같은 Swagger 파일을 가져옵니다.

루트 수준에서 생성index.html:

<html>
  <head>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" />
    <title>TMF622_ProductOrder</title>
  </head>
  <body>
    <div id="swagger-ui"></div>
    <script defer>
      window.onload = function () {
        const ui = SwaggerUIBundle({
          urls: [
            {
              name: "TMF622-ProductOrder-v4.0.0",
              url: "TMF622-ProductOrder-v4.0.0.swagger.json",
            },
            {
              name: "Product_Ordering_Management.regular",
              url: "Product_Ordering_Management.regular.swagger.json",
            },
          ],
          dom_id: "#swagger-ui",
          deepLinking: true,
          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
          plugins: [SwaggerUIBundle.plugins.DownloadUrl],
          layout: "StandaloneLayout",
        });
        window.ui = ui;
      };
    </script>
    <style>
      .swagger-ui .topbar .download-url-wrapper input[type="text"] {
        border: 2px solid #77889a;
      }
      .swagger-ui .topbar .download-url-wrapper .download-url-button {
        background: #77889a;
      }
      .swagger-ui img {
        display: none;
      }
      .swagger-ui .topbar {
        background-color: #ededed;
        border-bottom: 2px solid #c1c1c1;
      }
      .swagger-ui .topbar .download-url-wrapper .select-label {
        color: #3b4151;
      }
    </style>
  </body>
</html>


Github 페이지 활성화:



그게 다야! 😀🎉

좋은 웹페이지 즐겨찾기