目录

• 安装
• slidev 命令选项
  • slidev [entry]
  • slidev build [entry]
  • slidev export [entry]
  • slidev format [entry]
  • sidev theme [subcommand]
• Markdown 语法
• 导航
• 动画
  • 点击动画
    • v-click
    • v-after
    • v-click-hide
    • v-clicks
    • 自定义点击数量
    • 排序
    • 元素过渡
  • 移动
• 导出
  • PDF
  • PNGs
  • 单页应用(SPA)
• 静态部署
  • 构建单页应用(SPA)
    • 配置基础路径
    • 提供可下载的 PDF
  • 部署
    • Netlify
    • Vercel
  • GitHub Pages
• 绘图与批注
  • 对绘图进行持久化
  • 禁用绘图
  • 绘图同步

---------

安装

yarn create slidev

跟随命令行提示，会自动打开幻灯片，网址为: http://localhost:3030

全局安装

如果觉得每一次手动安装模板太麻烦，可以在全局安装 Slidev：

npm i -g @slidev/cli

然后即可在任何地方直接输入 slidev，即可创建模板

slidev

项目目录结构

slidev 命令选项

slidev [entry]

为 Slidev 启动一个本地服务器

• [entry](string，默认值为 slides.md)：幻灯片 markdown 的入口文件

选项

slidev build [entry]

建立可托管的 SPA

• [entry](string，默认值为 slides.md)：幻灯片 markdown 的入口文件

选项

slidev export [entry]

将幻灯片导入为 PDF(或者其他格式)

• [entry](string，默认值为 slides.md)：幻灯片 markdown 的入口文件

选项

slidev format [entry]

格式化 markdown 文件

• [entry] (string，默认值：slides.md)：幻灯片 markdown 的入口文件。

sidev theme [subcommand]

与主题相关的业务

子命令：

• eject [entry]：将当前主题弹出到本地文件系统中
  • [entry] (string，默认值：slides.md)：幻灯片 markdown 的入口文件。
  • 选项：
    • --dir (string，默认值：theme)：要输出到的目标文件夹。
    • --theme，-t (string)：覆盖主题。

Markdown 语法

以后会记笔记，这里留个坑

导航

将鼠标移动到窗口左下角，即可显示导航栏，当然也可以使用快捷键

动画

类似 PPT 中的点击效果

点击动画

v-click

为元素添加"点击动画"，可以使用 v-click 指令或者 <v-click> 组件，被指令或者组件嵌套的元素，再按下"下一步"之前，是不可见的

# Hello

<v-click>

Hello World

</v-click>

<div v-click class="text-xl p-2">

  Hey!

</div>

v-after

v-after 和 v-click 用法类似，但是 v-after 会再上一个 v-click 出发后使元素可见

<div v-click>Hello</div>
<div v-after>World</div>

v-click-hide

与 v-click 相同，但不是让元素出现，而是让元素在点击后不可见

<div c-click-hide>Hello</div>

v-clicks

v-clicks 仅能作为组件使用，用于快速将其子元素全部添加 v-click 指令。在列表结构中常见

<v-clicks>
  - Item1
  - Item2
  - Item3
</v-clicks>

这意味着，每次点击下一步时，子元素依次出现

自定义点击数量

默认情况下，Slidev 会计算进入下一张幻灯片之前需要执行多少步。我们可以在 frontmatter 选项中设置 clicks 来覆盖该设置

---
# 在进入下一页之前，需要点击 10 次
clicks: 10
---

排序

通过传递点击索引，可以自定义展示顺序

<div v-click>1</div>
<div v-click>2</div>
<div v-click>3</div>

顺序颠倒可以这样写

<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>

实现其他效果

---
clicks: 3
---
<-- 点击三次后可见 -->
<v-clicks at="3">
  <div>Hi</div>
</v-clicks>

元素过渡

当你在元素中应用 v-click 指令时，它会给该元素添加名为 slidev-vclick-target 的类。当元素隐藏时，还加上了 slidev-vclick-hidden 类。例如：

<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>默认情况下，这些类都应用了半透明的过渡效果：

点击后，会变成：

<div class="slidev-vclick-target">Text</div>

默认情况下，这些类都应用了半透明的过渡效果

/* default options */
.slidev-vclick-target {
    transition: opacity 100ms east;
}
.slidev-vclick-hidden {
    opacity: 0;
    pointer-events: none;
}

我们可以在自定义样式表中自定义过渡效果来覆盖默认配置，例如下面

/* style.css */
.slidev-vclick-target {
    transition: all 500ms ease;
}
.slidev-vclick-hidden {
    transform: scale(0);
}

我们也可以只为某也换扥片或布局指定动画

.slidev-page-7, .slidev-layout.my-custom-layout {
    .slidev-vclick-target {
        transition: all 500ms ease;
    }
    .slidev-vclick-hidden {
        transform: scale(0);
    }
}

欲了解更多详细信息，请参阅 自定义样式。

移动

Slidev 内置了 @vueuse/motion。我们可以使用 v-motion 指令，以对它们施加运动效果，例如：

<div
     v-motion
     :initial:"{ x: -80 }"
     :enter="{ x: 0 }">
    Slidev
</div>

文本 Slidev 将从其初始化位置 80px 移动到其原始位置。

注意：Slidev 会预加载下一张幻灯片以提高性能，这意味着动画可能会在你导航到该页面之前就开始了。为了使其正常工作，你可以禁用指定幻灯片的预加载

markdown

PlainText

---
preload: false
---

或者使用 v-if 控制元素的生命周期来获得对组件更细粒度的控制

html

PlainText

<div
 v-if="$slidev.nav.currentPage === 7"
 v-motion
 :initial="{ x: -80 }"
 :enter="{ x: 0 }">
 Slidev
</div>

学习模式： Demo | @vueuse/motion | v-motion | Presets

导出

PDF

导出 PDF 工鞥基于 Playwright 实现渲染，因此需要先安装 playwright-chromium 依赖

yarn add --dev playwright-chromium

接着使用下面的命令导出 PDF

slidev export

稍作等待，在 ./slides-export 路径下看到幻灯片的 PDF 文件，如果要导出暗色主题，使用 --dark 选项

slidev export --dark

导出点击步骤

默认情况下，Slidev 会将每张幻灯片导出为 1 页，并忽略点击动画。如果想要将多个步骤的幻灯片，分解为多个页面，需要使用 --with-clicks 选项

sidev export --with-clicks

PNGs

当命令传入 --format png 选项时，Slidev 会将每张幻灯片导出为 PNG 图片格式。

slidev export --format png

单页应用(SPA)

看下一张，静态部署章节

静态部署

构建单页应用(SPA)

还可以将幻灯片构建成可部署的单页应用(SPA)

slidev build

生成的应用程序会保存在 dist/ 目录下，然后可以将该目录部署在 GitHub Pages，Netlify，Vercel等任何想要部署的地方，并且将幻灯片连接分享给其他人

配置基础路径

如果需要将幻灯片部署在网站的子路由下，可以使用 --base 选项来进行修改。例如：

slidev build --base /talks/my-cool-talk/

提供可下载的 PDF

我们可以向浏览幻灯片应用的观众提供一个可下载的 PDF。可以通过如下配置启动它：

---
download: true
---

配置好后，Slidev 将生成一个 PDF 文件，并在单页应用中展示下载按钮。

你也可以为 PDF 提供一个自定义的 URL。在这种情况下，PDF 的渲染过程将被忽略。

---
download: 'https://myside.com/my-talk.pdf'
---

部署

Netlify

• Netlify

在你项目的根目录创建 netlify.toml 文件，其内容如下：

[build.environment]
  NODE_VERSION = "14"

[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

接着，去 Netlify 的仪表盘，选择对应仓库并创建新的站点。

Vercel

• Vercel

在你项目的根目录创建 vercel.json 文件，其内容如下：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

接着，去 Vercel 的仪表盘，选择对应仓库并创建新的站点。

GitHub Pages

• GitHub Pages

创建 .github/workflows/deploy.yml 文件，并包含如下内容。然后通过 Github Action 将你的幻灯片部署到 Github Pages。

name: Deploy pages
on: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

绘图与批注

对绘图进行持久化

forntmatter 中的配置可以把你得到的绘图作为 SVG 保存在 .slidv/drawings 目录下，并把它们放入导入的 pdf 或部署的网站中

---
drawings:
	presist: true
---

禁用绘图

完全禁用：

---
drawings:
	enabled: false
---

仅在开发环境可用

---
drawings:
	enabled: dev
---

仅在演讲者模式可用：

---
drawings:
  presenterOnly: true
---

绘图同步

默认情况下，Slidev 会在所有实例中同步你的绘图。如果你在和他人共享幻灯片，你可能会需要通过以下方式禁用同步：

---
drawings: 
  syncAll: false
---

通过这个配置，只有来自演讲者实例的绘图会和其他实例同步。