谷歌應用腳本側邊欄不能正確加載 -有解無憂

我正試圖為我的Google Apps Script專案設定一個側邊欄。我承認我對HTML不是很在行，所以我找到了一個開源的手風琴選單，它的外觀和功能符合我的要求。但是，我不能讓它作為Google Apps Script的側邊欄正常加載。我把HTML、CSS和Javascript分成三個獨立的HTML檔案，然后按照Google的建議把它們加載到主HTML中這里（是的，我在我的腳本中創建了include()函式，你可以看到。我的Google Apps腳本檔案和三個HTML檔案如下所示。它可以加載，但似乎沒有任何CSS。

我試著在我的Javascript檔案中添加一個腳本行來加載jQuery，雖然不確定是否正確。非常感謝您的幫助。

谷歌應用程式腳本檔案：

function buildSidebar（） {
  return HtmlService.createTemplateFromFile('SidebarHTML').valuation()。
}

function include（filename） {
  return HtmlService.createHtmlOutputFromFile（filename）.getContent（）。   
}

function showSidebar(/span>) {
  SpreadsheetApp.getUi().showSidebar(buildSidebar)。

主要的HTML檔案（名為SidebarHTML.html）

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

              <li>a href="ui-alerts-notifications. html">提示&amp;通知</a>/span>
              </li>/span>
              <li>a href="ui-panels. html">Panels</a>/span>
              </li>/span>
              <li>a href="ui-buttons. html">Buttons</a>/span>
              </li>/span>
              <li>a href="ui-slider-progress. html">滑塊&amp; Progress</a>
              </li>/span>
              <li>a href="ui-modals-opups. html">Modals &amp; Popups</a>
              </li>/span>
              <li>a href="ui-icons. html">Icons</a>/span>
              </li>/span>
              <li>a href="ui-grid. html">Grid</a>
              </li>/span>
              <li>a href="ui-tabs-accordions. html">Tabs &amp; Accordions</a>
              </li>/span>
              <li>a href="ui-nestable-list. html">可嵌套串列</a>/span>
              </li>/span>
            </ul>/span>
          </li>/span>
          <li class="sub-menu">
            <a href="javascript。 void(0);"><i class="fa f-table"> </i><span> Tables< /span><i class=" arrow fa-angle-right pull-right" > </i></a>/span>
            <ul> 
              <li>a href="table-basic. html">Basic Tables</a>
              </li>/span>

              <li><a href="table-data. html">資料表</a>/span>
              </li>/span>
            </ul>/span>
          </li>/span>
          <li class="sub-menu"> 
            <a href="javascript。 void(0);"><i class="fa fa-tasks" > </i><span> 表單< /span><i class=" arrow fa-angle-right pull-right"/span>> </i></a>/span>
            <ul> 
              <li>a href="forms-components. html">/span>Components</a>
              </li>/span>
              <li>a href="forms-validation. html">Validation</a>
              </li>/span>
              <li>a href="forms-mask. html">Mask</a>
              </li>/span>
              <li>a href="forms-wizard. html">向導</a> 
              </li>/span>
              <li>a href="forms-multiple-file. html">多檔案上傳</a>/span>
              </li>/span>
              <li>a href="forms-wysiwyg. html">WYSIWYG編輯器</a>/span>
              </li>/span>
            </ul>/span>
          </li>/span>
          <li class="sub-menu active">
            <a href="javascript。 void(0);"><i class="fa-envelope"/span>> </i><span> Mail< /span><i class=" arrow fa-angle-right pull-right" > </i></a>/span>
            <ul> 
              <li class="active"/span>> <a href="mail-inbox. html">Inbox</a>
              </li>/span>
              <li>a href="mail-compose. html">提交郵件</a>/span>
              </li>/span>
            </ul>/span>
          </li>/span>
          <li class="sub-menu"> 
            <a href="javascript。 void(0);"><i class="fa fa-bar-chart-o"> </i><span> 圖表< /span><i class=" arrow fa-angle-right pull-right"/span>> </i></a>/span>
            <ul> 
              <li>a href="charts-chartjs. html">Chartjs</a>/span>
              </li>/span>
              <li>a href="charts-morris. html">Morris</a>/span>
              </li>/span>
              <li>a href="charts-m3. html">C3圖表</a></li> 
            </ul>/span>
          </li>/span>
          <li class="sub-menu"> 
            <a href="javascript。 void(0);"><i class="fa fa-map-marker"/span>> </i><span> Maps< /span><i class=" arrow fa-angle-right pull-right" > </i></a>/span>
            <ul> 
              <li><a href="map-google. html">谷歌地圖</a>
              </li>/span>
              <li>a href="map-vector. html">矢量地圖</a>
              </li>/span>
            </ul>/span>
          </li>/span>
          <li class="sub-menu"> 
            <a href="typeography. html"><i class="fa fa-text-height"> </i> <span>Typography< span></a>
          </li>/span>
          <li class="sub-menu"> 
            <a href="javascript。 void(0);"><i class="fafa-file"> </i><span> Pages< /span><i class=" arrow fa-angle-right pull-right" > </i></a>/span>
            <ul> 
              <li><a href="pages-blank. html">空白頁</a>/span>
              </li>/span>
              <li>a href="pages-login. html">Login</a>
              </li>/span>
              <li>a href="pages-sign-up. html">Sign Up</a>
              </li>/span>
              <li>a href="pages-calendar. html">Calendar</a>
              </li>/span>
              <li>a href="pages-timeline. html">時間線</a>/span>
              </li>/span>
              <li>a href="pages-404. html">/span>404</a>
              </li>/span>
              <li>a href="pages-500. html">/span>500</a>
              </li>/span>
            </ul>/span>
          </li>/span>
        </ul>/span>
      </div>/span>
    </aside> 
    <?! = include('SidebarJava'); ? > 
  </body> 
</html>/span>

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 easy-in-out;
    -moz-transition: all .3seasy-in-out;
    -o-transition: all .3sease-in-out;
    -ms-transition: all .3sease-in-out;
    transition: all .3sease-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;
            字體大小。12px;
            outline: 0;
            -webkit-transition: all 200ms easy-in;
            -moz-transition: all 200msease-in;
            -o-transition: all 200msease-in;
            -ms-transition: 所有200msease-in;
            transition: 所有200msease-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>/span>

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

</script>

uj5u.com熱心網友回復：

在你的SidebarCSS.html中，有一些嵌套塊。這些在正常的CSS檔案中是不允許的（除非使用SCSS或其他東西）。所以你應該按照你的意圖將這些CSS塊壓平。

正如我在上面的評論中提到的，對于下載JS檔案和CSS檔案來說，它似乎作業得很好。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/330557.html

標籤：

上一篇：例外。引數（字串）與SpreadsheetApp.Sheet.activation的方法簽名不一致。

下一篇：@Resource注解在Tomact10.0.10中不起作用