年度述职/晋升-PPT推荐方案

子禛
1,878 阅读8分钟

🫡HI大家好：我是子禛。 😊😊😊

技术从业人员更多善于逻辑思维能力的推敲，而不善于对自己所做的研究成果进行汇报。特别是在年终述职的时候，我们常常会因为表现不足而导致，领导对我们的工作并不是那么认可。我分析了下面几点。

  • 想要表达的内容实现不出来

    • 比起PPT或keyNote而言，我们更多接触的是markdown格式的文件。
    • 比起WPS等工具，我们更擅长使用编辑器。

  • 对于代码我们有严重的强迫症，但是ppt没有

    • 编码时，我们对于代码的缩进，页面是否对齐，元素是否对齐，有着很严重的强迫症。但是我们不回去关心ppt是否对齐到最佳位置。（职业病）

  • 时间成本

    • 我们写一篇markdown远远比，写一个PPT更为快速。

下面我们将要学习的内容，我们来看看具有何等表现力

GIF 2023-8-3 16-39-55.gif

怎么样，有点像苹果的发布会报告，是的。这种简约风，能够让我们更清晰的表达出我们的观点，让下面汇报倾听者，把更多的注意力集中在汇报人的身上。（为了更具的讲述，我会结合官网为大家进行分享）

Slidev

它使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 —— 具有无限的可能性。

  • 📝 Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件
  • 🧑‍💻 开发者友好 —— 内置代码高亮、实时编码等功能
  • 🎨 可定制主题 —— 以 npm 包的形式共享、使用主题
  • 🌈 灵活样式 —— 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表
  • 🤹 可交互 —— 无缝嵌入 Vue 组件
  • 🎙 演讲者模式 —— 可以使用另一个窗口，甚至是你的手机来控制幻灯片
  • 🎨 绘图 - 在你的幻灯片上进行绘图和批注
  • 🧮 LaTeX 支持 —— 内置了对 LaTeX 数学公示的支持
  • 📰 图表支持 —— 使用文本描述语言创建图表
  • 🌟 图标 —— 能够直接从任意图标库中获取图标
  • 💻 编辑器 —— 集成的编辑器，或者使用 VS Code 扩展
  • 🎥 演讲录制 —— 内置录制功能和摄像头视图
  • 📤 跨平台 —— 能够导出 PDF、PNG 文件，甚至是一个可以托管的单页应用
  • ⚡️ 快速 —— 基于 Vite 的即时重载
  • 🛠 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包

项目搭建

 yarn create slidev
 
 或者
 
 npm init slidev

这样完美就创建了一个项目，下面我们来把想法转会为现实。 幻灯片通过 一个 markdown 文件 编写而成 (默认会使用 ./slides.md)。来进行书写 image.png

项目结构

your-slidev/
  ├── components/       # 自定义组件
  ├── layouts/          # 自定义布局
  ├── public/           # 静态资源
  ├── setup/            # 自定义 setup / hooks
  ├── styles/           # 自定义样式
  ├── index.html        # 注入的 index.html
  ├── slides.md         # 幻灯片主入口
  └── vite.config.ts    # 扩展 vite 配置

使用（markdown）

在这一段内，我只会介绍一下拓展和补充的东西，对于那个原本与markdown使用没有什么差别的不会做过多赘述。请各位小伙伴自行查阅官网。

扉页块

因为是在一个markdown文件编辑所有页面，因此区分当前内容是哪一页的，就需要使用“---” 分隔符来把页面分块，分出来的就是扉页块。同时页面的各种配置也需要在扉页块中进行配置，具体内容请查看扉页配置 章节

---
layout: cover
---

# Slidev

This is the cover page.

---
layout: center
background: './images/background-1.png'
class: 'text-white'
---​

# Page 2

This is a page with the layout `center` and a background image.

---

# Page 3

This is a default page without any additional metadata.

代码块

在silder中进行代码块的编写和markdown没有区别，但是silder在此基础上进行了补充。

  • 可以指定任意一行代码高亮。
```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

会对第二行第三行实现代码高亮如下图

image.png

那么我们如果想让代码依次高亮，我们需要使用到|或运算。

```ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

下面我们直接看图片就可以理解。先展示2-3行，再展示第5行，再展示全部。对于我们技术人员进行汇报，真的非常友好。

GIF 2023-8-4 9-43-37.gif

  • 可以使用Monaco 编辑器对代码进行编辑
```ts {monaco}
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}
```

我们来看看效果。

GIF 2023-8-4 9-50-50.gif 我们可以直接进行代码的编辑

#内联样式

如果使用vue的同学会相对清楚，在vue中我们会把js、html、css写在一个.vue的文件中。这里也是相同的原理，每个## 扉页块都可以用一个style标签，来实现当前扉页的css控制。

你可以在 Markdown 中直接使用 <style> 标签来覆盖当前幻灯片的样式。

# This is Red

<style>
h1 {
  color: red
}
</style>

---

# Next slide is not affected

Markdown 中的 <style> 标签均为 scoped。如果想覆盖全局样式，请查阅 项目结构。

在 Windi CSS 的支持下，你可以直接使用嵌套的 CSS 和 指令集。(例如，@apply)

# Slidev

> Hello `world`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
</style>

静态资源

和编写 Markdown 的方式一样，你可以使用本地或远程的 URL 的图片。

![Remote Image](https://sli.dev/favicon.png)

如果是本地资源，请将资源放置到 public 文件夹 中并使用  /  开头的 URL 来引用它们。

![Local Image](/pic.png)

如果你想使用自定义的尺寸或样式，可以使用 <img> 标签

<img src="/pic.png" class="m-40 h-40 rounded shadow" />

项目备注

再ppt中我们也尝试用注释来帮助我们想起页面的对应内容。在slidev是如何添加注释的。

---
layout: cover
---

# 第 1 页

This is the cover page.

<!-- 这是一条备注 -->

---

就是html的注释，注意注释必须放在当前页面的最后一行,并且注释只有在演讲者模式中才能看到。点击导航面板上的  按钮，或者手动访问 http://localhost:3030/presenter 地址，即可进入演讲者模式。每当你进入演示者模式，其他页面实例会自动与演示者保持同步。

image.png

多个入口点

自 v0.15 开始可用

这意味着你可以将 slides.md 分割成多个文件，并可以按照你的需求组织它们。 slides.md :

# Page 1

This is a normal page

---
src: ./subpage2.md
---

<!-- this page will be loaded from './subpage2.md' -->
Inline content will be ignored

subpage2.md :

# Page 2

This page is from another file

页面复用

页面复用需要多个入口点加持。什么是多入口点，上面我文章中，我们是使用一个入口点进行介绍的，也就是只有一个md文件。我们只需要创建更多的markdown文件来也就是多个入口点来实现页面复用。

---
src: ./cover.md
---

---
src: ./intro.md
---

---
src: ./content.md
---

---
# reuse
src: ./content.md
---

我们只需要在## 扉页块中添加src属性，并添加相关内容即可实现。大家可以试一试，比较满足组件封装的思想，但是一般不常用。

图表

slidev当然可以使用图表，但是个人并不建议在markdown上进行图表的实现。（建议在第三方图标平台绘制好后截图显示）。我们也简单介绍一下他的使用。

```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

image.png 用法和代码的用法类似，只是指定的工具不一样。

数学公式

数学公式也有对应的补充，我们用的很少，因此不做讲述，大家有需要请前往官网查看。

当然还有很多配置，官网写的很详细了，在此我就不做过多的赘述。下面我们再说回关于slide对数值ppt的提升问题。

可以导出成为PPT

再汇报完成后，根据部门管理条例，一般会整理所有人的PPT然后，发送给上一层、或同层相关人员。那么我们如何把slidev变成一个PPT进行上交呢？

导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染。因此，使用此功能前需要安装 playwright-chromium。 如果你需要在 CI 环境下进行导出，那么阅读 playwright CI 指南 会对你有所启发。 安装 playwright-chromium：

$ npm i -D playwright-chromium

接着，使用如下命令即可将你的幻灯片导出为 PDF：

$ slidev export

稍作等待，即可在 ./slides-export.pdf 路径下看到你幻灯片的 PDF 文件。

如果你想要导出使用暗色主题的幻灯片，请使用 --dark 选项：

$ slidev export --dark

支持录制

可以很好的记录我们ppt表达时的情况，通过自己的分析和改正，以便于表达，实现最完美的，最准确的表达。为我们的答辩加分。

点击导航面板上的  按钮，将在演示文稿中显示你的摄像头视图。你可以拖动它，并使用右下角的把手来调整大小。尺寸和位置将持久化存储在 localStorage 中，因此，可以保证多次刷新后的展示一致，无需担心位置和大小丢失的问题。

总结

上面所描述的，有没有说到你的痛点呢？同时是否为你的痛点提供了新的解决思路呢？当然上述内容不够全面，篇幅太长怕大家看着很累。对于想要深入学习的可以去官网自主学习。想要偷懒的同学呢，评论区@我，子禛来帮你们深入学习，然后分享给大家一个全流程快速上手攻略。

avatar
文章
阅读
粉丝