9-8-2
將主樣版與子樣版合併成靜態類別方法
- 子樣版需要將樣版與變數整合後取得內容，主樣版則不用
- 因為主樣版，要設定「頁籤標題」所以會傳入「title」, 子樣版不用，故利用這個特性，來判斷回傳主樣版或子樣版
/*======================================
渲染樣版&子樣版
file: 樣版(主檔名即可)
argsObject: 參數
title: 有值=>主樣板 空值=>子樣板
======================================*/
static render(file, argsObject, title=''){
let tmp = HtmlService.createTemplateFromFile(file);
if(argsObject){
for(let i in argsObject){
tmp[i] = argsObject[i];
}
}
if(title){
return tmp.evaluate().setTitle(title).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}else{
return tmp.evaluate().getContent();
}
}
- 主樣版
<!doctype html>
<html lang="en">
<head>
<base target="_top">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- 選單 -->
<?!= menu ?>
<div class='container'>
<!-- 資料處理時畫面 -->
<div class="d-none" id="show">
<span>資料處理中....<img src="https://i.imgur.com/pm9SKUg.gif"></span>
</div>
<!-- 主畫面 -->
<div id='main'>
<?!= content ?>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
9-8-1 由樣版決定，後端變數