为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
React.JS

主页

前言

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

1. 效果

首页

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. 项目搭建

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

第四步:

<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 一下,谢谢。

项目地址:

相关文章:

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
23
获赞与收藏
91

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消