Astro 3.5: i18n 路由

作者
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Astro 3.5 今日发布，带来全新的 i18n 路由、预取优化等功能。这可能是 Astro 历史上最重要的小版本更新之一！

此版本亮点包括

为了利用最新功能，请确保您正在运行最新版本的 Astro。您可以通过运行您选择的包管理器的升级命令来升级到 Astro 3.5

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

i18n 路由（实验性）

现在使用 Astro 构建多语言应用程序比以往任何时候都更容易。

Astro 的实验性 i18n 路由 API 允许您添加多语言内容，并支持配置默认语言、计算相对页面 URL 以及接受访问者浏览器提供的首选语言。您还可以针对每种语言指定备用语言，以便您的访问者始终可以被引导至您网站上现有内容。

通过在 Astro 配置中添加一个 i18n 对象并指定默认位置和所有支持的语言列表来启用实验性路由选项

astro.config.mjs
import {defineConfig} from "astro/config";


export default defineConfig({
  experimental: {
    i18n: {
      defaultLocale: "en",
      locales: ["en", "es", "pt-br"]
    }
  }
})

根据您的 i18n.routingStrategy 按语言环境组织内容文件夹，Astro 将负责生成您的路由并向访问者显示您的首选 URL。

├── src
│   ├── pages
│   │   ├── about.astro
│   │   ├── index.astro
│   │   ├── es
│   │   │   ├── about.astro
│   │   │   ├── index.astro
│   │   ├── pt-br
│   │   │   ├── about.astro
│   │   │   ├── index.astro

使用新 astro:i18n 模块中的 getLocaleRelativeURL 为您的链接计算相对 URL

---
import {getRelativeLocaleUrl} from "astro:i18n";
const aboutUrl = getRelativeLocaleUrl("pt-br", "about");
---
<p>Learn more <a href={aboutUrl}>About</a> this site!</p>

启用 i18n 路由还为浏览器语言检测提供了两个新属性：Astro.preferredLocale 和 Astro.preferredLocaleList。它们结合了浏览器的 Accept-Language 头和您网站支持的语言列表，可用于自动尊重访问者的首选语言。

在我们的文档中阅读更多关于 Astro 实验性 i18n 路由的信息。

预取

预取是浏览器的一项功能，可以为访问者提前抓取页面，以便在导航之前它们就已经部分加载。对于多页应用程序，预取是保持网站速度的重要组成部分。

Astro 中的预取功能以前通过官方集成（@astrojs/prefetch）提供。今天，我们将预取作为一项选择加入的功能纳入核心，并扩展了它的能力。

您可以通过在 Astro 配置中设置 prefetch:true 来启用预取

astro.config.js
import { defineConfig } from 'astro/config';


export default defineConfig({
  prefetch: true
})

除了现在成为核心功能外，新的预取还带来了更大的灵活性

  • 配置预取是在 tap（非完整点击的触摸）、hover（悬停）还是进入 viewport（视口）时发生。
  • 使用 data-astro-prefetch 属性，为每个链接定义使用的策略。
  • 默认情况下对所有链接启用预取（使用 <ViewTransitions /> 时的现有行为）。
  • 忽略快速发生的悬停和滚动事件，以防止过度抓取访问者不太可能点击的内容。

使用 视图过渡时，预取默认启用，新的实现现在使得可以针对每个链接选择禁用预取

<a href="/logout" data-astro-prefetch="false">Logout</a>

访问预取指南以获取更多信息。

内容集合构建缓存（实验性）

大量使用 内容集合的大型静态网站可以尝试新的实验性构建缓存。

这包括对 Astro 构建过程的多次重构，以优化内容集合的处理方式，这将为拥有大量集合的用户提供显著的性能提升。

构建 static 网站的用户可以通过在 Astro 配置中添加以下标志来选择预览新的构建缓存

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    contentCollectionCache: true,
  },
})

启用此实验性功能后，从您的内容集合生成的文件将存储在 cacheDir 中（默认情况下为 node_modules/.astro），并在构建之间重复使用。大多数 CI 环境默认会自动恢复 node_modules/ 中的文件。

在我们对实际项目 Astro 文档进行的内部测试中，此功能将 astro build 的打包步骤从 133.20 秒减少到 10.46 秒，提速约 92%。端到端的 astro build 过程以前需要 4 分 58 秒，现在只需 60 多秒，总共减少了 80%。

如果您在使用此实验性功能时遇到任何问题，请告诉我们！

您可以通过向 astro build 传递 --force 标志来始终跳过单次构建的缓存。

astro build --force

视图过渡中支持表单

<ViewTransitions /> 路由器现在可以处理表单提交，允许在表单提交上实现与 <a> 链接已有的相同动画过渡和有状态 UI 保留。添加此功能后，您的 Astro 项目可以在所有这些场景中拥有动画效果

  • 页面之间点击链接。
  • 在表单中进行有状态更改（例如更新网站偏好设置）。
  • 通过 navigate() API 手动触发导航。

此功能目前是选择加入的，但从 Astro 4.0 开始将默认启用。要启用此功能，请在页面上的 <ViewTransitions /> 组件中添加 handleForms 属性

src/layouts/MainLayout.astro
---
import { ViewTransitions } from 'astro:transitions';
---


<html>
  <head>
    <!-- ... -->
    <ViewTransitions handleForms />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

就像链接一样，如果您不希望路由处理表单提交，您可以使用 data-astro-reload 属性针对每个表单选择退出

src/components/Contact.astro
<form class="contact-form" action="/request" method="post" data-astro-reload>
  <!-- ...-->
</form>

表单支持 method="get" 和 method="post" 提交方式的表单。

图像优化改进

Astro 资源（Assets）持续改进，在 3.5 版本中我们现在拥有：

  • 未在优化管道之外使用的原始图像将从最终构建中删除。对于拥有大量此类图像（例如缩略图）的用户，这将减少存储消耗和部署时间。
  • 已添加一个新属性 propertiesToHash，用于指定在进行本地转换时，getImage() / <Image /> / <Picture /> 的哪些属性应用于结果文件的哈希。对于大多数服务，这将包括直接改变生成图像内容的属性，如 src、width 或 quality。
  • 当原始图像为 jpg 或 jpeg 格式时，<Picture /> 组件现在将分别使用 jpg 和 jpeg 作为备用格式。

添加中间件的集成钩子

现在在 Astro 中，集成可以代表用户添加中间件。以前，当第三方想要提供中间件时，用户需要自己创建一个 src/middleware.ts 文件。现在，添加第三方中间件就像添加一个新的集成一样简单。

对于集成作者，astro:config:setup 钩子中新增了一个 addMiddleware 函数。此函数允许您指定一个中间件模块及其应用顺序

my-package/middleware.js
import { defineMiddleware } from 'astro:middleware';


export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();


  if(response.headers.get('content-type') === 'text/html') {
    let html = await response.text();
    html = minify(html);
    return new Response(html, {
      status: response.status,
      headers: response.headers
    });
  }


  return response;
});

您现在可以添加您的集成中间件，并指定它是在应用程序自己定义的中间件（在 src/middleware.{js,ts} 中定义）之前还是之后运行

my-package/integration.js
export function myIntegration() {
  return {
    name: 'my-integration',
    hooks: {
      'astro:config:setup': ({ addMiddleware }) => {
        addMiddleware({
          entrypoint: 'my-package/middleware',
          order: 'pre'
        });
      }
    }
  };
}

多种代码主题（实验性）

Astro 最近升级到使用 shikiji 库进行语法高亮显示，我们现在通过一个新的 markdown.shikiConfig.experimentalThemes 选项添加了支持多种主题的功能。

这使您能够更轻松地为语法高亮显示的代码块定义浅色和深色主题。您可以这样使用它：

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  markdown: {
    shikiConfig: {
      experimentalThemes: {
        light: 'github-light',
        dark: 'github-dark'
      }
    }
  }
});

Qwik 集成

社区现在提供了一个用于在 Astro 中使用 Qwik 的 Astro 集成！您可以通过运行以下命令安装 Qwik 集成：

npx astro add @qwikdev/astro

或者您可以自己安装集成并更新您的配置

astro.config.mjs
import { defineConfig } from 'astro/config';
import qwikdev from '@qwikdev/astro';


export default defineConfig({
  integrations: [qwikdev()],
});

查看博客文章以了解有关新集成的更多信息，如果您遇到任何问题，请访问集成仓库。

错误修复

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