友野工坊 · 文章编辑器

特性#

• 📝 Markdown 实时编辑与预览：左侧编辑，右侧即时渲染，支持代码高亮
• 🏷️ Front-matter 元数据管理：支持标题、日期、标签、分类、封面图片、草稿状态等常见字段
• 🎨 深色模式：跟随系统偏好或手动切换，护眼舒适
• 💾 本地草稿存储：一键保存草稿至浏览器本地存储，随时恢复
• 📂 导入/导出：导入已有 .md 文件继续编辑，导出为带完整 Front-matter 的 Markdown 文件
• ✨ 快捷插入：工具栏提供加粗、斜体、链接、图片、代码块快捷插入，提升写作效率
• 🔍 完整预览：底部展示包含 YAML 元数据的完整 Markdown 源码，便于检查
• 🌐 响应式设计：适配桌面端与移动端，界面简洁现代

快速开始#

1. 克隆或下载本仓库中的 index.html 文件。
2. 双击 index.html 文件，使用现代浏览器（Chrome、Firefox、Safari、Edge 等）打开。
3. 开始书写你的博客内容！

使用方法#

技术栈#

• 前端框架：Vue 3 (CDN)
• 样式：Tailwind CSS + 自定义毛玻璃效果
• Markdown 解析：Marked.js
• 代码高亮：Highlight.js
• YAML 处理：js-yaml
• 图标：FontAwesome 6

项目结构#

1
├── index.html # 单文件应用，包含所有 HTML/CSS/JS
2
└── README.md # 项目说明文档

自定义与扩展#

你可以自由修改 index.html 中的样式、添加新的 Front-matter 字段或调整编辑器功能。所有代码均为原生实现，无需构建工具。

注意事项#

• 文章密码功能仅在前端记录，实际应用中需结合后端进行验证。
• 导出时，文件名中的特殊字符（如 /、: 等）会被自动替换为 -。
• 深色模式会保存至 localStorage，下次打开时自动应用。

贡献#

欢迎提交 Issue 或 Pull Request！如有改进建议，请通过 GitHub 项目页反馈。

许可证#

MIT License © 2025 Chuc-Jie