Apps Script用Sheet生成動態網頁(1): 為何需要生成動態網頁?

-

為何需要用Sheet生成動態網頁?

因為如果你的AppsScript網頁要變成可以給其他人維運，就需要讓他們可以自己改網頁的內容，然而AppsScript介紹的sample是要求你把html放上AppsScript。

實際上要改內容就會需要用clasp工具才能上版，然後你還要安裝對應工具，教會維運人員如何使用，這樣實在是太麻煩了! 乾脆給它個sheet維運就好

這裡一開始就先上AppsScript程式碼:

const SHEET_URL = 'https://docs.google.com/spreadsheets/d/{你的SHEET_ID}/edit#gid=0';

const COLUMN_IDX_OF_NAME = 0; // 第一個直欄，又稱A欄，用來儲存名稱
const COLUMN_IDX_OF_CONTENT = 1;// 第二個直欄，又稱B欄，用來儲存內容

function getContentFromSheet(name) {
const DEFAULT_RESPONSE = "找不到內容";
try {
let sheet = SpreadsheetApp.openByUrl(SHEET_URL).getSheets()[0]; // 這裡取第一個Sheet
let name_list = sheet.getRange(1, 1 + COLUMN_IDX_OF_NAME, 1 + sheet.getLastRow(), 1).getValues(); // 取回橫列數個儲存格
let row_idx = name_list.findIndex(r => name === r[COLUMN_IDX_OF_NAME]); // 找出吻合的名稱
if (row_idx < 0) return DEFAULT_RESPONSE;
let content = sheet.getRange(1 + row_idx, 1 + COLUMN_IDX_OF_CONTENT).getValue(); // 取一個儲存格內容
return content == null ? DEFAULT_RESPONSE : content;
} catch (error) {
Logger.log('getContentFromSheet error:' + error.stack || error); // 印出存取錯誤的stacktrace
}
return DEFAULT_RESPONSE;
}

function doGet(req) {
if (req.parameter['getHtml']) {
return HtmlService.createHtmlOutput(getContentFromSheet(req.parameter['getHtml']));
}
return HtmlService.createTemplate(
`<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>用Sheet生成動態網頁</h1>
<ul>
<li><a href="<?= getServerUrl() ?>?getHtml=main">前往main</a></li>
<li><a href="<?= getServerUrl() ?>?getHtml=test">前往test</a></li>
</ul>
</body>
</html>`
).evaluate();
}

function getServerUrl() {
return ScriptApp.getService().getUrl();
}

Script執行展示

程式碼說明

這個程式包含3個函數
  • doGet是用來顯示網頁，你部屬Script之後會顯示得出網站就是靠它。
  • getServerUrl是為了讓網頁上的連結有辦法使用。
  • getContentFromSheet是向sheet取得動態網頁的內容。其中DEFAULT_RESPONSE變數你可以自訂如果找不到時要顯示提示文字。

使用這個Script前

你需要先開一個Sheet，並把他的URL取代SHEET_URL變數的內容
'https://docs.google.com/spreadsheets/d/{你的SHEET_ID}/edit#gid=0'
  1. sheet的第一欄內容放網頁名稱
  2. sheet的第二欄放網頁內容
以下是sheet內容的範本

生成的動態網頁的網址是?

如果你部屬的URL是 https://script.google.com/macros/s/AKf......1Vt/exec
  • 網頁名稱為main，則URL是https://script.google.com/macros/s/AKf......1Vt/exec?getHtml=main
  • 網頁名稱為test，則URL是https://script.google.com/macros/s/AKf......1Vt/exec?getHtml=test

留言

張貼留言