react框架学的差不多了,就想搭建一个博客,沉淀一下!记录走过的点点滴滴!
博客主要运用技术栈:
- react : 项目主框架
- redux : 状态管理
- reacr-router : 前端路由控制
- es6 : 项目中的JS语法
- Ant Design : 前端UI框架
- Axios : 异步请求数据处理
部署开发环境
- 安装node环境,官方地址:https://nodejs.org/en/ 。node中自带npm,无需另行安装。
- 全局安装官方提供的手脚架create-react-app
npm install -g create-react-app
//创建project
create-react-app projectName
//打开项目
npm start
博客的UI框架
使用Antd: https://ant.design/index-cn
博客数据源暂时来自于 issues
API:https://developer.github.com/v3/issues/
markdown渲染
运用了marked:https://github.com/chjj/marked
在博客中使用marked的语法:
import marked from 'marked';
commponentWillMount(){
marked.setOptions({
highlight: code => hljs.highlightAuto(code).value,
});
}
//把字符串插入DOM元素
<div dangerouslySetInnerHTML={{ __html: marked(item.body) }} />
代码高亮
代码高亮用的是highlight.js:https://github.com/isagalaev/highlight.js 。
//npm 安装
npm install highlight.js
highlight.js支持多种代码的颜色风格,可以在css中随意切换
@import '~highlight.js/styles/github.css';
在这可以看到每种语言的高亮效果和配色风格:https://highlightjs.org/
项目打包上线:npm run build