React+antd開發支持markdown的個人博客網站

前言

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

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

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

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

效果圖

• 首頁
  

• 文章詳情頁
  

• 評論
  

• 登錄
  

功能描述

已實現的功能

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

待實現功能

• 文章管理
• 發文
• 文檔類文章編寫功能
• …

後期重構

• 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實現。

最後

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