Slidev: Build Presentation with markdown

Slidev：基于网页的简报创作方案

@ 分享

前言

近期工作研究到使用 Slidev🔗 来呈现简报，这是一款基于 Vite + Vue3 的简报工具🔗，整合了大大小小的套件方便用网页创作如动画软件（Powerpoint/Keynote）的简报，并且主要以 Markdown 来撰写内容，这样的方式让我们可以专注在内容上，而不用花太多时间在花俏的简报软件操作，很适合网页开发者或 Markdown 重度使用者的一款简报方案。如果你有以下的需求，那么 Slidev 是你的好选择：

  1. 觉得 Powerpoint/Keynote 操作繁琐，想要一个简单的简报工具
  2. 喜欢使用 Markdown 语法写作甚至是制作简报
  3. 想要一个基于网页的自由开源简报工具
  4. 想要易于版本控制的简报

环境建置

如果你身在网页开发领域应该会非常熟悉和简单，依照官方文件建置环境🔗即可。

Terminal window
# pnpm
pnpm create slidev


# NPM
npm init slidev@latest


# Yarn
yarn create slidev

安装完成后它会自动执行，并且列出开发服务器、简报者页面、简报总览页面、输出简报页面等链接，未来要开发可以参考 package.json 内的 script 指令执行。

Terminal window
√ Project name: ... first
√ Install and start it now? ... yes
√ Choose the package manager » pnpm


  Slidev  v51.3.0


  theme       @slidev/theme-seriph
  css engine  unocss
  entry       D:\USER\Desktop\first\slides.md


  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter/
  slides overview     > http://localhost:3030/overview/
  export slides       > http://localhost:3030/export/
  remote control      > pass --remote to enable


  shortcuts           > restart | open | edit | quit

制作第一个简报

预设会创立 slides.md 文件且预设存在一些示例内容，要直接删掉重头开始也可以，建议官方示例先玩过一次看看有那些特殊的功能，向是布局、动画……等酷东西。语法上可以使用 --- 代表新的一页：

# Slide 1


---


# Slide 2

HeadMatter 与 FrontMatter

每一页简报可以有个开头资料，当遇到被 --- 包覆的 YAML 数据就意味着这是一页全新的页面，这些与页面关联的元数据也被称为 FrontMatter🔗，用来记录页面相关的信息，而第一页简报则可以设置全局简报的设置，因而被称为 HeadMatter🔗。

---
transition: fade-out
---


# Hello World

提示笔记

---
---


<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->

简报者可以在每一页简报下一些提示的功能 Slidev 也考虑到了，每个简报的最后一个注释都会被视为提示笔记并显示在简报者模式当中，支持 Markdown 与 HTML。

简报者模式
简报者模式

修改布局与背景图片范例

举例来说内建存在预设的 layout🔗 与 image🔗 设置可以让我们快速的调整页面的布局和使用的图片：

---
layout: image-right
image: images/cat.jpg
---


# A slide with an image on the right

layout: image-right + image
layout: image-right + image

基于不同的 theme 会提供你不同的 layout 属性参数使用，可以再查阅对应的文档即可，或者是自制 layout🔗，实际上就是创建一个 Vue 组件。

客制化结构与样式

会发现直接在 Markdown 里面撰写 HTML 与 CSS 是行得通的，其实和 Vue 的组件非常像，每个简报都是独立的组件，可以置入 style 并限制为组件内生效 scoped：

<style scoped>
h1 {
  outline: 1px solid red;
}
</style>

或是直接撰写已经整合好的 unoCSS (与 TailwindCSS 相似的 Atomic CSS 框架)也行：

<div class="text-red-300 text-2xl">Hello World</div>

(补充) Icon 使用

简报不可或缺的就是大量的图示辅助读者理解，Slidev 也整合了对应的 Icon 方案🔗，只需下载对应的 Icon 包即可，可以到 Icônes🔗 了解更多。

Terminal window
pnpm add @iconify-json/[the-collection-you-want]

举例来说添加对应 icon 库依赖：@iconify-json/mdi🔗 就可以在简报引入相关组件：

<mdi-account-circle />

(补充) 代码

和 Markdown 一样，特别的是撰写不同语言后语法高光仍会准确显示：

```css
h1 {
  border: 1px solid red;
}
```


```html
<div class="flex gap-4">
  <div>Syntax highlighting is built-in</div>
</div>
```


```javascript
export function sayHello() {
  console.log('Hello');
}
```

Codeblock 展示
Codeblock 展示

这是因为 Slidev 默认也整合了 Shiki🔗 语法高光，可以使用任何 Shiki 相关的设置，甚至动画！ (Shiki Magic Move🔗)。

(补充)标示重点

Slidev 背后使用了 RoughNotation🔗 用来添加手绘感的标示，可以使用 v-mark 指令于元素上设置：

  • 触发时机
  • 客制化颜色
  • 客制化种类

官方文件 Rough Markers🔗有很不错的描述与介绍影片可以参考。

(补充)动画

官方有详细的动画指南🔗，我差不多只是练习并用自己的方式理解并精炼一次。

v-click 点击后显示

最简单常见的简报动画是一个「点击」行为后触发画面元素的显现，这点可以轻易地使用 v-click 元件或指令于元素上来达成。每个简报都可以透过 $slidev.nav.clicks 存取当下简报点击过的次数。

<!-- 点击一次 -->
<v-click>Click Once</v-click>
<!-- 点击二次出现 -->
<div v-click class="text-xl">Click Twice</div>
{{ $slidev.nav.clicks }}

v-after 点击后延续显示

v-after 用于延续上一个 v-click 的状态

<!-- 点击一次 -->
<div v-click> Hello </div>
<div v-after> World </div>  <!-- 或 <v-after> World </v-after> -->

展示

在任何简报的右下方都会隐藏导航列，用于操作简报，官方有详细的 UI 文档🔗说明细节。

Slidev Navigation Bar
鼠标滑动到简报左下方显示导航列

部署

由于 Slidev 就是一个工具用于生成简报，以往通常会需要建构整个网站后拿生成的网站文件 (在 Vite 当中通常是 dist 文件夹) 并丢上不同的服务。我们试着将它自动化部署在 GitHub Pages🔗 免费服务上（或任何其他托管静态网站的服务上🔗）。

具体来说可以通过 GitHub Actions 来自动化 CD 的流程，首先设置项目 GitHub Pages 配置来源：

GitHub 配置

接着使用官方提供的部署脚本🔗可以无痛的设置好 CD 设置，未来只要 main 分支有任何更动都会触发线上简报网站的更新。

name: Deploy pages


on:
  workflow_dispatch:
  push:
    branches: [main]


permissions:
  contents: read
  pages: write
  id-token: write


concurrency:
  group: pages
  cancel-in-progress: false


jobs:
  build:
    runs-on: ubuntu-latest


    steps:
      - uses: actions/checkout@v4


      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'


      - name: Setup @antfu/ni
        run: npm i -g @antfu/ni


      - name: Install dependencies
        run: nci


      - name: Build
        run: nr build --base /${{github.event.repository.name}}/


      - name: Setup Pages
        uses: actions/configure-pages@v4


      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist


  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

输出

如果你对于网页不感兴趣，想要直接随拿随用的简报也可以！Slidev 支持多种输出格式可以通过指令输出或左下角的导航列输出按钮调整并输出：

输出简报
输出简报

总结

如果你本身是网页技术人员（特别是前端）那么 Slidev 绝对适合用于技术上的简报呈现，深度 Markdown 用户也可以尝试看看。更多有趣没有提到的功能可以查看官方的功能列表🔗。

延伸阅读