tangramor/slidev

Slidev Docker镜像

概述

Slidev Docker镜像是用于开发和托管Slidev幻灯片的容器化解决方案。Slidev是一个基于Web的幻灯片制作工具，支持实时预览、丰富的动画效果和多种导出格式。本镜像提供了便捷的方式来快速启动Slidev服务、生成幻灯片项目、导出PDF文件以及构建可部署的镜像。

核心功能和特性

• 快速初始化：在空工作目录中自动生成slides.md及相关文件
• 实时预览：启动本地服务，通过http://localhost:3030访问幻灯片
• 导出支持：提供playwright标签镜像，支持导出PDF等格式
• 灵活部署：可构建包含幻灯片的可部署镜像或生成静态HTML文件托管

使用场景

• 快速创建和编辑Slidev幻灯片
• 本地预览幻灯片效果
• 导出幻灯片为PDF等格式用于分享
• 构建包含幻灯片的Docker镜像进行部署
• 生成静态HTML文件托管在静态网站服务（如Github Pages）

使用方法

基本使用

在工作目录中运行以下命令启动Slidev服务：

bash
docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

参数说明：

• --user node：使用node用户运行容器
• -v ${PWD}:/slidev：挂载当前目录到容器内/slidev目录
• -p 3030:3030：映射容器3030端口到本地，用于访问幻灯片服务
• -e NPM_MIRROR：指定npm镜像（如国内镜像）加速依赖安装

功能说明：

• 若工作目录为空，将自动生成slides.md及相关配置文件
• 服务启动后，通过http://localhost:3030访问幻灯片

支持导出功能的Docker镜像

如需使用Slidev的导出功能，需使用playwright标签的镜像（体积较大，包含导出所需依赖）：

bash
docker run --name slidev --rm -it \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:playwright

在容器运行状态下，执行以下命令导出PDF：

bash
docker exec -i slidev npx slidev export --timeout 2m --output slides.pdf

构建可部署镜像

可通过Dockerfile将幻灯片项目打包为独立镜像：

Dockerfile
FROM tangramor/slidev:latest

ADD . /slidev

构建镜像：

bash
docker build -t myppt .

运行镜像：

bash
docker run --name myslides --rm --user node -p 3030:3030 myppt

访问地址：http://localhost:3030

构建单页应用（SPA）

通过以下命令生成静态HTML文件（需先启动容器）：

bash
docker exec -i slidev npx slidev build

生成的静态文件位于dist目录下，可通过多种方式托管：

Github Pages托管

1. 生成静态文件时指定基础路径（如子目录）：

   bash
   docker exec -i slidev npx slidev build --base=/<子目录名>/
   

2. 在dist目录添加空文件.nojekyll以禁用Jekyll构建
3. 将dist目录内容推送到Github Pages仓库

Docker托管

使用nginx镜像托管静态文件：

bash
docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine

或构建专用静态镜像：

Dockerfile
FROM nginx:alpine

COPY dist /usr/share/nginx/html

构建并运行：

bash
docker build -t mystaticppt .
docker run --name myslides --rm -p 80:80 mystaticppt

访问地址：http://localhost