静态数据 #

// src/data/products.json
[
  {
    "id": 1,
    "name": "无线耳机",
    "price": 299,
    "category": "电子产品",
    "image": "/images/headphones.jpg",
    "description": "高品质无线蓝牙耳机"
  },
  {
    "id": 2,
    "name": "机械键盘",
    "price": 599,
    "category": "电子产品",
    "image": "/images/keyboard.jpg",
    "description": "RGB背光机械键盘"
  },
  {
    "id": 3,
    "name": "显示器支架",
    "price": 199,
    "category": "配件",
    "image": "/images/stand.jpg",
    "description": "可调节显示器支架"
  }
]

---
// src/pages/products.astro
import products from '../data/products.json';
---

<div class="products">
  {products.map(product => (
    <div key={product.id} class="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p class="category">{product.category}</p>
      <p class="price">¥{product.price}</p>
      <p class="description">{product.description}</p>
    </div>
  ))}
</div>

// src/types/product.ts
interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  image: string;
  description: string;
}

export type { Product };

---
// src/pages/products.astro
import products from '../data/products.json';
import type { Product } from '../types/product';

const typedProducts: Product[] = products;
---

<div>
  {typedProducts.map(product => (
    <div key={product.id}>{product.name}</div>
  ))}
</div>

---
// src/pages/blog/index.astro
const posts = await Astro.glob('../content/blog/*.md');
---

<div>
  {posts.map(post => (
    <article>
      <h2>{post.frontmatter.title}</h2>
      <p>{post.frontmatter.excerpt}</p>
    </article>
  ))}
</div>

src/data/products/
├── headphones.json
├── keyboard.json
└── stand.json

---
// src/pages/products.astro
const productFiles = await Astro.glob('../data/products/*.json');
const products = productFiles.map(file => file.default);
---

<div>
  {products.map(product => (
    <div key={product.id}>
      <h3>{product.name}</h3>
      <p>¥{product.price}</p>
    </div>
  ))}
</div>

src/content/blog/
├── hello-world.md
├── astro-guide.md
└── web-development.md

---
// src/pages/blog/index.astro
const posts = await Astro.glob('../content/blog/*.md');
---

<div class="blog-list">
  {posts
    .sort((a, b) => 
      new Date(b.frontmatter.date).getTime() - 
      new Date(a.frontmatter.date).getTime()
    )
    .map(post => (
      <article class="post">
        <time datetime={post.frontmatter.date}>
          {new Date(post.frontmatter.date).toLocaleDateString('zh-CN')}
        </time>
        <h2>
          <a href={`/blog/${post.frontmatter.slug || post.file.split('/').pop()?.replace('.md', '')}`}>
            {post.frontmatter.title}
          </a>
        </h2>
        <p>{post.frontmatter.excerpt}</p>
        <div class="tags">
          {post.frontmatter.tags?.map((tag: string) => (
            <span class="tag">{tag}</span>
          ))}
        </div>
      </article>
    ))
  }
</div>

---
// src/pages/blog/[slug].astro
const posts = await Astro.glob('../content/blog/*.md');

export function getStaticPaths() {
  return posts.map(post => ({
    params: { 
      slug: post.frontmatter.slug || 
            post.file.split('/').pop()?.replace('.md', '') 
    },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post;
---

<article>
  <header>
    <h1>{post.frontmatter.title}</h1>
    <time>{post.frontmatter.date}</time>
  </header>
  
  <Content />
</article>

---
title: Astro
date: 2024-01-15
excerpt: 学习 Astro 的基础知识
tags:
  - Astro
  - 前端
author: 张三
cover: /images/astro-guide.jpg
draft: false
---

# Astro 入门指南

这是文章内容...

// src/types/blog.ts
interface BlogFrontmatter {
  title: string;
  date: string;
  excerpt: string;
  tags?: string[];
  author?: string;
  cover?: string;
  draft?: boolean;
}

interface BlogPost {
  frontmatter: BlogFrontmatter;
  file: string;
  url: string;
  Content: any;
}

export type { BlogFrontmatter, BlogPost };

---
// src/pages/blog/index.astro
import type { BlogPost } from '../types/blog';

const posts = await Astro.glob<BlogFrontmatter>('../content/blog/*.md');
const publishedPosts = posts.filter(post => !post.frontmatter.draft);
---

<div>
  {publishedPosts.map(post => (
    <article key={post.file}>
      <h2>{post.frontmatter.title}</h2>
      <p>{post.frontmatter.excerpt}</p>
    </article>
  ))}
</div>

src/
├── data/
│   ├── json/
│   │   ├── products.json
│   │   ├── categories.json
│   │   └── authors.json
│   ├── yaml/
│   │   ├── config.yaml
│   │   └── navigation.yaml
│   └── index.ts
├── content/
│   ├── blog/
│   │   ├── post-1.md
│   │   └── post-2.md
│   └── docs/
│       ├── intro.md
│       └── guide.md
└── types/
    ├── product.ts
    └── blog.ts

// src/data/index.ts
import products from './json/products.json';
import categories from './json/categories.json';
import authors from './json/authors.json';

export { products, categories, authors };

export type { Product, Category, Author } from '../types';

---
// src/pages/products.astro
import { products, categories } from '../data';
---

<div>
  <aside>
    <h2>分类</h2>
    <ul>
      {categories.map(cat => (
        <li key={cat.id}>{cat.name}</li>
      ))}
    </ul>
  </aside>
  
  <main>
    <h2>产品</h2>
    {products.map(product => (
      <div key={product.id}>{product.name}</div>
    ))}
  </main>
</div>

npm install yaml

# src/data/yaml/navigation.yaml
main:
  - label: 首页
    href: /
  - label: 产品
    href: /products
    children:
      - label: 产品A
        href: /products/a
      - label: 产品B
        href: /products/b
  - label: 博客
    href: /blog
  - label: 关于
    href: /about

footer:
  - label: 隐私政策
    href: /privacy
  - label: 服务条款
    href: /terms

---
// src/components/Navigation.astro
import { parse } from 'yaml';
import navYaml from '../data/yaml/navigation.yaml?raw';

const navigation = parse(navYaml);
---

<nav>
  <ul>
    {navigation.main.map(item => (
      <li key={item.href}>
        <a href={item.href}>{item.label}</a>
        {item.children && (
          <ul>
            {item.children.map(child => (
              <li key={child.href}>
                <a href={child.href}>{child.label}</a>
              </li>
            ))}
          </ul>
        )}
      </li>
    ))}
  </ul>
</nav>

npm install csv-parse

// src/data/csv/users.csv
id,name,email,role
1,张三,zhang@example.com,admin
2,李四,li@example.com,user
3,王五,wang@example.com,user

---
// src/pages/users.astro
import { parse } from 'csv-parse/sync';
import usersCsv from '../data/csv/users.csv?raw';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

const users: User[] = parse(usersCsv, {
  columns: true,
  skip_empty_lines: true,
});
---

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>角色</th>
    </tr>
  </thead>
  <tbody>
    {users.map(user => (
      <tr key={user.id}>
        <td>{user.id}</td>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.role}</td>
      </tr>
    ))}
  </tbody>
</table>

---
import { products } from '../data';

const featuredProducts = products.filter(p => p.featured);
const affordableProducts = products.filter(p => p.price < 500);
---

<div>
  <h2>精选产品</h2>
  {featuredProducts.map(p => <div key={p.id}>{p.name}</div>)}
  
  <h2>平价产品</h2>
  {affordableProducts.map(p => <div key={p.id}>{p.name}</div>)}
</div>

---
import { products } from '../data';

const sortedByPrice = [...products].sort((a, b) => a.price - b.price);
const sortedByName = [...products].sort((a, b) => a.name.localeCompare(b.name));
---

<div>
  <h2>按价格排序</h2>
  {sortedByPrice.map(p => <div key={p.id}>{p.name} - ¥{p.price}</div>)}
</div>

---
import { products } from '../data';

const groupedByCategory = products.reduce((acc, product) => {
  const { category } = product;
  if (!acc[category]) {
    acc[category] = [];
  }
  acc[category].push(product);
  return acc;
}, {} as Record<string, typeof products>);
---

<div>
  {Object.entries(groupedByCategory).map(([category, categoryProducts]) => (
    <section key={category}>
      <h2>{category}</h2>
      {categoryProducts.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </section>
  ))}
</div>

npm install zod

// src/schemas/product.ts
import { z } from 'zod';

const ProductSchema = z.object({
  id: z.number(),
  name: z.string().min(1),
  price: z.number().positive(),
  category: z.string(),
  image: z.string().url(),
  description: z.string(),
  featured: z.boolean().optional(),
});

export { ProductSchema };

---
import { products } from '../data';
import { ProductSchema } from '../schemas/product';

const validatedProducts = products.map(product => {
  const result = ProductSchema.safeParse(product);
  if (!result.success) {
    console.error(`Invalid product: ${product.id}`, result.error);
    return null;
  }
  return result.data;
}).filter(Boolean);
---

<div>
  {validatedProducts.map(product => (
    <div key={product.id}>{product.name}</div>
  ))}
</div>

┌─────────────────────────────────────────────────────┐
│                 静态数据要点                         │
├─────────────────────────────────────────────────────┤
│                                                     │
│  📄 JSON      直接导入 JSON 文件                    │
│                                                     │
│  📦 Glob      批量导入多个文件                      │
│                                                     │
│  📝 Markdown  Frontmatter + 内容                   │
│                                                     │
│  📋 YAML      结构化配置数据                        │
│                                                     │
│  📊 CSV       表格数据导入                          │
│                                                     │
│  ✅ 验证      使用 Zod 进行数据验证                 │
│                                                     │
└─────────────────────────────────────────────────────┘