react + Ant Design + 支持 markdown 的 blog-react 项目的文档说明

阅读量：6260 次

发布时间：2019-06-22

本文共 3675 字，大约阅读时间需要 12 分钟。

前言

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

1. 效果

效果图：

pc 端

移动端适配

完整效果请看：

2. 功能描述

2.1 已经实现功能

[x] 登录

[x] 注册

[x] 文章列表

[x] 标签分类

[x] 个人介绍

[x] 点赞与评论

[x] 留言

[x] 时间轴

[x] 发文（支持 MarkDown 语法）

[x] 文章详情展示（支持代码语法高亮）

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 推荐的教程来搭建的： , 实现了按需加载组件代码和样式。

5. 主要项目结构

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

6. markdown 渲染

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;            },        });    }

第四步：

第五步：引入 monokai_sublime 的 css 样式

第六步：对 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 dependenciesnpm install # serve with hot reload at localhost: 3000npm start 或者 yarn start# build for production with minificationnpm run build 或者 yarn run build

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

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