SuperAPI AI 工具集

pages

前端与建站

查看项目

更新于 10-15 16:50

技能介绍

用途:脚手架式创建并维护一个完整的 GitHub Pages 站点,全程无需本地构建步骤。内容由 flatspace 扁平文件 CMS 管理,界面用 webjsx 与 rippleui(经 CDN 引入)渲染,构建与部署由 GitHub Actions 完成。

主要能力:生成目录结构(content/pages、posts、data 与 docs/),写入 docs/index.html、docs/app.js、flatspace.config.js、.github/workflows/pages.yml 及带最小 frontmatter 的 content/pages/index.md;将 docs/data/ 加入 .gitignore。flatspace 在 CI 中把 content/ 聚合为 docs/data/*.json;webjsx 通过 importmap 以 ES 模块加载,用 applyDiff 更新 DOM;rippleui 提供基于 Tailwind 的组件类(btn、card、input、navbar、badge、alert、spinner、divider 等)。

使用方式:按 planning → gm-execute → gm-emit → gm-complete → update-docs 的链路执行。CI 中运行 npx flatspace,提交构建产物后由 actions/upload-pages-artifact 与 actions/deploy-pages 部署。内容为带 YAML frontmatter 的 Markdown,输出形如 docs/data/pages/index.json。

限制与注意:仓库 Settings → Pages 必须设为 “GitHub Actions”,否则 deploy-pages 不生效;docs/data/ 被 gitignore,而 docs/index.html 与 docs/app.js 需提交;webjsx 在 .js 中用 h() 工厂,不用 JSX 转译(GH Pages 不设正确 MIME 类型);applyDiff 不可传字符串,状态更新需手动调用 render();importmap 中应固定 webjsx 版本(如 @0.0.42),@latest 可能因上游更新静默失效;rippleui 的 CSS 颜色变量为空格分隔的 RGB 元组,不能直接用于 rgb(),应使用组件类;首次 CI 运行 npx flatspace 冷启动约 10 秒。