HtmlService.createTemplateFromFile(file) 是 Google Apps Script 中用於創建 HTML 模板的方法,它的主要用途是將 HTML 文件中的動態數據嵌入到模板中,以生成動態的 HTML 內容,然後您可以將這個動態 HTML 用於 Web 應用程序、自定義對話框或電子郵件模板等。
以下是該方法的主要用途和工作原理:
<?= dynamicData ?>
,這些占位符將稍後被動態數據替換。<?= dynamicData ?>
占位符,將其替換為具體的內容。<? .... ?>
:這標籤代表樣版引擎語法,可以將變數替代,也可以調用後台的函式<?= .... ?>
:印出變數內容相當於 PHP 的 echo, 但內容屬性是「文字」<?!= .... ?>
:如果內容是HTML語法,則須此方法setTitle(title)
setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
addMetaTag('viewport', 'width=device-width, initial-scale=1')
getContent()
這個方法對於動態生成和呈現 HTML 內容非常有用,特別是在 Google Apps Script 項目中,當您需要在網頁應用程序、自定義對話框、電子郵件通知等中使用動態 HTML 內容時。通過將靜態 HTML 文件與動態數據結合使用,您可以更靈活地生成自定義的用戶界面。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<!-- bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h2>樣板</h2>
</body>
</html>
/*========================================
doGet
=========================================*/
function doGet(e){
// 主樣版
let tmp = HtmlService.createTemplateFromFile('index');
return tmp.evaluate().setTitle('網站標題').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}