前言

作為一個技術開發(fā)者，我們很有必要經常歸納總結。而歸納總結最好的方式就是寫技術博文。強化自己的技術棧。雖然在今天，各種可以寫技術的網站很多很多。但是想擁有自己一片天地的朋友，還是可以搭建一個的。下面就是我自己學習React后重構了自己的博客。

該項目基于react+antd+dva+umi實現。項目已經開源。

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

線上預覽：https://www.immisso.com

效果圖

• 首頁

  
  
  image

• 文章詳情頁

  
  
  image

• 評論

  
  
  image

• 登錄

  
  
  image

功能描述

已實現的功能

• 登錄
• 注冊
• 分類
• 文章列表
• 作者個人信息
• 點贊評論
• 留言
• 文章詳情
• 代碼高亮
• 文章詳情目錄

待實現功能

• 文章管理
• 發(fā)文
• 文檔類文章編寫功能
• ...

后期重構

• hooks

技術棧

該項目采用前后端分離技術。目前github上暫時只開源了前端部分。服務端采用Python開發(fā)，將會在后期陸續(xù)開源出來。為了保存網站的完整顯示。使用了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開發(fā)，項目也是使用umi的腳手架創(chuàng)建，創(chuàng)建命令

yarn create umi

更多umi相關移步umi文檔

語法高亮

文章詳情頁代碼語法高亮，采用highlight.js實現，通過marked模塊對markdown進行轉化。當然語法高亮也可以通過prismjs實現。

最后

許多功能會后續(xù)逐漸完善，這不僅僅是一個小小的博客網站。也是學習的一個歷程。逐漸提高自己的過程。