在线网站 blog-react 项目的文档说明

主页

前言

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

1. 效果

首页

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

2. 功能描述

2.1 已经实现功能

登录

注册

文章列表

标签分类

个人介绍

点赞与评论

留言

时间轴

发文(支持 MarkDown 语法)

文章详情展示(支持代码语法高亮)

2.2 待实现功能

x文章归档

x文章分类

x文章详情的目录

x移动端适配

x升级 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 渲染效果图:

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 ( 建立安装 )

¨K30Knpm install¨K31Knpm start 或者 yarn start¨K32Knpm run build 或者 yarn run build

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

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

最后

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

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

项目地址:

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

相关文章:

1. react + node + express + ant + mongodb 的简洁兼时尚的博客网站 2. blog 文章

本文分享自微信公众号 - 全栈修炼(BiaoChenXuYing)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券