Astro 4.11 | Astro 框架

Astro 4.11 已发布，带来了自定义 500 页面改进和 Code 组件中的 Shiki 转换器。

了解更多详情

对 500.astro 的改进
<Code /> 组件中的 Shiki 转换器

要升级现有项目，请使用自动化的 @astrojs/upgrade CLI 工具。或者，通过运行包管理器的升级命令来手动升级

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

对 500.astro 的改进

src/pages/500.astro 是 Astro 中一个特殊的页面文件，它允许你优雅地处理 500 错误。500 错误最常见于应用程序中存在 Bug 的情况；例如未将敏感代码包裹在 try/catch 中。当组件代码抛出异常时，Astro 会捕获并返回 500 响应。如果你有 src/pages/500.astro 文件，该页面将被渲染到响应体中。

Astro 4.11 的新特性是，500.astro 现在会接收 error 作为 prop。这使你能够提供更多关于错误的上下文信息。

---
interface Props {
  error: unknown
}
const { error } = Astro.props
---

<html lang="en">
<head>
  <title>Server error - Custom 500</title>
</head>
<body>
  <h1>Server error</h1>
  <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
</body>
</html>

Code 组件中的 Shiki 转换器

Astro 内置的 <Code /> 组件用于在 Astro 页面内部渲染语法高亮的代码块。该组件使用 Shiki，并支持所有流行的主题和语言。现在，你还可以通过传递 transformers prop 来在代码块上使用 Shiki 转换器

---
import { transformerNotationFocus } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code {code} lang="js" transformers={[transformerNotationFocus()]} />
<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>

一如既往，Astro 4.11 还包含更多本帖中未提及的 Bug 修复和小型改进！查看完整的发行说明以了解更多信息。特别感谢 Sarah、Bjorn、Ema、Florian、braebo 以及所有为本次发布做出贡献的人。