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实现。

最后

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

你可能感兴趣的:(React+antd开发支持markdown的个人博客网站)