Skip to content
在vitepress中使用幻灯片

基于RevealJs实现在vitepress中增加幻灯片功能


  预览幻灯片

实现代码

创建一个vue组件,注意要动态导入RevealJS,不然build阶段会报错

vue
<template>
    <div class="reveal">
        <div class="slides">
            <slot/>
        </div>
    </div>
</template>
vue
<script setup>
import 'reveal.js/dist/theme/white.css'
import 'reveal.js/dist/reveal.css';

import { onMounted, onUnmounted, ref } from 'vue';

const deck = ref(null);


onUnmounted(() => {
    destoryReveal();
});

onMounted(async () => {
    const Reveal = (await import('reveal.js')).default;
    const Markdown = (await import('reveal.js/plugin/markdown/markdown.esm.js')).default;
    const RevealMath = (await import('reveal.js/plugin/math/math.js')).default;
    
    initReveal(Reveal, Markdown, RevealMath);
});

const initReveal = (Reveal, Markdown, RevealMath) => {
    if (deck.value) return;
    document.querySelector('.reveal').style.width = '100%';
    document.querySelector('.reveal').style.height = '25rem';
    deck.value = new Reveal({
        hash: true,
        embedded: true,
        margin: 0.01,
        minScale: 0.2,
        maxScale: 2.0,
        plugins: [Markdown, RevealMath.KaTeX],
    });
    deck.value.initialize();
}

const destoryReveal = () => {
    if (typeof window === 'undefined') return;
    if (deck.value) {
        deck.value.destroy();
        deck.value = null;
    }
}
</script>

然后在Markdown文件里引用该vue组件(当然你可以直接注册为全局组件),然后将要放入的内容放在组件插槽中即可

上面演示的代码实现如下:

html
<RevealGroup>
<section data-markdown>
<textarea data-template>
## 幻灯片示例
按 `→` 开始
---
### 幻灯片快捷键
- 按`f`: 全屏
- 按`esc`: 退出全屏
- 按`o`: 预览
---
### 广告
#### 想要快速生成同款博客?
- 利用github模板[自动生成](https://github.com/open17/vitepress-theme-open17/generate)
- 手动配置,详见[文档](https://vitepress.open17.vip/guide/0-intro/0-start)
</textarea>
</section>
</RevealGroup>