最近发现了一款非常适合用来做技术分享用的PPT工具Slidev。

为什么要用slidev

1. 相比传统的ppt，slidev用来做代码演示非常方便、灵活、交互性更好。
2. 你可以像平时编写 markdown 一样使用 Markdown 的相关特性。
3. 可以直接在文件中使用html、vue组件、css。
4. 代码演示、分享完成后，可以直接导出为图片或者pdf文件，方便组内成员查看。

使用

以我的目录为例：

1. slides.mdSlidev 会读取位于项目根目录的 slides.md 文件，并将其转换为幻灯片。每当你修改 Markdown 文件，幻灯片的内容都会立刻随之更新。

slides.md

---
layout: center
title: 'Slidev 技术分享'
titleTemplate: '%s'
highlighter: shiki

---


# <homePageTitle />

---
layout: center
---

# <homePageTitle title='1111' fontSize='text-6xl'/>


---
layout: center
class: 'text-center pb-5 :'
---

# Thank You!

2. components文件夹下存在全局组件，可以在slides.md中直接使用。比如可以放一些ppt标题等。以我的为例：

components/homePageTitle.vue

<template>
   <div class='title' :class='fontSize'>{{title}}</div>
   <span class='text-left text-gray-500 text-base'>{{subTitle}}</span>
</template>
<script lang="tsx" setup>
import { defineComponent, ref, computed } from 'vue'
interface myProps {
   title: string
   fontSize: string,
   subTitle: string
}
const props = withDefaults(defineProps<myProps>(), {
   title: 'Slidev 分享',
   fontSize: 'text-7xl'
})

</script>

<style>
.title {
   background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );
   -webkit-background-clip:text;
   -webkit-text-fill-color: transparent;
}
</style>

3. global-bottom.vue是slidev提供的全局图层，也就是全局组件，可以在每页ppt中展示。可以用来设置页脚、页头等。

<template>
 <footer class="absolute bottom-0 right-0 p-2">
   <div v-if="$slidev.nav.currentPage == 1">
       <span class='mr-3 text-sm opacity-50 text-shadow-lg'>分享人：xxx</span>
       <div class="text-xs opacity-50 text-shadow-lg">2022.08.03</div>
   </div>
   <div v-if='notShowCurrentPage($slidev.nav.currentPage)' class="text-xs opacity-50 text-shadow-lg">SLIDEV</div>
 </footer>
</template>

<script lang="ts" setup>
const notShowCurrentPage = (page) => {
   return ![1,2,4,6,8,9].includes(page)
}
</script>

4.至此，一个ppt就完成了。