Astro 4.2 | Astro 框架

Astro 4.2 现已发布！此版本包含新的实验性功能供您尝试、辅助功能规则的改进、Remark 插件在 Markdown 中自定义图像优化的能力，以及更多改进和错误修复。

亮点包括

(实验性) 支持使用推测规则 API 预渲染页面
(实验性) 重新设计的注入路由优先级
新的 redirectToDefaultLocale 配置选项
改进的辅助功能规则
Markdown 中可自定义的图像优化

这标志着 Astro 首次发布几乎所有社区构建的功能，只有一个亮点是由 Astro 核心维护者带来的。这对我们来说是一个重要的里程碑，因为它意味着 Astro 现已足够成熟，拥有一个能够主导发布的活跃贡献者社区。感谢所有为本次发布做出贡献的人！

如何升级

要利用最新功能，请确保您正在运行最新版本的 Astro。您可以通过运行 @astrojs/upgrade 命令升级到 Astro 4.2

npx @astrojs/upgrade

或者通过运行您的包管理器的升级命令

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

(实验性) 使用推测规则 API 预渲染页面

感谢 Ross Robino，Astro 的 prefetch 功能现在实验性支持使用目前仅限于 Chromium 的推测规则 API 预渲染页面。此 API 允许您在客户端预渲染页面，甚至在用户可能接下来访问的页面上运行客户端 JavaScript，从而提供更快的浏览体验。

要启用此功能，请将以下内容添加到您的 astro.config.mjs 文件中

import { defineConfig } from 'astro/config';

// https://astro.js.cn/config
export default defineConfig({
  prefetch: true,
  experimental: {
    clientPrerender: true,
  },
});

这将遵守您现有的预取配置选项，但现在将在客户端预渲染所有带有 data-astro-prefetch 属性的链接。对于尚不支持推测规则 API 的浏览器，提供了内置的回退机制。

此外，您可以在 <script> 标签中使用 document.prerendering 属性来检查页面是否正在预渲染

<script>
  if (document.prerendering) {
    // prerendering is enabled
  }
</script>

有关此实验性功能的更多信息，请参阅 experimental.clientPrerender 文档。

(实验性) 重新设计的注入路由优先级

以前，使用 injectRoute() API 注入的路由会被赋予最高优先级，这意味着它们将在其他任何路由之前被匹配。虽然这在当时看来是个好主意，但不幸的是，它导致了许多难以调试的问题，即路由无法按预期匹配。

从历史上看，我们一直不愿改变此行为，因为路由系统的更改可能导致许多意外问题。然而，感谢 Luiz Ferraz 精心实施的修复，Astro 4.2 带来了一个实验性标志，为 Astro 中新的改进的默认路由系统奠定了基础！

启用此标志后，使用 injectRoute() API 注入的路由以及重定向将遵循与文件系统路由相同的优先级顺序。这应该为您的所有项目路由提供更稳定、一致的优先级排序规则。

立即尝试 Astro 的未来，将新的 experimental.globalRoutePriority 选项添加到 astro.config.mjs 文件中以启用新行为

import { defineConfig } from 'astro/config';

// https://astro.js.cn/config
export default defineConfig({
  experimental: {
    globalRoutePriority: true,
  },
});

此外，还增加了额外的日志记录，以告知您任何两个路由尝试构建相同 URL 的路由冲突。

有关更多详细信息，请参阅 experimental.globalRoutePriority 文档。

新的 `redirectToDefaultLocale` 配置选项

自 Astro 4.0 引入国际化支持以来，一个常见的请求是，当 prefixDefaultLocale: true 设置为 true 时，能够禁用根 URL (/) 自动重定向到默认语言环境。

现在可以通过新的 redirectToDefaultLocale 选项实现这一点

import { defineConfig } from 'astro/config';

// https://astro.js.cn/config
export default defineConfig({
  i18n:{
    defaultLocale: "en",
    locales: ["en", "fr"],
    routing: {
      prefixDefaultLocale: true,
     redirectToDefaultLocale: false
    }
  }
});

是否重定向，由您决定！此选项默认启用。

改进的辅助功能规则

Astro Dev Toolbar 在 4.0 中添加的辅助功能规则已得到改进，以提高准确性。感谢 Oliver Speir 仔细阅读 WCAG 指南并改进了这些规则！在以前的版本中，Dev Toolbar 错误地报告为误报的辅助功能问题在此次更新中得到了修复，更多改进正在积极开发中。

Markdown 中可自定义的图像优化

同样由 Oliver 贡献，Remark 插件现在可以自定义 Markdown 文件中图像的优化方式。以前，使用原生语法 (![alt](src)) 包含在 Markdown 文件中的每个图像都使用 Astro 的默认图像优化设置。通过此更新，Remark 插件现在可以向图像节点添加属性，以自定义它们的优化方式。

例如，以下 Remark 插件会将每个图像的 width 和 height 属性设置为 100

import { visit } from "unist-util-visit";

export default function remarkPlugin() {
  return (tree) => {
    visit(tree, 'image', (node) => {
      node.data.hProperties = node.data.hProperties || {};
      node.data.hProperties.width = "100";
      node.data.hProperties.height = "100";
    });
  };
}

目前这仅限于 Markdown 文件，但我们希望在未来的版本中也添加对 MDX 的支持。

错误修复

一如既往，此版本还包含其他错误修复。查看发布说明了解更多信息。