V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
aesen321
V2EX  ›  分享创造

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

  •  1
     
  •   aesen321 · 2019-04-03 03:35:06 +08:00 · 2594 次点击
    这是一个创建于 1341 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 呗

    8 条回复    2019-04-04 15:24:42 +08:00
    CasualYours
        1
    CasualYours  
       2019-04-03 08:12:39 +08:00 via Android
    顶一下
    kyuuseiryuu
        2
    kyuuseiryuu  
       2019-04-03 08:20:17 +08:00   ❤️ 5
    什么语言无所谓,博客这东西,做到最后都是在玩 CSS
    way2explore2
        3
    way2explore2  
       2019-04-03 08:38:01 +08:00 via Android
    有意思,想把这个和我的后端项目结合起来。
    tianyu94
        4
    tianyu94  
       2019-04-03 08:41:17 +08:00 via iPhone
    支持下
    aimerforreimu
        5
    aimerforreimu  
       2019-04-03 14:17:45 +08:00 via Android
    cool,考完研想用想给它用 go 写个后端
    aesen321
        6
    aesen321  
    OP
       2019-04-03 16:04:46 +08:00
    KeroZhai
        7
    KeroZhai  
       2019-04-04 09:34:42 +08:00
    已 star 后端狗不明觉厉 准备和前端女朋友一起向大佬学习
    hk3475
        8
    hk3475  
       2019-04-04 15:24:42 +08:00
    点个赞 样式调的不错
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2810 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 15:10 · PVG 23:10 · LAX 07:10 · JFK 10:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.