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

時間 2019-12-08

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

原文原文鏈接

前言

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

1. 效果

效果圖：html

pc 端前端
移動端適配node

完整效果請看：biaochenxuying.cn/main.htmlreact

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 渲染效果圖:webpack

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

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

用法：github

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

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 了，可是尚未時間作模擬數據，想看具體效果，請穩步到個人網站上查看 biaochenxuying.cn/main.html