幻灯片
小于 1 分钟
在你的 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 文档。