使用HtmlService.createHtmlOutputFromFile与HtmlService.createTemplateFromFile

Question

我的Google Apps脚本存在问题。我需要一个响应式设计应用程序，在选项卡中有正确的标题（通常由标签声明）。

使用HtmlService.createHtmlOutputFromFile可以添加元标记，使响应式设计成为可能：

     var template = HtmlService.createHtmlOutputFromFile('Index'); 
template.addMetaTag('viewport', 'width=device-width, initial-scale=1');

但是，这使得无法使用setTitle（）等函数。使用HtmlService.createTemplateFromFile可以实现这些功能：

 var template = HtmlService.createTemplateFromFile('Index');

  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);

此外，使用createTemplateFromFile可以在HTML中实现以下功能：

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

使用createHtmlOuputFromFile尝试此操作时，浏览器会返回错误。

我需要使用createHtmlOutputFromFile进行响应式设计，所以任何人都可以帮助我使用setTitle（）等

Answer 1

你尝试过使用CSS Grid和flex box吗？我在几个独立的应用程序上使用它并取得了很大的成功。这个HTML和CSS是我最喜欢的参考点

<div class="wrapper">
        <header class="main-head">The header</header>
        <nav class="main-nav">
            <ul>
                <li><a href="">Nav 1</a></li>
                <li><a href="">Nav 2</a></li>
                <li><a href="">Nav 3</a></li>
            </ul>
        </nav>
        <article class="content">
            <h1>Main article area</h1>
            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
        </article> 
        <aside class="side">Sidebar</aside>
        <div class="ad">Advertising</div>
        <footer class="main-footer">The footer</footer>
</div>

CSS

* {box-sizing: border-box;}

    .wrapper {
        max-width: 1024px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }

    .wrapper > * {
        border: 2px solid #f08c00;
        background-color: #ffec99;
        border-radius: 5px;
        padding: 10px;
    }

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"
   }
   nav ul {
     flex-direction: column;
   }
}