个人 Slidev 模板

• 主题：apple-basic
• 插件：
  • slidev-component-progress
  • slidev-addon-rabbit
  • slidev-addon-fancy-arrow
  • slidev-component-spotlight
  • slidev-addon-stem
  • slidev-overflow-checker

插件使用说明

slidev-component-progress

进度条组件，显示演示文稿完成进度。

• GitHub

配置：

---
addons:
  - slidev-component-progress
---

使用： 创建 ./global-top.vue 文件：

<template>
  <Progress level="2"/>
</template>

常用参数：

参数	默认值	说明
level	1	标题层级
position	'top'	位置（top/bottom）
opacity	0.5	未悬停时的透明度

---

slidev-addon-rabbit

演示计时工具，使用「兔子」代表当前页数，「乌龟」代表已用时间。

• GitHub

配置：

---
addons:
  - slidev-addon-rabbit
rabbit:
  slideNum: true
---

使用： 启动后在 URL 添加 ?time= 参数设置时长（分钟）：

http://localhost:3030/?time=10   # 10 分钟
http://localhost:3030/?time=1    # 1 分钟（测试用）

---

slidev-addon-fancy-arrow

绘制手绘风格箭头，基于 Rough.js。

• GitHub
• 文档

配置：

---
addons:
  - slidev-addon-fancy-arrow
---

使用：

<!-- 坐标定位 -->
<arrow x1="100" y1="200" x2="300" y2="400" color="#953" width="2" arrowSize="1" />

<!-- 带点击触发动画 -->
<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="342" color="#953" width="2" arrowSize="1" />

---

slidev-component-spotlight

聚光灯效果，按住指定键（默认 Shift）使屏幕变暗，仅高亮光标区域。

• GitHub

配置：

---
addons:
  - slidev-component-spotlight
---

使用： 创建 ./global-top.vue 文件：

<template>
  <SlidevSpotlight/>
</template>

常用参数：

参数	默认值	说明
activationKey	'Shift'	触发按键
size	'100px'	聚光灯大小
opacity	0.75	阴影透明度

---

slidev-addon-stem

STEM 演示组件，支持 Plotly 图表和图片带标题。

• GitHub

配置：

---
addons:
  - slidev-addon-stem
---

使用：

<!-- Plotly 图表 -->
<PlotlyFigure
  src="/path/to/figure.json"
  caption="Figure 1: 示例图表"
  width="100%"
  height="320px"
/>

<!-- 图片带标题 -->
<ImageFigure
  src="/path/to/image.png"
  caption="Figure 2: 示例图片"
  width="100%"
/>

figure-side 布局：

---
layout: figure-side
figureUrl: /path/to/figure.png
figureCaption: "Figure 3: 标题"
---

slidev-overflow-checker

• github 通过真实浏览器渲染检测Slidev演示文稿中的视觉溢出

专为AI代理设计，自动发现和修复仅靠Markdown无法检测的布局问题。