鐵人檔案
是否有想過學習完基礎網頁開發後想要建構自己的網站卻發現難以起手，往往需要再學習額外的模板語言？接觸額外的生態系與框架？在這裡都不用！只需具備基礎的 HTML / CSS / JS 即能立即上手。Astro.js 是專為速度而設計的多合一網頁框架，著重於建構內容為重(content-focused)的網頁，在本系列文章會著重透過實際案例(像是建構自己的個人作品集網站與部落格等靜態內容網站)，不空口白談而是從零到部屬成功打造扎實的作品。
Day1 - 起飛前置準備 前言 根據 State of JS 2022，有一款在 2021 年推出的新框架騰空而出，獲得了眾開發者極高的關注與興趣，依靠最少...
前言 前面提到 Astro 是一個以「靜態內容為主軸」的框架，並且讓 JavaScript 只在必要時被運輸執行，這麼說還是有點攏統，要了解 Astro 的優...
前言 前面提到 Astro 是如何建構頁面的，像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁，接著本章節就要來實際創建一個 As...
前言 前面建構了一個全新的 Astro 專案，並說明了專案的大致架構。接著開始從 Astro 命令列介面與如何設置 astro.config 檔案說起。 As...
前言 前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌，本章節會從創建基本 Astro 元件開始，元件可以被放置在先前提到的 src...
前言 前面提到撰寫 Astro 元件所需要知道的基本知識，在本章節將會更進一步說明如何為元件撰寫添加樣式。 樣式在 Astro 在 Astro 中撰寫樣式是一...
前言 前面學習了如何撰寫元件並添加樣式，具備了基礎撰寫元件的能力，接下來兩個章節都會打鐵趁熱來製作一個實際且極具代表性的元件 —— 「按鈕」。 定義問題 網站...
前言 Tailwind 是一款 CSS 框架與學習 Astro 並無絕對關係，但基於它的社群熱門程度與可以快速靈活導入樣式的特性，何不來嘗試運用看看呢？嘗試導...
前言 到目前為止還沒有接觸到如何在元件中執行客戶端 JavaScript，在本章節將會介紹「本地腳本」與「外部腳本」兩種方法。通常操縱 DOM 的行為都會放在...
前言 前面提到如何在 .astro 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件...
