企业官网建设流程全解析

bolt-slides是一个用 React 构建的幻灯片引擎，你可以用任意 AI Agent 一键生成可交互的演示文稿，也可以手写 React 组件来打造幻灯片。本文带你完成 bolt-slides 部署的完整流程：一条npm run build命令产出纯静态文件，发布到任意静态托管服务，再用 URL 深链（如/#7）把链接直接指向任意一页幻灯片分享给别人。

快速上手：3 条命令启动 bolt-slides 演示环境 🚀

先本地跑通项目，再谈部署。克隆仓库并启动开发服务器：

git clone https://gitcode.com/gh_mirrors/bo/bolt-slides cd bolt-slides npm install npm run dev

开发服务器启动后会自动打开一个包含 26 页的演示 Deck，覆盖全部组件。下面就是你即将部署的成品：

💡 想改成自己的内容？直接编辑 src/App.tsx，<Deck>下的每个子元素就是一页幻灯片。

静态构建发布：npm run build 产出 dist 目录

bolt-slides 基于 Vite 构建（见 vite.config.ts），构建流程非常标准，只需一条命令：

npm run build

构建完成后，所有产物（index.html+ 压缩后的 JS/CSS）都输出到dist/目录。由于幻灯片是纯前端应用、没有任何后端接口，你可以把dist/拖到任何静态托管服务上，例如 Netlify、Vercel、Cloudflare Pages，或对象存储 + CDN。发布后访问根路径即可看到完整 Deck。

构建前建议跑一遍与 CI 相同的检查（参考 CONTRIBUTING.md）：

npx tsc --noEmit && npm run build

本地预览构建产物

发布前想先验证dist/是否正常，可以用 Vite 自带的预览命令，模拟线上访问效果：

npm run preview

URL 深链：/#7 直达第 7 页幻灯片

这是 bolt-slides 分享场景中最实用的特性。打开任意幻灯片时，地址栏的 hash 会实时同步当前页码；反过来，访问带 hash 的链接就会直接定位到对应页：

实现逻辑在 src/deck/Deck.tsx：初始化时从location.hash解析页码，越界则回落到第 1 页；翻页时通过history.replaceState写回 hash（src/deck/Deck.tsx），并监听hashchange事件，所以多标签页之间也能保持一致（src/deck/Deck.tsx）。

怎么知道目标幻灯片是第几页？📌

按G键呼出网格视图（Grid View），所有幻灯片平铺编号，一眼就能找到想分享的那页，把页码写进链接即可：

演讲者模式深链：?presenter=1 的隐藏用法

给观众发深链的同时，自己可以打开演讲者模式：在 URL 上加?presenter=1（可叠加 hash）。该参数会在独立标签页中展示计时器、下一页预览和可编辑备注，两个窗口通过BroadcastChannel实时同步翻页——观众看到/#7，讲者窗口自动停在第 7 页的预览上。相关实现在 src/deck/Deck.tsx 与 src/deck/Deck.tsx。

另外别忘了：分享前把 index.html 里的<title>和 favicon emoji 改成你的主题，别人点开链接时第一眼看到的标签页标题才不会是占位文案。

分享前的最后检查清单 ✅

• npm run build无报错，dist/已上传
• 用npm run preview本地复测一遍翻页与深链
• index.html 的标题与图标已替换为演示主题
• 主题色统一通过 src/styles/tokens.css 的:root变量调整，不硬编码颜色
• 把/#页码深链发给需要看特定一页的同事

相关文件速览

• 项目说明：README.md
• 幻灯片入口（Deck 内容）：src/App.tsx
• 幻灯片引擎与深链逻辑：src/deck/Deck.tsx
• 幻灯片组件库：src/components/
• 主题变量：src/styles/tokens.css

至此，bolt-slides 部署与分享的全流程就走完了：构建、发布、深链直达，三步即可把一份可交互的幻灯片变成一个链接发出去。