插件系统

插件（Addons）为 Slidev 扩展开箱即用的新能力：新增组件、布局、配置与工具函数。与主题类似是 npm 包，用 addons: 配置引入。

addons 配置

在 Frontmatter 中声明插件：

---
addons:
  - slidev-addon-excalidraw
  - slidev-addon-notes
---

• addons 是一个数组，列出要启用的插件包
• 与 theme 不同，一份文稿可以启用多个插件
• 插件包名以 slidev-addon- 为约定前缀

官方插件

Excalidraw 插件

手绘风格白板图：

npm install slidev-addon-excalidraw

---
addons:
  - slidev-addon-excalidraw
---

<ExcalidrawDiagram path="/diagram.excalidraw" />

提供 ExcalidrawDiagram 组件，插入手绘风格图表。

Notes 插件

增强演讲者备注功能（PDF 备注导出、PPTX 备注同步等）：

npm install slidev-addon-notes

---
addons:
  - slidev-addon-notes
---

其他官方/常用插件

插件	能力
slidev-addon-excalidraw	手绘白板图
slidev-addon-notes	备注增强
slidev-addon-asciinema	终端录屏嵌入
slidev-addon-zoom	缩放演示
slidev-addon-qrcode	二维码组件
slidev-addon-toc	目录页生成

插件安装与使用

安装

npm install slidev-addon-zoom

启用

---
addons:
  - slidev-addon-zoom
---

使用插件提供的能力

插件可能提供组件、布局、指令或配置：

# 扫码获取资料

::qr-code{text="https://example.com/slides" size="200"}

---
layout: toc
---

插件的能力清单以插件的 README 为准，通常包含组件名、布局名与配置项。

插件开发入门

一个最小插件就是带特定目录的 npm 包：

slidev-addon-xxx/
├── components/          # 插件提供的组件
├── layouts/             # 插件提供的布局
├── styles/              # 插件样式
├── setup/               # 初始化脚本
└── package.json

package.json

{
  "name": "slidev-addon-xxx",
  "version": "1.0.0",
  "keywords": ["slidev-addon", "slidev"],
  "files": ["components", "layouts", "styles", "setup"]
}

提供组件

components/ 中的 Vue 文件自动注册为全局组件：

<template>
  <div class="hello">
    <slot />
  </div>
</template>

<style>
.hello {
  color: var(--slidev-theme-primary);
}
</style>

本地测试

在开发目录用 addons 指向本地路径：

---
addons:
  - ./my-addon
---

slidev example.md

插件 vs 主题

维度	主题	插件
数量	一份文稿一个	可多个
侧重	整体视觉风格	功能与组件
目录	layouts/styles/components	components/layouts/setup
关键字	slidev-theme	slidev-addon

开发建议

建议	说明
命名规范	包名 slidev-addon- 前缀
能力聚焦	一个插件提供一类能力
文档齐全	README 写清组件与配置
发布复用	团队公共组件打成插件共享

插件系统把可复用的能力沉淀成包：手绘图、二维码、终端录屏、目录页……按需启用，让演示工具箱持续扩展。