Download: React 配置化+Serverless 開發個人部落格

├─config // 構建配置
├─public // html 入口
├─scripts // 專案指令碼
└─server // 後端

├─config // 專案配置 github、email、database、token-secret 等等
├─controllers // 業務控制層
├─middlewares // 中介軟體
├─models // 資料庫模型
├─router // 路由
├─utils // 工具包
├─ app.js // 後端主入口檔案
├─ initData.js // 初始化基礎資料指令碼
└─...
│
└─src // 前端專案原始碼
├─assets // 靜態檔案
├─components // 公用元件
├─layout // 佈局元件
├─redux // redux 目錄
├─routes // 路由
├─styles // 樣式
├─utils // 工具包
├─views // 檢視層
├─ App.jsx // 後端主入口檔案
├─ config.js // 專案配置 github 個人主頁、個人介紹等等
├─ index.js // 主入口檔案
└─...
blog改造流程一覽
頁面的客製化改造
功能的修復與新增
個人資訊的填充
小彩蛋
頁面的客製化改造
為了更加適用於自己的使用場景，對頁面進行了一些客製化的改造

頁面背景（寫成了可配置可拆卸的）

史上最強合影（壓縮過了）
頁面動效 加上了很多部落格都有的翻轉滾動的小棒！是不是很棒！
千方百計找到了一個可用的

功能的修復與新增
為了將部落格所有者與閱讀者隔離開，加入了role欄位進行控制。

公開與私密文章：
部落格不單單是展示自己、記錄筆記的地方，更是個人情感的樹洞，是回憶編織的大網，所以肯定是需要將公開和私密的文章隔離開啦，根據使用者角色鑑權來返回對應的資料。這樣更好的保護了隱私，也讓部落格所有者穿上了自己的底褲~

Markdown 編輯器 mathjax 支援
因為博主是一個弱小的科研愛好者，所以寫公式更是必須的啦，之前找的這個React-blog在這個功能上存在一些瑕疵，不能有效的支援mathjax，所以進行了一些改動，對 react-simplemde-editor 進行了一些簡單的封裝，使其支援MathJax預覽，在文章顯示上適用marked進行編碼，使mathjax可以有效顯示。

具體實現

export const translateMarkdown2html = (plainText, isGuardXss = false) => {
const marked_render = new marked.Renderer()
marked_render.old_paragraph = marked_render.paragraph
// 重寫paragraph()方法
marked_render.paragraph = function(text) {

// isTeXInline - 該文字是否有行內公式
var isTeXInline = /$(.)$/g.test(text)
// isTeXLine - 該文字是否有行間公式
var isTeXLine = /^$$(\s

if (!isTeXLine && isTeXInline) {
// 如果不是行間公式，但是行內公式，則使用包裹公式內容，消除$定界符
text = text.replace(/($([^$]*)$)+/g, function($1, $2) {
// 避免和行內程式碼衝突
if ($2.indexOf('') >= 0 || $2.indexOf('') >= 0) {
return $2
} else {
return '<span class='marked_inline_tex'>' + $2.replace(/$/g, '') + ''
}
})
} else {
// 如果是行間公式，則使用

return marked(isGuardXss ? xss(plainText) : plainText, {

renderer: marked_render,
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false,
highlight: function(code) {
/eslint no-undef: "off"/
return hljs.highlightAuto(code).value
}
})
}

文章置頂
置頂文章是一個必須的功能，當你有一些得意之作時，更希望它能有更高的優先順序，能幫助到更多的人，所以增加了該功能

一鍵評論
這是為了方便朋友們能夠更快速的進行評論，因為讓朋友們註冊的話有持有密碼和密碼洩漏的風險，所以直接使用使用者名稱和qq郵箱（方便拿到頭像）進行快速評論即可，後臺將自動註冊登入該使用者。

高清【課代表\/: ebing6】一起學習