幻灯片列表

Astro Show

基于 Astro + Reveal.js 的通用幻灯片播放框架

Eric•2026-10

核心设计理念

以数据为中心的内容驱动架构

零前端修改：后端或用户仅需在 src/ppts/ 目录下添加 JSON 文件，即可自动完成渲染与路由创建。

组件化模板：每种视觉版式独立为一个 Astro 组件，易于维护与扩展。

Reveal.js 强力支撑：支持键盘导航、全屏播放、Markdown、代码高亮、演讲者视图和多种预设主题。

双栏对比模式 (TwoColumn)

适用于特性对比、架构对照与多维度分析

传统幻灯片开发

❌ 每次新增 PPT 均需手工编写或复制页面代码

❌ 数据与视觉强耦合，排版难以批量调整

❌ 不利于后端程序化自动生成幻灯片

Astro Show 通用框架

✅ 纯 JSON 数据驱动，完全解耦视觉与内容

✅ 自动路由扫描，自动化构建与静态导出

✅ 丰富的内置模板组件，支持灵活扩展

列表模板 (List)

清晰展示要点与条目

  • 支持无序列表与有序列表
  • 支持逐步出现的 Fragment 动画（点击下一步渐次展示）
  • 支持内嵌 HTML 样式高亮

代码高亮模板 (Code)

支持语法高亮与行号显示

{
  "config": {
    "autoslide": true,
    "time": 5000
  },
  "decks": [
    {
      "template": "Cover",
      "slide": { "title": "Hello World" }
    }
  ]
}

简洁规范的 JSON 配置格式

“Simplicity is prerequisite for reliability.”
— Edsger W. Dijkstra, Turing Award Lecture

居中模板

只保留内容和标题，居中

标题加上内容

使用reveal.js默认的模式