About   |   Features   |   Technologies   |   Layout   |   Usage   |   Learn

YUSTORY部落格的發想是源自於Traversy Media頻道發佈的「Vue.js & Firebase Project - FireBlogs」此教學影片。由於剛好在學習 Vue.js 與 Firebase，且也想製作一個可分享自己日本生活趣聞的網站，便決定以此影片為基礎，開發出功能更加完善的部落格網站當作自己的 side project。 如有興趣也歡迎到YUSTORY參觀整個網站架構，體驗發文流程。

撰寫故事:
✔️ 隨時儲存故事備份
✔️ 即時預覽故事發佈時排版狀況
✔️ 可自訂故事封面

個人帳戶:
✔️ 可自訂個人頭貼與帳戶封面
✔️ 查看自己的收藏故事等

其他:
✔️ 依照內容、標籤、作者三大分類查找相關故事
✔️ 可任意收藏、點讚、留言自己喜歡的故事
✔️ RWD 響應式設計(手機下不支援撰寫故事)

Front End

• Vuex 網站的全域狀態管理
• Vue-Router 建構 Single Page Application
• vee-validate 協助表單驗證
• vue2-editor 使用 Vue.js 和 Quill.js 建構的文字編輯器，發佈故事時必要的核心套件
• vue-awesome-swiper 使用戶可藉由幻燈片方式挑選故事封面
• vue-notification 創建可自定義的提示訊息框
• vue-advanced-cropper 使用戶上傳頭貼時可裁切圖片
• portal-vue 使 DOM 元素可渲染於 document 任一處(類似 Vue3 Teleport 功能)
• vue-dropdowns 下拉選單
• FortAwesome 網站 icon 皆使用 FortAwesome
• AOS 協助完成滾動動畫
• moment.js 格式化日期
• nanoid 產生唯一值 ID

Back End

• Firestore Database 使用 Firestore 做為網站的資料庫
• Firebase Authentication 使用者認證與第三方登入功能
• Firebase Storage 使用 Storage 存取用戶上傳的圖片

1. 輸入故事標題
2. 輸入故事內容
3. 插入圖片後即可選擇封面
4. tag 最多可新增 3 個
5. 可於任何時候備份故事
6. 可於任何時候預覽故事發佈時排版狀況
7. 按下發佈故事後跳轉到故事詳情頁

1. 更加熟習如何使用 Vue Option API、Vuex與Vue-Router。
2. 學會如何使用Firebase來幫助完成專案後端部分。
3. 學會如何使用vee-validate等套件更加完善整個網站且加快開發速度，並且不只依賴套件也嘗試自己手刻分頁等常見功能組件。

1. 規劃功能時要想得更加全面，而不是想一步寫一步，這樣寫的組件會常常只能是當下的情況才能使用，而不是一個可複用率高的組件。
2. 變數與 class 命名要更加精準且有結構，發現自己有些變數名命名的太模糊，過一陣子再看也會忘記造成不易維護，class 名命之後想嘗試使用 BEM 命名方式。
3. 想好資料要如何儲存於 db，特別是多對多關係的資料，不然會造成後續 query 查詢不易，如果使用 firebase 的話，可於 doc 下再建一個 collection 並且使用collection groupquery 方法達成跨 collection 查詢。

更多細節歡迎參觀:YUSTORY

Made by yuRicky09

Back to top