Google Apps 脚本侧边栏未正确加载答案

【问题标题】：Google Apps Script sidebar not loading correctlyGoogle Apps 脚本侧边栏未正确加载
【发布时间】：2021-09-17 04:32:37
【问题描述】：

我正在尝试为我的 Google Apps 脚本项目设置边栏。诚然，我不是最好的 html，所以我找到了一个开源手风琴菜单，它具有我正在寻找的外观和功能。但是，我无法让它作为 Google Apps 脚本的侧边栏正确加载。我将 HTML、CSS 和 Javascript 拆分为三个单独的 HTML 文件，然后按照 Google here 的建议将它们加载到主 HTML 中（是的，如您所见，我在脚本中创建了 include() 函数。我的 Google Apps脚本文件和三个 HTML 文件如下所示。它已加载，但似乎没有任何 CSS。

我尝试在我的 Javascript 文件中添加一个脚本行来加载 jQuery，但不确定它是否正确完成。非常感谢任何帮助。

Google Apps 脚本文件：

function buildSidebar() {
  return HtmlService.createTemplateFromFile('SidebarHTML').evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();    
}

function showSidebar() {
  SpreadsheetApp.getUi().showSidebar(buildSidebar());
}

主 HTML 文件（名为 SidebarHTML.html）

<!DOCTYPE html>
<html>
  
  <head>
    <base target="_top">
    <?!= include('SidebarCSS'); ?>
  </head>
  <body>
    <aside class="sidebar">
      <div id="leftside-navigation" class="nano">
        <ul class="nano-content">
          <li>
            <a href="#"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
          </li>
          <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>UI Elements</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>

              <li><a href="ui-alerts-notifications.html">Alerts &amp; Notifications</a>
              </li>
              <li><a href="ui-panels.html">Panels</a>
              </li>
              <li><a href="ui-buttons.html">Buttons</a>
              </li>
              <li><a href="ui-slider-progress.html">Sliders &amp; Progress</a>
              </li>
              <li><a href="ui-modals-popups.html">Modals &amp; Popups</a>
              </li>
              <li><a href="ui-icons.html">Icons</a>
              </li>
              <li><a href="ui-grid.html">Grid</a>
              </li>
              <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a>
              </li>
              <li><a href="ui-nestable-list.html">Nestable Lists</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa-table"></i><span>Tables</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>
              <li><a href="tables-basic.html">Basic Tables</a>
              </li>

              <li><a href="tables-data.html">Data Tables</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa fa-tasks"></i><span>Forms</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>
              <li><a href="forms-components.html">Components</a>
              </li>
              <li><a href="forms-validation.html">Validation</a>
              </li>
              <li><a href="forms-mask.html">Mask</a>
              </li>
              <li><a href="forms-wizard.html">Wizard</a>
              </li>
              <li><a href="forms-multiple-file.html">Multiple File Upload</a>
              </li>
              <li><a href="forms-wysiwyg.html">WYSIWYG Editor</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu active">
            <a href="javascript:void(0);"><i class="fa fa-envelope"></i><span>Mail</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>
              <li class="active"><a href="mail-inbox.html">Inbox</a>
              </li>
              <li><a href="mail-compose.html">Compose Mail</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa-bar-chart-o"></i><span>Charts</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>
              <li><a href="charts-chartjs.html">Chartjs</a>
              </li>
              <li><a href="charts-morris.html">Morris</a>
              </li>
              <li><a href="charts-c3.html">C3 Charts</a></li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa-map-marker"></i><span>Maps</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>
              <li><a href="map-google.html">Google Map</a>
              </li>
              <li><a href="map-vector.html">Vector Map</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="typography.html"><i class="fa fa-text-height"></i><span>Typography</span></a>
          </li>
          <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa-file"></i><span>Pages</span><i class="arrow fa fa-angle-right pull-right"></i></a>
            <ul>
              <li><a href="pages-blank.html">Blank Page</a>
              </li>
              <li><a href="pages-login.html">Login</a>
              </li>
              <li><a href="pages-sign-up.html">Sign Up</a>
              </li>
              <li><a href="pages-calendar.html">Calendar</a>
              </li>
              <li><a href="pages-timeline.html">Timeline</a>
              </li>
              <li><a href="pages-404.html">404</a>
              </li>
              <li><a href="pages-500.html">500</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </aside>
    <?!= include('SidebarJava'); ?>
  </body>
</html>

CSS HTML 文件（名为 SidebarCSS.html）

<style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
  @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
  body {
    color: #5D5F63;
    background: #293949;
    font-family: 'Open Sans',sans-serif;
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  .sidebar-toggle {
    margin-left: -240px;
  }
  .sidebar {
    width: 240px;
    height: 100%;
    background: #293949;
    position: absolute;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 100;
    #leftside-navigation {
      ul, ul ul {
        margin: -2px 0 0;
        padding: 0;
      }
      ul {
        li {
          list-style-type: none;
          border-bottom: 1px solid rgba(255,255,255,.05);
          &.active {
            & > a {
              color: #1abc9c;
            }
            ul {
              display: block;
            }
          }
          a {
            color: #aeb2b7;
            text-decoration: none;
            display: block;
            padding: 18px 0 18px 25px;
            font-size: 12px;
            outline: 0;
            -webkit-transition: all 200ms ease-in;
            -moz-transition: all 200ms ease-in;
            -o-transition: all 200ms ease-in;
            -ms-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
            &:hover {
              color: #1abc9c;
            }
            span {
              display: inline-block;
            }
            i {
              width: 20px;
              .fa-angle-left, .fa-angle-right {
                padding-top: 3px;
              }
            }
          }
        }
      }
      ul ul {
        display: none;
        li {
          background: #23313f;
          margin-bottom: 0;
          margin-left: 0;
          margin-right: 0;
          border-bottom: none;
          a {
            font-size: 12px;
            padding-top: 13px;
            padding-bottom: 13px;
            color: #aeb2b7;
          }
        }
      }
    }
  }
</style>

Javascript HTML 文件（名为 SidebarJava.html）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

  $("#leftside-navigation .sub-menu > a").click(function(e) {
    $("#leftside-navigation ul ul").slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(),
    e.stopPropagation()
  })

</script>

【问题讨论】：

你怎么称呼showSidebar()？您是否添加了自定义菜单或其他内容？
我运行了你的代码，它似乎工作正常。在 Chrome 的开发者控制台中，jquery 和您的 CSS 文件似乎已被下载。并且侧边栏的背景颜色使用您的 CSS 的背景颜色值正确绘制。我为此发布了image。请检查一下。
是的，我已将 showSidebar() 附加到我从中运行它的自定义菜单中。
该图像是我现在加载它时的样子。它应该看起来像这样：codepen.io/maggiben/pen/rCIFu

标签： javascript html css google-apps-script

【解决方案1】：

在您的 SidebarCSS.html 中，有嵌套块。这些在普通的 CSS 文件中是不允许的（除非使用 SCSS 或其他东西）。所以你应该按照你的意愿展平这些 CSS 块。

正如我在上面的评论中提到的，它似乎可以很好地下载 JS 文件和 CSS 文件。

【讨论】：

我会试试这个。谢谢。
我在原始代码的站点上找到了未嵌套的 css 代码，列为 css 的编译版本。现在工作。谢谢！