Astro 系列文第十二日：基礎路由
在上一章節介紹了基礎元件的使用，並且你也大概猜到了，只要元件放置在 src/pages/ 之內就會自動的成為 Astro 的頁面，在本章節會更細緻的介紹關於 Astro 的路由設置。Astro 採用的路由策略被稱為「基於檔案的路由 File-based Routing」。
在上一章節介紹了基礎元件的使用，並且你也大概猜到了，只要元件放置在 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 將會成為前端開發的一股新氣象，事實上也被前端社群評價為：「最喜愛的」、「最期待的」新技術之一，憑藉著它極為平緩的學習曲線、活耀的社群、踩到痛點的定位和極高的擴充性，它可以輕易上手成為前端的主力生產力工具之一。
近兩個月來在軍隊中學到的三點重要能力，時隔兩年重溫的兩個月軍旅生活說不上會對人生有什麼大改變，但讓我重新體會到自由的可貴。距離上次當兵已是 2 年前的事，在大學畢業後提早申請入伍進入了桃園楊梅再服役兩個月，這篇文章主要想在沒文章產出期間分享一下這兩個月來的感想與活動。
很多時候都會忽略掉 HTML 本身就有很好的支援輸入控制與提交，輸入選項的功能與介面都可以輕易的透過原生 HTML 標籤來完成，只要想要在網頁中提交資料，都是使用 HTML 表單的好時機，讓我們來了解怎麼使用 HTML 表單製作一個無障礙且語意化的輸入表單。
程式中出現錯誤是必不可少的，有千萬個原因可能造成程式出現錯誤無法運行，這時候在 JavaScript 中就可以使用 try...catch 語法來處理錯誤情境，除了攔截錯誤也可以自行定義與拋出錯誤，讓程式中的錯誤更容易被理解與管理。