Как реализовать лучшие практики Google Apps Script с помощью stylesheet.html?

Question

Я изучаю «HTML Service: Best Practices»

и я хочу внести переменные в свои стили. Я знаю, как их привести, если я поместил свои стили в page.html, но не повезло, когда попытался использовать пример «HTML Service: Best Practices», выпущенный 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; 
    }; 

Так что я сделал это работа, принося «стили» в страницу.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> 

Я надеюсь, что кто-то может помочь мне увидеть мои ошибки.

С уважением,

Chris

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 есть скриптлеты. Я бы поместил их в ваш основной файл page.html.