Astro 2.5 | Astro 框架

我们刚刚发布了 Astro 2.5，包含大量新功能，其中包括：

数据集合与引用：您的 src/content/ 文件夹现在可以包含 JSON 和 YAML 文件来存储数据。您可以从其他集合中引用这些数据。
混合渲染（实验性）：允许在您大部分为静态的站点中使用服务器路由。
自定义客户端指令（实验性）：一项新的 API，用于集成定义其自己的 client: 指令加载机制。
HTML 压缩：一个允许您压缩 Astro 模板的选项。
并行渲染：Astro 现在并行运行同级组件，当您有多个组件进行自己的数据加载时，可以加快渲染速度。
多态类型助手：定义一个组件，使其接受与内置元素相同的属性。

数据集合与引用

内容集合是 Astro 用于管理和创作内容的一流解决方案。Astro 2.5 通过 新的数据格式和集合引用，进一步完善了这一功能。

首先，我们引入了一个新的 type: 'data' 属性，用于将 JSON 和 YAML 等数据格式存储在它们自己的集合中。这使得集合能够用于新的内容形式，包括作者资料、可重用图片替代文本、翻译词典等。

在现有内容集合旁边创建数据集合

src/content/
    blog/
        week-1.md
        week-2.md
    authors/
        grace-hopper.json
        alan-turing.json

使用新的 type: 'data' 属性配置它们

import { defineCollection, z } from "astro:content"

const authors = defineCollection({
  type: "data",
  schema: z.object({
    name: z.string(),
    socialLink: z.string().url(),
  }),
})

const blog = defineCollection({
  type: "content",
  schema: z.object({
    /* ... */
  }),
})

export const collections = { blog: blog, authors: authors }

您可能还会希望“引用”相关条目。一个常见的例子是博客文章引用存储在数据集合中的可重用作者资料（JSON 格式），或存储在同一集合中的相关文章 URL。您可以使用新的 reference() 函数配置这些关系。

import { defineCollection, reference, z } from "astro:content"

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    // Reference a single author from the `authors` collection by `id`
    author: reference("authors"),
    // Reference an array of related posts from the `blog` collection by `slug`
    relatedPosts: z.array(reference("blog")),
  }),
})

const authors = defineCollection({
  type: "data",
  schema: z.object({
    /** ... */
  }),
})

export const collections = { blog, authors }

现在，每篇博客文章都可以通过类型安全验证来引用相关条目。

---
title: "Welcome to my blog"
author: ben-holmes # references `src/content/authors/ben-holmes.json`
relatedPosts:
  - about-me # references `src/content/blog/about-me.md`
  - my-year-in-review # references `src/content/blog/my-year-in-review.md`
---

查阅更新后的内容集合指南以获取详细示例。

默认静态混合渲染（实验性）

在 2.0 版本中，我们增加了在 SSR 应用中预渲染单个页面的能力。现在在 2.5 版本中，您也可以做相反的事情；在一个大部分为静态的站点中，您可以指定某些路由**不**进行预渲染。

这个新的 'hybrid' 服务器输出选项颠覆了 SSR 的默认预渲染行为，因此您不再需要标记每个您想要预渲染的静态路由。此选项将在短期内被标记为实验性功能，因为我们正在稳定其边缘情况。您可以通过在配置的 experimental 部分启用 hybridOutput 标志并添加适配器来立即使用它。

astro.config.mjs

import { defineConfig } from "astro/config"
import nodejs from "@astrojs/node"

export default defineConfig({
  output: "hybrid",
  adapter: nodejs(),
  experimental: {
    hybridOutput: true,
  },
})

完成此操作后，您的整个站点将默认进行预渲染。您可以通过将任何页面或端点的 prerender 导出设置为 false 来**选择不**进行预渲染。

src/pages/contact.astro

---
export const prerender = false

if (Astro.request.method === "POST") {
  // handle form submission
}
---

<form method="POST">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">Submit</button>
</form>

自定义客户端指令（实验性）

自定义客户端指令允许集成作者定义新的 client: 指令，以更好地控制组件何时加载。

集成可以通过 astro:config:setup 钩子的新 addClientDirective() API 添加这些指令。要使用此 API，请在配置的 experimental 部分启用 customClientDirectives。

astro.config.mjs

import { defineConfig } from "astro/config"
import onClickDirective from "astro-click-directive"

export default defineConfig({
  integrations: [onClickDirective()],
  experimental: {
    customClientDirectives: true,
  },
})

astro-click-directive

export default function onClickDirective() {
  return {
    hooks: {
      "astro:config:setup": ({ addClientDirective }) => {
        addClientDirective({
          name: "click",
          entrypoint: "astro-click-directive/click.js",
        })
      },
    },
  }
}

现在您可以在任何框架组件上使用 client:click，并获得完整的类型支持。

<Counter client:click />

查阅客户端指令文档以了解如何构建此类集成。

HTML 压缩

您现在可以选择启用 Astro 组件生成的 HTML 压缩。

使用 compressHTML 选项，Astro 将从您的 HTML 中删除所有空白，包括换行符。

我们希望在不牺牲性能的情况下启用压缩。对于服务器渲染的应用程序，每次渲染时进行压缩可能会代价高昂。使用 compressHTML，您的组件只会由 Astro 编译器压缩一次，然后在构建过程中进行压缩。

您可以在配置中启用此功能。

import { defineConfig } from "astro/config"
export default defineConfig({
  compressHTML: true,
})

注意：压缩在开发模式和最终构建中都会发生。

虽然此选项**不会**压缩框架组件生成的 HTML，但您可以编写中间件来压缩 HTML 响应。

并行渲染

Astro 现在将并行渲染组件，这样树中较高层的数据加载组件将不再阻塞同时也在加载数据的其他组件，如下例所示：

<Delayed ms={30} />
<Delayed ms={20} />
<Delayed ms={40} />
<Delayed ms={10} />

这个 <Delayed /> 组件会等待一定毫秒数。以前，每个组件都需要等待前一个组件完成渲染后才能开始渲染。在 2.5 版本中，这些组件现在将同时渲染。

有趣的是：我们过去曾尝试添加此优化，但缺乏良好的基准测试来确保这实际上**不会**减慢渲染速度。最近我们基准测试 CI 基础设施的改进现在使我们能够自信地实现此功能。

多态类型助手

Astro 现在包含一个 TypeScript 助手（Polymorphic），使构建可以渲染为不同 HTML 元素并具有完全类型安全的组件变得更容易。这对于像 <Link> 这样的组件很有用，它可以根据传递给它的属性渲染为 <a> 或 <button>。

下面的示例实现了一个完全类型化的多态组件，它可以渲染为任何 HTML 元素。HTMLTag 类型用于确保 as 属性是一个有效的 HTML 元素。

---
import { HTMLTag, Polymorphic } from "astro/types"

type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>

const { as: Tag, ...props } = Astro.props
---

<Tag {...props} />

此版本中还包含其他错误修复和改进。查阅发行说明以了解更多信息。