如何使用 stylesheet.html 实施 Google Apps 脚本最佳实践？

Question

并且我想在我的样式中引入变量。如果我将我的样式放在 page.html 中，我知道如何引入它们，但在尝试使用 Google 提出的 "HTML Service: Best Practices" 示例时运气不佳。

我的破page.html长得像

<? var data = getData(); ?>
<?!= include('Stylesheet'); ?>

<br />
<div id="title"><?= data.myTitle ?></div>
<div id="thanksMessage">
<p><?= data.myText ?></p>
</div>
<p>More text</p>

我的破Stylesheet.html长得像

<style>
<? var data = Code.gs.getData(); ?>
@tcolor: #4D926F;
@tcolor2: <?= data.myTitleColorValue ?>;

p {
  color: #da0202;
}

#thanksMessage {
  font-size: 1.5em;
  line-height: 50%;
  color: #da0202;  
}

#title {
  font-size: 3.3em;
  line-height: 50%;
  color: <?= data.myTitleColorValue ?>;
  text-align: left;
  font-weight: bold;
  margin: 0px;
  margin-bottom: 10px;
}
</style>

我的作品Code.gs看起来像

  function doGet(request) {
  return HtmlService.createTemplateFromFile('page')
      .evaluate();
}

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

    function getData() {
     var myValues = {}; 
     myValues["myTitleColorValue"] = "#da0202"  
     myValues["myTitle"] = "Hello Friends"  
     myValues["myText"] = "Thank-you for your help!"  
     return myValues;
    };

所以我通过将 'styles' 带入 page.html 来实现它

<? var data = getData(); ?>
<style>
p {
  color: #da0202;
}

#thanksMessage {
  font-size: 1.5em;
  line-height: 50%;
  color: #da0202;  
}

#title {
  font-size: 3.3em;
  line-height: 50%;
  c/olor: #da0202;
  c/olor: @tcolor;
  color: <?= data.myTitleColorValue ?>;
  text-align: left;
  font-weight: bold;
  margin: 0px;
  margin-bottom: 10px;
}
</style>
<br />
<div id="title"><?= data.myTitle ?></div>
<div id="thanksMessage">
<p><?= data.myText ?></p>
</div>
<p>More text</p>

我希望有人能帮我看看我的错误。

此致，

克里斯

Answer 1

您的 include() 函数当前如下所示：

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

我用这个：

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

我会删除沙盒模式方法，看看是否可行。实际上，沙盒方法应该在您的 doGet() 函数中。

我刚刚注意到您的 Stylesheet.html 文件中有 scriptlet。我会把它们放在你的主 page.html 文件中。

如何使用 stylesheet.html 实施 Google Apps 脚本最佳实践？

How do I implement Google Apps Script best practices using stylesheet.html?

google-apps-script