如何在Google Apps Script中嵌套HTML模板并整合输出？

首先明确：你要的嵌套调用/多模板拼接完全可行，下面是两种直接落地的实现方式，适配你的模板结构和动态需求：

方法1：主模板嵌套子模板（推荐，更贴近Cold Fusion的模板引入逻辑） #

创建一个主入口模板（比如mainTemplate.html），在里面用强制打印标签<?!= ... ?>直接引入并评估其他模板，自动处理所有scriptlet逻辑。

主模板示例（mainTemplate.html） #

<?!= HtmlService.createTemplateFromFile('htmlhead').evaluate().getContent(); ?>
<?!= HtmlService.createTemplateFromFile('bodystart').evaluate().getContent(); ?>
<?!= HtmlService.createTemplateFromFile('mainmenu').evaluate().getContent(); ?>
<?!= HtmlService.createTemplateFromFile('contentswitcher').evaluate().getContent(); ?>
<?!= HtmlService.createTemplateFromFile('pagefooter').evaluate().getContent(); ?>
<?!= HtmlService.createTemplateFromFile('bodyandhtmlend').evaluate().getContent(); ?>

服务器端调用（Code.gs） #

如果子模板需要用户上下文或请求参数，直接把变量传递给主模板，子模板可以通过调用服务器函数或共享变量获取数据：

function doGet(e) {
  // 准备上下文和请求参数
  const userCtx = getCurrentUserContext(); // 自定义函数：获取当前用户上下文
  const reqParams = e;

  // 加载主模板并传递变量
  const mainTpl = HtmlService.createTemplateFromFile('mainTemplate');
  mainTpl.userContext = userCtx;
  mainTpl.requestParams = reqParams;

  // 返回最终页面
  return mainTpl.evaluate();
}

比如在mainmenu.html中直接使用传递的变量：

<nav>
  <? if (requestParams.parameter.menuLevel === '1') { ?>
    <ul>
      <? userContext.topMenuItems.forEach(item => { ?>
        <li><a href="?menuLevel=2&item=<?= item.id ?>"><?= item.name ?></a></li>
      <? }) ?>
    </ul>
  <? } ?>
</nav>

方法2：服务器端逐个评估后拼接（适合灵活控制加载逻辑） #

如果需要根据条件动态跳过某些模板，或者更精细地控制每个模板的变量传递，可以在Code.gs中逐个评估模板内容，再拼接成完整HTML返回。

Code.gs示例 #

function doGet(e) {
  const startTime = new Date();
  const userCtx = getCurrentUserContext();
  const reqParams = e;

  // 逐个评估模板，按需传递变量
  const htmlHead = HtmlService.createTemplateFromFile('htmlhead').evaluate().getContent();
  const bodyStart = HtmlService.createTemplateFromFile('bodystart').evaluate().getContent();

  // 处理动态菜单模板
  const menuTpl = HtmlService.createTemplateFromFile('mainmenu');
  menuTpl.userContext = userCtx;
  menuTpl.requestParams = reqParams;
  const mainMenu = menuTpl.evaluate().getContent();

  // 处理内容切换模板
  const contentTpl = HtmlService.createTemplateFromFile('contentswitcher');
  contentTpl.requestParams = reqParams;
  const contentSwitcher = contentTpl.evaluate().getContent();

  // 处理带耗时统计的页脚
  const footerTpl = HtmlService.createTemplateFromFile('pagefooter');
  footerTpl.loadTime = new Date() - startTime;
  footerTpl.callTime = new Date().toLocaleString();
  const pageFooter = footerTpl.evaluate().getContent();

  const bodyEnd = HtmlService.createTemplateFromFile('bodyandhtmlend').evaluate().getContent();

  // 拼接所有内容并返回
  const fullPage = htmlHead + bodyStart + mainMenu + contentSwitcher + pageFooter + bodyEnd;
  return HtmlService.createHtmlOutput(fullPage);
}

页脚模板示例（pagefooter.html） #

<footer>
  <p>页面调用时间：<?= callTime ?></p>
  <p>加载耗时：<?= loadTime ?>ms</p>
</footer>

关键注意事项 #

• 所有带动态scriptlet的模板必须调用evaluate()才会执行服务器端逻辑，静态模板也建议调用，避免后续添加动态内容时遗漏。
• 子模板可以直接调用Code.gs中的全局函数，不需要额外传递，比如<?= getMenuItems(userContext) ?>。
• <?!= ... ?>是强制打印标签，会原样输出HTML内容，适合引入其他模板的评估结果；<?= ... ?>会自动转义HTML，适合输出文本内容。

内容的提问来源于stack exchange，提问作者Jukebox Jory