Write Down
一個使用 React 編寫的、基於 markdown 的部落格應用。
Write Down 的文章僅支援使用 markdown 進行編寫。其中 markdown 語法標準為 GFM，且額外支援幾種功能，如 Emoji 表情、上下標文字等（具體可到 Demo 裡的 full feature example 中進行檢視）
Demo
Write Down 對手機的相容性不是太好，請儘量在電腦或者平板上進行體驗
在登入之後，才能建立新文章和看到文章的編輯選項。以下為測試賬號：
| username | password |
|---|---|
| test | 123456 |
Article List
Article Reading Page
功能列表
文章系統
- 文章編輯
- markdown 的編輯
- 編輯與預覽的模式切換
- 編輯框與預覽框的滾動同步
- 根據 markdown 語法給出相應的程式碼高亮（自己做的 CodeMirror 配色主題）
- 編輯 markdown 的儲存提醒
- 支援語法的快捷輸入（內建snippet）
- 其他元素的編輯
- 設定文章標籤
- 設定文章內容摘要
- 通過關鍵字搜尋與設定題圖（及文章列表封面圖片）
- 文章資訊預覽（把滑鼠懸停在 Info Setting Button 上顯示）
- markdown 的編輯
- 文章管理
- 新建文章
- 釋出文章\存至草稿箱
- 更新文章
- 刪除文章
- 文章匯出
- markdown檔案
- 帶樣式的html檔案
- 文章儲存
- 本地儲存
使用者系統
- 使用者登入\登出 (目前僅支援特定使用者的登入)
功能演示
User Login
Article Editing Page
Article Editing Other Header Buttons
Article Editing Info Setting
另外有兩個 Gif 比較大，不能上傳，請到 Repo 檢視
其他資料
專案使用的框架、工具與第三方庫
- 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吧!