育將電腦工作室 - 線上書籍

鐵人賽-Google Apps Script整合運用
==========================

GAS樣版引擎
-------

HtmlService.createTemplateFromFile(file) 是 Google Apps Script 中用於創建 HTML 模板的方法，它的主要用途是將 HTML 文件中的動態數據嵌入到模板中，以生成動態的 HTML 內容，然後您可以將這個動態 HTML 用於 Web 應用程序、自定義對話框或電子郵件模板等。

以下是該方法的主要用途和工作原理：

1. 創建 HTML 模板：首先，您需要創建一個包含您想要動態生成的 HTML 內容的 HTML 文件。這個 HTML 文件中可以包含占位符，例如 <?= dynamicData ?>，這些占位符將稍後被動態數據替換。
2. 使用 HtmlService.createTemplateFromFile(file)：通過調用 HtmlService.createTemplateFromFile(file)，其中 file 是您的 HTML 文件的名稱（不包括副檔名），您可以將該 HTML 文件轉換為一個可編程的模板對象。
3. 替換動態數據：一旦您有了模板對象，您可以使用 evaluate() 方法來替換模板中的占位符。例如，您可以使用 template.evaluate().setTitle('動態標題').setContent('動態內容') 來替換模板中的 <?= dynamicData ?> 占位符，將其替換為具體的內容。
4. 生成最終的 HTML 內容：最後，您可以使用 getContent() 方法來獲得最終的動態生成的 HTML 內容。
5. `<? .... ?>`：這標籤代表樣版引擎語法，可以將變數替代，也可以調用後台的函式
6. `<?= .... ?>`：印出變數內容相當於 PHP 的 echo, 但內容屬性是「文字」
7. `<?!= .... ?>`：如果內容是HTML語法，則須此方法
8. 設定網頁標題 
  ```javascript
  setTitle(title)
  ```
9. 允許「應用程式」嵌入在其他網頁 
  ```javascript
  setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  ```
10. 自動響應 
  ```javascript
  addMetaTag('viewport', 'width=device-width, initial-scale=1')
  ```
11. 子樣版  
   將樣版與變數替換後，得到HTML語法
  
   
  ```javascript
  getContent()
  ```
 
這個方法對於動態生成和呈現 HTML 內容非常有用，特別是在 Google Apps Script 項目中，當您需要在網頁應用程序、自定義對話框、電子郵件通知等中使用動態 HTML 內容時。通過將靜態 HTML 文件與動態數據結合使用，您可以更靈活地生成自定義的用戶界面。

Bootstrap5
----------

1. 官網：<https://getbootstrap.com/>
2. 中文參考網站：<https://bootstrap5.hexschool.com/>
3. 範本 
  ```javascript
  <!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>
  ```
4. Bootstrap Icon 
  ```javascript
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  ```
 
JQUERY
------

1. 網站：<https://jquery.com/>
2. 引入 
  ```javascript
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  ```
 
index.html
----------

```javascript

<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>

<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>

</head>
  <body>
    <h2>樣板</h2>
  </body>
</html>
```

doGet
-----

```javascript

/*========================================
  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');
}
```

</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown