react + Ant Design + 支援 markdown 的 blog-react 專案文件說明
前言
此 blog 專案是基於 react 全家桶 + Ant Design 的,專案已經開源,專案地址在 github 上。
1. 效果
效果圖:
-
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 渲染效果圖:
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
相關文章
- react手機端專案注意點,ant design-mobile框架React框架
- Ant Design Vue專案解析-前言Vue
- [譯] React-Redux 官方 Hooks 文件說明ReactReduxHook
- 使用ant design Pro開發專案的小結
- React降級配置及Ant Design配置React
- React、Ant Design、DvaJS之間的關係ReactJS
- 搭建 react + typescript + ant design 開發環境ReactTypeScript開發環境
- 專案需求說明書
- 使用 Eject 方式在 create-react-app 中使用 Ant Design of ReactReactAPP
- Ant Design 官方《Ant Design 實戰教程》釋出
- umi + dva + ant-design-mobile快速搭建H5專案H5
- Ant Design VueVue
- 為React Ant-Design Table增加欄位設定React
- MySQL EXPLAIN命令的主要專案說明MySqlAI
- 02 Vue預設專案說明Vue
- ant-design-vueVue
- 採用React+Ant Design元件化開發前端介面(一)React元件化前端
- (二)React Ant Design Pro + .Net5 WebApi:前端環境搭建ReactWebAPI前端
- json-server 接入專案說明JSONServer
- Oracle 官方文件 結構說明Oracle
- Oracle官方文件結構說明Oracle
- Ant design的Notification原始碼分析原始碼
- Ant Design的爬坑之路(一)
- ?用 Laravel 開發的一個輕鬆的 Markdown 文件編輯專案Laravel
- 軟體開發專案文件系列之五如何撰寫需求規格說明書
- Ant-design-vue 專案實戰筆記 (後繼將繼續補充)Vue筆記
- 專案範圍說明書如何編寫?
- (七)專案實戰01-框架說明框架
- vue使用ant design vue(upload)檔案上傳Vue
- 有關RFC文件的翻譯說明 (轉)
- 如何製作Java文件說明書Java
- SRS文件 軟體需求說明書
- react 搭建部落格—支援markdown的富文字編輯器React
- 專利說明書及其說明書附圖
- (八)React Ant Design Pro + .Net5 WebApi:後端環境搭建-AopReactWebAPI後端
- Ant Design Amiya 釋出啦~???
- ant design pro入門(2)
- 【譯】Ant Design 3.0 駕到