什么是 Slidev ?
Slidev 是专为程序员打造的演示文稿工具。该项目是基于 Web 的幻灯片制作和演示工具,让用户可以使用 纯文本+ Markdown 语法制作幻灯片,支持导出为 PDF 或 PNG 格式的文件,或以单页面展示幻灯片。对于大多数不擅长做 PPT 的程序员,基于提供的现成主题也可以制作出看起来不错的演示文稿。
软件特点:
📝 基于 Markdown - 使用您最喜欢的编辑器和工作流程
🧑💻 开发者友好 - 内置语法突出显示、实时编码等
🎨 主题化 - 主题可以与 npm 包共享和使用
🌈 时尚 - 通过 UnoCSS 提供按需工具
🤹 交互式 - 无缝嵌入 Vue 组件
🎙 演讲者模式 - 使用另一个窗口甚至手机来控制幻灯片
🧮 LaTeX - 内置 LaTeX 数学方程支持
📰 图表 - 使用文本描述创建图表
🌟 图标 - 直接访问任何图标集中的图标
💻 编辑器 - 集成的编辑器,或者用于 VS Code 的扩展
🎥 录制 - 内置录制和摄像头视图
📤 可移植 - 导出为 PDF、PNG 甚至可托管的 SPA
⚡️ 快速 - 由 Vite 提供支持的即时重新加载
🛠 可定制 - 使用 Vite 插件、Vue 组件或任何 npm 包进行扩展
准备默认情况下, 如果您的 data 文件夹为空,容器在启动时,会在在该文件夹下生成模板文件 slides.md 和其他相关文件
但是这个默认的 slides.md 存在问题,日志中会显示 Internal server error: Element is missing end tag.错误
从而导致访问时会显示一个空白的页面
网页上也报错
1Failed to load resource: the server responded with a status of 500 (Internal Server Error)
老苏一度以为是这个镜像有问题呢,所以老苏觉得应该自己准备一个 slides.md 来规避错误
12345678910111213141516---layout: coverbackground: https://sli.dev/demo-cover.png---# 欢迎使用 Slidev!为开发者打造的演示文稿工具---# 第二页- 在单一 Markdown 文件中编写幻灯片- 主题,代码高亮,可交互的组件,等等 - 阅读文档了解更多!|
保存时,记得采用 UTF-8 编码
文件要放入 data 目录中
安装在群晖上以 Docker 方式安装。
在注册表中搜索 slidev ,选择第一个 tangramor/slide,版本选择 latest。
卷在 docker 文件夹中,创建一个新文件夹 slidev,并在其中建一个子文件夹 data
文件夹
装载路径
说明
docker/slidev/data
/slidev
模版和依赖文件等
端口本地端口不冲突就行,不确定的话可以用命令查一下
12# 查看端口占用netstat -tunlp | grep 端口号
本地端口
容器端口
3032
3030
默认没有对外暴露端口
点 + 号自行添加
命令行安装如果你熟悉命令行,可能用 docker cli 更快捷
12345678910111213# 新建文件夹 slidev 和 子目录mkdir -p /volume1/docker/slidev/data# 进入 slidev 目录cd /volume1/docker/slidev# 运行容器docker run -d \ --restart unless-stopped \ --name slidev \ -p 3032:3030 \ -v $(pwd)/data:/slidev \ tangramor/slidev:latest
也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件
1234567891011version: '3'services: slidev: image: tangramor/slidev:latest container_name: slidev restart: unless-stopped ports: - 3032:3030 volumes: - ./data:/slidev
然后执行下面的命令
12345678910# 新建文件夹 slidev 和 子目录mkdir -p /volume1/docker/slidev/data# 进入 slidev 目录cd /volume1/docker/slidev# 将 docker-compose.yml 放入当前目录# 一键启动docker-compose up -d
容器刚启动时,会下载依赖模块,占用率会存在飙升的情况
本文写作时, latest 版本对应的软件版本为 v0.44.0;
运行播放模式在浏览器中输入 http://群晖IP:3032 就能看到主界面
左下角有隐藏菜单
翻页的方法比较多,两侧或者方向键都是可以的
演讲者模式在浏览器中输入 http://群晖IP:3032/presenter
移动端在手机浏览器中输入 http://群晖IP:3032/entry,可以方便的切换模式
详细的功能指南,可以阅读官方的文档:https://cn.sli.dev/guide/why.html
参考文档
slidevjs/slidev: Presentation Slides for Developers地址:https://github.com/slidevjs/slidev
Home | Slidev地址:https://cn.sli.dev/
tangramor/slidev_docker: Docker image scripts for Slidev地址:https://github.com/tangramor/slidev_docker