Files
superpowers-zh/site
AI不止语 d3e3b3684c fix(site): 资源用绝对路径,根治相对路径导致的样式丢失
详情页/子路径页面若相对引用 styles.css/app.js,在某些情况下(如缓存旧
HTML、Cloudflare 把不存在路径回退成 200-HTML)会解析到 /skills/styles.css
等不存在的路径,返回 HTML 而非 CSS,叠加 X-Content-Type-Options: nosniff
被浏览器拒绝应用 → 整页无样式。

站点部署在域名根,改为绝对路径根治:styles.css / app.js / favicon /
brand svg / 扫码二维码 全部 ${base}X → /X,与页面层级/缓存无关、永远正确。
页面导航链接保持 ${base}(跨语言导航逻辑不变)。

验证:重建 42 页,详情页/EN 资源均为 / 绝对路径,无相对 CSS 引用;
CSP 126 内联脚本 0 缺失。
2026-06-20 10:39:32 +08:00
..

superpowers-zh 官网

零依赖静态站生成器。一条命令产出中/英双语站点 + 每个 skill 的详情(操作文档)页,内容全部来自 ../skills/*/SKILL.md,与源文件同步、不会漂移。

构建 / 预览

node site/build.mjs          # 生成 site/dist/42 个页面)
npx serve site/dist          # 本地预览(或 python3 -m http.server

产物结构:

dist/
  index.html              # 中文首页
  en/index.html           # 英文首页
  skills/<name>.html      # 中文 skill 详情(操作文档)× 20
  en/skills/<name>.html   # 英文 skill 详情 × 20
  styles.css  app.js      # 深/浅主题 + 交互(原生 JS零依赖
  assets/                 # 图标 + 赞助商 logo
  _headers                # Cloudflare Pages 缓存策略

特性

  • 中英双语服务端生成两套真实页面非前端切换SEO 友好、无闪烁。导航栏「中文 / EN」互切。
  • 深 / 浅主题CSS 变量 + localStorage 记忆,内联脚本在首屏前生效,无白屏闪烁。导航栏 ◐ 按钮切换。
  • Skill 详情页:内置零依赖 Markdown 渲染器(md.mjs),把每个 SKILL.md 渲染成完整操作文档,支持标题/代码块/表格/列表/引用。
  • 安装命令生成器、Skill 搜索 / 分类筛选、一键复制 —— 全部原生 JS。

改内容改哪里

想改什么 改哪里
Skill 正文 / 文档内容 源头 skills/<name>/SKILL.md(改完重新 node site/build.mjs
Skill 中/英标题、英文简介、分组 site/build.mjsSKILL_META
首页所有文案(中/英) site/build.mjsT.zh / T.en
支持工具 / 安装命令 site/build.mjsTOOLS(与 bin/superpowers-zh.jsTARGETS 对齐)
样式 / 主题 site/template/styles.css
交互逻辑 site/template/app.js
Markdown 渲染规则 site/md.mjs

部署到 Cloudflare Pages

发布目录 site/dist,三选一:

方式 A — 连接仓库自动构建(推荐,无需密钥)

Cloudflare Dashboard → Pages → 连接 GitHub 仓库 jnMetaCode/superpowers-zh

  • Build commandnode site/build.mjs
  • Build output directorysite/dist

之后每次 push 自动重建发布。绑自定义域名(建议 superpowers.aibuzhiyu.com)。

方式 B — 命令行一键发布

npx wrangler login                  # 浏览器登录(交互,仅首次)
npm run site:deploy                 # = 构建 + wrangler pages deploy site/dist

在本会话中可用 ! 前缀直接登录:!npx wrangler login

方式 C — GitHub Actions 自动部署

仓库已含 .github/workflows/deploy-site.yml。在 Settings → Secrets and variables → Actions 配置:

  • CLOUDFLARE_API_TOKENPages 编辑权限)
  • CLOUDFLARE_ACCOUNT_ID

之后 site/skills/ 变更 push 到 main 即自动部署。


国内访问优先用 Cloudflare Pages + 自定义域名GitHub Pages 在国内访问较慢,不建议作为主站。