發這篇文的時候，
我人在機場準備出發去參加 Vue Fes Japan 2018，
人生第一次出國參加 conference 啊，好興奮！

所以這篇文就在桃園機場誕生了XD，
去日本四天可能要和鐵人賽與工作渡過，
不知道這是該開心還是難過～
就讓我們開始今天的進度吧～

使用者相關(使用 layout/default)：

1. about: 關於我，用來介紹自己
   這部分就不特別切版了，基本上就是自我介紹。
2. pages: 列出第 N 頁的文章
3. posts:

• index: 全文章標題列表
• postId: 單篇文章瀏覽

4. tags:

• index: 全部的 Tag 統計列表
• tagId: 該 tag 相關所有文章列表

pages: 列出第 N 頁的文章

template 的部分，多使用了 Vuetify 的元件 v-pagination，
以及顯示文章預覽的元件 ThePostPreview，
如果有按照順序閱讀文章的話基本上可以直接看 javascript 的部分，
若沒看之前的篇幅，建議補滿前面的篇幅，
或是高手可以直接於文章最後 clone 所有程式碼。

javascript 的部分，
主要透過 asyncData 中的 action(post/getPostsByPage)，
這是前天 Day23 寫好的 action，以下就不再重複。

Demo 截圖：(也可於文章最後 clone 程式碼並執行)

posts/index: 全文章標題列表

template 沒什麼好講的(略)，
javascript 就是用 action(post/getPosts) 取得 posts，再用 v-for 顯示。

Demo 截圖：(也可於文章最後 clone 程式碼並執行)

posts/postId: 單篇文章瀏覽

最重要的就是這個頁面啦！
沒想到 template 會這麼少吧，
因為文章內容都透過 TheMarkdown 顯示了，
只需要透過 action(getPostByPostId) 取的文章內容，
並塞進去就完成。

Demo 截圖：(也可於文章最後 clone 程式碼並執行)

tags/index: 全部的 Tag 統計列表

這個頁面就沒有用到任何之前開發的元件，
只是單純使用 action(tag/getAllTags) 取得所有 Tags,
並且透過 v-for 列出來。

Demo 截圖：(也可於文章最後 clone 程式碼並執行)

tags/tagId: 該 tag 相關所有文章列表

只列出某 tagId 的相關文章列表，
template 的部分其實跟其他有用到元件 ThePostPreview 的頁面幾乎一樣，
差別可能僅僅在於傳進去的 posts 不同而已，
這邊是使用 action(post/getPostsTag) 取得 posts，
並透過 v-for 列出來。

Demo 截圖：(也可於文章最後 clone 程式碼並執行)

首頁/index: 預設為 pages 的第一頁

內容跟最上面的 (pages: 列出第 N 頁的文章) 一樣，
只是這邊改成預設顯示第一頁。

Demo 截圖：(也可於文章最後 clone 程式碼並執行)

總結

其實可以發現我明顯懶的敘述程式碼，
因為內容真的很單純，好其實是真的懶，
但基本模式就是：

• 用 vuetify 的元件切好版
• 套上之前開發好的元件
• 透過之前開發好的 Vuex action 去取得資料並顯示

最棒的事情是，這些頁面都不需要再額外寫樣式。

部落格核心的部分基本上告一個段落了，
剩下五天的內容目前預計會：

Day26 讓部落格可以有留言功能
Day27 webpack 優化設定等等
Day28 部署 heroku
Day29 部署 github page 和 firebase host
Day30 教學如何將這整個專案變成自己的部落格完整設定流程
Day31 分享這趟去 Vue Fes Japan 2018 心得感想

照慣例附上程式碼

024-finish-all-pages

指令：

git clone -b 024-finish-all-pages --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev