数据和内容管理

内容集合 (Content Collections)

• 定义集合：在 src/content/config.ts 中用 defineCollection 声明，指定类型/Schema。
• 类型安全：通过 Zod/Schema 校验 frontmatter，生成类型提示。
• 查询：getCollection('posts') 读取集合，支持过滤、排序。
• 例子：

  // src/content/config.ts
  import { defineCollection, z } from 'astro:content';
  const posts = defineCollection({
    schema: z.object({
      title: z.string(),
      date: z.date(),
      tags: z.array(z.string()).optional(),
    }),
  });
  export const collections = { posts };
  

数据获取

• 静态数据：在页面顶端 const data = await fetch(...)，构建时执行并写入静态 HTML。
• API 集成：可用 fetch/await 直接请求；避免在构建时访问不稳定源，可放到 onRequest（SSR）或使用增量生成。
• 动态导入：const md = await import('../../data/foo.json'); 在构建时打包。
• 数据预取：对列表+详情模式，可在构建时预拉取列表，生成静态详情页。

Markdown/MDX 增强

• Frontmatter：定义元数据（title/description/tags）。
• MDX：可在文档内引入组件，复用 UI（如提示、图表）。
• 语法高亮：内置支持代码块高亮，或使用 Shiki/Prism 配置。
• 自定义组件：在 MDX 顶部导入组件，通过 export const components 映射。

图片处理

• 使用 <Image /> 组件或 @astrojs/image：自动生成多尺寸、WebP、懒加载。
• 设置 width/height/format，避免原图直出。
• 对远程图片可配置 domains 白名单。

内容管理实践

• 目录组织：按语言/主题/年份分层；文件名语义化。
• 标签/分类：在 frontmatter 里存 tags/categories，便于过滤与搜索。
• 关联内容：用 slug 或 ID 互链（相关文章、上下篇）。
• 搜索：可在构建时生成静态索引（JSON），前端查询；或接入外部搜索服务。