react + Ant Design + 支援 markdown 的 blog-react 專案文件說明

weixin_33890499發表於2018-11-22
12890819-8420689b7238972a.png
主頁

前言

此 blog 專案是基於 react 全家桶 + Ant Design 的,專案已經開源,專案地址在 github 上。

1. 效果

效果圖:

  • pc 端


    12890819-77a83e7ccd563d16.png
    首頁
  • 移動端適配

12890819-f97e98dfa9ac76b8.gif
mobile.gif

完整效果請看: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. 專案搭建

5. 主要專案結構

- components
  - article 文章詳情
  - articles 文章列表
  - comments 評論
  - loadEnd 載入完成
  - loading 載入中
  - login 登入
  - message 留言
  - nav 導航
  - register 註冊
  - slider 右邊欄(博主 logo 、連結和標籤等)
  - timeLine 時間軸
- router 路由
- store redux 的狀態管理
- utils 封裝的常用的方法
- views 框架頁面

6. markdown 渲染

markdown 渲染效果圖:

12890819-cf92cfb3f222c4fb.png
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. 主頁的滿屏 飄花灑落 的效果

12890819-5915a8b8331a4def.png
主頁的 飄花灑落 的效果

大家也看到了,主頁的滿屏動態 飄花灑落 的效果很棒吧,這效果我也是網上找的,是在單獨的一個 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

本部落格系統的系列文章:

你以為本文就這麼結束了 ? 精彩在後面 !!!

12890819-a6be27522a86a0dd.jpg

全棧開發 有興趣的朋友可以掃下方二維碼關注我的公眾號,我會不定期更新有價值的內容。

微信公眾號:BiaoChenXuYing
分享 前端、後端開發 等相關的技術文章,熱點資源,全棧程式設計師的成長之路。

關注公眾號並回復 福利 便免費送你視訊資源,絕對乾貨。

福利詳情請點選: 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript

12890819-091ccce387e2ea34.png
BiaoChenXuYing

相關文章