一、项目背景与目标
「神话神域」是一个全屏单页神话人物展示站，目标是在不依赖后端和数据库的前提下，做出电影级史诗展厅的沉浸感。最终收录 33 位中国神话人物，覆盖神界、仙界、魔界、妖界、灵界、冥界、佛界、龙界八类界域。
功能清单：
写实 CG 全身立绘 + 5s 图生视频动态；
八界域动态背景（云海、火焰、雷电、佛光、忘川等）随人物切换；
低沉男声 TTS 旁白 + 循环史诗配乐，自动巡游时等旁白读完再切换；
全息信息面板（简介 / 身份界域 / 神通 / 传说），悬停高亮、点击展开；
模糊搜索、键盘左右切换、缩略图直达；
侧边弹幕、带当前人物立绘的系统分享、全网分发；
备案信息、访问统计、意见反馈、前端防复制。
技术选型刻意保持轻量：HTML + 内联 CSS + 原生 JavaScript + Tailwind CDN，无框架、无构建、无后端，一个 HTML 文件配合 assets/ 静态目录即可部署。
二、整体架构
神话神域/
├── 神话神域.html # 单文件 SPA（结构/样式/逻辑内联）
├── robots.txt
├── sitemap.xml
└── assets/
├── char/<id>.jpeg # 33 张 2730×1536 横版全身立绘
├── video/<id>.mp4 # 33 条 1280×720 / 5s 图生视频
├── voice/<id>.mp3 # 33 条 TTS 旁白（zh-CN-YunjianNeural）
└── bgm.mp3 # 循环史诗配乐
前端分层：
| 层 | 职责 |
|---|---|
| 数据层 | CHARACTERS 数组内联全部人物字段（名称 / 称号 / 界域 / 能力 / 传说 / 媒体路径） |
| 状态层 | 普通对象 state（当前索引、是否自动巡游、当前界域），重渲染函数驱动 |
| 视图层 | 立绘 / 视频、全息气泡、界域背景层、弹幕层、控制栏、分享 / 反馈弹层 |
| 素材管线 | 离线批量生成图、视频、旁白，前端只做播放与切换 |
因为是纯静态，所有 "动态" 都发生在浏览器端，服务端只负责发静态文件。
三、核心实现拆解
1. 状态管理与人物渲染
不用框架，用一个普通状态对象 + 一个 renderCharacter() 重渲染函数即可。切换时更新媒体、文本、界域主题和气泡内容：
const state = { index: 0, auto: false, realm: "神界" };
function renderCharacter(animatePop = true) {
const c = CHARACTERS[state.index];
el.portrait.src = c.img; // 静图兜底
el.vid.src = `assets/video/${base}.mp4`; // 图生视频
el.vid.play().catch(() => {});
el.nameCn.textContent = c.name;
el.nameTitle.textContent = c.title;
// ……填充气泡、标签、界域主题、同步 og 卡片
switchRealm(c.realm[0]);
playNarra(c.id);
}
function goto(i) {
state.index = (i + CHARACTERS.length) % CHARACTERS.length;
renderCharacter();
}
自动巡游不使用固定定时器切人，而是监听旁白 ended 事件后再 goto(next)，避免话没说完就切走：
narrator.addEventListener("ended", () => {
if (state.auto) goto(state.index + 1);
});
2. 八界域主题切换
界域用 body[data-realm] 属性选择器驱动配色与装饰层，切换人物只改一个属性，CSS 负责呈现：
body[data-realm="神界"] { --accent:#e8c26a; /* 神金 */ }
body[data-realm="冥界"] { --accent:#8a7fb8; /* 幽紫冷青 */ }
body[data-realm="佛界"] { --accent:#d9b86a; /* 金莲暖金 */ }
#realmLayer { /* 云海/火焰/雷电/佛光等装饰层，按界域显隐与动画 */ }
动态氛围用 Canvas 粒子 + CSS 动画实现：翻涌云海用多层渐变位移，雷电用随机折线游走，佛光用径向渐变呼吸，避免引入重型 WebGL 库。
3. 图生视频与 TTS 旁白（离线管线）
前端只播放，生成全部离线完成：
立绘：统一重绘为 16:9（2730×1536）横版全身构图，避免非 16:9 显示器裁头脚；
动态：以首帧立绘作为
first_frame，调用图生视频模型生成 5s、720p、h264 静音片段；旁白：edge-tts 选
zh-CN-YunjianNeural（低沉男声）逐人生成 mp3；前端
<video>静音循环，<audio>播放旁白，配乐独立循环并做音量侧链避让。
4. 侧边弹幕（不遮挡主体）
弹幕不放全屏横穿，而是拆成左右两条边缘通道，从根本上避免遮挡中央神像：
#danmakuLayer { position: fixed; top:6%; height:20%; z-index:12; }
.dm-channel { position:absolute; top:0; bottom:0; width:26vw; overflow:hidden; }
#dmLeft { left:0; } #dmRight { right:0; }
@keyframes dmFlyL { from{transform:translateX(105%)} to{transform:translateX(-115%)} }
@keyframes dmFlyR { from{transform:translateX(-115%)} to{transform:translateX(105%)} }
合规过滤在前端拦截链接、联系方式与灌水，生产环境建议叠加服务端审核。
5. 带图分享（Web Share Level 2）
系统分享时把当前人物立绘抓取为 File 一并交给原生分享面板，不支持 files 的环境自动降级为文案 + 链接：
async function shareWithMedia(c, text, url) {
const abs = new URL(c.img, location.href).href;
const blob = await (await fetch(abs)).blob();
const file = new File([blob], `${c.name}.jpeg`, { type: blob.type || "image/jpeg" });
const base = { title: `神话神域 · ${c.name}`, text, url };
if (navigator.canShare?.({ files: [file] })) {
await navigator.share({ ...base, files: [file] });
} else if (navigator.share) {
await navigator.share(base);
}
}
同时在切换人物时动态更新 og:title / og:description / og:image，让聊天 / 社交卡片展示当前人物。
6. SEO 与可发现性
语义化
<main>、单一 H1、Open Graph / Twitter Card / JSON-LD；robots.txt+sitemap.xml；静态资源路径写在
src/ CSSurl()，保证发布链路扫描不裂图。
7. 免后端反馈与防复制
反馈用 mailto: 调起邮件客户端，正文自动带内容与来源页；前端防复制做了右键屏蔽、图片拖拽拦截、调试快捷键拦截（仅提高门槛，非绝对防盗）。
四、宝塔部署
纯静态无需建库，宝塔步骤：
软件商店安装 Nginx，新建站点绑定域名
shenhua.tengxiangtech.com；把
神话神域.html与assets/整体上传到站点根目录，设置默认首页；申请 Let's Encrypt 证书并强制 HTTPS；
开启 gzip，对
assets/内静态资源加长缓存；站长平台提交 sitemap。
五、效果与可扩展方向
线上已收录 33 位神祇，打开即有云雾显形的入场仪式，支持自动巡游、搜索、弹幕与带图分享。后续可扩展：
接入服务端表单 / 问卷替代 mailto，实现真实反馈收集；
增加人物关系图谱与时间线视图；
用 WebGL 替换 Canvas 粒子，提升八界域光影层次；
支持多语言与有声读物模式。
体验地址：https://shenhua.tengxiangtech.com
前端、纯前端、单页应用、Canvas、图生视频、TTS、Web Share API、SEO、静态站、宝塔部署、国风、神话
