完全原创、独立完成的个人站点的后端。
- Material Design 风格,自适应于不同设备的浏览器
- 可编辑和展示文章标题、摘要、Markdown 内容、标签和创建日期
- 可在编辑器内实时预览 Markdown 内容
- 支持图片的上传和托管
- 管理员可创建或编辑文章,并管理访客在文章下的评论
- 访客无需注册即可对文章进行点赞、评论
- 根据浏览器指纹控制访客在一定时间内的评论数
- 支持按指定的标签类别展示文章,阅读时展示文章的索引
- 根据配置展示 GitHub 作品、社交资料和个人简历
前端:
- 使用 react-redux 处理数据的渲染和单向流动
- 使用 redux-thunk 和 redux-action-tools 处理异步 action
- 使用 material-ui-next 组件库和 material-ui-icons 图标库实现全站的 Material Design 风格
- 使用 fingerprint.js 作为客户端的访客身份标识
- 使用 react-syntax-highlighter 实现展示文章时的代码高亮
- 使用 marked 渲染文章的 Markdown 内容为 HTML
- 使用 axios 处理客户端 HTTP 请求
- 使用 node-sass-chokidar 转译 SCSS 为 CSS
后端:
- 使用 mini-express(我的另一个项目)作为简易的服务器框架
- 使用 mongodb 存取数据
- 使用 mongoose 简化对 MongoDB 的操作
- 使用 shortid 生成文档的 _id
请注意 material-ui-next 组件库的 api 尚不稳定,建议不要安装高于当前 package.json 中的版本。
-
安装 mongodb
-
进入 react-material-blog 项目
npm i
npm run scss
npm run dev
- 进入 react-material-blog-server 项目
npm i
npm run dev
- 在
localhost:3000
查看。
桌面端:
移动端: