Write Down

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

项目 Github / Demo
提示：Write Down 对手机的兼容性不是太好，请尽量在电脑或者平板上进行体验

截图

文章列表页

文章阅读页

列举几个本人觉得比较不错的功能

编辑与预览的 toggle （用了一点过渡效果，而不是很僵硬的展开、收缩）
支持编辑与预览的滚动同步（原本是用了一个滚动同步的组件实现了功能，但因为前面 toggle 功能对 width 用了 transition，导致单个 panel 的高度在宽度很小的时候，它的高度变得无限高，滚动同步就会变得不正常了，我通过一些手段做了 hack 修复了这个问题）
编辑 markdown 后，未保存跳转至其他页面时，会有保存提示
通过关键词来搜索图片，将选中的图片，设置为阅读页标题下的图片以及文章列表页的封面图片（这是利用 Unsplash API 实现的功能，显示图片的搜索结果时，采用类似于 Pinterest 的 grid ）
文件导出（支持 markdown 和跟在阅读页看到的样式一致的 HTML 文件）
本地存储（我原本的想法是做一个类似于 Gatsby 的静态博客系统，但我又想直接在页面上编辑 markdown，于是就用本地存储将 markdown 存为一个 String 来解决文件存储的问题。不过，这样导致了在 DEMO 里写的文章只有自己能看到，除非为它配置一个 server ）

更多内容，请到README.md进行了解

项目背景介绍

这个项目，我做了 4 个多月，差不多 5 个月吧（我原来有 ES6，CSS 的基础，看完 React 的文档后开始做，中间用了三周时间去学习 Redux，其他时间是边查边学边做，这里用到的第三方库、工具绝大部分以前都没用过的，webpack 以前写过一些简单的配置，这些在 create-react-app 里都是配好的，不用手写配置。）。

开发过程流水账：
从零开始配置文本编辑器（ code mirror ），选用 markdown parser （ markdown-it ）的插件，找来 github-markdown.css 文件，找合适的 code block 代码高亮的配色主题（替换 github-markdown.css 代码块配色），自己调 markdown 编辑器的配色主题（ code mirror 的配色主题）。之后围绕编辑器做功能，文章其他信息的表单（标题，摘要，标签），题图的设置（使用 Unsplash API，通过流量申请），文件导出（ FileSaver.js ）等。设计文章列表页，文章阅读页（选用文章字体，最后找到了 Medium 用的字体）。用上 redux 管理数据，使用 PouchDB 做本地存储（了解原理，设计存储结构，需要建立哪些索引，它跟 mongoDB 有点区别的）。开始做文章的保存，假的用户登录系统。花时间最长的应该如何用 Redux 管理数据，至少重构了两次吧。

这个项目大概在一个多月前已经完成了，之后我跑去复习，准备面试。最近几天，修复和完善了一些功能。

还有一些不足的地方：

没有测试文件（我还没来得及去学 Jest，之后补上吧）
对于手机用户的兼容性不好（我没想好要怎么改，为了防止内容挤在一起，给 app 设置了一个min-width）
文章列表分页显示没做（主要是跟 PouchDB 有关，有些问题，我还没想清楚）
假的用户登录系统（注册、登录验证）

主要是出于工作量的考虑，没有做 server。如果加入了 server 的话，就变成了一个供多人使用真正的博客系统，会类似于简书或者 Medium，那样要考虑的东西太多了，比如完整的用户系统，首页的文章流，文章搜索，评论系统等。

如果有人真的感兴趣的话，那可以考虑考虑。

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

如果觉得它有点意思的，给个 star 呗

用 React 做了一个简易的 markdown 博客应用

Write Down

截图