Google Apps Script 多HTML页面固定全局导航栏设置方法

导航按钮仅在Page1中渲染，Page2/Page3/Page4模板未引入公共导航模块，且原代码存在大量重复的路由渲染逻辑，没有做公共能力抽离，导致跳转后导航丢失。

整体思路是把导航栏+样式+公共跳转逻辑抽离为独立公共文件，所有页面统一引入，同时重构后端路由消除冗余代码。 #

步骤1：新建公共导航模板文件 #

在项目中新建名为Navigation.html的文件，写入统一导航栏的结构、样式和交互逻辑：

<style>
/* 全局导航栏样式 */
.nav-bar {
  position: sticky;
  top: 0;
  background: #2563eb;
  padding: 0 20px;
  display: flex;
  gap: 4px;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.nav-btn {
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nav-btn:hover {
  background: rgba(255,255,255,0.15);
}
.nav-btn.active {
  background: rgba(255,255,255,0.25);
  font-weight: 500;
}
.page-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

<div class="nav-bar">
  <button class="nav-btn" onclick="goToPage('page1')">Page1</button>
  <button class="nav-btn" onclick="goToPage('page2')">Page2</button>
  <button class="nav-btn" onclick="goToPage('page3')">Page3</button>
  <button class="nav-btn" onclick="goToPage('page4')">Page4</button>
</div>

<script>
// 公共跳转方法
function goToPage(pageKey) {
  window.location.href = `${window.location.pathname}?mode=${pageKey}`;
}

// 页面加载完成后自动高亮当前页对应的导航按钮
window.addEventListener('load', () => {
  const params = new URLSearchParams(window.location.search);
  const current = params.get('mode') || 'page1';
  document.querySelectorAll('.nav-btn').forEach(btn => {
    if (btn.getAttribute('onclick').includes(current)) {
      btn.classList.add('active');
    }
  });
});
</script>

步骤2：重构后端服务端代码 #

替换原有的doGet相关逻辑，删除冗余的switch分支，新增公共文件引入方法：

let currentPageName = 'Page1';

function setPage(name) {
  currentPageName = name;
}

function getPage() {
  return currentPageName;
}

function doGet(e) {
  // 路由白名单配置，新增页面只需在这里加映射即可
  const routeMap = {
    page1: 'Page1',
    page2: 'Page2',
    page3: 'Page3',
    page4: 'Page4'
  };
  // 获取路由参数，无参数时默认走page1
  const mode = e.parameter.mode || 'page1';
  const targetPage = routeMap[mode] || routeMap.page1;
  setPage(targetPage);

  // 统一模板渲染逻辑，消除重复代码
  return HtmlService.createTemplateFromFile(targetPage)
    .evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0')
    .setTitle(targetPage);
}

// 公共模板引入工具方法
function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

步骤3：修改所有页面模板 #

对Page1.html、Page2.html、Page3.html、Page4.html四个文件，统一在body最开头引入公共导航，以Page1.html为例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <base target="_top">
</head>
<body>
  <!-- 引入公共导航栏，所有页面加这一行即可 -->
  <?!= include('Navigation'); ?>

  <div class="page-container">
    <!-- 下方写对应页面的专属内容即可 -->
    <h1>Page1 页面内容</h1>
    <p>所有页面顶部都会固定显示导航栏，点击按钮可自由跳转，当前页按钮会自动高亮。</p>
  </div>
</body>
</html>

改造后效果 #

• 四个页面跳转时导航栏始终固定在顶部，不会消失
• 导航样式全局统一，hover、当前页高亮交互完整
• 后续新增页面只需3步：新建页面对应HTML、在routeMap加路由映射、在Navigation.html加对应按钮，不需要重复写导航和渲染逻辑
• 原代码中拼接按钮字符串的getPageData函数可以直接删除，不再需要

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