# Hekouwang Yandu Deck Skill > 会勇禾口王的AI笔记 ·「演读 DECK」沉浸式演示产线与发布 Skill。把一篇文章/选题做成「一屏一镜、可翻页、能自动播放」的 keynote 演示版网页（默认米白引擎，国标系列走 V6 焰彩白；暖黑/焰彩黑为存量历史态），并自托管字体、发布到 Cloudflare Pages（hekouwang.pages.dev）。 当需要：① 把某篇文章/某期内容做成「演示版 / 演读 DECK / 翻页演示 / keynote 网页 / 沉浸式阅读页」；② 给「演读 DECK」站加一期演示、加一个系列、改首页；③ 给某个系列换主色/换肤（白↔黑 token-flip、切 V6 焰彩）；④ 发布/更新 hekouwang.pages.dev；⑤ 自托管字体、解决首屏字重跳变(FOUT)、子集化思源字体；⑥ 站点留言板（Cloudflare Pages Functions + D1）加装/排错 时使用。 触发词：演读DECK / 演读 deck / 演示版 / 翻页演示 / keynote 网页 / 沉浸式阅读 / 发布到 hekouwang / 加一期演示 / 演示版引擎 / deck换肤 / 焰彩deck / V6焰彩白 / token-flip / deck留言板。 - Skill: `huiyonghkw/hekouwang-yandu-deck-skill` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add huiyonghkw/hekouwang-yandu-deck-skill` - Raw SKILL.md: https://api.skillmd.com/api/skills/huiyonghkw/hekouwang-yandu-deck-skill/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - License: MIT - Author: huiyonghkw (https://skillmd.com/u/huiyonghkw) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/huiyonghkw/hekouwang-yandu-deck-skill --- # 演读 DECK · 沉浸式演示产线与发布 > 「演读 DECK」= 会勇禾口王的AI笔记出品的一款**沉浸式阅读产品**：介于长文和视频之间的第三种读法——一屏一镜、方向键/空格/点击翻页、能自动播放，把一个复杂主题安静完整地讲给你看。 > 线上：**https://hekouwang.pages.dev** ｜ 与图文产线 `hekouwang-content-master-skill` 配套（那是出文章/贴图/视频，这是把内容做成翻页演示 + 发布）。 ## 0. 系统在哪（先认这个） 发布系统是项目里一个**自包含目录** `<项目根>/演读DECK/`： ``` 演读DECK/ ├── publish.py # 发布脚本：构建 dist/ → 部署 CF Pages（零三方依赖，仅标准库 + 一个子集化 venv） ├── home.html # 首页源（改首页改这个；dist/ 每次构建会清空，别在里面改） ├── wrangler.toml # CF Pages 配置 + D1 绑定（留言板用；不做留言板可删） ├── schema.sql # 留言板 D1 表结构 ├── functions/api/comments.js # 留言板后端（Pages Functions，按目录约定生效） ├── fonts/src/ # 字体源：思源黑 NotoSansSC-{400,500,700,900}.woff2 + 宋 -700 + Anthropic Sans/Mono + Mozilla VF ├── fonts/cache/ # 子集化产物缓存（无字体源/无 venv 时回退） ├── tools/fenv/ # 子集化 venv(fonttools+brotli)；移动会失效，丢了重建 ├── dist/ # 构建产物 = 部署目录（可整删重生） └── README.md ``` > ⚠️ **上面这套是「真身」，本 skill 里的是可移植副本**。日常在项目里改的是真身；**改完跑 `bash scripts/sync-from-harness.sh <演读DECK路径>` 同步回 skill**，否则副本很快过时。 本 Skill 按官方约定分目录带了**可移植副本**（新项目落地时拷过去）： - `assets/templates/` — `deck-engine-米白.html`（⭐默认）/ `deck-engine-V6焰彩白.html`（国标）/ `deck-engine-暖黑.html`（仅维护存量）、`home.html`（首页源）、`wrangler.toml` + `schema.sql`（留言板，**database_id 是占位符，落地填自己的**） - `scripts/publish.py`（发布脚本）、`scripts/sync-from-harness.sh`（真身→副本单向同步）、`assets/functions/api/comments.js`（留言板后端） - `references/换肤-token-flip.md`（换肤）、`references/留言板-D1.md`（留言板）、`references/mobile-and-comments.md`（移动端 safe-area / 留言板开关 / 视频交叉引用）、`references/系统说明.md`（**落地 README 模板**，拷进 `演读DECK/README.md` 给人看）、`examples/demo.html`（零依赖最小示例） > ⚠️ **落地时 `publish.py` 与 `home.html` 必须同目录**（`publish.py` 用 `SELF/home.html` 找首页源）；`functions/` 要放成 `演读DECK/functions/api/comments.js`。 > ⚠️ 副本里 **`CF_BEACON_TOKEN` 与 `wrangler.toml` 的 database_id 都留空/占位**——落地新站时填自己的，别沿用他人的（否则流量统计报到别人面板、留言写进别人的库）。 ## 1. 把文章做成「演示版 deck」⭐ 核心 一篇 V2 文章 → 一屏一镜的 keynote。**零依赖（纯 CSS + 原生 JS，不引 GSAP/外链，国内/CF 都快）。** 沿用源文章的视觉（默认米白，国标走 V6 焰彩白，见 第1.4节）、字体、grain/mesh/frame/幽灵章节号。 ### 1.1 引擎（照抄模板，别重写） 样板（**默认拷米白**，选哪套见 第1.4节）： - `assets/templates/deck-engine-米白.html` — ⭐ **默认**，人文/方法论亮调。 - `assets/templates/deck-engine-V6焰彩白.html` — 国标系列专属：紫主色+焰橙/粉，Mozilla 可变字体（`publish.py` 的 `MOZILLA_FILES` 已打包 Mozilla 字体、按页面含 "Mozilla" 注入 `PRELOAD_LINKS_V6`）。 - `assets/templates/deck-engine-暖黑.html` — 🕰️ 仅维护存量（Harness），**新 EP 别拷**。 **做新 EP = 拷一份对应主色的模板，`` 的全部 CSS 和 `` 之后的全部 `