Slidev 一种快速制作PPT的奇淫技巧

网上面Slidev的教程还是比较少的，这里我主要从一个小白的角度去介绍如何安装和配置Slidev

一、Slidev的功能

个人感觉，对于编程小白可能并不是那么的友好，但是如果你有一个模板，有快速制作PPT并进行汇报的需求，那么还是比较推荐Slidev的。

【可以快速套用模板】有很多功能丰富，通用，所见即所得的幻灯片制造商，如微软PowerPoint和苹果主题演讲。它们可以很好地制作带有动画，图表和许多其他内容的精美幻灯片，同时非常直观且易于学习。那么为什么要费心制作幻灯片呢？
【对于编程大佬们来说的，基于网络部署或许也是】Slidev旨在为开发人员提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣，富有表现力和吸引力。
【只需要专注于内容，而不是排版】使用所见即所得编辑器时，很容易被样式选项分散注意力。幻灯片通过分离内容和视觉效果来解决这个问题。这使您可以一次专注于一件事，同时还可以重用社区中的主题。Slidev并不寻求完全取代其他幻灯片制造商。相反，它专注于迎合开发人员社区。
【你可以使用markdown制作PPT】Slidev 使用扩展的 Markdown 格式在单个纯文本文件中存储和组织幻灯片。这使您可以专注于制作内容。由于内容和样式是分开的，这也使得在不同主题之间切换变得毫不费力。
【你可以使用Slidev去录制你的演讲，不用再开什么东西】Slidev提供内置录制和相机视图。您可以在内部的相机视图中共享演示文稿，也可以录制并分别保存到屏幕和相机中。一次完成，无需其他工具。

二、安装配置

我的同学们总说，每次听到你说配置环境，就会望而却步。但是事实上并不是如此，Slidev的配置还是比较简单的，下面我会借用网上的教程和自己的一些探索，把内容完善好。

（一）安装node.js

【为什么要安装Node.js：通俗点说是打地基，对于有一定基础的人就是配置环境，因为Slidev是通过npm去安装部署的，所以我们需要提前安装好相关的环境，以便后续使用】

Node.jsnodejs.org/zh-cn/正在上传…重新上传取消

下载安装长期维护版就好

NodeJS入门（一）---nodejs详细安装步骤_muzidigbig的博客-CSDN博客_nodejsblog.csdn.net/muzidigbig/article/details/80493880正在上传…重新上传取消

这里可以参考上面的安装教程

（二）安装Slidev

配置好环境后我们就可以安装Slidev了，这里我选择了一个专门的文件夹用来安装Slidev，进入到文件夹中，我们点击右键，然后选择在终端中打开，输入下面的安装代码，回车运行安装，安装完成后就会提示你给项目命名，我们命名为001

npm init slidev

回车运行后我们就一直回车就可以，这里我们还是选择npm作为代理

然后稍等，启动，就会跳出来一个网页，这个就是我们要生成的PPT网页了

进入网页，就会是很熟悉的PPT操作感觉，这里就不用过多介绍啦

但是这个用来演示是不是和自己的主题不太切合呢，毕竟我们想要的是一个可以用于组会的PPT模板

稍等，不用着急，我们这里对slidev的界面进行一点讲解

这个窗口不用管，一直放后台就行，上面的网址就是你的PPT地址，当然你也可以利用校园网去部署slidev，这样你去汇报的时候，电脑都不用带，打开网址，就是你的PPT【不过bug在于，我还没弄明白咋部署，等我学会了再去分享一篇文章吧】

然后你可以利用R/O/E三个字母去启动你的PPT后台

R（重启）

O（打开PPT）

【这里需要重点讲一下，如果你不小心讲网页关闭了，或者你想重新打开你的PPT，这个时候请在我们上面提到1终端窗口输入启动命令】

npm run dev

这样，我们就可以启动服务，打开我们的PPT了

最后一个字母是E，也就是编辑

输入e，就会自动打开对应的markdown文档，通过编辑这个文档，你就可以修改你的PPT内容

这里给大家补充两个点哦

一般我们PPT对应的文档名称是slides.md ，打开这个就可以进行编辑，我们可以使用不同的代码编辑器对其进行修改

另外，我们还可以使用slidev网页中自带的代码编辑窗口去编辑代码，就是这个小铅笔，点开我们就可以对文档进行编辑

哈哈哈，我的屏幕分辨率有点问题，显示的不是特别好，反正基本也不用，大家知道就行

我个人常用typora进行编辑，为了方便给大家演示，这里我们使用vs code进行编辑演示

通过修改左边的代码，我们就可以对PPT里面的内容进行对应的修改，这里就不展开多说了，适配的语法主要是markdown，如果你想加装饰或者是动画则可以使用vue等组件

这里对于小白需要注意的是，slidev的换页是通过---

三个短横线去进行换页的

---你的内容---

基本1的操作使用就是这些，但是光这样并不能达到我的目的，我需要一个快速的PPT模板，让我只需要专注于文字编辑，快速实现PPT。

所以，我们选择使用模板去帮助我们快速实现PPT

三。基于模板去制造属于自己的模板——华北电力大学限定哈哈哈

这里推荐一位中传的up，我的模板也是来源于这个大佬，换了个logo和色块

https://github.com/isaaccaa/slidev-theme-prussianbluegithub.com/isaaccaa/slidev-theme-prussianblue

需要模板的小伙伴可以去这位up的github仓库下载哦，如果网速不好的话，也可以联系我私发

下面就来说说我在这个大佬模板的基础上修改得到的华电PPT模板吧

先展示效果

反正整体就是那种简约风，主题配色使用学校主题色，当然也是就花了一会临时赶的，后期或许会再完善一下，字体全部换成大黑，然后加上一些图片的模板，动画不考虑就了哈哈哈，已经过了做动画的年纪

ok展示完效果，具体说说如何实现。

（一）下载仓库代码到本地并解压

直接下载压缩包（download zip）即可，解压到你的PPT文件夹中，这里直接放出文件夹内容

（二）修改相应文件使之适应自身需求

首先我们要设置logo，layouts文件夹下的三个vue文件，对应的就是三种主要的版式（幻灯片母版），我们现在想要修改的是封面的logo，我们只需要打开对应的cover文件即可

将img里面的链接替换为你图片的链接即可，这里我们使用图床去管理图片，选择一个好的图床，决定你加载的快不快

第二步，原配色我不是很喜欢，是红绿蓝三色块，这里我统一吸取华电主题色，将色块进行更换为单一色块

这里我们是对组件文件夹里面的colorbar进行调整，拿不准的小伙伴可以提前复制一个副本作为保底措施

这里我们可以对比一下，左边是红绿蓝三色块形成的色条；右边是我修改后的单一色块色条，相信是比较好理解的，理解不了也没关系，copy就行，这里提示的是，shadow是阴影的意思 w-1/3是宽为1/3，剩下的就好理解了吧

那么同志们修改完这个发现，并没有定义颜色

所以我们需要再另一个文件中去修改颜色配置文件

将对应的颜色代码修改即可

（三）填充内容完成制作并演示

配置好上面的步骤，主题版式就已经修改完毕，大家就可以按照自己的需要去填充文字，制作自己的PPT了

然后运行也和上面一样，在PPT文件夹下终端窗口中运行

npm run dev即可

后期有空的话，就给大家录个视频讲讲吧

我是杨润瀓，一个不正经的财会专业学生~