Question

我正在学习＆＃34; HTML Service: Best Practices＆＃34;

我希望将变量引入我的样式。我知道如果我将我的样式放在page.html中，但是在尝试使用＆＃34; HTML服务：最佳实践＆＃34; Google推出的示例。

我的破解的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;
    };

所以我通过带来＆＃39;样式＆＃39;像这样进入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脚本最佳做法？

1 个答案: