iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

從零開始學習 Astro, 打造個人Blog (部落格) 系列

ASTRO 是一個令人興奮的新一代前端框架,它以其簡單易用和優越的性能而聞名,提供服務端渲染(SSR)和靜態生成,優化性能和載入速度。透過這系列,你將學習安裝設定、設計外觀、建立文章頁面、添加互動功能和探索ASTRO的優勢。打造個人化且高效的個人 Blog。

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文 團隊哥布林殺手
DAY 21

實作 Astro 功能:文章標籤 (Tags)

在前幾天,我們已經學會了如何建立文章列表,今天將介紹如何在 Astro 裡實現文章標籤與標籤列表頁面。文章標籤是不可或缺的,它有助於組織和分類文章,讓讀者更輕鬆...

2023-09-22 ‧ 由 Mandy 分享
DAY 22

實作 Astro 組件:格式化日期(FormattedDate) 與 卡片(Card)

在前幾天的文章中,我們已經學會了如何建立文章列表和實現分頁功能。然而,目前的文章列表頁面看起來相當簡單,而日期格式也不符合我想要的需求。所以今天要實做兩個組件。...

2023-09-23 ‧ 由 Mandy 分享
DAY 23

實作 Astro 組件:文章目錄 (Toc)

在前面的教學中,我們學習了如何建立文章列表和實現分頁功能。然而,內容頁面目前看起來有些單調,因此,今天我們將優化內容頁面,為文章新增一個文章目錄。 文章目錄是一...

2023-09-24 ‧ 由 Mandy 分享
DAY 24

實作 Astro 組件:麵包屑 (Bread Crumbs)

今天,我們將實作如何使用 Astro 創建一個導覽麵包屑(Breadcrumbs)組件,以增加網站的導航和用戶體驗。導航面包屑通常用於指示用戶的當前位置,並使他...

2023-09-25 ‧ 由 Mandy 分享
DAY 25

實作 Astro 組件:文章留言版

一篇文章底下,如果有個留言版,可以讓讀者分享他們的看法、提出問題,今天我們將介紹如何在文章底下新增留言版 如圖所示 使用 Utterances 建立留言板 ut...

2023-09-26 ‧ 由 Mandy 分享
DAY 26

實作 Astro 功能:文章搜尋(Search)

當網站內容一多的話,很難快速找到我們想要的文章。搜尋功能可以幫助用戶輕鬆找到所需的內容,提升使用者體驗,並提高網站的互動性和價值。今天,將介紹如何在 Astro...

2023-09-27 ‧ 由 Mandy 分享
DAY 27

實作 Astro 頁面:建立聯絡表單

今天來實做做個簡易的聯絡表單。聯絡表單是網站的重要元素之一,它使訪問者能夠輕鬆地與網站管理者或網站擁有者取得聯繫。透過這個表單,訪問者可以提供他們的名字、電子郵...

2023-09-28 ‧ 由 Mandy 分享
DAY 28

實作 Astro 功能:換頁過場動畫 (View Transitions)

Astro 3.0 加入了全新的功能 - 視圖轉換(View Transitions),它可以實現頁面之間更平滑的切換效果,無需進行瀏覽器的完整頁面刷新。今天我...

2023-09-29 ‧ 由 Mandy 分享
DAY 29

實作 Astro 部署:將網站部署到 GitHub Pages

Astro 裡有許多部屬方式,因我們這次介紹是針對初學者架設,所以選擇了 github pages 設定 astro.config.mjs 檔案 開啟 astr...

2023-09-30 ‧ 由 Mandy 分享
DAY 30

尾聲

在認識 Astro 之前,也用過了不少框架架設 Blog從最一開始的 HEXO, Angular Scully, 後來改為 Angular Universal...

2023-10-01 ‧ 由 Mandy 分享