react + Ant Design + 支持 markdown 的 blog-react 項目的文檔說明

時間 2019-11-09

標籤 react ant design 支持 markdown blog 項目文檔說明欄目 React 简体版

原文原文鏈接

前言

此 blog 項目是基於 react 全家桶 + Ant Design 的，項目已經開源，項目地址在 github 上。css

1. 效果

效果圖：html

pc 端

移動端適配

完整效果請看：http://biaochenxuying.cn/main.html前端

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 推薦的教程來搭建的：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 渲染效果圖: vue

react 相關的支持 markdown 語法的有 react-markdown，但不支持表格的渲染，因此沒用。java

markdown 渲染採用了開源的 marked，代碼高亮用了 highlight.js 。node

用法：react

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

npm i marked highlight.js --save

第二步：導入ios

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

第三步：設置git

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

本博客系統的系列文章：