使用客製化元件在 Astro MDX 當中
在 Astro 中使用 MDX 撰寫文章給我非常多的彈性，但絕大多數文章我還是希望使用 Markdown 現有的語法來撰寫，像是：圖片、程式碼區塊、列表……等，有沒有辦法將自定義的元件對應於 Markdown 語法呢？這樣就不用每次都要再 MDX 中特地引入元件並使用，單純的撰寫 Markdown 即可。
在 Astro 中使用 MDX 撰寫文章給我非常多的彈性，但絕大多數文章我還是希望使用 Markdown 現有的語法來撰寫，像是：圖片、程式碼區塊、列表……等，有沒有辦法將自定義的元件對應於 Markdown 語法呢？這樣就不用每次都要再 MDX 中特地引入元件並使用，單純的撰寫 Markdown 即可。
本系列 Astro 文章終於完結了，必須說連續 30 天到了後段有點寫不太出來任何東西，秉持著有寫任何東西無論如何都比沒寫強的精神完成了這次的挑戰！本系列文章是當完兵出來沒多久馬上開始寫的，因此是在最後一天開賽而且還只有不到 10 篇的屯稿的狀態下進行的，加上日後工作也忙碌起來，能夠完賽算是很幸運。
終於到第 29 天了……前面寫太多沒有規劃好反而到後面也不知道要多寫什麼。其實在撰寫這 30 天文章之前我有先試寫紀錄一下我用 Astro 製作個人網站的過程，可以參考看看：製作個人前端作品集 - 準備篇以及實作篇，裡面有記錄從發想草稿到實作的過程，如果想要製作個小網站試試水溫可以參考看看。
感覺 30 天真的要寫不下去了 😅，感覺要寫的前面都寫過了，今天這一篇來介紹 Astro 有那些資源可以入門以及近期的新聞。就在昨天 Astro 發布了 3.3 版本，來了嶄新的實驗性圖片組件 <Picture />，改進了語法突出顯示的相容性，引入了套件的可信性證明，以及其他一些提升使用體驗的改進。
本章節來談談 Astro 3.0 版本最吸睛的一項功能：View Transitions ，讓你的靜態網頁也能達成 App 應用一樣的絲滑感受。由於這項技術還在實驗階段，因此放在後面的章節補充。View Transitions API 是瀏覽器正推出的一項 API，提供簡易的方法對任何 DOM 狀態更換提供轉場特效。
很多時候建構網站都太著重在技術層面該如何應對，但要怎麼經營自己的網站或產品好像卻沒什麼概念，因此這裡添加一下我建構網站的歷程與收穫。我從幾年前剛學習網頁到現在一直在為寫部落格做準備，期間嘗試用很多不同技術與挑戰，但一直以來都沒有特別滿意的成果，直到近期才比較有「寫部落格」這件事究竟是什麼的體會。
在 Astro 中串接 CMS 是一件非常容易的事情。內容管理系統 （Content Management System）是一種用於編寫和管理網站內容的工具，可以讓幫助撰寫內容與管理網站資產，不同的 CMS 廠商有各式各樣的特色像是：排程發布、編輯器、合作編輯、資產管理……等特色。
我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理，因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯，還有額外添加 TypeScript 的檢查與 VSCode 提示。本篇文章將帶你認識我如何替自己的 Astro 部落格添加 ESLint 與 Prettier。
當網站規模愈複雜，使用相對關係路徑就會需要花費很多心力去解讀與撰寫，在撰寫引入路徑時會發現撰寫相對位置的路徑既又繁瑣又難維護，可以透過額外設置路徑別名來解決這個問題。本篇文章介紹如何透過設定 Astro 中的 TS 設定檔來達成路徑別名。
環境變數提供在不同開發階段切換伺服器地址的靈活性，避免硬編碼，同時安全存儲敏感信息，如 API 金鑰或數據庫密碼，使程式更具適應性和安全性。如果你熟悉 Vite 的話應該會非常熟悉，因為 Astro 即是使用 Vite 作為底層。
到這個章節介紹了絕大多數會使用到的 Astro 功能，後續的章節會著重在講解一些額外的環境設置。讓我們把製作好的網站放到伺服器上可以被其他人造訪吧。到目前為止教學都是以靜態生產的方式的使用 Astro，也就是預先渲染的網頁文件可以被靜態的放置在伺服器上被索取。
前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步，這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。隨著文章愈來愈多會需要一個查詢文章的功能，透過用戶輸入文章相關的訊息，比對文章資訊（標題、文章短描述）並顯示出最相關的文章。
前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的資料，並實作生成一個 RSS 檔案作為練習，RSS 是一種標準化的方式，一種特定格式的 XML 檔案，設計來推播最新資訊給網站用戶。
前面學習了內容集合與頁籤的製作，今天的主題練習透過整理集合抓取到的資料更進一步製作分類功能頁面。隨著內容集合發布的文章越來越多，裡面可能會有許多相同性質的文章你會想要集合起來並替他們分類，並且自動根據類別自動創建頁面方便查閱。
透過內容集合動態的生成 Route 是件方便美好的事情，但一旦數量一多就必須要想辦法分批次顯示這些資料，恰好 Astro 內建頁籤可以幫助我們打造這方面功能，會建議等到網站真的有這麼大量的內容再來考慮製作頁籤，嘗試添加分頁功能並創建分頁元件吧。
除了定義資料在元件中、在 `src` 中 `import` 進來或者是 `fetch` 遠端資料之外有其他撰寫內容的方式嗎？有的！內容集合於 2.0 版本推出，用於替網站的本地內容提供易於使用管理、自動化型別驗證的功能。如果你有大量文件需要注入網頁中便可以使用該項功能。
先前了解了如何使用 Markdown 與 MDX 來撰寫網頁，接著這個章節將會學習到如何替這些檔案設置畫面布局 (Layout)。布局可以想像成是常見的頁面的模板用於管理頁面常見的模式，定義布局頁面可以解省重複並統一管理頁面。
通常文件會伴隨著圖片，而圖片可以佔據一個頁面絕大多數的運算資源與流量！你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗，Astro 預設自帶相關的元件與方法幫助你處理這些事務。了解儲存圖片位址 src/ 和 public/ 的差異與如何最佳化圖片。
撰寫網站最終還是要回歸到易於維護，能不能不需要接觸程式，只需透過編寫文件就能更改頁面內容呢？也就是將內容與版面、邏輯做分離。本章節我們將會學習 Markdown 與 MDX 來達成這件事，它們主要用途是作為傳達與標記內容。
在上一章節介紹了基礎元件的使用，並且你也大概猜到了，只要元件放置在 src/pages/ 之內就會自動的成為 Astro 的頁面，在本章節會更細緻的介紹關於 Astro 的路由設置。Astro 採用的路由策略被稱為「基於檔案的路由 File-based Routing」。
前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情，但這些元件中的狀態要怎麼去管理呢？在一些 UI 框架中會提供創建 `context` 的方式來管理狀態，但由於 Astro 採用「局部 Hydration」的方式來渲染頁面，因此無法辦到，但我們可以額外使用 Nano Stores 來達成這點。
前面提到如何在 `.astro` 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件之中，享受不同技術與其生態域帶來的便利與好處。在本章節將會從安裝整合到製作一個 React 元件。
當你希望 Astro 處理腳本時可以直接撰寫 <script> 標籤到元件模板之中，當需要直接插入行內腳本可以使用 is:inline 模板指令。通常操縱 DOM 的行為都會放在客戶端腳本中，像是事件監聽、動畫、Ajax……一切與瀏覽器貼近的行為都會放在這裡。
這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得，如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕，現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro，對你來說都不會是問題了。
網站中要用到許多種類的按鈕，在本章節綜合了先前「基礎元件」與「樣式」兩章節的內容，打造出一個通用的網頁按鈕元件，一起來實作看看吧。按鈕是網頁極具代表性的元件之一，下一章節講解整合 Tailwind 也會以這個例子出發，敬請期待！
綜合來說 Astro 讓你用自己習慣的方式撰寫 CSS，不管是 import 還是 <link> 還是 Scoped CSS 或是各式各樣的預處理語言或框架皆有支援。stro 中撰寫樣式是一件非常容易的事，並且有多樣選項可供挑選。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它！今日介紹構成 Astro 最核心的概念 —— 元件。前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌，本章節會從創建基本 Astro 元件開始。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它！今日介紹 Astro 的 CLI 指令與設置 `astro.config` 檔案。你可以使用自己喜愛的套件管理器來執行 Astro ，不管是 npm、pnpm、yarn 甚至是 bun。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它！今日介紹如何從頭建構一個專案並且了解資料夾結構。前面提到 Astro 是如何建構頁面的，像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁，接著本章節就要來實際創建一個 Astro 專案囉！
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它！今天理解到了動態網站與靜態網站的區別，關係到了網頁「渲染模式」的抉擇，而 Astro 就及是一個瞄準生成靜態頁面為主的框架。要了解 Astro 的優勢就需要了解現有的問題，需要進一步了解什麼是所謂的「靜態網站」什麼是「動態網站」。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它！學習 Astro 將會成為前端開發的一股新氣象，事實上也被前端社群評價為：「最喜愛的」、「最期待的」新技術之一，憑藉著它極為平緩的學習曲線、活耀的社群、踩到痛點的定位和極高的擴充性，它可以輕易上手成為前端的主力生產力工具之一。
我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理，因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯，還有額外添加 TypeScript 的檢查與 VSCode 提示，本篇文章有詳細的教學範例引導你在 Astro 中安裝 ESLint 與 Prettier 套件。
目前本部落格就是使用 Astro 所建構，在從正式版還沒推出之前就使用著它來創建網頁到目前算是小有心得，加上也有許多人詢問過，於是就寫這篇文章來分享一下。在這之前我使用過很多不同的框架，像是 Next、Gatsby、Jekyll、HUGO，它們都是很好的框架，但一直沒有戳中我的需求……