前言
此 blog 項目是基於 react 全家桶 + Ant Design 的，項目已經開源，項目地址在 github 上。
1. 效果
完整效果請看：http://biaochenxuying.cn/main.html
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 渲染效果圖:
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 一下，謝謝。
項目地址：
本博客系統的系列文章：
你以爲本文就這麼結束了 ? 精彩在後面 ！！！
對 全棧開發 有興趣的朋友可以掃下方二維碼關注我的公衆號，我會不定期更新有價值的內容。
微信公衆號：BiaoChenXuYing
分享 前端、後端開發 等相關的技術文章，熱點資源，全棧程序員的成長之路。
關注公衆號並回復 福利 便免費送你視頻資源，絕對乾貨。
福利詳情請點擊： 免費資源分享–Python、Java、Linux、Go、node、vue、react、javaScript
