如何从Google Slide实现Google Sites可本地保存的交互式清单

核心思路 #

Google Sites限制前端原生JS，但可以嵌入绑定了Apps Script的Google Slides，借助Slides的脚本能力结合PropertiesService实现勾选状态的持久化存储，嵌入后就能在Sites里使用带记忆功能的清单。

具体步骤 #

1. 在Google Slides里搭建清单框架

• 新建Google Slides，删除默认幻灯片，插入空白幻灯片。
• 点击「插入」>「复选框」，添加所需清单项，每个复选框对应一个清单条目。
• 给每个复选框设置唯一标识：选中考选框，右键>「编辑文本」，将复选框旁的文本设为唯一名称（比如item_1、item_2，或直接用清单内容，只要不重复即可），后续脚本靠这个标识区分不同项。

2. 绑定Apps Script处理状态存储与加载

打开Slides的脚本编辑器：点击「扩展程序」>「Apps Script」，清空默认代码，替换为以下内容：

// 打开Slides时加载之前保存的勾选状态
function onOpen() {
  const slide = SlidesApp.getActivePresentation().getSlides()[0];
  const checkboxes = slide.getShapes().filter(shape => shape.getType() === SlidesApp.ShapeType.CHECK_BOX);
  const userProps = PropertiesService.getUserProperties();

  checkboxes.forEach(checkbox => {
    const itemId = checkbox.getText().asString().trim();
    const savedState = userProps.getProperty(itemId);
    checkbox.getCheckbox().setChecked(savedState === 'true');
  });
}

// 监听复选框点击，实时保存状态
function onSelectionChange(e) {
  const selection = e.selection;
  if (!selection || !selection.getCurrentPageElement()) return;

  const element = selection.getCurrentPageElement();
  if (element.getPageElementType() !== SlidesApp.PageElementType.SHAPE) return;

  const shape = element.asShape();
  if (shape.getType() !== SlidesApp.ShapeType.CHECK_BOX) return;

  const itemId = shape.getText().asString().trim();
  const isChecked = shape.getCheckbox().isChecked();
  const userProps = PropertiesService.getUserProperties();
  
  userProps.setProperty(itemId, isChecked.toString());
}

3. 验证脚本功能

• 保存脚本（随便起个项目名，比如TodoListState），点击「运行」>「onOpen」，首次运行会要求授权，按提示完成权限验证（需允许脚本访问你的Slides和存储属性）。
• 手动勾选几个复选框，刷新Slides，确认状态能正常保留，证明脚本生效。

4. 嵌入到Google Sites

• 回到Google Sites编辑页面，点击「插入」>「从Google云端硬盘」，找到刚才的Slides文件，选择「整个演示文稿」嵌入方式，调整大小适配页面。
• 保存Sites页面后刷新测试：勾选复选框，再刷新Sites页面，状态应该能正常保留。

常见报错排查 #

• 权限报错：首次运行必须完成授权，确保使用与Sites、Slides相同的Google账号，授权时不要跳过必要步骤。
• 状态不保存：检查复选框文本是否唯一，重复的标识会导致状态覆盖；如果需要多用户共享状态，可将PropertiesService.getUserProperties()改为PropertiesService.getDocumentProperties()。
• 脚本不触发：确认onSelectionChange函数名称无误，Slides的触发事件要求脚本绑定当前演示文稿，不要误改函数名。

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