Online Slides Demo

用 Markdown 管理一套在线幻灯片

把所有可用源文件放进 available,只把当前需要展示的内容用符号链接放进 src

为什么这样组织

清晰的边界

  • available 是素材库,保存所有模板、草稿、示例和未来幻灯片
  • src 是展示清单,只出现当前要发布或预览的幻灯片
  • dist 是构建结果,可以直接部署到静态站点

目录约定

目录 用途
available/template Marp 主题、公共资源和模板片段
available/slides 所有 Markdown 幻灯片源文件
src/slides 通过符号链接选中的展示幻灯片
dist npm run build 生成的 HTML 输出

模板能力

模板能力

页面类型

  • 封面页:<!-- _class: cover -->
  • 章节页:<!-- _class: section-title -->
  • 深色页:<!-- _class: inverse -->

内容组件

  • 分栏页:<!-- _class: split -->
  • 紧凑页:<!-- _class: compact -->
  • 引用、表格、代码块、页码

写作建议

先写结论,再补证据

  • 每页只服务一个主要观点
  • 标题尽量表达判断,而不是只写主题名
  • 表格用于比较,列表用于推进,代码块用于复现

幻灯片不是文档的缩小版,而是讲述路径的可视化版本。

构建与展示

npm run build
npm run serve

构建脚本会读取 src/slides 中的 Markdown 符号链接,输出到 dist/slides,再把索引主页复制到 dist/index.html

下一步

复制模板,写新主题,链接到 src

  • available/slides 新增 Markdown
  • 需要展示时创建符号链接
  • 重新构建后,从主页进入对应幻灯片