iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

網頁開發沒有這麼簡單過!實際案例帶你上手 Astro.js 系列

是否有想過學習完基礎網頁開發後想要建構自己的網站卻發現難以起手,往往需要再學習額外的模板語言?接觸額外的生態系與框架?在這裡都不用!只需具備基礎的 HTML / CSS / JS 即能立即上手。Astro.js 是專為速度而設計的多合一網頁框架,著重於建構內容為重(content-focused)的網頁,在本系列文章會著重透過實際案例(像是建構自己的個人作品集網站與部落格等靜態內容網站),不空口白談而是從零到部屬成功打造扎實的作品。

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 - 全域狀態管理

前言 前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情,但這些元件中的狀態要怎麼去管理呢?讓我們進入全域狀態管理的世界。 在不同組件之間傳遞...

2023-09-26 ‧ 由 網頁東東 分享
DAY 12

Day12 - 基礎路由

前言 在上一章節介紹了基礎元件的使用,並且你也大概猜到了,只要元件放置在 src/pages/ 之內就會自動的成為 Astro 的頁面,在本章節會更細緻的介紹...

2023-09-27 ‧ 由 網頁東東 分享
DAY 13

Day13 - Markdown & MDX

前言 前面介紹了元件與路由,相信製作靜態為主的網站已經難不倒你,甚至還可以發揮 Astro 最強大的優勢,透過選擇性 Hydration 添加些動態內容到頁面...

2023-09-28 ‧ 由 網頁東東 分享
DAY 14

Day14 - Assets 圖片最佳化

前言 通常文件會伴隨著圖片,而圖片可以佔據一個頁面絕大多數的運算資源與流量!你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗,Astro 預設自帶相關的元...

2023-09-29 ‧ 由 網頁東東 分享
DAY 15

Day15 - 基礎布局

前言 先前了解了如何使用 Markdown 與 MDX 來撰寫網頁,接著這個章節將會學習到如何替這些檔案設置畫面布局 (Layout)。 什麼是布局 前面提到...

2023-09-30 ‧ 由 網頁東東 分享
DAY 16

Day16 - 內容集合

前言 除了定義資料在元件中、在 src 中 import 進來或者是 fetch 遠端資料之外有其他撰寫內容的方式嗎?有的! 什麼是內容集合 Content...

2023-10-01 ‧ 由 網頁東東 分享
DAY 17

Day17 - 實作頁籤

前言 透過內容集合動態的生成 Route 是件方便美好的事情,但一旦數量一多就必須要想辦法分批次顯示這些資料,恰好 Astro 內建頁籤可以幫助我們打造這方面...

2023-10-02 ‧ 由 網頁東東 分享
DAY 18

Day18 - 實作集合分類功能

前言 前面學習了內容集合與頁籤的製作,今天的主題練習透過整理集合抓取到的資料更進一步製作分類功能頁面。 定義問題 隨著內容集合發布的文章越來越多,裡面可能會有...

2023-10-03 ‧ 由 網頁東東 分享
DAY 19

Day19 - 實作 RSS 端點

前言 前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的...

2023-10-04 ‧ 由 網頁東東 分享
DAY 20

Day20 - 實作搜尋功能

前言 前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步,這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。 定義問題 隨...

2023-10-05 ‧ 由 網頁東東 分享