Merge pull request #93 from JohnsonMao/feature/mdx-try-catch-and-refa…

…ctor ✨ add try-catch statement to handle errors ♻️ refactor front matter excerpt to description
JohnsonMao · Sep 27, 2023 · 883027f · 883027f
2 parents 839d1d7 + 885de38
commit 883027f
Show file tree

Hide file tree

Showing 44 changed files with 95 additions and 89 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ categories: @@
     tags:
         - iT 鐵人賽
         - CSS
-    excerpt: 偽（Pseudo）這個意思有虛幻虛無的意思，類選擇器是用來處理 DOM 操作不了選擇器，偽元素則是原本並沒有在 HTML DOM 中，是透過 CSS 創造出來的元素。
+    description: 偽（Pseudo）這個意思有虛幻虛無的意思，類選擇器是用來處理 DOM 操作不了選擇器，偽元素則是原本並沒有在 HTML DOM 中，是透過 CSS 創造出來的元素。
     ---
@@ Expand Down @@