Astro 專題 - DevPulse：極簡開發者技術雷達 (Tech Radar)-2

(進階) 在 Astro 5 中讀取並顯示

我們可以直接在頁面中把這些資料抓出來，並根據 status 分類。

---
import { getCollection } from 'astro:content';

// 取得所有技術清單
const allTechs = await getCollection('techs');

// 按照狀態預分類 (這在 Server 端完成，SEO 滿分)
const categories = {
  mastered: allTechs.filter(t => t.data.status === 'mastered'),
  learning: allTechs.filter(t => t.data.status === 'learning'),
  wishlist: allTechs.filter(t => t.data.status === 'wishlist'),
};
---

<div class="grid gap-8">
  {Object.entries(categories).map(([status, items]) => (
    <section>
      <h2 class="text-2xl font-bold capitalize mb-4 border-b border-gray-200 pb-2">
        {status}
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {items.map(item => (
          <div class="p-4 rounded-xl border border-gray-100 bg-white shadow-sm hover:shadow-md transition-shadow">
            <span class="text-3xl mb-2 block">{item.data.icon}</span>
            <h3 class="font-bold">{item.data.name}</h3>
            <p class="text-sm text-gray-500 line-clamp-2">{item.body}</p>
          </div>
        ))}
      </div>
    </section>
  ))}
</div>