Docker 搭建 Slidev 幻灯片制作工具

共计 4845 个字符，预计需要花费 13 分钟才能阅读完成。

一、简介

Slidev 是一个基于 Web 的幻灯片制作和演示工具，官网地址：https://cn.sli.dev/

它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在演讲稿中内置了互动的演示样例。

功能如下：

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

二、安装

docker run -d \
--name slidev \
-u root \
-v /home/docker/slidev:/slidev \
-p 3030:3030 \
tangramor/slidev:latest

如果工作目录 /home/docker/slidev 为空，容器会在目录下自动创建 slides.md 文件和其它相关文件，并基于 3030 端口启动 slidev 服务，这个过程会耗费一定时间，请耐心等待。

访问 3030 端口，你将看见幻灯片的首页，点击右边黑色区域可以进行切换幻灯片。

/>

幻灯片播放效果。

/>

三、使用

这里是 markdown 和 slidev 结合的基本使用方法，更多详情请参考官方文档：https://cn.sli.dev/

1. 分割幻灯片

使用 --- 分隔符来分隔幻灯片。

# 页面一

我是页面一

---

# 页面二

我是页面二

2. 扉页

可以在 Slidev 的第一张幻灯片扉页处（文件顶部）进行各项配置，以下是各项的默认参数。

---
# 主题id 或 主题包名称
# 了解更多：https://sli.dev/themes/use.html
theme: 'default'
# 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
title: 'Slidev'
# titleTemplate for the webpage, `%s` will be replaced by the page's title
titleTemplate: '%s - Slidev'
# information for your slides, can be a markdown string
info: false

# 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
download: false
# 要导出文件的文件名称
exportFilename: 'slidev-exported.pdf'
# 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
highlighter: 'prism'
# 在代码块中显示行号
lineNumbers: false
# 启用 monaco 编辑器，可以是 boolean，'dev' 或者 'build'
monaco: 'dev'
# 使用 vite-plugin-remote-assets 在本地下载远程资源，可以是 boolean，'dev' 或者 'build'
remoteAssets: false
# 控制幻灯片中的文本是否可以选择
selectable: true
# 启用幻灯片录制，可以是 boolean，'dev' 或者 'build'
record: 'dev'

# 幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark'
colorSchema: 'auto'
# vue-router 模式，可以使用 'history' 或 'hash' 模式
routerMode: 'history'
# 幻灯片的长宽比
aspectRatio: '16/9'
# canvas 的真实宽度，单位为 px
canvasWidth: 980
# 用于主题定制，会将属性 `x` 注入根样式 `--slidev-theme-x`
themeConfig:
  primary: '#5d8392'

# favicon 可以是本地文件路径，也可以是一个 URL
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
# 用于渲染图表的 PlantUML 服务器的 URL
plantUmlServer: 'https://www.plantuml.com/plantuml'
# 字体将从 Google 字体自动导入
# 了解更多：https://sli.dev/custom/fonts
fonts:
  sans: 'Roboto'
  serif: 'Roboto Slab'
  mono: 'Fira Code'

# 为所有幻灯片添加默认的 frontmatter
defaults:
  layout: 'default'
  # ...

# 绘制选项
# 了解更多：https://sli.dev/guide/drawing.html
drawings:
  enabled: true
  persist: false
  presenterOnly: false
  syncAll: true
---

3. 布局

有多重布局，在项目中 layouts 目录下，文件名即是布局。例如，常用的有 default、cover、center(视频或图片全屏布局)、two-cols(双列布局)、two-cols-header(带标题的双列布局)、full（全宽布局）、iframe(嵌入布局)、image（图片布局，可放左或右）

1. 不指定布局

# 不指定布局

不指定布局，内容垂直居中显示

效果图：

/>

2. default布局

---
# default布局
layout: default
---

# default布局

Default布局，最基础的布局，用于展示任意类型的内容。

效果图：

/>

3. cover布局

---
layout: cover
background: 'https://source.unsplash.com/collection/94734566/1920x1080'
#图片也可以是本地
---

# Cover布局

Cover布局，用于创建全屏的背景图像或视频，内容完全覆盖整个视口。

可用于展示演讲稿的封面页，可以包含演讲的标题、演讲者、时间等。

效果图：

/>

4. center布局

---
layout: center
---

# 居中布局

将内容居中显示，通常在页面中心位置。

效果图：

/>

5. two-cols布局

---
layout: two-cols
---

# Left

左侧内容

::right::

# Right

右侧内容

效果图：

/>

6. two-cols-header布局

---
layout: two-cols-header
---

# Header

标题

::left::

# Left

左侧内容

::right::

# Right

右侧内容

效果图：

/>

7. iframe布局

---
layout: iframe

# 网页链接
url: https://www.qcyqq.com
---

---
layout: iframe-left

# 网页链接
url: https://www.qcyqq.com

# 自定义类名，方便样式调整
class: my-cool-content-on-the-right
---
我是右侧内容

---
layout: iframe-right

# 网页链接
url: https://www.qcyqq.com

# 自定义类名，方便样式调整
class: my-cool-content-on-the-left
---
我是左侧内容

效果以右侧 iframe 为例：

/>

8. image布局

---
layout: image

# 图片地址
image: https://source.unsplash.com/collection/94734566/1920x1080
---

---
layout: image-left

# 图片地址
image: https://source.unsplash.com/collection/94734566/960x1080

# 自定义类名，方便样式调整
class: my-cool-content-on-the-right
---
我是右侧文字内容

---
layout: image-right

# 图片地址
image: https://source.unsplash.com/collection/94734566/960x1080

# 自定义类名，方便样式调整
class: my-cool-content-on-the-left
---
我是左侧文字内容

效果以右侧图片为例：

/>

4. 代码块

1. 普通用法

<!-- 这里用引号'代替反引号`，使用时记得修改 -->
'''ts
console.log('Hello, World!')
'''

2. 特定行高亮

<!-- 这里用引号'代替反引号`，使用时记得修改 -->
'''ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
'''

3. 高亮改变

如果要在多个步骤中改变高亮，可以用 | 分隔它们。比如：

<!-- 这里用引号'代替反引号`，使用时记得修改 -->
'''ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
'''

5. 内联样式

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

# 第一页标题

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

---

# 第二页标题

第二页标题不受影响

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

6. 静态资源

1. 远程资源

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

内置的 vite-plugin-remote-assets 将在第一次运行时把远程资源缓存到磁盘中，即便是大图也能实现立即加载。

2. 本地资源

![Local Image](/pic.png)

本地资源，需要将资源放置到 public 文件夹中，并用 / 引用

3. 自定义尺寸

使用 <img> 标签来自定义的尺寸或样式。

7. 备注

---
layout: cover
---

# 第 1 页

This is the cover page.

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

---

# 第 2 页

<!-- 这不是一条备注，因为它在幻灯片内容前 -->

The second page

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

每张幻灯片中的最后一个注释块将被视为备注，它们将展示在演讲者模式中。

/>

8. 图表

被标记为 mermaid 的代码块将被转换为图形，例如：

<!-- 这里用引号'代替反引号`，使用时记得修改 -->
'''mermaid
sequenceDiagram
  Alice->John: Hello John, how are you?
  Note over Alice,John: A typical interaction
'''

/>

可以向它传递一个配置项来指定缩放和主题，下面这个似乎有问题，还不清楚是什么原因。

<!-- 这里用引号'代替反引号`，使用时记得修改 -->
'''mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
'''

9. 多个入口点

新建 subpage2.md：

# 页面二

页面二来自另一个文件

slides.md:

# 页面一

普通页面

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

<!-- 下面一行将被 './subpage2.md' 的内容替换 -->
测试测试

提醒：本文发布于384天前，文中所关联的信息可能已发生改变，请知悉！