React+antd开发支持markdown的个人博客网站

前言

作为一个技术开发者，我们很有必要经常归纳总结。而归纳总结最好的方式就是写技术博文。强化自己的技术栈。虽然在今天，各种可以写技术的网站很多很多。但是想拥有自己一片天地的朋友，还是可以搭建一个的。下面就是我自己学习React后重构了自己的博客。

该项目基于react+antd+dva+umi实现。项目已经开源。

源代码：https://github.com/immisso/Blog

线上预览：https://www.immisso.com

效果图

• 首页

  
  image

• 文章详情页

  
  image

• 评论

  
  image

• 登录

  
  image

功能描述

已实现的功能

• 登录
• 注册
• 分类
• 文章列表
• 作者个人信息
• 点赞评论
• 留言
• 文章详情
• 代码高亮
• 文章详情目录

待实现功能

• 文章管理
• 发文
• 文档类文章编写功能
• ...

后期重构

• hooks

技术栈

该项目采用前后端分离技术。目前github上暂时只开源了前端部分。服务端采用Python开发，将会在后期陆续开源出来。为了保存网站的完整显示。使用了mock数据。数据来源都是自己博客网站上的数据。主要功能实现模块包括

• react 16.8.6
• antd 3.19.5
• umi 2.7.7
• dva ^2.6.0-beta.6
• marked 0.7.0
• highlight.js 9.15.10

项目

该项目使用umi开发，项目也是使用umi的脚手架创建，创建命令

yarn create umi

更多umi相关移步umi文档

语法高亮

文章详情页代码语法高亮，采用highlight.js实现，通过marked模块对markdown进行转化。当然语法高亮也可以通过prismjs实现。

最后

许多功能会后续逐渐完善，这不仅仅是一个小小的博客网站。也是学习的一个历程。逐渐提高自己的过程。