鐵人賽-Google Apps Script整合運用
GAS樣版引擎
HtmlService.createTemplateFromFile(file) 是 Google Apps Script 中用於創建 HTML 模板的方法，它的主要用途是將 HTML 文件中的動態數據嵌入到模板中，以生成動態的 HTML 內容，然後您可以將這個動態 HTML 用於 Web 應用程序、自定義對話框或電子郵件模板等。
以下是該方法的主要用途和工作原理：
- 創建 HTML 模板：首先，您需要創建一個包含您想要動態生成的 HTML 內容的 HTML 文件。這個 HTML 文件中可以包含占位符，例如 <?= dynamicData ?>，這些占位符將稍後被動態數據替換。
- 使用 HtmlService.createTemplateFromFile(file)：通過調用 HtmlService.createTemplateFromFile(file)，其中 file 是您的 HTML 文件的名稱（不包括副檔名），您可以將該 HTML 文件轉換為一個可編程的模板對象。
- 替換動態數據：一旦您有了模板對象，您可以使用 evaluate() 方法來替換模板中的占位符。例如，您可以使用 template.evaluate().setTitle('動態標題').setContent('動態內容') 來替換模板中的 <?= dynamicData ?> 占位符，將其替換為具體的內容。
- 生成最終的 HTML 內容：最後，您可以使用 getContent() 方法來獲得最終的動態生成的 HTML 內容。
- <? .... ?>：這標籤代表樣版引擎語法，可以將變數替代，也可以調用後台的函式
- <?= .... ?>：印出變數內容相當於 PHP 的 echo, 但內容屬性是「文字」
- <?!= .... ?>：如果內容是HTML語法，則須此方法
- 設定網頁標題
setTitle(title)
- 允許「應用程式」嵌入在其他網頁
setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
- 自動響應
addMetaTag('viewport', 'width=device-width, initial-scale=1')
-
子樣版
getContent()
將樣版與變數替換後，得到HTML語法
這個方法對於動態生成和呈現 HTML 內容非常有用，特別是在 Google Apps Script 項目中，當您需要在網頁應用程序、自定義對話框、電子郵件通知等中使用動態 HTML 內容時。通過將靜態 HTML 文件與動態數據結合使用，您可以更靈活地生成自定義的用戶界面。
Bootstrap5
- 官網：https://getbootstrap.com/
- 中文參考網站：https://bootstrap5.hexschool.com/
- 範本
<!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>
- Bootstrap Icon
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
JQUERY
- 網站：https://jquery.com/
- 引入
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
doGet /*======================================== 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'); }