使用 Slidev + WHULUG 主题快速制作技术讲座幻灯片和讲义。
OK Computer 是一个技术讲座制作框架，旨在帮助讲师快速创建包含幻灯片和讲义的完整技术分享资料。
核心理念：
- 🎯 内容为王：专注于内容，让工具自动化处理格式
- 📐 工程化思维：结构化的内容组织，可复用的模板
- 🎨 专业美观：WHULUG 主题提供一致且专业的视觉风格
- 📱 多平台输出：支持网页演示、PDF 导出、在线分享
提供 7 套通用模板，覆盖常见技术讲座场景：
适用场景：工具入门、框架指南、CLI 介绍
内容结构：痛点 → 安装 → 概念 → 实战 → 进阶
布局特点：适合演示
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/tool-tutorial/* ./my-tutorial/
cd my-tutorial
# 替换 {{占位符}} 为你的内容
npm install
npm run dev适用场景：项目复盘、经验分享、技术演讲
内容结构：背景 → 探索 → 方案 → 成果 → 方法论
布局特点：two-cols 对比多，center 强调金句
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/tech-sharing/* ./my-talk/
cd my-talk
# 替换 {{占位符}} 为你的内容
npm install
npm run dev适用场景：算法、设计模式、系统原理、理论知识
内容结构：定义 → 原理 → 对比 → 应用 → 深入
布局特点：图解多，流程图、架构图占位
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/concept-explanation/* ./my-concept/
cd my-concept
# 替换 {{占位符}} 为你的内容
npm install
npm run dev适用场景：项目案例、架构演进、问题解决、最佳实践
内容结构：背景 → 方案 → 实施 → 成果 → 可复用模式
布局特点：数据展示多，阶段划分清晰
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/case-study/* ./my-case/
cd my-case
# 替换 {{占位符}} 为你的内容
npm install
npm run dev适用场景：动手实践、培训课程、实验课、Codelab
内容结构：准备 → Task 1 → Task 2 → Task 3 → 综合挑战
布局特点：分步骤指导，每步有验证，含挑战练习
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/workshop-tutorial/* ./my-workshop/
cd my-workshop
# 替换 {{占位符}} 为你的内容
npm install
npm run dev适用场景：技术选型、框架对比、方案评估、迁移决策
内容结构：方案A详解 → 方案B详解 → 深度对比 → 选型建议
布局特点：对比表格多，含决策树，数据驱动
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/comparison-analysis/* ./my-comparison/
cd my-comparison
# 替换 {{占位符}} 为你的内容
npm install
npm run dev适用场景：速查手册、API 文档、5分钟上手、入门指南
内容结构：简介 → 安装 → 5分钟入门 → 命令速查 → FAQ
布局特点：简洁直接，信息密度高，便于查阅
快速使用：
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/quickstart-guide/* ./my-quickstart/
cd my-quickstart
# 替换 {{占位符}} 为你的内容
npm install
npm run dev| 模板 | 适用场景 | 核心布局 | 内容侧重 |
|---|---|---|---|
| tool-tutorial | 工具教程 | page | 命令、配置 |
| tech-sharing | 技术分享 | two-cols, center | 故事、对比 |
| concept-explanation | 概念讲解 | page, two-cols | 原理、图解 |
| case-study | 案例研究 | page, two-cols | 数据、过程 |
| workshop-tutorial | 工作坊 | center | 动手实践、练习 |
| comparison-analysis | 对比分析 | two-cols, page | 方案对比、选型 |
| quickstart-guide | 快速入门 | page | 简洁、速查 |
# 运行初始化脚本
bash ~/.openclaw/workspace/ok-computer-skill/scripts/init-lecture.sh "讲座名称" ./my-lectures
# 进入项目
cd ./my-lectures/讲座名称
# 启动开发服务器
npm run dev# 选择适合你场景的模板
cp -r ~/.openclaw/workspace/ok-computer-skill/templates/tool-tutorial/* ./my-lecture/
# 或
# cp -r ~/.openclaw/workspace/ok-computer-skill/templates/tech-sharing/* ./my-lecture/
# 或
# cp -r ~/.openclaw/workspace/ok-computer-skill/templates/concept-explanation/* ./my-lecture/
# 或
# cp -r ~/.openclaw/workspace/ok-computer-skill/templates/case-study/* ./my-lecture/
# 或
# cp -r ~/.openclaw/workspace/ok-computer-skill/templates/workshop-tutorial/* ./my-lecture/
# 或
# cp -r ~/.openclaw/workspace/ok-computer-skill/templates/comparison-analysis/* ./my-lecture/
# 或
# cp -r ~/.openclaw/workspace/ok-computer-skill/templates/quickstart-guide/* ./my-lecture/
cd my-lecture
npm install
npm run dev访问 http://localhost:3030 预览幻灯片。
my-lecture/
├── slides.md # 幻灯片源文件 (Markdown)
├── handbook.md # 讲义文档 (Markdown)
├── package.json # 依赖配置
├── node_modules/ # 依赖目录 (自动生成)
└── dist/ # 构建输出 (自动生成)
Slidev 使用 Markdown 语法，通过 --- 分隔幻灯片。
---
layout: cover
---
# 讲座标题
:: subtitle ::
副标题内容
---
layout: page
---
# 页面标题
- 要点 1
- 要点 2
:: header ::
页面标注| 布局 | 用途 | 示例场景 |
|---|---|---|
cover |
封面页，结束页 | 讲座标题、讲师信息 |
disclaimer |
免责声明 | 开场说明 |
toc |
目录页 | 讲座大纲 |
section |
章节页 | 大章节分隔 |
page |
内容页 | 标准内容展示 |
center |
居中页 | 强调内容、金句 |
two-cols |
双栏页 | 对比内容 |
讲义与幻灯片分离，提供更详细的解释和补充材料。
# 讲座标题
## 课程信息
- **时间**: 2小时
- **目标**: 掌握 XXX 技能
- **前置知识**: XXX 基础
## 第一部分：XXX
### 1.1 概念介绍
详细解释...
### 练习
1. 练习题 1
2. 练习题 2
## 参考资料
- [链接 1](url)# 启动开发服务器
npm run dev
# 构建静态站点（用于部署）
npm run build
# 导出 PDF 幻灯片
npm run export
# 导出 PDF 讲义（需要安装 pandoc 和 xelatex）
npm run export:handbook
# 格式化 Markdown
npm run format幻灯片 PDF：
npm run export
# 输出: slides.pdf讲义 PDF（需要额外依赖）：
# Ubuntu/Debian
sudo apt install pandoc texlive-xetex fonts-noto-cjk
# macOS
brew install pandoc mactex
# 导出
npm run export:handbook
# 输出: handbook.pdf位于 templates/ 目录，7 套通用场景模板：
# 工具教程示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/tool-tutorial
# 技术分享示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/tech-sharing
# 概念讲解示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/concept-explanation
# 案例研究示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/case-study
# 工作坊示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/workshop-tutorial
# 对比分析示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/comparison-analysis
# 快速入门示例
cd ~/.openclaw/workspace/ok-computer-skill/templates/quickstart-guide位于 examples/docker-intro/，展示如何做一个具体的技术教程：
cd ~/.openclaw/workspace/ok-computer-skill/examples/docker-intro
npm install
npm run dev# 使用其他端口
npm run dev -- --port 3031# 安装 Playwright 依赖
npx playwright install-deps chromiumsudo apt install fonts-noto-cjk确保 slides.md 文件使用 UTF-8 编码。
- 每页一个核心概念 - 避免信息过载
- 使用列表代替长段落 - 更易阅读
- 代码示例简洁可运行 - 提供完整上下文
- 配合讲义补充细节 - 幻灯片展示要点
- 多用图表和代码 - 技术讲座的核心
- 关键信息用高亮 - 引导注意力
- 保持一致的风格 - 使用主题提供的组件
- 合理使用留白 - 不要填满每一页
| 讲座类型 | 推荐模板 | 原因 |
|---|---|---|
| Docker/Git 教程 | tool-tutorial | 命令演示多 |
| 项目复盘 | tech-sharing | 故事性强 |
| 算法讲解 | concept-explanation | 原理阐述 |
| 架构演进 | case-study | 数据支撑 |
| 培训课程 | workshop-tutorial | 分步练习 |
| 技术选型 | comparison-analysis | 对比全面 |
| API 文档 | quickstart-guide | 简洁速查 |
ok-computer-skill/
├── README.md # 本文档
├── SKILL.md # OpenClaw Skill 入口
├── PROCESS.md # 创建过程总结
├── template/ # 基础项目模板
│ ├── slides.md
│ ├── handbook.md
│ └── package.json
├── templates/ # 通用场景模板 (7套)
│ ├── tool-tutorial/ # 工具教程
│ ├── tech-sharing/ # 技术分享
│ ├── concept-explanation/ # 概念讲解
│ ├── case-study/ # 案例研究
│ ├── workshop-tutorial/ # 工作坊
│ ├── comparison-analysis/ # 对比分析
│ └── quickstart-guide/ # 快速入门
├── scripts/
│ └── init-lecture.sh # 初始化脚本
├── theme/
│ └── README.md # 主题说明
└── examples/
└── docker-intro/ # Docker 入门示例
- ✅ 新增 7 套通用场景模板
- tool-tutorial: 工具教程
- tech-sharing: 技术分享
- concept-explanation: 概念讲解
- case-study: 案例研究
- workshop-tutorial: 工作坊/动手实践
- comparison-analysis: 对比分析/技术选型
- quickstart-guide: 快速入门/速查手册
- ✅ 更新 SKILL.md 模板使用说明
- ✅ 初始版本发布
- ✅ 支持 WHULUG 主题
- ✅ 9 种内置布局
- ✅ 幻灯片 + 讲义双模式
- ✅ 初始化脚本
- ✅ Docker 入门示例
欢迎提交 Issue 和 PR！
- GitHub: （待填写）
- 邮箱: （待填写）
- 微信群: （待填写）