Slidev

一、准备环境

首先需要 Node.js 和 npm。

• 检查是否已安装：

  node -v
  npm -v
  

• 如果没有，安装 LTS 版本：

  • Linux (Ubuntu/Debian)：

    sudo apt update
    sudo apt install -y nodejs npm
    

  • MacOS：

    brew install node
    

  • Windows：到 Node.js 官网下载安装包。

二、创建 Slidev 项目

Slidev 安装方式

方式一：初始化新项目（推荐）

npm init slidev@latest

这个命令会下载并安装 slidev,并自动生成 package.json、slides.md、配置文件

方式二：全局安装

npm install -g @slidev/cli

然后直接运行：

slidev slides.md

以方式一为例构建项目

进入slidev项目目录，执行：

npm init slidev@latest

依次选择项目名（例如 slidev）、模板（starter）、包管理器（npm 默认即可）。

进入目录并安装依赖：

cd projectname
npm install

项目中会生成一个 slides.md 文件，后续内容都写在这里。

三、本地预览

开发模式运行：

npm run dev

浏览器访问 http://localhost:3030 即可实时预览简历幻灯片。 修改 slides.md 会自动刷新。

---

四、构建静态文件

要在 /slidev/ 路径下访问，需要指定 base 参数：

npm run build -- --base /slidev/

完成后生成 dist/ 文件夹，里面就是最终的静态网页。

---

五、上传到服务器

假设网站目录是 /www/wwwroot/www.zyweb.space/：

mkdir -p /www/wwwroot/www.zyweb.space/slidev
rsync -avz dist/ <user>@<server-ip>:/www/wwwroot/www.zyweb.space/slidev/

或者用宝塔面板直接上传，将 dist 内容放到 /slidev/ 下。

目录结构应为：

/www/wwwroot/www.zyweb.space/slidev/
  ├─ index.html
  └─ assets/

---

六、Nginx 配置（SPA 回退）

Slidev 使用前端路由，必须在 Nginx 里加回退规则。 宝塔面板操作：

1. 打开 网站 → 找到 www.zyweb.space → 点击 设置
2. 选择 配置文件
3. 在 server {} 内加入：

location ^~ /slidev/ {
    alias  /www/wwwroot/www.zyweb.space/slidev/;
    index  index.html;
    try_files $uri $uri/ /slidev/index.html;
}

保存并重载 Nginx。 此时 /slidev/1、/slidev/2 等路径都能正常访问。

---

七、Typecho 集成

方法一：独立页面跳转

1. 后台建独立页面（Slug 为 slidev）。

2. 在主题目录新建 page-slidev.php：

   <?php
   header('Location: /slidev/', true, 302);
   exit;
   

3. 菜单里加上该页面，点击后跳转到 /slidev/。

方法二：菜单外链

直接在导航菜单添加外链 /slidev/。

---

八、更新简历流程

修改内容后：

npm run build -- --base /slidev/
rsync -avz --delete dist/ <user>@<server-ip>:/www/wwwroot/www.zyweb.space/slidev/

刷新页面即可看到更新。

---

九、常见问题

• 白屏/样式错乱：构建时漏加 --base /slidev/。

• 子路由 404：Nginx 未配置 try_files。

• 本地直接打开 index.html 无法显示：需用本地服务器：

  npx http-server dist -p 4399
  # 访问 http://localhost:4399/slidev/