用React实现一个简易的markdown博客应用

Write Down

一个使用 React 编写的、基于 markdown 的博客应用。

Write Down 的文章仅支持使用 markdown 进行编写。其中 markdown 语法标准为 GFM，且额外支持几种功能，如 Emoji 表情、上下标文字等（具体可到 Demo 里的 full feature example 中进行查看）

Repo

Demo

Write Down 对手机的兼容性不是太好，请尽量在电脑或者平板上进行体验

Demo

在登录之后，才能创建新文章和看到文章的编辑选项。以下为测试账号：

username	password
test	123456

---

Article List

---

Article Reading Page

功能列表

文章系统

• 文章编辑
  • markdown 的编辑
    • 编辑与预览的模式切换
    • 编辑框与预览框的滚动同步
    • 根据 markdown 语法给出相应的代码高亮（自己做的 CodeMirror 配色主题）
    • 编辑 markdown 的保存提醒
    • 支持语法的快捷输入（内置snippet）
  • 其他元素的编辑
    • 设置文章标签
    • 设置文章内容摘要
    • 通过关键字搜索与设置题图（及文章列表封面图片）
    • 文章信息预览（把鼠标悬停在 Info Setting Button 上显示）
• 文章管理
  • 新建文章
  • 发布文章\存至草稿箱
  • 更新文章
  • 删除文章
• 文章导出
  • markdown文件
  • 带样式的html文件
• 文章存储
  • 本地存储

用户系统

• 用户登录\登出 (目前仅支持特定用户的登录)

功能演示

User Login

---

Article Editing Page

---

Article Editing Other Header Buttons

---

Article Editing Info Setting

另外有两个 Gif 比较大，不能上传，请到 Repo 查看

---

其他资料

• 你可能会问的问题
• Write Down的数据 - ProcessOn

项目使用的框架、工具与第三方库

• JS 框架 - React
• UI 组件 - Ant Design
• 状态管理器 - Redux
• 前端路由 - React-Router
• 文本编辑器 - CodeMirror
• markdown 解释器 - markdown-it
• 代码高亮 - Prism
• 本地存储 - PouchDB
• 图片搜索 - Unsplash
• 图片显示(类似 Pinterest) - react-stack-grid
• 文件导出 - File Saver
• 日期转换 - DayJS

---

ps： 文章的内容有所删减，完整内容请查看 README-zh.md

欢迎各位留言，交流学习讨论

如果你喜欢这个应用，给我一个star吧!

转载于:https://juejin.im/post/5ca329966fb9a05e1a7a9c93