通过在html中添加一个简单的侧边栏来自定义swagger-ui

Question

通过在html中添加一个简单的侧边栏来自定义swagger-ui

因此，我试图在swagger-ui主页上制作一个导航面板侧栏。我正在使用http://startbootstrap.com/template-overviews/simple-sidebar/简单边栏。我尝试将代码（+ css文件）放入swagger-ui的dist文件夹中，然后在dist / index.html中尝试添加它，但显示不正确。我认为这是因为从不同的模板生成了大量的内容。我只希望我的侧边栏出现在主页上。

https://github.com/swagger-api/swagger-ui

dist / index.html：

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Swagger UI</title>
      <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
      <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
      <link href='css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
      <link href='css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
      <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
      <link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>
      <link href='css/print.css' media='print' rel='stylesheet' type='text/css'/>
      <link href='css/bootstrap.min.css' media='print' rel='stylesheet' type='text/css'/>
      <link href="css/simple-sidebar.css" media='print' rel='stylesheet' type='text/css'/>

      <script src='lib/object-assign-pollyfill.js' type='text/javascript'></script>
      <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
      <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
      <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
      <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
      <script src='lib/handlebars-2.0.0.js' type='text/javascript'></script>
      <script src='lib/js-yaml.min.js' type='text/javascript'></script>
      <script src='lib/lodash.min.js' type='text/javascript'></script>
      <script src='lib/backbone-min.js' type='text/javascript'></script>
      <script src='swagger-ui.js' type='text/javascript'></script>
      <script src='lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
      <script src='lib/highlight.9.1.0.pack_extended.js' type='text/javascript'></script>
      <script src='lib/jsoneditor.min.js' type='text/javascript'></script>
      <script src='lib/marked.js' type='text/javascript'></script>
      <script src='lib/swagger-oauth.js' type='text/javascript'></script>

      <!-- Some basic translations -->
      <!-- <script src='lang/translator.js' type='text/javascript'></script> -->
      <!-- <script src='lang/ru.js' type='text/javascript'></script> -->
      <!-- <script src='lang/en.js' type='text/javascript'></script> -->

      <script type="text/javascript">
        $(function () {
          var url="http://localhost:8081/instagram.yml";


          var url = window.location.search.match(/url=([^&]+)/);
          if (url && url.length > 1) {
            url = decodeURIComponent(url[1]);
          } else {
            url = "http://localhost:8081/instagram.yml";
          }

          hljs.configure({
            highlightSizeThreshold: 5000
          });

          // Pre load translate...
          if(window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
          }

          window.swaggerUi = new SwaggerUi({

            url: url,
            dom_id: "swagger-ui-container",
            supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
            onComplete: function(swaggerApi, swaggerUi){
              if(typeof initOAuth == "function") {
                initOAuth({
                  clientId: "your-client-id",
                  clientSecret: "your-client-secret-if-required",
                  realm: "your-realms",
                  appName: "your-app-name",
                  scopeSeparator: ",",
                  additionalQueryStringParams: {}
                });
              }

              if(window.SwaggerTranslator) {
                window.SwaggerTranslator.translate();
              }
            },
            onFailure: function(data) {
              log("Unable to Load SwaggerUI");
            },
            docExpansion: "none",
            jsonEditor: false,
            defaultModelRendering: 'schema',
            showRequestHeaders: false
          });

          window.swaggerUi.load();     

          function log() {
            if ('console' in window) {
              console.log.apply(console, arguments);
            }
          }
        });


      </script>

    </head>

    <body class="swagger-section">
    <div id='header'>
      <div class="swagger-ui-wrap">
        <a id="logo" href="http://swagger.io">swagger</a>
        <form id='api_selector'>
          <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
          <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
          <div class='input'><a id="explore" href="#">Explore</a></div>
        </form>
      </div>
    </div>
    <div id="sidebar-wrapper">
       <ul class="sidebar-nav">
         <li class="sidebar-brand">
           <a href="#">Start Bootstrap</a>
         </li>
         <li>
           <a href="#">Dashboard</a>
         </li>
         <li>
           <a href="#">Shortcuts</a>
         </li>
         <li>
           <a href="#">Overview</a>
         </li>
         <li>
           <a href="#">Events</a>
         </li>
         <li>
           <a href="#">About</a>
         </li>
         <li>
           <a href="#">Services</a>
         </li>
         <li>
           <a href="#">Contact</a>
         </li>
       </ul>
     </div>

    <div id="message-bar" class="swagger-ui-wrap">&nbsp;</div>

    <div id="swagger-ui-container" class="swagger-ui-wrap"></div>

    </body>
    </html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Arn*_*ret 5

index.html文件丢失：

ID sidebar-wrapper包含侧边栏的div
ID page-content-wrapper为div且位于侧栏右侧的div
与ID的DIV wrapper含有sidebar-wrapper和page-content-wrapper

这是一个示例（完整的工作仓库在这里：https : //github.com/arno-di-loreto/stackoverflow-38377821-customize-swagger-ui-by-adding-a-simple-sidebar-in-the-html）

    <body class="swagger-section">
    <div id='header'>
          <div class="swagger-ui-wrap">
            <a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="images/logo_small.png" /><span class="logo__title">swagger</span></a>
            <!-- Bootstrap Simple Sidebar: Toggle button -->
            <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
            <form id='api_selector'>
              <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
              <div id='auth_container'></div>
              <div class='input'><a id="explore" class="header__btn" href="#" data-sw-translate>Explore</a></div>
            </form>
          </div>
        </div>
    <!-- Bootstrap Simple Sidebar: Global wrapper, contains sidebar and page -->
    <div id="wrapper">
      <!-- Bootstrap Simple Sidebar: Sidebar -->
      <div id="sidebar-wrapper">
          <ul class="sidebar-nav">
              <li class="sidebar-brand">
                  <a href="#">
                      Start Bootstrap
                  </a>
              </li>
              <li>
                  <a href="#">Dashboard</a>
              </li>
              <li>
                  <a href="#">Shortcuts</a>
              </li>
              <li>
                  <a href="#">Overview</a>
              </li>
              <li>
                  <a href="#">Events</a>
              </li>
              <li>
                  <a href="#">About</a>
              </li>
              <li>
                  <a href="#">Services</a>
              </li>
              <li>
                  <a href="#">Contact</a>
              </li>
          </ul>
      </div>

      <!-- Bootstrap Simple Sidebar: Page wrapper -->
      <div id="page-content-wrapper">
        <div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
        <div id="swagger-ui-container" class="swagger-ui-wrap"></div>
      </div>
    </div>

    <!-- Bootstrap Simple Sidebar: Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
  </body>

Run Code Online (Sandbox Code Playgroud)

回购https://github.com/arno-di-loreto/stackoverflow-38377821-customize-swagger-ui-by-adding-a-simple-sidebar-in-the-html提供了两个分支：

v1.0_header_in_page：SwaggerUI绿色标头在页面中并且未固定
v1.1_header_above_sidebar：SwaggerUI绿色标题位于边栏上方并已固定

我不得不修改一些css和handlebar模板来解决由于swagger ui中的bootstrap集成导致的错误（有关详细信息，请参见提交列表）。

完整的分步说明

首先，永远不要dist直接编辑文件夹中的文件，而必须使用中的源文件src：

CSS：
- 您可以将自己的CSS添加到 src/main/html/css/
- SwaggerUI的CSS是使用中较少的文件构建的src/main/less，一旦编译，css文件将转到src/main/html/css/
的HTML：
- `src / main / template包含车把HTML模板（除SwaggerUI的页眉和页脚之外的所有内容）
- src/main/html包含主要的html文件（index.html）

每个步骤都对应于示例存储库中的提交。

项目初始化

克隆Swagger UI存储库： git clone https://github.com/swagger-api/swagger-ui
下载依赖项：
- cd swagger-ui
- npm install
开始开发模式： gulp dev
- 这将构建应用程序，并在端口8080上启动Web服务器。如果对代码进行了修改，浏览器将自动重新加载

将simple-sidebar.css和bootstrap.min.css添加到项目（commit）

复制simple-sidebar.css和bootstrap.min.css到src/main/html/css/
修改src/main/html/index.html以在swagger-ui CSS之后添加对这2个CSS文件的引用：

添加引导侧边栏（commit）

修改src/main/html/index.html：
- 将<div id="page-content-wrapper">div 体内的所有组件都包含在内
- 括在<div id="wrapper">div中
- <div id="sidebar-wrapper"> ... </div>在上方添加侧边栏（）<div id="wrapper">
- 在之前添加菜单切换脚本 </body>

完成此操作后，您将：

功能边栏
侧栏右侧的Swagger UI标头
很少有CSS错误，例如：
- 绿色背景标题大小错误
- 页面周围有白色填充（在边栏右侧）
- Swagger UI主容器太大

修复Swagger UI容器宽度（commit）

要固定容器的宽度，您需要修改src/main/template/main.handlebars：
- 此文件是包含信息部分，API描述将到达的div和页脚的主要模板。
- div id='resources_container'使用一个类container，将该类重命名为sw-container

修复页面周围的白色填充（commit）

白色填充来自``文件：
- 你只需要删除这两个padding在#page-content-wrapper上线47和121

修复头绿色背景大小 -要修复这个bug，你必须修改screen.less中src/main/less/ -这个文件夹包含将被用于创建CSS文件扬鞭UI都少文件-我选择删除高度：23和小幅变化填充，以解决这个bug

一旦有了这个，您就可以使用（分支v1.0_header_in_page）：

功能边栏
侧栏右侧的Swagger ui
正确的显示

将SwaggerUI标头移到顶部并进行修复（commit，分支v1.1_header_above_sidebar）

要放在上面修改头src/main/html/index.html，将 <div id='header'>之前刚<div id="wrapper">
要修复它，请修改src/main/less/screen.less以将这些值添加到#header：

位置：固定；顶部：0px；保证金：自动；z-index：100000；宽度：100％;
为了避免将内容隐藏在标题后面，请修改src/main/html/css/simple-sidebar.css以添加padding-top: 50px;到#wrapper

归档时间：	9 年，6 月前
查看次数：	7903 次
最近记录：	7 年，11 月前