如何将Google Drive内Colab生成的Plotly HTML图发布到WordPress并自动同步

方案1：Colab直连WordPress REST API 全自动同步 #

这是和现有工作流匹配度最高、长期维护成本最低的实现路径，全程不需要手动跳转后台操作：

• 前期一次性配置：在WordPress后台为对应用户生成带内容编辑权限的应用密码，提前为每一个要展示的可视化图表建好对应的固定展示页面，把每个页面的ID存到Colab的固定配置字典里，避免同步时重复新建零散页面
• Colab端脚本改造：
  • 调整现有Plotly导出逻辑，生成图表时直接提取核心渲染片段——设置plotly.offline.plot()参数为include_plotlyjs='cdn'，只保留图表对应的DOM容器和绑定的渲染JS，剔除独立html页面带的<!DOCTYPE>、全局样式表等冗余结构
  • 用requests库构造REST请求，按照配置字典里的页面ID匹配对应目标，把最新的图表片段作为页面内容主体发起更新请求
• 定时运行配置：直接用Colab内置的定时执行功能绑定你的Google账号，按照固定的更新周期自动运行全链路脚本，不需要每次手动打开Colab笔记本触发
• 优化细节：每次同步前先在本地对比新旧版本的内容哈希，只有内容存在差异时才发起WordPress的内容更新请求，减少无效接口调用

方案2：保留Google Drive存源文件的原有习惯，走变更触发同步 #

如果不想改动现有「Colab生成html存Drive」的固定流程，这个方案可以最大程度降低操作习惯的改动成本：

• 流程链路：Colab正常生成Plotly的独立html文件存到指定Drive文件夹 → 配置自动检测规则，实时监控该文件夹内的文件变更 → 一旦检测到文件内容更新，自动拉取最新的html内容，剔除整页冗余结构后同步到WordPress对应展示页面
• 路径规则对齐：给Drive内的html文件固定命名规则，比如wp_123.html对应ID为123的WordPress展示页面，脚本直接从文件名提取目标页面ID，不需要手动映射对应关系
• 额外收益：所有可视化的源html文件都会在Drive留存完整备份，后续需要回溯版本时直接在Drive里查找对应文件即可

方案3：低开发量半手动同步 #

适合更新频率不高、不想编写太多自动化逻辑的场景：

• 基础操作：Colab生成完更新后的Plotly图表片段，直接打开对应的WordPress自定义HTML块，粘贴最新内容保存更新即可，单条内容的同步耗时不超过1分钟
• 轻量优化：可以在WordPress端配置支持嵌入公开Drive文件的短代码规则，只要把Drive里的html文件设置为公开可访问，前端展示的内容会自动拉取Drive里的最新版本，不需要反复进WordPress后台修改内容

避坑提示 #

• 不要把完整的独立Plotly html页面直接作为WordPress文章内容，否则会出现iframe嵌套、页面样式冲突、首屏加载卡顿的问题，只保留核心渲染区块即可
• 所有接口调用、Drive文件访问的权限都设置为最小可用范围，不要开启全局公开的编辑权限，避免内容被误篡改
• 如果用古腾堡编辑器承载内容，一定要把Plotly的JS片段放在自定义HTML块里，不要放到默认的文本块，否则编辑器会自动过滤掉渲染代码

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