一个专业的微信公众号文章排版工具,支持Markdown语法编写,一键生成美观的排版效果。
- 📝 简约文档模板 - 适合文字为主的技术文档、新闻资讯
- 🖼️ 图文并茂模板 - 适合图片展示的产品介绍、美食分享
- 🎨 智能模板推荐 - 根据内容特征自动推荐最合适的模板
- 📱 实时预览效果 - 所见即所得的编辑体验
- 🚀 一键导出HTML - 生成可直接复制到公众号的HTML代码
- 💾 双模式存储 - 本地/服务器/混合模式自由切换
- 🔄 版本历史管理 - 自动保存版本,支持随时恢复
- 🖼️ 智能图片压缩 - 自动压缩上传图片,节省空间
- 📊 存储状态监控 - 实时显示存储状态,一键切换模式
- 🎯 固定元素自动插入 - 品牌LOGO、二维码等固定资源自动添加
# 1. 安装依赖 npm install # 2. 启动开发服务器 npm run dev # 3. 访问应用 # 浏览器打开 http://localhost:3001
✅ 所有数据保存在浏览器本地,离线可用!
# 1. 启动后端服务 cd server npm install npm run db:generate npm run db:migrate npm run dev # 2. 启动前端(新终端) cd .. npm install npm run dev # 3. 访问应用 # 浏览器打开 http://localhost:3001 # 在右下角切换到"服务器模式"
npm run build
- 编写内容: 在左侧编辑器中输入Markdown格式的文章内容
- 选择模板: 在模板选择器中选择合适的排版模板
- 配置信息: 设置文章标题、作者、日期等基本信息
- 添加资源: 配置品牌LOGO、二维码等固定资源链接
- 实时预览: 在右侧预览区域查看最终排版效果
- 导出使用: 点击"复制HTML"按钮,将代码粘贴到公众号编辑器
- 标题:
# 一级标题,## 二级标题,### 三级标题 - 文字格式:
**粗体**,*斜体*,***粗斜体*** - 链接:
[链接文字](https://example.com) - 图片:
 - 列表:
- 无序列表,1. 有序列表 - 引用:
> 引用内容 - 代码:
行内代码, ```代码块```
- 适用场景: 技术文档、新闻资讯、教程指南
- 特点: 简洁清晰的排版,突出文字内容
- 样式: 左对齐布局,蓝色链接高亮,清晰的层次结构
- 适用场景: 产品介绍、美食分享、旅游攻略
- 特点: 图片优先的展示方式,统一的图片处理
- 样式: 居中布局,图片+标题+描述的重复结构
- 前端框架: React 18 + TypeScript
- 构建工具: Vite
- Markdown解析: marked + DOMPurify
- 样式方案: CSS Modules
- 状态管理: React Context + useReducer
- 部署方式: 纯前端应用,支持静态托管
src/
├── components/ # React组件
│ ├── Editor.tsx # Markdown编辑器
│ ├── Preview.tsx # 实时预览
│ └── TemplateSelector.tsx # 模板选择器
├── templates/ # 模板配置
│ ├── simple-doc.ts # 简约文档模板
│ └── image-text.ts # 图文并茂模板
├── utils/ # 工具函数
│ ├── template-engine.ts # 模板引擎
│ └── app-context.tsx # 状态管理
├── types/ # TypeScript类型定义
└── App.tsx # 主应用组件
- 效率优先 - 10分钟完成专业排版,告别重复劳动
- 品质一致 - 固定模板确保每篇文章视觉统一
- 操作简化 - 智能识别内容类型,自动应用样式
- 无需登录 - 纯前端应用,数据安全可控
- 易于扩展 - 模块化架构,方便添加新模板
在模板设置中配置以下资源链接:
- 品牌LOGO: 显示在文章顶部的品牌标识
- 二维码: 显示在文章底部的关注二维码
- 分割线: 用于章节分隔的装饰图片
title: 文章标题author: 作者姓名date: 发布日期logo: LOGO图片链接qrcode: 二维码图片链接divider: 分割线图片链接
- 更多模板样式(商务风、科技风、文艺风)
- 图片批量处理和CDN集成
- 微信公众号API对接,一键发布
- 模板自定义编辑器
- 团队协作功能
- 文章数据统计分析
MIT License - 欢迎贡献代码和建议!
- Fork 本仓库
- 创建功能分支:
git checkout -b feature/amazing-feature - 提交更改:
git commit -m 'Add some amazing feature' - 推送分支:
git push origin feature/amazing-feature - 提交 Pull Request
开始你的公众号创作之旅吧! 🚀