Astro 5.x 升級實戰：從 4.10 到 5.14 的完整遷移指南
最近進行部落格的技術升級，首先從 Astro 4.10.1 升級到 5.14.1，接著再處理 TailwindCSS v4 升級。Astro 的升級相對平順，主要是 API 變更和最佳實踐的調整，沒有 TailwindCSS 那麼多坑要踩。 升級版本： Ast
分類：Astro
2025
2023
尾聲
在認識 Astro 之前，也用過了不少框架架設 Blog 從最一開始的 HEXO, Angular Scully, 後來改為 Angular Universal 方式架設，直到現在改用 Astro。 原因無它，只因為受限太多．最後換成 Angular Univ
實作 Astro 部署：將網站部署到 GitHub Pages
Astro 裡有許多部屬方式，因我們這次介紹是針對初學者架設，所以選擇了 github pages 開啟 astro.config.mjs 檔案。這個檔案用於設定你的 Astro 網站相關的設定。 site：將site設定為你的GitHub Pages網址，或
實作 Astro 功能：換頁過場動畫 (View Transitions)
Astro 3.0 加入了全新的功能 - 視圖轉換（View Transitions），它可以實現頁面之間更平滑的切換效果，無需進行瀏覽器的完整頁面刷新。今天我們就來把之前做過的頁面加上View Transitions的效果吧！ 首先，讓我們將視圖轉換效果應用
實作 Astro 頁面：建立聯絡表單
今天來實做做個簡易的聯絡表單。 聯絡表單是網站的重要元素之一，它使訪問者能夠輕鬆地與網站管理者或網站擁有者取得聯繫。 透過這個表單，訪問者可以提供他們的名字、電子郵件地址、手機號碼以及訊息，這對於商業網站來說尤其重要，因為它讓客戶能夠提問問題、提供反饋或請求更
實作 Astro 功能：文章搜尋(Search)
當網站內容一多的話，很難快速找到我們想要的文章。 搜尋功能可以幫助用戶輕鬆找到所需的內容，提升使用者體驗，並提高網站的互動性和價值。 今天，將介紹如何在 Astro 框架中實現一個基本的搜尋系統，以加強你的網站。 以下是完成後的頁面，分別是搜尋後顯示的列表與未
實作 Astro 組件：文章留言版
一篇文章底下，如果有個留言版，可以讓讀者分享他們的看法、提出問題，今天我們將介紹如何在文章底下新增留言版 如圖所示 utterances 是一個基於 GitHub Issues 的評論系統，它可以讓使用者使用他們的 GitHub 帳戶來發表評論，且內容會存在
實作 Astro 組件：麵包屑 (Bread Crumbs)
今天，我們將實作如何使用 Astro 創建一個導覽麵包屑（Breadcrumbs）組件，以增加網站的導航和用戶體驗。導航面包屑通常用於指示用戶的當前位置，並使他們能夠輕鬆返回上一層或之前的頁面。 以下是完成後的畫面 首先，讓我們看一下創建面包屑導航所需的程式碼
實作 Astro 組件：文章目錄 (Toc)
在前面的教學中，我們學習了如何建立文章列表和實現分頁功能。然而，內容頁面目前看起來有些單調，因此，今天我們將優化內容頁面，為文章新增一個文章目錄。 文章目錄是一個常見的功能，特別對於長篇內容非常有用。它允許讀者輕鬆尋找和導航到內容中的特定段落或章節。今天，我們
實作 Astro 組件：格式化日期(FormattedDate) 與 卡片(Card)
在前幾天的文章中，我們已經學會了如何建立文章列表和實現分頁功能。 然而，目前的文章列表頁面看起來相當簡單，而日期格式也不符合我想要的需求。 所以今天要實做兩個組件。分別是 日期格式化顯示、與卡片樣式 以下是完成後的畫面 在 src/components 裡建立
實作 Astro 功能：文章標籤 (Tags)
在前幾天，我們已經學會了如何建立文章列表，今天將介紹如何在 Astro 裡實現文章標籤與標籤列表頁面。文章標籤是不可或缺的，它有助於組織和分類文章，讓讀者更輕鬆地尋找相關內容！ 在開始之前，確保你的文章資訊中包含了標籤（tags）的資訊。這些標籤將用於分類文章
實作 Astro 頁面：建立文章列表分頁 (Pagination)
昨天，我們已經學習了如何建立文章列表頁面。 今天，我們將進一步學習如何在 Astro 專案中實現分頁功能，以便更好地管理和顯示內容，特別是當內容列表變得過長時。我們將使用 Tailwind Components 這個分頁樣版來套用。 在前幾篇文章中，我們已經了
實作 Astro 頁面：建立 Blog 文章列表
今天，我們將學習如何使用 Astro 項目建立一個部落格文章列表頁面，並確保這些文章按照日期由新到舊的順序排列。 在 src/pages/blog/index.astro 文件中，我們使用以下程式碼來查詢部落格內容並呈現文章列表 這段程式碼中，我們使用 get
重構 Astro Blog，實現統一的外觀佈局
在我們之前的教學中，我們學習如何整合 Tailwind CSS 並創建 Astro 項目的基本組件。 現在，我們將更進一步，通過建立一個統一的佈局（Layout），確保所有頁面在外觀上保持一致，提高整體專業度和使用者體驗。 首先，在 src/layouts 文
實作 Astro 組件：新增深色模式 (Dark Mode)
在前一篇教學中，我們已成功整合了 Tailwind CSS 到我們的 Astro 項目中，並且已經設定好所需的變數。 今天，我們將進一步為我們的網站添加一個常見的功能：深色模式（Dark Mode）。 現在，我們將創建一個切換組件來啟用和禁用 Dark Mod
實作 Astro Tailwind CSS 變數設定
在這篇文章中，我們將學習如何建立 Dark Mode 所需的 CSS 變數，以使我們的網站能夠在不同模式下切換。 首先，在 styles/global.css 文件中，我們需要宣告一組 CSS 變數，用來定義 Dark Theme 和 Light Theme
Astro 整合：使用 Tailwind CSS 優化你的 Blog
看了這麼多天的文章介紹 Astro，是不是心動想躍躍欲試了呢？ 接下來，我們將開始實作我們的 blog。 將我們第二天文章裡介紹的開發環境啟動後，會看到以下畫面 接下來，都將會使用 tailwind CSS 來撰寫版面樣式，來優化這個 Blog！ 你可以使用以
使用 Astro Data fetch 抓取 API 資料
在昨天我們了解了如何在 Astro 中獲取內容集合中的文章資料，但現在可能會有更多問題：如果我們的資料來自 API 呢？這時，就可以使用 Astro 的數據提取功能。 在 Astro 中，所有組件都可以訪問全局的 fetch() 函數，以向 API 發送 HT
了解 Astro Content Collections（內容集合）
在 Astro 2.0.0 版本中，引入了 Content Collections 功能，這是一個極其強大的工具，用於管理和展示您的網站內容。本篇將帶您深入探討 Astro Content Collections，包括如何建立集合、定義集合結構、呈現內容，以及
了解 Astro 的路由設定：路由 (Route)
在前幾篇中我們介紹了 Astro 中的 Page 概念，今天讓我們更深入地探討路由，了解它在網站開發中的重要性以及如何在 Astro 中使用不同類型的路由。 在網站開發中，「路由」是指將特定的 URL 路徑映射到特定的網頁內容或功能。簡單來說，當用戶訪問某個
了解 Astro 圖片處理 (Image)
Astro 提供多種方法來有效地管理和顯示圖片，不論它們是存儲在專案內部、遠程連結，還是由內容管理系統（CMS）或內容分發網絡（CDN）管理。 我們建議將本地圖片存儲在 src/ 目錄下，以允許 Astro 對其進行轉換、優化和打包。 位於 /public 目
了解 Astro 的樣式設定 (Style)
昨天我們了解了 Astro 的樣版語法元素，今天我們將深入研究 Astro 中的樣式部分。 在 Astro 中，要為元件或頁面模板設置樣式，只需添加 標籤即可。當您將 標籤放入 Astro 元件中時，Astro 會自動偵測 CSS 並處理樣式。 範例： Ast
了解 Astro 語法元素 (Template)
在這份教學中，我們將深入瞭解 Astro 語法的一些主要元素和相關範例，幫助您更好地理解如何使用 Astro 來建立網頁。 Astro 允許您在組件中綁定動態資料，這可以是來自組件屬性的資料，也可以是從資料源中獲取的資料。使用大括號 {} 來實現這一功能。以下
認識 Astro Layouts (佈局)
在 Astro 中，佈局是一種特殊的組件，旨在提供可重複使用的 UI 結構，通常用於頁面模板。我們經常使用 "佈局" 一詞來指稱提供頁面中共享元素的 Astro 組件，例如頁首 (header)、導航欄和頁尾 (footer)。一個典型的 Astro 佈局組件
認識 Astro Pages (頁面)
在 Astro 項目中，Pages扮演了重要角色。這些頁面位於 src/pages/ 子目錄下，負責處理網站的路由、數據加載和整體頁面佈局。 今天，我們將探討 Astro 頁面的類型、路由策略和如何連接它們。 Astro 支援多種頁面文件類型，包括： .ast
認識 Astro Components (組件)
今天，我們將進一步深入了解 Astro 的組件。 Astro 組件是 Astro 專案的基本構建塊，它們是僅支持 HTML 的模板組件，沒有客戶端運行時。您可以通過文件擴展名 .astro 識別 Astro 組件。 非常靈活，可包含可重複使用的 UI 元素。
了解 Astro 專案的架構
現在，我們將深入了解 Astro 專案的結構，這有助於您更好地理解 Astro 應用的架構和組織方式。 Astro 專案的結構如下： 以下是每個資料夾的檔案與用途說明： Astro 專案的程式碼存放在 src 資料夾中，這包括： 元件（Components）
Astro 基礎介紹與開發環境設定
前面已經介紹了 Astro 的優點，相信你已經迫不及待要開始試用了！現在，我們將逐步指導你如何設定適合開發 Astro 的環境。 首先，請確保你已經安裝了以下的工具和環境： Node.js 和 npm：請確保你已經安裝了 Node.js 和 npm（Node
Astro v3 帶來的新特性
很幸運在開賽前幾天遇到版本更新，那就讓我們來看看 Astro 3.0 帶來了哪些重要的改變。 Astro 3.0 引入了 View Transitions API，這是一組全新的平台 API，讓您可以在網頁頁面之間實現原生瀏覽器過渡效果，包括淡入淡出、滑動和更
為什麼會選 Astro
基於本身是純前端開發者，偶然看到了 Astro 的特性，被深深吸引，雖然現在有許多靜態網站的產生器，但裡面參雜著各種語言，想要客製化樣式的時後也不好改，且也繁複。而 Astro 採用了一種獨特的結構，將 HTML、CSS 和 JS 整合在一個單一檔案中。這讓程