revealjs-slides

reveal.js 幻灯片生成器

工作流

1. 将模板从 assets/template.html 复制到用户指定的目标路径（默认：当前工作目录中的 slides.html）
2. 替换 {{TITLE}}、{{SUBTITLE}}、{{AUTHOR}}、{{DATE}} 占位符
3. 在标题幻灯片与结束注释之间，为每张幻灯片生成 <section> 元素
4. 启动服务并打开演示文稿（见下方的 运行）

运行

生成 HTML 文件后，始终为用户启动服务并打开文件。

npx live-server --port=8765 --open=slides.html

演示文稿中的键盘快捷键：

• 方向键 / 空格键 — 切换幻灯片
• S — 打开演讲者备注视图
• O — 概览 / 幻灯片网格
• F — 全屏
• Esc — 退出概览或全屏
• B / . — 暂停（黑屏）

模板位置

assets/template.html — 基于 CDN（无需安装 npm），使用 Inter 字体、自定义主题，并包含 Markdown、Highlight、Notes、Math 和 Mermaid 插件。

默认主题：自定义样式

模板内置了自定义主题。主要特点：

• Inter 字体（Google Fonts），并以 Segoe UI / Calibri 作为备用字体
• 内容幻灯片左对齐，文本顶部对齐（center: false）
• 标题 / 结束幻灯片使用 class="title-slide"，实现居中且垂直居中的布局
• h2 幻灯片标题带有淡淡的底部分隔线
• 粗体文本以标题强调色（#1a3c6e）呈现
• 表格使用深海军蓝表头行，并交替显示条纹行
• 引用块带有左侧蓝色强调条和浅色背景
• 代码块采用扁平样式，并带有淡淡的边框（无投影）
• 幻灯片尺寸：1280x720（16:9），符合常见演示文稿宽高比
• 幻灯片内边距：上下 48px，左右 56px

标题 / 结束幻灯片（垂直居中）

<section class="title-slide">
  <h1>Presentation Title</h1>
  <p>Subtitle text here</p>
  <p class="small">Author &mdash; Date</p>
</section>

双栏布局（使用 .columns 辅助类）

<section>
  <h2>Comparison</h2>
  <div class="columns">
    <div><h3>Left</h3><p>Content</p></div>
    <div><h3>Right</h3><p>Content</p></div>
  </div>
</section>

基础主题覆盖

自定义主题会覆盖 white.css。若要更改基础主题，请在 CSS 链接中将 white 替换为：black、league、beige、night、serif、simple、solarized、moon、dracula、sky、blood。注意：对于深色基础主题，还要更新 CSS 变量 --r-heading-color 和其他颜色。

幻灯片样式示例

基本幻灯片

<section>
  <h2>Title</h2>
  <p>Content here</p>
</section>

带片段的项目符号列表（逐项显示）

<section>
  <h2>Key Points</h2>
  <ul>
    <li class="fragment">First point</li>
    <li class="fragment">Second point</li>
    <li class="fragment">Third point</li>
  </ul>
</section>

语法高亮代码

<section>
  <h2>Code</h2>
  <pre><code class="language-python" data-trim data-line-numbers>
def hello():
    print("Hello, world!")
  </code></pre>
</section>

使用 data-line-numbers="1-2|3-4" 逐步突出显示代码行。

图片幻灯片

<section>
  <h2>Architecture</h2>
  <img src="diagram.png" alt="Architecture" style="max-height: 500px;">
</section>

演讲者备注

<section>
  <h2>Topic</h2>
  <p>Audience content</p>
  <aside class="notes">Speaker-only notes here. Press 's' to open speaker view.</aside>
</section>

背景颜色 / 图片

<section data-background-color="#4d7e65">
  <h2>Green Background</h2>
</section>
<section data-background-image="photo.jpg" data-background-size="cover">
  <h2>Photo Background</h2>
</section>

引用块

<section>
  <blockquote>"Quote text here." &mdash; Author</blockquote>
</section>

双栏布局

<section>
  <h2>Comparison</h2>
  <div style="display: flex; gap: 2em;">
    <div style="flex: 1;"><h3>Left</h3><p>Content</p></div>
    <div style="flex: 1;"><h3>Right</h3><p>Content</p></div>
  </div>
</section>

数学公式（KaTeX）

<section>
  <h2>Equation</h2>
  <p>\[ E = mc^2 \]</p>
</section>

Markdown 幻灯片

<section data-markdown>
  <script type="text/template">
    ## Markdown Title
    - Point **one**
    - Point *two*

    Notes:
    Speaker notes in markdown.
  </script>
</section>

图表样式示例（Mermaid.js）

模板包含 Mermaid 插件。在幻灯片中使用 <div class="mermaid"> 代码块来渲染图表。Mermaid 会自动将其渲染为 SVG，无需图片。

流程图

<section>
  <h2>User Flow</h2>
  <div class="mermaid">
    flowchart LR
      A[Visit Site] --> B{Logged in?}
      B -- Yes --> C[Dashboard]
      B -- No --> D[Login Page]
      D --> E[Enter Credentials]
      E --> C
  </div>
</section>

时序图

<section>
  <h2>API Request Flow</h2>
  <div class="mermaid">
    sequenceDiagram
      participant Client
      participant API
      participant DB
      Client->>API: POST /users
      API->>DB: INSERT user
      DB-->>API: user record
      API-->>Client: 201 Created
  </div>
</section>

类图

<section>
  <h2>Domain Model</h2>
  <div class="mermaid">
    classDiagram
      class Animal {
        +String name
        +int age
        +makeSound()
      }
      class Dog {
        +fetch()
      }
      class Cat {
        +purr()
      }
      Animal <|-- Dog
      Animal <|-- Cat
  </div>
</section>

实体关系图

<section>
  <h2>Database Schema</h2>
  <div class="mermaid">
    erDiagram
      USER ||--o{ ORDER : places
      ORDER ||--|{ LINE_ITEM : contains
      PRODUCT ||--o{ LINE_ITEM : "ordered in"
  </div>
</section>

状态图

<section>
  <h2>Order Lifecycle</h2>
  <div class="mermaid">
    stateDiagram-v2
      [*] --> Pending
      Pending --> Processing : payment received
      Processing --> Shipped : packed
      Shipped --> Delivered : arrived
      Delivered --> [*]
      Processing --> Cancelled : refund
  </div>
</section>

思维导图

<section>
  <h2>Project Overview</h2>
  <div class="mermaid">
    mindmap
      root((Project))
        Frontend
          React
          Tailwind
        Backend
          Node.js
          PostgreSQL
        DevOps
          Docker
          CI/CD
  </div>
</section>

时间线

<section>
  <h2>Project Milestones</h2>
  <div class="mermaid">
    timeline
      title Release Timeline
      Q1 2025 : Alpha release
                : Core features
      Q2 2025 : Beta release
                : API launch
      Q3 2025 : GA release
  </div>
</section>

甘特图

<section>
  <h2>Sprint Plan</h2>
  <div class="mermaid">
    gantt
      title Sprint 12
      dateFormat YYYY-MM-DD
      section Backend
        API endpoints :a1, 2025-01-06, 5d
        Database migration :a2, after a1, 3d
      section Frontend
        UI components :b1, 2025-01-06, 7d
        Integration :b2, after b1, 3d
  </div>
</section>

饼图

<section>
  <h2>Traffic Sources</h2>
  <div class="mermaid">
    pie title Traffic Sources
      "Organic Search" : 45
      "Direct" : 25
      "Social Media" : 20
      "Referral" : 10
  </div>
</section>

Git 图

<section>
  <h2>Branching Strategy</h2>
  <div class="mermaid">
    gitGraph
      commit
      branch feature
      checkout feature
      commit
      commit
      checkout main
      merge feature
      commit
  </div>
</section>

使用自定义主题的图表（深色演示文稿）

对于深色主题（black、night、dracula、league），请添加主题指令：

<div class="mermaid">
  %%{init: {'theme': 'dark'}}%%
  flowchart LR
    A --> B --> C
</div>

可用的 Mermaid 主题：default、dark、forest、neutral、base。

标题和说明并排显示的图表

<section>
  <h2>Architecture</h2>
  <div class="columns">
    <div>
      <div class="mermaid">
        flowchart TD
          LB[Load Balancer] --> S1[Server 1]
          LB --> S2[Server 2]
          S1 --> DB[(Database)]
          S2 --> DB
      </div>
    </div>
    <div>
      <ul>
        <li>Horizontally scalable</li>
        <li>Single database with replicas</li>
        <li>Health-check based routing</li>
      </ul>
    </div>
  </div>
</section>

图表设计指南

• 每张幻灯片放一个图表 — 确保图表易于阅读；不要排得太拥挤
• 节点数控制在 15–20 个以内 — 将复杂系统拆分到多张幻灯片中
• 使用有意义的标签 — 使用 User、Database，而不是 A、B、C
• 匹配主题 — 对于深色演示主题，请使用 %%{init: {'theme': 'dark'}}%%
• 流程图方向 — 宽屏幻灯片使用 LR（从左到右），高图表使用 TD（从上到下）
• 配合文字 — 使用双栏布局，在图表旁补充背景信息
• 以下场景优先使用流程图：流程、决策树、架构
• 以下场景优先使用时序图：API 流程、请求/响应、协议交互
• 以下场景优先使用类图/ER 图：数据模型、数据库架构、OOP 层级结构
• 以下场景优先使用思维导图：头脑风暴、主题概览、项目结构
• 以下场景优先使用时间线/甘特图：路线图、项目计划、冲刺安排

幻灯片设计指南

• 标题页：始终放在第一张，使用带有 h1、字幕和作者信息的 class="title-slide"
• 结束页：对于居中的“Questions?” 或 “Thank You” 幻灯片，使用 class="title-slide"
• 内容页：使用 h2 作为幻灯片标题（会自动添加底部分隔线）
• 每张幻灯片约讲一个要点：让内容保持聚焦
• 项目符号列表优先使用片段，让内容逐步显示
• 代码块：使用 data-trim 去除空白，并设置 language-* 类
• 限制文字：相比段落，优先使用视觉元素、简短短语和关键词
• 使用粗体强调：<strong> 文本会自动以海军蓝强调色呈现
• 使用 .columns 辅助类：使用并排布局时，优先于内联 flex 样式
• 不要使用垂直幻灯片：不要在 <section> 内嵌套 <section>。所有幻灯片都必须是扁平的横向布局

配置自定义

修改 HTML 底部的 Reveal.initialize({...}) 代码块：

选项	默认值	用途
transition	'slide'	none、fade、slide、convex、concave、zoom
slideNumber	true	显示幻灯片编号
center	false	内容从顶部开始（title-slide 类会覆盖此设置）
hash	true	使用 URL 哈希导航
progress	true	显示进度条
controls	true	显示导航箭头
width	1280	幻灯片宽度，单位为像素（16:9）
height	720	幻灯片高度，单位为像素（16:9）
margin	0	无外边距（内边距在 CSS 中设置）

导出 PDF

在 URL 后追加 ?print-pdf，然后使用浏览器打印功能（Cmd/Ctrl+P）保存为 PDF。