前言

此 blog 项目是基于 react 全家桶 + Ant Design 的，项目已经开源，项目地址在 github 上。

1. 效果

效果图：

pc 端
移动端适配

完整效果请看：http://biaochenxuying.cn/main.html

2. 功能描述

2.1 已经实现功能

登录
注册
文章列表
标签分类
个人介绍
点赞与评论
留言
时间轴
发文（支持 MarkDown 语法）
文章详情展示（支持代码语法高亮）

2.2 待实现功能

文章归档
文章分类
文章详情的目录
移动端适配
升级 webpack 版本到 4.X

3. 前端技术

3.1 主要技术

react： 16.5.2
antd： 3.9.3
react-router:：4.3.1
webpack： 3.8.1
axios：0.18.0
redux: 4.0.0
highlight.js： 9.12.0
marked：0.5.1

4. 项目搭建

项目是按 antd 推荐的教程来搭建的：antd 在 create-react-app 中使用 , 实现了按需加载组件代码和样式。

5. 主要项目结构

- components
  - article 文章详情
  - articles 文章列表
  - comments 评论
  - loadEnd 加载完成
  - loading 加载中
  - login 登录
  - message 留言
  - nav 导航
  - register 注册
  - slider 右边栏（博主 logo 、链接和标签等）
  - timeLine 时间轴
- router 路由
- store redux 的状态管理
- utils 封装的常用的方法
- views 框架页面

6. markdown 渲染

markdown 渲染效果图:

react 相关的支持 markdown 语法的有 react-markdown，但不支持表格的渲染，所以没用。

markdown 渲染采用了开源的 marked，代码高亮用了 highlight.js 。

用法：

第一步：npm i marked highlight.js --save

npm i marked highlight.js --save

第二步：导入

import marked from 'marked';
import hljs from 'highlight.js';

第三步：设置

componentWillMount() {
		// marked相关配置
		marked.setOptions({
			renderer: new marked.Renderer(),
			gfm: true,
			tables: true,
			breaks: true,
			pedantic: false,
			sanitize: true,
			smartLists: true,
			smartypants: false,
			highlight: function(code) {
				return hljs.highlightAuto(code).value;
			},
		});
	}

第四步：

<div className="content">
	<div
		id="content"
		className="article-detail"
		dangerouslySetInnerHTML={{
		      __html: this.state.articleDetail.content ? marked(this.state.articleDetail.content) : null,
			}}
		/>
	</div>

第五步：引入 monokai_sublime 的 css 样式

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">

第六步：对 markdown 样式的补充

如果不补充样式，是没有黑色背景的，字体大小等也会比较小，图片也不会居中显示

/*对 markdown 样式的补充*/
pre {
    display: block;
    padding: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #abb2bf;
    background: #282c34;
    word-break: break-all;
    word-wrap: break-word;
    overflow: auto;
}
h1,h2,h3,h4,h5,h6{
    margin-top: 1em;
    /* margin-bottom: 1em; */
}
strong {
    font-weight: bold;
}

p > code:not([class]) {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}
p img{
    /* 图片居中 */
    margin: 0 auto;
    display: flex;
}

#content {
    font-family: "Microsoft YaHei",  'sans-serif';
    font-size: 16px;
    line-height: 30px;
}

#content .desc ul,#content .desc ol {
    color: #333333;
    margin: 1.5em 0 0 25px;
}

#content .desc h1, #content .desc h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#content .desc a {
    color: #009a61;
}

6. 主页的满屏飘花洒落的效果

大家也看到了，主页的满屏动态飘花洒落的效果很棒吧，这效果我也是网上找的，是在单独的一个 main.html 文件上的，代码链接如下：

主页的满屏飘花洒落的效果

7. 注意点

7.1 打包的配置

因为项目是用了 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案) 来打包了，所以如果你想修改 webpack.config.dev.js 和 webpack.config.prod.js 的配置，打包后可能看不到想要的效果，因为 react-app-rewired 打包时，是根据根目录的 config-overrides.js 来进行打包，所以要修改 webpack 的配置的话，请修改 config-overrides.js 。

比如：关闭 sourceMap 和支持装饰器

config.devtool = false; // 关闭 sourceMap 
config = injectBabelPlugin('babel-plugin-transform-decorators-legacy', config); // 支持装饰器

7.2 关于页面

对于关于的页面，其实是一篇文章来的，根据文章类型 type 来决定的，数据库里面 type 为 3 的文章，只能有一篇就是博主介绍；达到了想什么时候修改内容都可以。

所以当 this.props.location.pathname === '/about' 时就是请求类型为博主介绍的文章。

type: 3, // 文章类型: 1：普通文章；2：是博主简历；3 ：是博主简介；

8. Build Setup ( 建立安装 )

# install dependencies
npm install 

# serve with hot reload at localhost: 3000
npm start 或者 yarn start

# build for production with minification
npm run build 或者 yarn run build

如果要看完整的效果，是要和后台项目 blog-node 一起运行才行的，不然接口请求会失败。

虽然引入了 mock 了，但是还没有时间做模拟数据，想看具体效果，请稳步到我的网站上查看 http://biaochenxuying.cn/main.html

最后

其他具体的业务代码，都是些常会见到的需求，这里就不展开讲了。

如果你觉得该文章不错，欢迎到我的 github，star 一下，谢谢。

项目地址：

前台展示: https://github.com/biaochenxuying/blog-react

管理后台：https://github.com/biaochenxuying/blog-react-admin

后端：https://github.com/biaochenxuying/blog-node

blog：https://github.com/biaochenxuying/blog

本博客系统的系列文章：

你以为本文就这么结束了 ? 精彩在后面！！！

https://github.com/biaochenxuying/blog