您可以混用 Apps Script 程式碼和 HTML，以最輕鬆的方式產生動態網頁。如果您使用混用程式碼和 HTML 的範本語言 (例如 PHP、ASP 或 JSP)，應該對語法感到熟悉。
指令碼小程式
Apps Script 範本可包含三個稱為 Scriptlet 的特殊標記。在指令碼中，您可以編寫任何可在一般 Apps Script 檔案中運作的程式碼：Scriptlet 可呼叫其他程式碼檔案中定義的函式、參照全域變數，或是使用任何 Apps Script API。您甚至可以在 Scriptlet 中定義函式和變數，但請注意，程式碼檔案或其他範本中定義的函式無法呼叫這些函式和變數。
如果您將以下範例貼進指令碼編輯器，<?= ... ?> 標記 (列印 Scriptlet) 的內容會以斜體顯示。這種斜體程式碼會在頁面提供給使用者之前在伺服器上執行。由於 Scriptlet 程式碼會在網頁提供前執行，因此在每個頁面上只能執行一次；與您透過 google.script.run 呼叫的用戶端 JavaScript 或 Apps Script 函式不同，此指令碼在網頁載入後無法再次執行。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, World! The time is <?= new Date() ?>.
</body>
</html>
請注意，範本 HTML 的 doGet() 函式與建立和提供基本 HTML 的範例不同。這裡顯示的函式會從 HTML 檔案產生 HtmlTemplate 物件，然後呼叫其 evaluate() 方法來執行指令碼程式，並將範本轉換成 HtmlOutput 物件，以便指令碼提供給使用者。
標準腳本
標準指令碼：採用 <? ... ?> 語法，可在不明確將內容輸出至網頁的情況下執行程式碼。不過，如這個範例所示，在 Scriptlet 中程式碼的結果還是能影響 Scriptlet 以外的 HTML 內容：
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? if (true) { ?>
<p>This will always be served!</p>
<? } else { ?>
<p>This will never be served.</p>
<? } ?>
</body>
</html>
列印腳本
輸出使用 <?= ... ?> 語法的指令碼小程式，會使用內容相關逸出功能將程式碼的結果輸出到網頁中。
情境逸出是指 Apps Script 會追蹤網頁在 HTML 屬性中、用戶端 script 標記或任何其他位置的輸出背景資訊，並自動加上逸出字元來防範跨網站指令碼攻擊 (XSS) 攻擊。
在這個例子中，第一個列印指令碼程式會直接輸出字串，後面接著設定陣列和迴圈的標準指令碼程式，然後是另一個列印指令碼程式以輸出陣列內容。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?= 'My favorite Google products:' ?>
<? var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
請注意，列印指令碼僅會輸出其第一個陳述式的值；其餘的陳述式就像是包含在標準指令碼中一樣。舉例來說，指令碼小程式 <?= 'Hello, world!'; 'abc' ?> 只會顯示「Hello, world!」
強制列印腳本
使用 <?!= ... ?> 語法的強制列印指令碼就像列印指令碼，只是會避免內容逸出。
如果您的指令碼允許不信任的使用者輸入，內容逸出很重要。相反地，如果 Scriptlet 的輸出包含您想要完全插入的 HTML 或指令碼，您就必須強制列印。
一般而言，除非您確定需要在未變更 HTML 或 JavaScript 的情況下列印 HTML 或 JavaScript，否則請使用列印腳本，而不要使用強制列印指令碼。
使用 Scriptlet 中的 Apps Script 程式碼
Scriptlet 不限用於執行一般 JavaScript；您也可以使用下列任一技巧，讓範本存取 Apps Script 資料。
不過請注意，由於範本程式碼會在向使用者提供網頁前執行，因此這些技巧只能為網頁提供初始內容。如要從網頁以互動方式存取 Apps Script 資料，請改用 google.script.run API。
從範本呼叫 Apps Script 函式
Scriptlet 可以呼叫 Apps Script 程式碼檔案或程式庫中定義的任何函式。本範例顯示將試算表資料提取至範本，再從資料建立 HTML 表格的一種方法。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? var data = getData(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
直接呼叫 Apps Script API
你也可以直接在 Scriptlet 中使用 Apps Script 程式碼。此範例會透過在範本本身載入資料 (而非透過個別函式)，來完成與上述範例相同的結果。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? var data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
將變數推送至範本
最後，您可以將變數指派為 HtmlTemplate 物件的屬性，藉此將變數推送至範本。再次出現後，這個範例會完成與上述範例相同的結果。
Code.gs
function doGet() {
var t = HtmlService.createTemplateFromFile('Index');
t.data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
return t.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
偵錯範本
範本很難偵錯，因為您編寫的程式碼並非直接執行；伺服器會將範本轉換為程式碼，然後執行產生的程式碼。
如果不清楚範本如何解讀指令碼，HtmlTemplate 類別的兩種偵錯方法可協助您進一步瞭解情況。
getCode()
getCode() 會傳回字串，其中包含伺服器從範本建立的程式碼。記錄程式碼並貼進指令碼編輯器後，就可以像一般的 Apps Script 程式碼一樣執行該程式碼，並進行偵錯。
以下的簡單範本會再次顯示 Google 產品清單，後接 getCode() 的結果：
Code.gs
function myFunction() {
Logger.log(HtmlService
.createTemplateFromFile('Index')
.getCode());
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?= 'My favorite Google products:' ?>
<? var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
記錄 (評估)
(function() { var output = HtmlService.initTemplate(); output._ = '<!DOCTYPE html>\n';
output._ = '<html>\n' +
' <head>\n' +
' <base target=\"_top\">\n' +
' </head>\n' +
' <body>\n' +
' '; output._$ = 'My favorite Google products:' ;
output._ = ' '; var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ;
output._ = ' <b>'; output._$ = data[i] ; output._ = '</b>\n';
output._ = ' '; } ;
output._ = ' </body>\n';
output._ = '</html>';
/* End of user code */
return output.$out.append('');
})();
getCodeWithComments()
getCodeWithComments() 與 getCode() 類似，但會以註解的形式傳回經過評估的程式碼，這些程式碼會與原始範本並排顯示。
逐步瞭解已評估的程式碼
在任一已評估的程式碼範例中，第一個會發現由方法 HtmlService.initTemplate() 建立的隱含 output 物件。由於只有範本本身需要使用此方法，因此未記錄此方法。output 是特殊的 HtmlOutput 物件，包含兩個非通常命名的屬性：_ 和 _$，這些屬性是呼叫 append() 和 appendUntrusted() 的簡寫。
output 還有一個特殊屬性 $out，也就是沒有這些特殊屬性的一般 HtmlOutput 物件。範本會在程式碼結尾傳回該一般物件。
現在您已瞭解這個語法，程式碼的其餘部分應都易於理解。指令碼程式以外的 HTML 內容 (例如 b 標記) 會以 output._ = 附加 (不內容相關逸出)，而指令碼程式會以 JavaScript 形式附加 (無論是否有內容逸出，視 Scriptlet 的類型而定)。
請注意，經過評估的程式碼會保留範本中的行數。如果在執行已評估的程式碼時收到錯誤訊息，該行會對應至範本中的對等內容。
註解階層
由於評估的程式碼會保留行數，因此指令碼中的註解有可能排除其他指令碼程式，甚至是 HTML 程式碼。以下是一些令人驚訝的註解：
<? var x; // a comment ?> This sentence won't print because a comment begins inside a scriptlet on the same line.
<? var y; // ?> <?= "This sentence won't print because a comment begins inside a scriptlet on the same line.";
output.append("This sentence will print because it's on the next line, even though it's in the same scriptlet.”) ?>
<? doSomething(); /* ?>
This entire block is commented out,
even if you add a */ in the HTML
or in a <script> */ </script> tag,
<? until you end the comment inside a scriptlet. */ ?>