diff --git a/data/posts/2021-07-28-hexschool-summer-camp-vue3-week1.md b/data/posts/2021-07-28-hexschool-summer-camp-vue3-week1.md
index 09f2772b..eaa75c8c 100644
--- a/data/posts/2021-07-28-hexschool-summer-camp-vue3-week1.md
+++ b/data/posts/2021-07-28-hexschool-summer-camp-vue3-week1.md
@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第一周主要是介紹用最簡單方法帶初學者學習 Vue。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第一周主要是介紹用最簡單方法帶初學者學習 Vue。
 ---
 
 [![第一週作業展示，運用了 Vue 指令與 Ajax，點擊圖片可察看成果](https://i.imgur.com/E48VuxQ.jpg)](https://johnsonmao.github.io/summer-camp-vue3/week1/)
diff --git a/data/posts/2021-08-02-hexschool-summer-camp-vue3-week2.md b/data/posts/2021-08-02-hexschool-summer-camp-vue3-week2.md
index 3639e086..1efa9b7f 100644
--- a/data/posts/2021-08-02-hexschool-summer-camp-vue3-week2.md
+++ b/data/posts/2021-08-02-hexschool-summer-camp-vue3-week2.md
@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第二周介紹常用的語法學習 Vue。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第二周介紹常用的語法學習 Vue。
 ---
 
 [![第二週作業展示，運用了 Vue 進階指令與 localStrage，同時也自我挑戰運用了鍵盤監聽，只使用鍵盤就能操控計算機功能，點擊圖片可察看成果](https://i.imgur.com/Xd2g377.png)](https://johnsonmao.github.io/summer-camp-vue3/week2/)
diff --git a/data/posts/2021-08-09-hexschool-summer-camp-vue3-week3.md b/data/posts/2021-08-09-hexschool-summer-camp-vue3-week3.md
index db2c13de..625b25a6 100644
--- a/data/posts/2021-08-09-hexschool-summer-camp-vue3-week3.md
+++ b/data/posts/2021-08-09-hexschool-summer-camp-vue3-week3.md
@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第三周介紹如何使用語法進行資料的 CRUD 功能。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第三周介紹如何使用語法進行資料的 CRUD 功能。
 ---
 
 [![第三週作業展示，運用了 Vue computed 與完整的 CRUD 功能，點擊圖片可察看成果](https://i.imgur.com/s0FUJXG.png)](https://johnsonmao.github.io/summer-camp-vue3/week3/)
diff --git a/data/posts/2021-08-16-hexschool-summer-camp-vue3-week4.md b/data/posts/2021-08-16-hexschool-summer-camp-vue3-week4.md
index a765224b..f3913eaa 100644
--- a/data/posts/2021-08-16-hexschool-summer-camp-vue3-week4.md
+++ b/data/posts/2021-08-16-hexschool-summer-camp-vue3-week4.md
@@ -8,7 +8,7 @@ categories:
 tags:
     - 六角學院
     - Vue 3 新手夏令營
-excerpt: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第四周介紹如何使用 Composition API 與 watch 功能，並了解 Vue 2 與 Vue 3 的差異。
+description: 這裡將會記錄參加 六角學院 Vue 3 新手夏令營（活動已結束） 課程筆記 與 每日任務紀錄，第四周介紹如何使用 Composition API 與 watch 功能，並了解 Vue 2 與 Vue 3 的差異。
 ---
 
 #  Vue 3 Composition API    
diff --git a/data/posts/2021-09-06-mongodb.md b/data/posts/2021-09-06-mongodb.md
index e0e7f49e..2f5910c8 100644
--- a/data/posts/2021-09-06-mongodb.md
+++ b/data/posts/2021-09-06-mongodb.md
@@ -6,7 +6,7 @@ categories:
     - [程式語言, 資料庫, MongoDB]
 tags: 
     - MongoDB
-excerpt: 在製作自己的專案時，想讓專案更加完整，於是就開始想，既然前端畫面邏輯都自己開發了，現在網路上資源又那麼豐富，未來也有可能朝全端發展，何不自己架設後端 API，給自己串接，還能了解整個網頁的運作邏輯，於是開始自學了後端框架 Express 和資料庫 MongoDB，這裡將會記錄學習 MongoDB 的學習筆記。
+description: 在製作自己的專案時，想讓專案更加完整，於是就開始想，既然前端畫面邏輯都自己開發了，現在網路上資源又那麼豐富，未來也有可能朝全端發展，何不自己架設後端 API，給自己串接，還能了解整個網頁的運作邏輯，於是開始自學了後端框架 Express 和資料庫 MongoDB，這裡將會記錄學習 MongoDB 的學習筆記。
 ---
 
 ![資料庫概念圖](https://i.imgur.com/E7ajmZa.jpg)
diff --git a/data/posts/2021-09-10-IT-ironman-day1.md b/data/posts/2021-09-10-IT-ironman-day1.md
index c80081d0..d0b5c0a0 100644
--- a/data/posts/2021-09-10-IT-ironman-day1.md
+++ b/data/posts/2021-09-10-IT-ironman-day1.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - VS Code
-excerpt: 大家好！我是毛毛，因為這波疫情影響下，讓我多了許多時間可以好好投資自己，想把自己目前所學的技能，轉化成能夠讓更多人更好吸收的知識，如果有發現內容有誤，也請您不吝指教，感謝。
+description: 大家好！我是毛毛，因為這波疫情影響下，讓我多了許多時間可以好好投資自己，想把自己目前所學的技能，轉化成能夠讓更多人更好吸收的知識，如果有發現內容有誤，也請您不吝指教，感謝。
 ---
 
 ![「工欲善其事，必先利其器！」—— 前言 與 介紹工具](https://i.imgur.com/YyhvZBl.png)
diff --git a/data/posts/2021-09-11-IT-ironman-day2.md b/data/posts/2021-09-11-IT-ironman-day2.md
index 4df8d7d0..8720a0cc 100644
--- a/data/posts/2021-09-11-IT-ironman-day2.md
+++ b/data/posts/2021-09-11-IT-ironman-day2.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - HTML
-excerpt: 上一篇有講到網頁三兄弟，其中有一個老大哥負責撐起這個世界，那就是 HTML ，少了 HTML 這個根基，就不會有網頁。只有 HTML 的世界是非常無聊的，這時 CSS 和 Javascript 接連出現，為網頁世界創造更多的可能！
+description: 上一篇有講到網頁三兄弟，其中有一個老大哥負責撐起這個世界，那就是 HTML ，少了 HTML 這個根基，就不會有網頁。只有 HTML 的世界是非常無聊的，這時 CSS 和 Javascript 接連出現，為網頁世界創造更多的可能！
 ---
 
 ![「歡迎來到網頁這個世界！」 —— 認識網頁架構](https://i.imgur.com/xadMCtM.png)
diff --git a/data/posts/2021-09-12-IT-ironman-day3.md b/data/posts/2021-09-12-IT-ironman-day3.md
index 0b64a4aa..f3228f34 100644
--- a/data/posts/2021-09-12-IT-ironman-day3.md
+++ b/data/posts/2021-09-12-IT-ironman-day3.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - HTML
-excerpt: 雖然會最基礎的 div 和 span 標籤就能夠開始切版了，甚至只靠 div 搭配 CSS 就能做出各種 tag 的效果，但為了良好的 SEO 與 閱讀性，也為了以後不會把別人和自己逼瘋 (?，還是會建議用更適合的標籤來完成網頁。
+description: 雖然會最基礎的 div 和 span 標籤就能夠開始切版了，甚至只靠 div 搭配 CSS 就能做出各種 tag 的效果，但為了良好的 SEO 與 閱讀性，也為了以後不會把別人和自己逼瘋 (?，還是會建議用更適合的標籤來完成網頁。
 ---
 
 ![「建構網頁的基石！」 —— 使用網頁標籤](https://i.imgur.com/3myJcyZ.png)
diff --git a/data/posts/2021-09-13-IT-ironman-day4.md b/data/posts/2021-09-13-IT-ironman-day4.md
index 6387f3d0..6ac7fefc 100644
--- a/data/posts/2021-09-13-IT-ironman-day4.md
+++ b/data/posts/2021-09-13-IT-ironman-day4.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - HTML
-excerpt: 人是視覺動物，當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。
+description: 人是視覺動物，當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。
 ---
 
 ![「CSS 基礎中的基礎！」 —— CSS 盒模型 box-model & 距離單位](https://i.imgur.com/v6IIogk.png)
diff --git a/data/posts/2021-09-14-IT-ironman-day5.md b/data/posts/2021-09-14-IT-ironman-day5.md
index e22cadf0..0c8c07b4 100644
--- a/data/posts/2021-09-14-IT-ironman-day5.md
+++ b/data/posts/2021-09-14-IT-ironman-day5.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 使用標籤元素套用就像是畫草圖上底色，雖然有色彩但不細緻，這時為了能夠更精雕細琢我們的網頁，於是我們要更加精準的設定樣式，但有的選擇器必須謹慎使用，不然後面要修改就麻煩了。
+description: 使用標籤元素套用就像是畫草圖上底色，雖然有色彩但不細緻，這時為了能夠更精雕細琢我們的網頁，於是我們要更加精準的設定樣式，但有的選擇器必須謹慎使用，不然後面要修改就麻煩了。
 ---
 
 ![「我的樣式失靈啦！你有頭緒嗎？」 —— CSS 選擇器 與 權重](https://i.imgur.com/DGvbCcT.png)
diff --git a/data/posts/2021-09-15-IT-ironman-day6.md b/data/posts/2021-09-15-IT-ironman-day6.md
index 4903673f..ce1ee532 100644
--- a/data/posts/2021-09-15-IT-ironman-day6.md
+++ b/data/posts/2021-09-15-IT-ironman-day6.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 如同前面章節所說，一開始的標籤元素，很單調只有一行並沒有各式各樣的元素，是瀏覽器內建的樣式表賦予它該展示的樣子。所以我們可以把任何標籤變成任何你愛的樣子，當然不希望如此瞎搞！
+description: 如同前面章節所說，一開始的標籤元素，很單調只有一行並沒有各式各樣的元素，是瀏覽器內建的樣式表賦予它該展示的樣子。所以我們可以把任何標籤變成任何你愛的樣子，當然不希望如此瞎搞！
 ---
 
 ![「只要我想，我也能把 div 變 table！」 —— CSS display 屬性](https://i.imgur.com/ofgbXuv.png)
diff --git a/data/posts/2021-09-16-IT-ironman-day7.md b/data/posts/2021-09-16-IT-ironman-day7.md
index d1924279..f1004f26 100644
--- a/data/posts/2021-09-16-IT-ironman-day7.md
+++ b/data/posts/2021-09-16-IT-ironman-day7.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 要來介紹大家最愛用的 Flexbox 了，以往兼容性還不太好的時候，大多都是使用表格（table）屬性來進行排版，也容易出問題，現在科技進步迅速，瀏覽器也持續跟進，~~IE 也要進入歷史了~~，只要用簡單的語法，就能安排元素在網頁上各自的位置，非常的方便好用又彈性！還不快學起來！
+description: 要來介紹大家最愛用的 Flexbox 了，以往兼容性還不太好的時候，大多都是使用表格（table）屬性來進行排版，也容易出問題，現在科技進步迅速，瀏覽器也持續跟進，~~IE 也要進入歷史了~~，只要用簡單的語法，就能安排元素在網頁上各自的位置，非常的方便好用又彈性！還不快學起來！
 ---
 
 ![「CSS 網頁切版必學，用過都說讚！」 —— CSS 彈性盒模型 Flexbox](https://i.imgur.com/hLMVxvv.png)
diff --git a/data/posts/2021-09-17-IT-ironman-day8.md b/data/posts/2021-09-17-IT-ironman-day8.md
index 1e8095ee..28aae6b3 100644
--- a/data/posts/2021-09-17-IT-ironman-day8.md
+++ b/data/posts/2021-09-17-IT-ironman-day8.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 我們已經了解到基本的切版概念了，但前面所學的都是固定在網頁上，也就是之前所說正常的文檔流！而這一篇就要來學會更進階一點了佈局方法了，讓元素布局上更加奔放自由，脫離文檔流。
+description: 我們已經了解到基本的切版概念了，但前面所學的都是固定在網頁上，也就是之前所說正常的文檔流！而這一篇就要來學會更進階一點了佈局方法了，讓元素布局上更加奔放自由，脫離文檔流。
 ---
 
 ![「怎麼就這樣脫離文檔流了！」 —— CSS 定位屬性 position & 浮動元素 float](https://i.imgur.com/n4My3Xy.png)
diff --git a/data/posts/2021-09-18-IT-ironman-day9.md b/data/posts/2021-09-18-IT-ironman-day9.md
index 56e8646f..2eb71234 100644
--- a/data/posts/2021-09-18-IT-ironman-day9.md
+++ b/data/posts/2021-09-18-IT-ironman-day9.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 偽（Pseudo）這個意思有虛幻虛無的意思，類選擇器是用來處理 DOM 操作不了選擇器，偽元素則是原本並沒有在 HTML DOM 中，是透過 CSS 創造出來的元素。
+description: 偽（Pseudo）這個意思有虛幻虛無的意思，類選擇器是用來處理 DOM 操作不了選擇器，偽元素則是原本並沒有在 HTML DOM 中，是透過 CSS 創造出來的元素。
 
 ---
 
diff --git a/data/posts/2021-09-19-IT-ironman-day10.md b/data/posts/2021-09-19-IT-ironman-day10.md
index e5486f42..3599d596 100644
--- a/data/posts/2021-09-19-IT-ironman-day10.md
+++ b/data/posts/2021-09-19-IT-ironman-day10.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 雖然標題有點聳動，但在這個行動裝置越來越多的現在，如果沒有手機版的網頁，SEO 排名會大受影響，也等同於宣告死刑了。
+description: 雖然標題有點聳動，但在這個行動裝置越來越多的現在，如果沒有手機版的網頁，SEO 排名會大受影響，也等同於宣告死刑了。
 ---
 
 ![「沒有 RWD 的網站 === 沒有未來」 —— RWD　響應式網頁設計](https://i.imgur.com/tJZ3MrQ.png)
diff --git a/data/posts/2021-09-20-IT-ironman-day11.md b/data/posts/2021-09-20-IT-ironman-day11.md
index d8605eb3..9915e1da 100644
--- a/data/posts/2021-09-20-IT-ironman-day11.md
+++ b/data/posts/2021-09-20-IT-ironman-day11.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 現在我們會使用基本的偽類選擇器做效果了，但看到變化過程一閃而過、冷冰冰的，想增添更多漸變效果，讓動態效果可以更多變化、更平滑動感，就要使用我們的 transform 與 transition 這兩個屬性。
+description: 現在我們會使用基本的偽類選擇器做效果了，但看到變化過程一閃而過、冷冰冰的，想增添更多漸變效果，讓動態效果可以更多變化、更平滑動感，就要使用我們的 transform 與 transition 這兩個屬性。
 ---
 
 ![「利用漸變效果，讓網頁不再死板！」 —— CSS Transform & CSS Transition](https://i.imgur.com/VoFpU6Q.png)
diff --git a/data/posts/2021-09-21-IT-ironman-day12.md b/data/posts/2021-09-21-IT-ironman-day12.md
index e924af79..2681c32c 100644
--- a/data/posts/2021-09-21-IT-ironman-day12.md
+++ b/data/posts/2021-09-21-IT-ironman-day12.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - CSS
-excerpt: 現在我們會使用具有互動性的簡單漸變效果了，接著要來試著讓網頁能增添更多活力，不需要我們操作，就會自動播放動畫效果。
+description: 現在我們會使用具有互動性的簡單漸變效果了，接著要來試著讓網頁能增添更多活力，不需要我們操作，就會自動播放動畫效果。
 ---
 
 ![「來為網頁添加動畫吧！」 —— CSS 動畫（animation）](https://i.imgur.com/Z0lYvKC.gif)
diff --git a/data/posts/2021-09-22-IT-ironman-day13.md b/data/posts/2021-09-22-IT-ironman-day13.md
index f3aa44fa..8b36ea98 100644
--- a/data/posts/2021-09-22-IT-ironman-day13.md
+++ b/data/posts/2021-09-22-IT-ironman-day13.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: JavaScript 是個弱型別語言，在宣告變數時，不像其他語言需要先指定型別那麼嚴謹，宣告的變數名會對應記憶體位子，把其值存入記憶體中，之後要取出值，只要藉由變數名，就能找到對應的值。
+description: JavaScript 是個弱型別語言，在宣告變數時，不像其他語言需要先指定型別那麼嚴謹，宣告的變數名會對應記憶體位子，把其值存入記憶體中，之後要取出值，只要藉由變數名，就能找到對應的值。
 ---
 
 ![JavaScript 宣告變數 與 基本型別](https://i.imgur.com/wh1ZT6h.png)
diff --git a/data/posts/2021-09-23-IT-ironman-day14.md b/data/posts/2021-09-23-IT-ironman-day14.md
index 618c44c4..47c2404e 100644
--- a/data/posts/2021-09-23-IT-ironman-day14.md
+++ b/data/posts/2021-09-23-IT-ironman-day14.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 學習任何東西，都要把基礎學的扎實，基礎穩了，遇到問題就能迎刃而解。而學習程式語言的基礎就是數學邏輯，不用到很專精，只要有基礎數學邏輯，多寫多做就能鍛鍊出寫程式邏輯的金魚腦，基礎邏輯打穩了，任何程式語言都有相似的地方，會越學越快，然後發現根本是無底洞，沒有盡頭。
+description: 學習任何東西，都要把基礎學的扎實，基礎穩了，遇到問題就能迎刃而解。而學習程式語言的基礎就是數學邏輯，不用到很專精，只要有基礎數學邏輯，多寫多做就能鍛鍊出寫程式邏輯的金魚腦，基礎邏輯打穩了，任何程式語言都有相似的地方，會越學越快，然後發現根本是無底洞，沒有盡頭。
 
 ---
 
diff --git a/data/posts/2021-09-24-IT-ironman-day15.md b/data/posts/2021-09-24-IT-ironman-day15.md
index b362e59d..c3de4fe3 100644
--- a/data/posts/2021-09-24-IT-ironman-day15.md
+++ b/data/posts/2021-09-24-IT-ironman-day15.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 前面學習了基礎的變數與運算子的使用，這些基礎往往是非常枯燥乏味的，還沒有與電腦有更進一步的互動，所以感受不到程式語言的魅力，而今天學習的條件判斷式就可以開始與電腦進行些微的互動！
+description: 前面學習了基礎的變數與運算子的使用，這些基礎往往是非常枯燥乏味的，還沒有與電腦有更進一步的互動，所以感受不到程式語言的魅力，而今天學習的條件判斷式就可以開始與電腦進行些微的互動！
 ---
 
 ![「條件設定好～讓程式判斷！」 —— JavaScript 條件判斷式](https://i.imgur.com/Zso8daX.png)
diff --git a/data/posts/2021-09-25-IT-ironman-day16.md b/data/posts/2021-09-25-IT-ironman-day16.md
index 2e6e9955..d54ceb8f 100644
--- a/data/posts/2021-09-25-IT-ironman-day16.md
+++ b/data/posts/2021-09-25-IT-ironman-day16.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 前面學習到了條件判斷式，接著我們來學習有點危險的循環迴圈，好啦！也沒那麼誇張～只是寫不好，容易進入無窮迴圈導致當機！不過我們是寫在網頁上～所以如果真的不小心陷入無窮迴圈，就關掉瀏覽器就可以了！
+description: 前面學習到了條件判斷式，接著我們來學習有點危險的循環迴圈，好啦！也沒那麼誇張～只是寫不好，容易進入無窮迴圈導致當機！不過我們是寫在網頁上～所以如果真的不小心陷入無窮迴圈，就關掉瀏覽器就可以了！
 ---
 
 ![「重複的事情，交給程式去做！」 —— JavaScript 循環迴圈](https://i.imgur.com/0bAwQpd.png)
diff --git a/data/posts/2021-09-26-IT-ironman-day17.md b/data/posts/2021-09-26-IT-ironman-day17.md
index 36e7a7fd..8bb639b4 100644
--- a/data/posts/2021-09-26-IT-ironman-day17.md
+++ b/data/posts/2021-09-26-IT-ironman-day17.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 前面有介紹了基本型別，基本型別有 string、number、boolean、null、undefined 這五個型別，剩下的可以都歸類於物件型別。
+description: 前面有介紹了基本型別，基本型別有 string、number、boolean、null、undefined 這五個型別，剩下的可以都歸類於物件型別。
 ---
 
 ![「如果基本型別是商品，那物件型別就是購物袋」 —— JavaScript 物件型別](https://i.imgur.com/6P86wxa.png)
diff --git a/data/posts/2021-09-27-IT-ironman-day18.md b/data/posts/2021-09-27-IT-ironman-day18.md
index fb18878f..41286d1f 100644
--- a/data/posts/2021-09-27-IT-ironman-day18.md
+++ b/data/posts/2021-09-27-IT-ironman-day18.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 函數也是個物件型別，可以封裝一些功能（程式碼），在需要使用的時候執行功能（程式碼）。
+description: 函數也是個物件型別，可以封裝一些功能（程式碼），在需要使用的時候執行功能（程式碼）。
 ---
 
 ![「從函式物件認識 作用域 與 提升！」 —— JavaScript 函式 & 作用域 & 提升](https://i.imgur.com/dUL5Ryk.png)
diff --git a/data/posts/2021-09-28-IT-ironman-day19.md b/data/posts/2021-09-28-IT-ironman-day19.md
index a5709e17..a7606a3c 100644
--- a/data/posts/2021-09-28-IT-ironman-day19.md
+++ b/data/posts/2021-09-28-IT-ironman-day19.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們的變數在我們開啟網站時，都會存放在記憶體內，當我們關閉網站時，記憶體也會將這些變數釋放。
+description: 我們的變數在我們開啟網站時，都會存放在記憶體內，當我們關閉網站時，記憶體也會將這些變數釋放。
 ---
 
 ![「認識 JavaScript 記憶體堆疊、傳值 與 傳址」 —— JavaScript 物件 與 記憶體](https://i.imgur.com/PQ6GCWn.png)
diff --git a/data/posts/2021-09-29-IT-ironman-day20.md b/data/posts/2021-09-29-IT-ironman-day20.md
index 1aa7864d..16a0b126 100644
--- a/data/posts/2021-09-29-IT-ironman-day20.md
+++ b/data/posts/2021-09-29-IT-ironman-day20.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 如同學習函式一樣！有時候我們會一直重複地做一件事，當還是初學者的我們需要製作大量的個人資料物件時，通常第一個想法就是複製貼上～一直重複製作一樣的東西！我們要發揮工程師的精神～看到一直有重複的程式碼時，就要想辦法簡化它。在學習自訂物件之前，要先認識之前函式沒說到的「this」
+description: 如同學習函式一樣！有時候我們會一直重複地做一件事，當還是初學者的我們需要製作大量的個人資料物件時，通常第一個想法就是複製貼上～一直重複製作一樣的東西！我們要發揮工程師的精神～看到一直有重複的程式碼時，就要想辦法簡化它。在學習自訂物件之前，要先認識之前函式沒說到的「this」
 ---
 
 ![Day.20 「初步認識 this，中央工廠式的自訂物件～」 —— JavaSript 構造函式](https://i.imgur.com/MowXDC1.png)
diff --git a/data/posts/2021-09-30-IT-ironman-day21.md b/data/posts/2021-09-30-IT-ironman-day21.md
index a018d636..880bfa7e 100644
--- a/data/posts/2021-09-30-IT-ironman-day21.md
+++ b/data/posts/2021-09-30-IT-ironman-day21.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們每新增一個函式，瀏覽器都會向函式內新增一個屬性叫「prototype」，如果是普通函式的直接調用，「prototype」不會有任何作用，當是以構造函式的方式調用，他所新增的物件會有一個隱藏的屬性，指向該構造函式的原型物件，雖然「prototype」是隱藏屬性，但我們可以透過「__proto__」來查看該屬性！
+description: 我們每新增一個函式，瀏覽器都會向函式內新增一個屬性叫「prototype」，如果是普通函式的直接調用，「prototype」不會有任何作用，當是以構造函式的方式調用，他所新增的物件會有一個隱藏的屬性，指向該構造函式的原型物件，雖然「prototype」是隱藏屬性，但我們可以透過「__proto__」來查看該屬性！
 ---
 
 ![「物件也有繼承問題？」 —— JavaScript 繼承 與 原型鍊](https://i.imgur.com/k1U1ZAE.png)
diff --git a/data/posts/2021-10-01-IT-ironman-day22.md b/data/posts/2021-10-01-IT-ironman-day22.md
index 2c8fc958..3d04679f 100644
--- a/data/posts/2021-10-01-IT-ironman-day22.md
+++ b/data/posts/2021-10-01-IT-ironman-day22.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 之前我們有說過，再調用函式的時候，瀏覽器會傳遞隱藏的參數給我們函式，一個是「this」，除了 this 還有另一個參數是「arguments」！
+description: 之前我們有說過，再調用函式的時候，瀏覽器會傳遞隱藏的參數給我們函式，一個是「this」，除了 this 還有另一個參數是「arguments」！
 ---
 
 ![「讓我們在更深入函式～」 —— JavaScript call & apply & arguments](https://i.imgur.com/ejWtzFz.png)
diff --git a/data/posts/2021-10-02-IT-ironman-day23.md b/data/posts/2021-10-02-IT-ironman-day23.md
index 991da4cd..b7dac26f 100644
--- a/data/posts/2021-10-02-IT-ironman-day23.md
+++ b/data/posts/2021-10-02-IT-ironman-day23.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們之前在 HTML 篇章有介紹 DOM，是 Document Object Model 的縮寫！我們主要操作 DOM 來控制網頁內容～
+description: 我們之前在 HTML 篇章有介紹 DOM，是 Document Object Model 的縮寫！我們主要操作 DOM 來控制網頁內容～
 ---
 
 ![「更加認識 DOM，並初次了解事件綁定」 —— JavaScript DOM](https://i.imgur.com/slZvdj6.png)
diff --git a/data/posts/2021-10-03-IT-ironman-day24.md b/data/posts/2021-10-03-IT-ironman-day24.md
index 010ab655..f01143d6 100644
--- a/data/posts/2021-10-03-IT-ironman-day24.md
+++ b/data/posts/2021-10-03-IT-ironman-day24.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們上一個篇章認識了綁定事件，了解到不管是什麼節點，都可以綁定事件，那為什麼 JavaScript 會知道我們觸發事件？當我們點擊網頁中任何一個元素，是不是也等於點擊到網頁本身！而點擊元素與網頁本身這個過程是有順序的，稱為「事件流程」。
+description: 我們上一個篇章認識了綁定事件，了解到不管是什麼節點，都可以綁定事件，那為什麼 JavaScript 會知道我們觸發事件？當我們點擊網頁中任何一個元素，是不是也等於點擊到網頁本身！而點擊元素與網頁本身這個過程是有順序的，稱為「事件流程」。
 ---
 
 ![「你點了按鈕～同時也點了網頁本身！」 —— JavaScript 事件冒泡（Event bubbling）](https://i.imgur.com/oHkbDov.png)
diff --git a/data/posts/2021-10-04-IT-ironman-day25.md b/data/posts/2021-10-04-IT-ironman-day25.md
index 131e1f5a..e7dd506f 100644
--- a/data/posts/2021-10-04-IT-ironman-day25.md
+++ b/data/posts/2021-10-04-IT-ironman-day25.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們前面已經瞭解了事件綁定與事件冒泡了，但是使用物件元素直接綁定事件有不方便的地方，1. 只能同時為一個元素的一個事件綁定一個響應函式，2. 不能綁定多個，如果綁定多個，後面會覆蓋前面的。
+description: 我們前面已經瞭解了事件綁定與事件冒泡了，但是使用物件元素直接綁定事件有不方便的地方，1. 只能同時為一個元素的一個事件綁定一個響應函式，2. 不能綁定多個，如果綁定多個，後面會覆蓋前面的。
 ---
 
 ![「從 事件綁定 與 定時器 認識回調函式！」 —— JavaScript 定時器 & Callback](https://i.imgur.com/oqXdlun.png)
diff --git a/data/posts/2021-10-05-IT-ironman-day26.md b/data/posts/2021-10-05-IT-ironman-day26.md
index f4f91841..2ef66440 100644
--- a/data/posts/2021-10-05-IT-ironman-day26.md
+++ b/data/posts/2021-10-05-IT-ironman-day26.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們前面已經認識了函式作用域，也瞭解了回調函式，但有時候會產生意想不到的事情，造成內存問題，其中一個是閉包。
+description: 我們前面已經認識了函式作用域，也瞭解了回調函式，但有時候會產生意想不到的事情，造成內存問題，其中一個是閉包。
 ---
 
 ![「閉包要謹慎使用！」 —— JavaScript 閉包（Closure）](https://i.imgur.com/2KRYZOP.png)
diff --git a/data/posts/2021-10-06-IT-ironman-day27.md b/data/posts/2021-10-06-IT-ironman-day27.md
index deb6ecbd..6782da2b 100644
--- a/data/posts/2021-10-06-IT-ironman-day27.md
+++ b/data/posts/2021-10-06-IT-ironman-day27.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 之前已經介紹了 var 與函式作用域，今天來更仔細的介紹 ES6 新增的 let 、 const以及與它們相關的區塊作用域。
+description: 之前已經介紹了 var 與函式作用域，今天來更仔細的介紹 ES6 新增的 let 、 const以及與它們相關的區塊作用域。
 ---
 
 ![「var 成為時代的眼淚！」 —— ES6 區塊作用域 與 提升](https://i.imgur.com/hAS4sZ7.png)
diff --git a/data/posts/2021-10-07-IT-ironman-day28.md b/data/posts/2021-10-07-IT-ironman-day28.md
index d2d2c9f7..b3be4887 100644
--- a/data/posts/2021-10-07-IT-ironman-day28.md
+++ b/data/posts/2021-10-07-IT-ironman-day28.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: 我們前面已經學習了回調函式（Callback Function）與構造函式（Constrcutor），而 Promise 是 ES6 新增用來解決非同步回調地域的新語法，同時也是一個構造函式！
+description: 我們前面已經學習了回調函式（Callback Function）與構造函式（Constrcutor），而 Promise 是 ES6 新增用來解決非同步回調地域的新語法，同時也是一個構造函式！
 ---
 
 ![「Promise 初體驗～」 —— ES6 Promise](https://i.imgur.com/BnUYCE5.png)
diff --git a/data/posts/2021-10-08-IT-ironman-day29.md b/data/posts/2021-10-08-IT-ironman-day29.md
index 39b39592..282df89a 100644
--- a/data/posts/2021-10-08-IT-ironman-day29.md
+++ b/data/posts/2021-10-08-IT-ironman-day29.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: ES6 新增了更接近傳統語言寫法的 Class 這個概念，基本上可以當作是一個**語法糖**，絕大部分的功能在 ES5 都可以做到，但 Class 可以讓構造函式的寫法更加清新！
+description: ES6 新增了更接近傳統語言寫法的 Class 這個概念，基本上可以當作是一個**語法糖**，絕大部分的功能在 ES5 都可以做到，但 Class 可以讓構造函式的寫法更加清新！
 ---
 
 ![「Class 語法糖～」 —— ES6 Class 構造函式](https://i.imgur.com/EOelHe0.png)
diff --git a/data/posts/2021-10-09-IT-ironman-day30.md b/data/posts/2021-10-09-IT-ironman-day30.md
index 9a5f843a..6cd80abe 100644
--- a/data/posts/2021-10-09-IT-ironman-day30.md
+++ b/data/posts/2021-10-09-IT-ironman-day30.md
@@ -8,7 +8,7 @@ categories:
 tags: 
     - iT 鐵人賽
     - JavaScript
-excerpt: ES8 新增了 async 與 await 兩個語法，這兩個語法也是為了更方便解決非同步的語法，可以說是 Promise then 的語法糖。
+description: ES8 新增了 async 與 await 兩個語法，這兩個語法也是為了更方便解決非同步的語法，可以說是 Promise then 的語法糖。
 ---
 
 ![「什麼！？ Promise 的語法糖？」 —— ES8 Async & Await](https://i.imgur.com/YhGvJWy.png)
diff --git a/data/posts/2021-10-21-vscode-hot-key.md b/data/posts/2021-10-21-vscode-hot-key.md
index 96d1d45a..27be4c76 100644
--- a/data/posts/2021-10-21-vscode-hot-key.md
+++ b/data/posts/2021-10-21-vscode-hot-key.md
@@ -6,7 +6,7 @@ categories:
     - [程式語言, 工具, VS Code]
 tags:
     - VS Code
-excerpt: 還常常得使用滑鼠來操作 VS Code 嗎？想要更加提升自己的 Coding 效率嗎？沒錯！在這個效率至上的時代，一天 24 小時，人人都努力把任何一點點能省的時間榨出來，只要善用快捷鍵，人人都能成為快捷鍵大師，這裡將會記錄著能提升效率的 VS Code 快捷鍵，從最簡單的開始，慢慢進階上去。
+description: 還常常得使用滑鼠來操作 VS Code 嗎？想要更加提升自己的 Coding 效率嗎？沒錯！在這個效率至上的時代，一天 24 小時，人人都努力把任何一點點能省的時間榨出來，只要善用快捷鍵，人人都能成為快捷鍵大師，這裡將會記錄著能提升效率的 VS Code 快捷鍵，從最簡單的開始，慢慢進階上去。
 ---
 
 ![快捷鍵大師，時間就是金錢](https://i.imgur.com/SzMnh4N.png)
diff --git a/data/posts/2021-11-02-javascript-developer-conference.md b/data/posts/2021-11-02-javascript-developer-conference.md
index 203b3668..de512e83 100644
--- a/data/posts/2021-11-02-javascript-developer-conference.md
+++ b/data/posts/2021-11-02-javascript-developer-conference.md
@@ -8,7 +8,7 @@ categories:
 tags:
     - JSDC
     - JavaScript
-excerpt: 很高興能獲得 Alpha Camp 全額贊助 JSDC 門票，這是我第一次參加 JSDC 開發者年會（英文全名 JavaScript Developer Conference，簡稱JSDC），今年的主題是「JavaScript 過去、現在與未來」。共有四大方向，分別是「跨平台整合」、「區塊鏈應用」、「前端開發與框架」、「語言特性與後端技術」
+description: 很高興能獲得 Alpha Camp 全額贊助 JSDC 門票，這是我第一次參加 JSDC 開發者年會（英文全名 JavaScript Developer Conference，簡稱JSDC），今年的主題是「JavaScript 過去、現在與未來」。共有四大方向，分別是「跨平台整合」、「區塊鏈應用」、「前端開發與框架」、「語言特性與後端技術」
 ---
 
 ![JSDC 2021 開發者年會 參與心得](https://i.imgur.com/Z5eqYW4.png)
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
index e21f4145..0d756525 100644
--- a/src/app/[lang]/layout.tsx
+++ b/src/app/[lang]/layout.tsx
@@ -15,10 +15,9 @@ export type RootParams = {
 export async function generateMetadata({
   params: { lang },
 }: RootParams): Promise<Metadata> {
-  const { alternates } = await createMetadata();
-  const {
-    metadata: { title },
-  } = await getDictionary(lang);
+  const { alternates } = await createMetadata(lang);
+  const { metadata } = await getDictionary(lang);
+  const { title } = metadata;
 
   return {
     title: {
diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
index 54a027fb..e639ac83 100644
--- a/src/app/[lang]/posts/[postId]/page.tsx
+++ b/src/app/[lang]/posts/[postId]/page.tsx
@@ -21,27 +21,19 @@ export async function generateStaticParams() {
 export async function generateMetadata({
   params: { postId },
 }: PostParams): Promise<Metadata> {
-  const posts = await getAllDataFrontmatter('posts');
-  const post = posts.find((post) => post.id === postId);
+  const post = await getDataById('posts', postId);
 
   if (!post) return notFound();
 
-  return {
-    title: post.title,
-    description: post.excerpt,
-  };
+  return post.frontmatter;
 }
 
 async function PostPage({ params: { postId } }: PostParams) {
-  const posts = await getAllDataFrontmatter('posts');
-  const post = posts.find((post) => post.id === postId);
+  const post = await getDataById('posts', postId);
 
   if (!post) return notFound();
 
-  const { content, frontmatter, source } = await getDataById(
-    'posts',
-    postId
-  );
+  const { content, frontmatter, source } = post;
   const formattedDate = formatDate(frontmatter.date);
 
   return (
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index dc2a86a9..a2962fcb 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -15,7 +15,7 @@ function Card({
   date,
   categories,
   tags,
-  excerpt,
+  description,
   image,
 }: CardProps) {
   const formattedDate = formatDate(date);
@@ -41,7 +41,7 @@ function Card({
             {title}
           </Link>
         </h2>
-        <p className="my-3 text-base">{excerpt}</p>
+        <p className="my-3 text-base">{description}</p>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
           <div className="flex items-center gap-1">
             <BsCalendar4Week />
diff --git a/src/components/Card/card.test.tsx b/src/components/Card/card.test.tsx
index 35e6056e..cde9218e 100644
--- a/src/components/Card/card.test.tsx
+++ b/src/components/Card/card.test.tsx
@@ -15,7 +15,7 @@ describe('Card component', () => {
         ['categories_B', 'categories_B_1'],
       ],
       tags: ['tag_A', 'tag_B'],
-      excerpt: 'excerpt test',
+      description: 'description test',
     };
 
     render(<Card {...data} />);
@@ -29,6 +29,6 @@ describe('Card component', () => {
     expect(image).toHaveAttribute('alt', `${data.title} cover`);
     expect(heading).toHaveTextContent(data.title);
     expect(article).toHaveTextContent(formatDate(data.date));
-    expect(article).toHaveTextContent(data.excerpt);
+    expect(article).toHaveTextContent(data.description);
   });
 });
diff --git a/src/utils/__tests__/mdx.test.ts b/src/utils/__tests__/mdx.test.ts
index ef961df2..1602f0c8 100644
--- a/src/utils/__tests__/mdx.test.ts
+++ b/src/utils/__tests__/mdx.test.ts
@@ -91,6 +91,17 @@ describe('Get post data function', () => {
       source: '---\ndate: 2023/07/09\n---\n\n測試文章C',
     });
   });
+
+  it('should return null when trying to get post data for a non-existing file', async () => {
+    mockExists.mockReturnValueOnce(false);
+    mockReadFile.mockImplementation(() => {
+      throw new Error('File not found');
+    });
+
+    const postData = await getDataById('posts', 'not_found');
+
+    expect(postData).toBe(null);
+  });
 });
 
 const mockFileA = `---
diff --git a/src/utils/mdx.ts b/src/utils/mdx.ts
index 18c51ffe..0da935e0 100644
--- a/src/utils/mdx.ts
+++ b/src/utils/mdx.ts
@@ -45,37 +45,41 @@ export async function getAllDataFrontmatter(dirType: DataDirType) {
 
 /** Retrieve data content and front matter for a specific data file by its id. */
 export async function getDataById(dirType: DataDirType, id: string) {
-  const dirPath = path.join(ROOT_PATH, 'data', dirType);
-  const mdxPath = path.join(dirPath, `${id}.mdx`);
-  const mdPath = path.join(dirPath, `${id}.md`);
-  const fullPath = fs.existsSync(mdxPath) ? mdxPath : mdPath;
-  const source = fs.readFileSync(fullPath, 'utf8');
-  const { content, frontmatter } = await compileMDX<DataFrontmatter>({
-    source,
-    components: {
-      h1: H1,
-      h2: H2,
-      h3: H3,
-      h4: H4,
-      h5: H5,
-      h6: H6,
-      pre: CodeBox,
-      img: Image as () => JSX.Element,
-      a: Link as () => JSX.Element,
-    },
-    options: {
-      parseFrontmatter: true,
-      mdxOptions: {
-        remarkPlugins: [remarkGfm],
-        rehypePlugins: [
-          rehypeSlug,
-          rehypeCodeTitles,
-          rehypePrismPlus,
-          rehypeImageMetadata,
-        ],
+  try {
+    const dirPath = path.join(ROOT_PATH, 'data', dirType);
+    const mdxPath = path.join(dirPath, `${id}.mdx`);
+    const mdPath = path.join(dirPath, `${id}.md`);
+    const fullPath = fs.existsSync(mdxPath) ? mdxPath : mdPath;
+    const source = fs.readFileSync(fullPath, 'utf8');
+    const { content, frontmatter } = await compileMDX<DataFrontmatter>({
+      source,
+      components: {
+        h1: H1,
+        h2: H2,
+        h3: H3,
+        h4: H4,
+        h5: H5,
+        h6: H6,
+        pre: CodeBox,
+        img: Image as () => JSX.Element,
+        a: Link as () => JSX.Element,
+      },
+      options: {
+        parseFrontmatter: true,
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [
+            rehypeSlug,
+            rehypeCodeTitles,
+            rehypePrismPlus,
+            rehypeImageMetadata,
+          ],
+        },
       },
-    },
-  });
+    });
 
-  return { id, content, frontmatter, source };
+    return { id, content, frontmatter, source };
+  } catch {
+    return null;
+  }
 }
diff --git a/types/data.d.ts b/types/data.d.ts
index 047251c0..1c901ca6 100644
--- a/types/data.d.ts
+++ b/types/data.d.ts
@@ -8,6 +8,6 @@ type DataFrontmatter = {
   readonly date: DateOrDateString;
   readonly categories: string[][];
   readonly tags: string[];
-  readonly excerpt: string;
+  readonly description: string;
   readonly image?: string;
 };