Astro 3.3: Picture 组件

Astro 3.3 发布了，带来了全新的实验性 <Picture /> 组件、改进的语法高亮兼容性、包溯源以及其他一些生活质量改进。

新的 <Picture /> 组件
语法高亮改进
包溯源
生活质量改进

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

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

Picture 组件

当我们宣布 Astro 中的更优图像并推出内置图像优化功能时，我们很自豪地分享了我们处理图像的新愿景。在 3.0 版本中，我们移除了旧的图像集成，也随之移除了一些我们知道您正在使用的现有功能。我们决定重新构建，提供一个更强大的图像故事，而这仅仅是个开始。

在一份全面的 RFC 和 Astro 历史上获得最高票数的 PR 之后，我们非常激动地推出了内置的 <Picture /> 组件！

新的实验性 <Picture /> 组件可用于生成一个包含多个 <source> 元素的 <picture> 元素。

下面的示例使用 formats 属性为每种指定的图像格式生成一个 <source>

---
import { Picture } from 'astro:assets';
import myImage from './my-image.jpg';
---

<Picture src={myImage} formats={['avif', 'webp']} alt="My super image in multiple formats!" />

上述代码将生成以下 HTML，并允许浏览器决定要显示的最佳图像

<picture>
  <source srcset="..." type="image/avif" />
  <source srcset="..." type="image/webp" />
  <img src="..." alt="My super image in multiple formats!" />
</picture>

Picture 组件接受与 Image 组件相同的所有属性，包括新的 densities 和 widths 属性。

`srcset` 支持

除了 <Picture /> 元素之外，Image 和 getImage() 还新增了两个属性：densities 和 widths。

这些属性可用于生成 srcset 属性，其依据可以是像素的绝对宽度（例如 [300, 600, 900]），也可以是像素密度描述符（例如 ["2x"] 或 [1.5, 2]）。

---
import { Image } from 'astro';
import myImage from './my-image.jpg';
---

<Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="My cool image" />

<img
  src="/_astro/my_image.hash.webp"
  srcset="/_astro/my_image.hash.webp 1.5x, /_astro/my_image.hash.webp 2x"
  alt="My cool image"
/>

语法高亮

我们将 Astro 的内部语法高亮库从 shiki 迁移到 shikiji，后者是一个专注于 ESM 的替代方案，可简化打包和维护。

没有新选项，也没有对您编写代码块和语法高亮的方式进行任何更改。

虽然此重构对于大多数项目应该是透明的，但 shikiji 确实带有一个潜在的破坏性更改。由于 shikiji 试图生成更小的 HTML 标记，颜色样式会添加到 pre 或 code 元素，而不是直接添加到 token 的 span。例如

之前

<code class="astro-code" style="background-color: #24292e">
  <pre>
    <span class="line" style="color: #e1e4e8">my code</span>
  </pre>
</code>

之后

<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
  <pre>
    <span class="line">my code<span>
  </pre>
</code>

这不会影响颜色，因为 span 会继承父元素的颜色，但如果您依赖特定的 HTML 标记，请在升级后仔细检查您的网站以验证样式。

包溯源

托管 Astro 包的注册表 NPM 引入了可选的溯源证明，以提高供应链安全性和透明度。这些证明允许开发人员验证包的构建地点和方式。

随着 Astro 3.3 的发布，astro 包和所有 @astrojs/ 集成都附带了溯源声明。如果您维护 Astro 集成，我们鼓励您在发布集成时启用溯源证明。

生活质量改进

此版本还包括其他错误修复和生活质量改进。查看发布说明了解更多信息。

Picture 组件

srcset 支持

语法高亮

包溯源

生活质量改进

`srcset` 支持