用React實現一個簡易的markdown博客應用

Write Down

一個使用 React 編寫的、基於 markdown 的博客應用。

Write Down 的文章僅支持使用 markdown 進行編寫。其中 markdown 語法標準爲 GFM，且額外支持幾種功能，如 Emoji 表情、上下標文字等（具體可到 Demo 裏的 full feature example 中進行查看）

Repo

Demo

Write Down 對手機的兼容性不是太好，請儘可能在電腦或者平板上進行體驗

Demo

在登陸以後，才能建立新文章和看到文章的編輯選項。如下爲測試帳號：

username	password
test	123456

---

Article List

---

Article Reading Page

功能列表

文章系統

• 文章編輯
  • markdown 的編輯
    • 編輯與預覽的模式切換
    • 編輯框與預覽框的滾動同步
    • 根據 markdown 語法給出相應的代碼高亮（本身作的 CodeMirror 配色主題）
    • 編輯 markdown 的保存提醒
    • 支持語法的快捷輸入（內置snippet）
  • 其餘元素的編輯
    • 設置文章標籤
    • 設置文章內容摘要
    • 經過關鍵字搜索與設置題圖（及文章列表封面圖片）
    • 文章信息預覽（把鼠標懸停在 Info Setting Button 上顯示）
• 文章管理
  • 新建文章
  • 發佈文章\存至草稿箱
  • 更新文章
  • 刪除文章
• 文章導出
  • markdown文件
  • 帶樣式的html文件
• 文章存儲
  • 本地存儲

用戶系統

• 用戶登陸\登出 (目前僅支持特定用戶的登陸)

功能演示

User Login

---

Article Editing Page

---

Article Editing Other Header Buttons

---

Article Editing Info Setting

另外有兩個 Gif 比較大，不能上傳，請到 Repo 查看

---

其餘資料

• 你可能會問的問題
• Write Down的數據 - ProcessOn

項目使用的框架、工具與第三方庫

• JS 框架 - React
• UI 組件 - Ant Design
• 狀態管理器 - Redux
• 前端路由 - React-Router
• 文本編輯器 - CodeMirror
• markdown 解釋器 - markdown-it
• 代碼高亮 - Prism
• 本地存儲 - PouchDB
• 圖片搜索 - Unsplash
• 圖片顯示(相似 Pinterest) - react-stack-grid
• 文件導出 - File Saver
• 日期轉換 - DayJS

---

ps： 文章的內容有所刪減，完整內容請查看 README-zh.md

歡迎各位留言，交流學習討論

若是你喜歡這個應用，給我一個star吧!