Astro: 過了兩年

View Transitions API

我最印象深刻的還是當時 Astro 加進了當時只有 Chrome 有的 API View Transitions API，這個 API 可以讓網頁在切換頁面的時候有更平滑的過渡動畫

當時 Astro 直接把這個功能內建進去，我只記得我看到 Demo 的時候覺得超級酷，後來就敲了敲程式碼讓我的網頁也能用上這個功能

哦 View Transitions API 目前已經被更多瀏覽器支援了，像是 Firefox 的使用者現在也可以看到這個炫泡的動畫

View Transiton 現在在 Astro 裡面叫做 <ClientRouter />

i18n routing

在 Astro 3.5 版本的時候，他們加入了一個心的功能，i18n routing，這讓要寫多語言網站的開發者可以更輕鬆的寫出多語言的網頁

Astro 這個新東西基本上把正常多語言需要的 routing 的工作轉到框架層面去做，開發者只需要專注在網頁的撰寫與設計即可

在 Astro 4 中，他們把 i18n 的 routing 邏輯更加完善了一次，讓開發者可以定義預設語言跟加入了一些好用的變數幫助頁面知道現在的語言

src/pages/
├── 404.astro
├── blog
│   ├── index.astro
│   └── [slug].astro
├── index.astro
├── rss
│   ├── blog-en.xml.js
│   └── blog-zh.xml.js
└── zh-tw
    ├── 404.astro
    ├── blog
    │   ├── index.astro
    │   └── [slug].astro
    └── index.astro

超棒的 template generation

哦這個不是新功能，但他真的很棒，我要講第二次

反正如果你用過 React 那類的前端框架，你一定有用過這種語法：

() => {
  const mySuperTitle = "Hello World";
  
  return (
    <h1>{mySuperTitle}</h1>
  )
}

神奇的是 Astro 其實也支援這個語法，你可以把它想成 React 但是沒有 JS：

---
const mySuperTitle = "Hello World";
---

<h1>{mySuperTitle}</h1>

Quick note: 那兩個 --- 的 JS 會在伺服器端跑，底下的是會送到使用者端跑的東西，所以如果你在底下寫 <script>，那串程式碼就會跑到使用者端那邊，這在要寫動態網頁的時候蠻好用的