为开发者设计的幻灯片演示工具Slidev

2023-12-18 10:45:58

在这里插入图片描述

什么是 Slidev ？

Slidev 是专为程序员打造的演示文稿工具。该项目是基于 Web 的幻灯片制作和演示工具，让用户可以使用纯文本+ Markdown 语法制作幻灯片，支持导出为 PDF 或 PNG 格式的文件，或以单页面展示幻灯片。对于大多数不擅长做 PPT 的程序员，基于提供的现成主题也可以制作出看起来不错的演示文稿。

软件特点：

📝 基于 Markdown - 使用您最喜欢的编辑器和工作流程
🧑?💻 开发者友好 - 内置语法突出显示、实时编码等
🎨 主题化 - 主题可以与 npm 包共享和使用
🌈 时尚 - 通过 UnoCSS 提供按需工具
🤹 交互式 - 无缝嵌入 Vue 组件
🎙 演讲者模式 - 使用另一个窗口甚至手机来控制幻灯片
🧮 LaTeX - 内置 LaTeX 数学方程支持
📰 图表 - 使用文本描述创建图表
🌟 图标 - 直接访问任何图标集中的图标
💻 编辑器 - 集成的编辑器，或者用于 VS Code 的扩展
🎥 录制 - 内置录制和摄像头视图
📤 可移植 - 导出为 PDF、PNG 甚至可托管的 SPA
?? 快速 - 由 Vite 提供支持的即时重新加载
🛠 可定制 - 使用 Vite 插件、Vue 组件或任何 npm 包进行扩展

Slidev 功能演示

准备

默认情况下，如果您的 data 文件夹为空，容器在启动时，会在在该文件夹下生成模板文件 slides.md 和其他相关文件

但是这个默认的 slides.md 存在问题，日志中会显示 Internal server error: Element is missing end tag.错误

在这里插入图片描述

从而导致访问时会显示一个空白的页面

在这里插入图片描述

网页上也报错

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

在这里插入图片描述

老苏一度以为是这个镜像有问题呢，所以老苏觉得应该自己准备一个 slides.md 来规避错误

---
layout: cover
background: https://sli.dev/demo-cover.png
---

# 欢迎使用 Slidev!

为开发者打造的演示文稿工具

---

# 第二页

- 在单一 Markdown 文件中编写幻灯片
- 主题，代码高亮，可交互的组件，等等  
- 阅读文档了解更多！|

保存时，记得采用 UTF-8 编码

在这里插入图片描述

文件要放入 data 目录中

在这里插入图片描述

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 slidev ，选择第一个 tangramor/slide，版本选择 latest。

在这里插入图片描述

卷

在 docker 文件夹中，创建一个新文件夹 slidev，并在其中建一个子文件夹 data

文件夹	装载路径	说明
`docker/slidev/data`	`/slidev`	模版和依赖文件等

在这里插入图片描述

端口

本地端口不冲突就行，不确定的话可以用命令查一下

# 查看端口占用
netstat -tunlp | grep 端口号

本地端口	容器端口
`3032`	`3030`

默认没有对外暴露端口

在这里插入图片描述

点 + 号自行添加

在这里插入图片描述

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷

# 新建文件夹 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 文件

version: '3'

services:
  slidev:
    image: tangramor/slidev:latest
    container_name: slidev
    restart: unless-stopped
    ports:
      - 3032:3030
    volumes:
      - ./data:/slidev

然后执行下面的命令

# 新建文件夹 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

文章来源:https://blog.csdn.net/wbsu2004/article/details/135055264
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！