Astro 3.2：视图过渡改进

作者
Matthew Phillips
Martin Trapp
Chris Swithinbank

Astro 3.2 发布，带来多项新改进，让视图过渡和集成使用起来更简单

要利用最新的视图过渡功能，请确保您正在运行最新版本的 Astro。您可以通过运行所选包管理器的升级命令来升级到 Astro 3.2

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

您现在可以配置单个链接，以防止在导航时向浏览器历史记录堆栈添加新的历史条目。将 data-astro-history="replace" 属性添加到任何 <a> 标签，Astro 将转而使用底层的 history.replaceState API。使用此功能可以减少回退按钮点击次数，或避免将读者带回表单提交确认等页面。

<a href="/toggle" data-astro-history="replace">Toggle me</a>

JavaScript 导航 API

您现在可以通过新的 navigate() API 从客户端 JavaScript 触发导航。以前，过渡只在用户点击锚点链接时发生。有了新的导航 API，您可以完全控制导航何时发生。

import { navigate } from 'astro:transitions/client';


// Navigate to the selected option automatically.
document.querySelector('select').onchange = (ev) => {
  let href = ev.target.value;
  navigate(href);
};

此外，您还可以通过此方法的 history 选项控制历史记录堆栈，其工作方式与 data-astro-history 属性相同

import { navigate } from 'astro:transitions/client';


navigate(href, {
  history: 'replace'
});

路由播报器

视图过渡路由器现在支持路由播报。在使用传统 MPA 方法在页面之间进行过渡时，辅助技术会在页面加载完成后播报页面标题。在客户端路由期间，这不会自动发生，因此依赖这些技术播报路由的访问者不会知道页面何时已更改。

视图过渡路由播报器在 astro:page-load 事件之后运行，查找页面 <title> 进行播报。如果找不到，播报器会回退到它找到的第一个 <h1>，或者播报路径名。我们建议您始终在每个页面中包含一个 <title> 以提高可访问性。

请参阅视图过渡文档，了解更多关于可访问性如何处理的信息。

动态添加集成

集成本身现在可以在设置过程中动态添加和配置额外的集成。这使得集成作者能够更智能地为其用户捆绑集成。

在以下示例中，自定义集成会检查是否已配置 @astrojs/sitemap。如果没有，该集成会添加 Astro 的站点地图集成，并传递任何所需的配置选项

import sitemap from '@astrojs/sitemap';
import type { AstroIntegration } from 'astro';


const MyIntegration = (): AstroIntegration => {
  return {
    name: 'my-integration',


    'astro:config:setup': ({ config, updateConfig }) => {
      // Look for sitemap in user-configured integrations.
      const userSitemap = config.integrations.find(
        ({ name }) => name === '@astrojs/sitemap'
      );


      if (!userSitemap) {
        // If sitemap wasn’t found, add it.
        updateConfig({
          integrations: [sitemap({ /* opts */ }],
        });
      }
    },
  };
};

更多

此版本还包括其他错误修复和集成功能。查阅发布说明了解更多信息。