幻灯片

在你的 VuePress 站点中添加幻灯片。

配置

在你的项目中安装 Reveal.js:

pnpm

pnpm add -D reveal.js

yarn

yarn add -D reveal.js

npm

npm i -D reveal.js

之后启用它:

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        revealJs: true,
      },
    },
  }),
};

插件与主题

revealJs 也接收一个配置对象，允许你控制导入的内置此插件和主题。

你可以通过将 revealJs.plugins 设置为插件名称数组来启用以下插件:

• highlight
• math
• search
• notes
• zoom

注

为了支持 Markdown 语法，我们总会启用 markdown 插件。

你也可以通过将 revealJs.themes 设置为主题名称数组来启用以下主题:

• auto (默认)
• black
• white
• league
• beige
• sky
• night
• serif
• simple
• solarized
• blood
• moon

默认情况下，只有 auto 主题被启用。

语法

• 使用 --- 分割幻灯片
• 使用 -- 对幻灯片进行二次分割(垂直显示)

@slidestart

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend

默认情况下，我们使用 auto 主题来渲染幻灯片，你也可以通过 @slidestart 主题名称 使用其他主题。

各主题的外观，详见 幻灯片主题。

演示

简单幻灯片演示

@slidestart

## 幻灯片 1

一个有文字和 [链接](https://mister-hope.com) 的段落

---

## 幻灯片 2

- 项目 1
- 项目 2

---

## 幻灯片 3.1

```js
const a = 1;
```

--

## 幻灯片 3.2

$$
J(\theta_0,\theta_1) = \sum_{i=0}
$$

@slideend

提示

详细与完整的演示详见 幻灯片演示。

自定义 Reveal.js

你也可以在客户端配置文件中导入并调用 defineRevealJsConfig 来自定义 reveal.js:

import { defineClientConfig } from "vuepress/client";
import { defineRevealJsConfig } from "vuepress-plugin-md-enhance/client";

defineRevealJsConfig({
  // 在此设置 reveal.js 选项
});

export default defineClientConfig({
  // ...
});

注

Reveal.js 还提供了更多的插件，你可以通过 plugin 选项在 defineRevealJsConfig 中添加它们。在 Node 一侧要求的内置插件将自动添加。

你也可以在 Frontmatter 设置 revealJs 以设置特定页面的 reveal.js 选项。

Reveal.js 选项，请参见reveal.js config，Reveal.js 用法，请参阅 reveal.js 文档。