版本: v1.0 更新日期: 2026-04-03 适用用户: 所有PostWaver用户
1. 启动Web UI
cd post_waver
pnpm dev
2. 访问界面
http://localhost:51733. 基本工作流
扫描文章 → 选择平台 → 预览内容 → 复制到剪贴板 → 发布到目标平台
4. 快捷操作
Ctrl/Cmd + K - 快速命令面板Ctrl/Cmd + B - 切换侧边栏Ctrl/Cmd + S - 保存当前状态PostWaver Web UI 是一个现代化的单页应用，提供可视化的内容管理和发布界面。
PostWaver Web UI
├── 📝 文章管理 (Post Management)
│ ├── 文章列表
│ ├── 文章详情
│ └── 文章预览
├── 🚀 发布工作台 (Publish Workspace)
│ ├── 平台选择
│ ├── 内容预览
│ └── 批量发布
├── 🎨 模板管理 (Template Manager)
│ ├── 注入模板
│ ├── 模板编辑
│ └── 模板预览
└── 📊 已发布管理 (Published Manager)
├── 平台ID管理
├── 发布状态跟踪
└── 相关链接生成
首页 (/)
└── 重定向到 /publish
路由导航：
/ → 发布工作台（首页）
/posts → 文章列表
/posts/:id → 文章详情
/preview/:postId → 文章预览
/publish → 发布工作台
/publishing/:batchId → 批量发布状态
/templates → 模板管理器
/published → 已发布文章管理
发布工作台是PostWaver的核心界面，提供一站式的文章发布体验。
┌─────────────────────────────────────────────────────────┐
│ PostWaver 发布工作台 │
├──────────────┬──────────────────────────────────────────┤
│ │ 平台选择栏 │
│ 文章列表 │ [掘金] [CSDN] [知乎] [微信] [HTML] │
│ 侧边栏 │ ────────────────────────────────────── │
│ │ │
│ 🔍 扫描文章 │ 内容预览区 │
│ │ ┌────────────────────────────────────┐ │
│ ☐ 文章1 │ │ │ │
│ ☑ 文章2 │ │ 转换后的内容预览 │ │
│ ☐ 文章3 │ │ │ │
│ │ │ │ │
│ [相关设置] │ └────────────────────────────────────┘ │
│ │ [复制内容] [刷新预览] [批量发布] │
└──────────────┴──────────────────────────────────────────┘
操作步骤：
content/posts/ 目录扫描功能：
文章状态：
draft - 草稿published - 已发布archived - 已归档PostWaver支持5个发布平台：
| 平台 | 标识 | 特点 |
|---|---|---|
| 掘金 | juejin |
技术文章首选，支持Markdown |
| CSDN | csdn |
国内最大技术社区 |
| 知乎 | zhihu |
知识分享平台 |
| 微信公众号 | wechat |
需要HTML格式 |
| HTML | html |
通用HTML输出 |
选择平台：
选择微信平台时，会显示额外的主题选择：
微信公众号主题：
┌────────────────────────────────┐
│ 🍊 橙心 (orangeheart) │ ← 默认主题
│ 🌊 清新海洋 (clearOcean) │
│ 🌸 樱花粉 (sakura) │
│ 🌲 深林绿 (deepForest) │
│ 🌙 暗夜模式 (darkMode) │
└────────────────────────────────┘
主题说明：
模板功能：
使用模板：
模板示例：
# 欢迎来到我的技术博客
本文首发于[博客名称]，转载请注明出处。
功能说明：
启用方式：
分屏预览：
┌─────────────────────────────────────────────────────────┐
│ 原文内容 │ 转换后内容 │
│ ┌──────────────┐ │ ┌──────────────┐ │
│ │ Markdown源 │ │ │ 平台适配后 │ │
│ │ │ │ │ │ │
│ │ # 标题 │ │ │ # 标题 │ │
│ │ │ │ │ │ │
│ │ 正文内容... │ │ │ 正文内容... │ │
│ │ │ │ │ │ │
│ └──────────────┘ │ └──────────────┘ │
│ │ │
│ [显示源文件] │ [复制转换后内容] │
└─────────────────────────────────────────────────────────┘
预览特性：
批量操作流程：
批量发布界面：
┌─────────────────────────────────────────────────────────┐
│ 批量发布确认 │
│ ───────────────────────────────────────────────────── │
│ 平台: 掘金 │
│ 文章数: 3篇 │
│ │
│ 文章列表: │
│ ☑ 文章1.md │
│ ☑ 文章2.md │
│ ☑ 文章3.md │
│ │
│ 模板: 默认模板 │
│ 相关链接: ✅ 启用 │
│ │
│ [取消] [开始发布] │
└─────────────────────────────────────────────────────────┘
发布进度：
列表视图：
┌─────────────────────────────────────────────────────────┐
│ 📝 文章列表 [+ 新建文章] │
│ ───────────────────────────────────────────────────── │
│ │
│ 📄 2026-04-03 如何使用PostWaver [查看] [编辑] │
│ 标签: post-waver, tutorial │
│ 状态: published │
│ │
│ 📄 2026-04-02 TypeScript入门指南 [查看] [编辑] │
│ 标签: typescript, frontend │
│ 状态: draft │
│ │
│ [加载更多...] │
└─────────────────────────────────────────────────────────┘
列表功能：
详情页面：
┌─────────────────────────────────────────────────────────┐
│ ← 返回 如何使用PostWaver [编辑] [删除] │
│ ───────────────────────────────────────────────────── │
│ │
│ 元信息: │
│ • 创建时间: 2026-04-03 │
│ • 标签: post-waver, tutorial │
│ • 状态: published │
│ │
│ 平台转换: │
│ [掘金] [CSDN] [知乎] [微信] [HTML] │
│ │
│ 平台ID管理: │
│ 掘金: 7123456789 [编辑] │
│ CSDN: [添加ID] │
│ 知乎: [添加ID] │
│ │
│ 相关文章: │
│ • TypeScript入门指南 │
│ • React Hooks详解 │
│ │
│ [复制掘金版本] [复制CSDN版本] [复制知乎版本] │
└─────────────────────────────────────────────────────────┘
详情功能：
独立预览页面：
模板列表：
┌─────────────────────────────────────────────────────────┐
│ 🎨 注入模板管理 [+ 新建模板] │
│ ← 返回 │
│ ───────────────────────────────────────────────────── │
│ │
│ ✅ 欢迎语模板 (启用) [编辑] [删除] │
│ 欢迎来到我的技术博客，本文首发于... │
│ 创建于: 2026-04-01 │
│ │
│ ⭕ 默认签名 (禁用) [编辑] [删除] │
│ 作者：张三 | 转载请注明出处 │
│ 创建于: 2026-03-28 │
│ │
│ ✅ 技术分享模板 (启用) [编辑] [删除] │
│ 本文为技术分享，如有问题欢迎讨论... │
│ 创建于: 2026-03-25 │
│ │
└─────────────────────────────────────────────────────────┘
模板功能：
编辑界面：
┌─────────────────────────────────────────────────────────┐
│ ← 返回 编辑注入模板 保存 │
│ ───────────────────────────────────────────────────── │
│ │
│ 模板名称: │
│ [欢迎语模板 ] │
│ │
│ 模板描述: │
│ [用于文章开头的欢迎语 ] │
│ │
│ 模板内容 (Markdown格式): │
│ ┌─────────────────────────────────────────────────┐ │
│ │ # 欢迎来到我的技术博客 │ │
│ │ │ │
│ │ 本文首发于[博客名称]，转载请注明出处。 │ │
│ │ │ │
│ │ > 如果觉得有帮助，欢迎点赞和分享！ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 字符数: 45/500 ✅ 长度符合要求 │
│ │
│ 平台预览: │
│ [掘金] [CSDN] [知乎] [微信] [HTML] │
│ ┌─────────────────────────────────────────────────┐ │
│ │ # 欢迎来到我的技术博客 │ │
│ │ 本文首发于[博客名称]，转载请注明出处。 │ │
│ │ > 如果觉得有帮助，欢迎点赞和分享！ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ [保存] [预览效果] [取消] │
└─────────────────────────────────────────────────────────┘
编辑特性：
常见使用场景：
# 欢迎来到我的技术博客
本文首发于[PostWaver](https://github.com/Charliechen114514/post_waver)，转载请注明出处。
> 如果觉得有帮助，欢迎点赞收藏！
## 前置知识
在阅读本文前，建议先了解：
- [相关主题1]
- [相关主题2]
## 学习目标
阅读本文后，你将学会：
- [ ] 目标1
- [ ] 目标2
本文是「XX系列」的第N篇：
1. [第一篇：XXX](link1)
2. [第二篇：YYY](link2)
3. **第三篇：ZZZ** (当前文章)
管理界面：
┌─────────────────────────────────────────────────────────┐
│ 📊 已发布文章管理 │
│ ← 返回 │
│ ───────────────────────────────────────────────────── │
│ │
│ 文章: 如何使用PostWaver │
│ ID: post-2026-04-03-how-to-use-postwaver │
│ │
│ 平台发布状态: │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 平台 │ ID │ 状态 │ 操作 │ │
│ ├─────────────────────────────────────────────────┤ │
│ │ ⛏️ 掘金 │ 7123456789 │ ✅ 已发布│ [编辑]│ │
│ │ 📝 CSDN │ 12345678 │ ✅ 已发布│ [编辑]│ │
│ │ 🧠 知乎 │ 45678901 │ ✅ 已发布│ [编辑]│ │
│ │ 💬 微信 │ (手动管理) │ ❓ 未知 │ [编辑]│ │
│ │ 🌐 HTML │ (自动生成) │ ✅ 已发布│ [查看]│ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ [+ 添加平台ID] [批量导入] [导出记录] │
└─────────────────────────────────────────────────────────┘
管理功能：
自动生成功能：
链接格式：
---
**相关文章**：
- [PostWaver入门指南](https://juejin.cn/post/7123456789)
- [TypeScript最佳实践](https://blog.csdn.net/xxx/article/details/12345678)
- [React Hooks详解](https://zhuanlan.zhihu.com/p/45678901)
**上一篇**：[如何选择前端框架](https://juejin.cn/post/7111111111)
**下一篇**：[Next.js实战教程](https://juejin.cn/post/7133333333)
全局快捷键：
Ctrl/Cmd + K - 打开命令面板Ctrl/Cmd + B - 切换侧边栏Ctrl/Cmd + S - 保存当前状态Ctrl/Cmd + / - 搜索文章编辑快捷键：
Ctrl/Cmd + Shift + P - 切换预览Ctrl/Cmd + Enter - 发布文章Ctrl/Cmd + Shift + C - 复制内容快速操作：
┌─────────────────────────────────────────────────────────┐
│ > │
│ ───────────────────────────────────────────────────── │
│ │
│ 📝 文章操作 │
│ • 新建文章... Ctrl+N │
│ • 扫描文章 Ctrl+R │
│ • 搜索文章... Ctrl+/ │
│ │
│ 🚀 发布操作 │
│ • 切换到掘金平台 Ctrl+1 │
│ • 切换到CSDN平台 Ctrl+2 │
│ • 切换到知乎平台 Ctrl+3 │
│ • 批量发布... Ctrl+Shift+P │
│ │
│ 🎨 模板操作 │
│ • 打开模板管理器 Ctrl+T │
│ • 新建模板... Ctrl+Shift+N │
│ │
│ ⚙️ 设置 │
│ • 打开设置 Ctrl+, │
│ • 切换主题 Ctrl+D │
│ │
└─────────────────────────────────────────────────────────┘
文章搜索：
过滤选项：
高级搜索语法：
# 标题搜索
title:PostWaver
# 标签搜索
tag:tutorial
# 状态搜索
status:published
# 组合搜索
title:PostWaver tag:tutorial status:published
# 日期范围
date:2026-04-01..2026-04-30
批量导入：
# 导入平台ID
POST /api/platform-id/import
Content-Type: application/json
{
"posts": [
{
"postId": "post-123",
"platformIds": {
"juejin": "7123456789",
"csdn": "12345678"
}
}
]
}
批量导出：
# 导出所有平台ID
GET /api/platform-id/export
# 返回格式
{
"posts": [
{
"postId": "post-123",
"title": "文章标题",
"platformIds": {
"juejin": {
"id": "7123456789",
"url": "https://juejin.cn/post/7123456789",
"publishedAt": "2026-04-03T10:00:00Z"
}
}
}
]
}
高效发布流程：
1. 写作阶段
└─ 使用本地Markdown编辑器写作
└─ 保存到 content/posts/ 目录
2. 预览阶段
└─ 打开Web UI
└─ 扫描文章
└─ 逐个预览各平台效果
3. 优化阶段
└─ 调整注入模板
└─ 检查图片占位符
└─ 启用相关链接
4. 发布阶段
└─ 选择目标平台
└─ 复制转换后内容
└─ 粘贴到目标平台编辑器
└─ 上传本地图片
└─ 发布文章
5. 记录阶段
└─ 记录平台文章ID
└─ 更新发布状态
模板分类：
命名规范：
通用类：
- 01-默认欢迎语
- 02-版权声明
技术类：
- 11-技术分享引导
- 12-代码示例说明
系列类：
- 21-系列文章导航
- 22-前后文关联
批量发布建议：
A: 检查：
post_waver 根目录pnpm installA: 确保：
content/posts/ 目录.mdA: 尝试：
A: 检查：
A: 确保：
A: 解决方法：
问题：界面显示错乱
问题：按钮无响应
问题：扫描失败
问题：预览加载失败
提升性能的方法：
主题开发：
未来支持的插件：
文章相关：
# 扫描文章
POST /api/workflow/scan
# 获取文章列表
GET /api/posts
# 获取文章详情
GET /api/posts/:id
# 转换文章
POST /api/transform
模板相关：
# 获取模板列表
GET /api/templates
# 创建模板
POST /api/templates
# 更新模板
PUT /api/templates/:id
# 删除模板
DELETE /api/templates/:id
平台ID相关：
# 获取平台ID
GET /api/platform-id/:postId
# 更新平台ID
PUT /api/platform-id/:postId
# 批量导入
POST /api/platform-id/import
文档版本: v1.0 最后更新: 2026-04-03 维护者: PostWaver项目