昨天 Astro 发布了 4.11 版本,支持自定义 500 错误页面,Code 组件支持 Shiki 转换器,以及其他一些改进和修复。
你可以使用 @astrojs/upgrade
CLI 来升级依赖:
npx @astrojs/upgrade
自定义 500 错误页面
src/pages/500.astro
是一个特殊的用于捕获 500 错误的页面。在 4.11 版本中,你可以自定义这个页面,展示详细的错误信息,例如:
---interface Props { error: unknown}const { error } = Astro.props---<div>{error instanceof Error ? error.message : '服务器发生错误'}</div>
Code 组件支持 Shiki 转换器
Astro 有一个 内置的 <Code />
组件,用于渲染代码块。在 4.11 版本中,<Code />
组件支持 Shiki 转换器。
先安装 @shikijs/transformers
:
npm i -D @shikijs/transformers
<Code />
组件提供了一个 transformers 属性,可以传入一个或多个转换器,例如:
---import { transformerNotationFocus } from '@shikijs/transformers'import { Code } from 'astro:components'const code = `const foo = 'hello'const bar = ' world'console.log(foo + bar) // [!code focus]`---<div><Code code={code} lang="js" transformers={[transformerNotationFocus()]} /></div>
<style is:global> pre.has-focused .line:not(.focused) { filter: blur(1px); }</style>
转换器会生产 CSS 类名,你需要自己使用 CSS 来自定义样式。
渲染效果如下:
const foo = 'hello'
const bar = ' world'
console.log(foo + bar)
最后
快来更新试试吧~
加我微信
很高兴见到你,欢迎来玩儿~
liruifengv2333
,进群交流,抱团取暖。
- 新生代程序员群
- Astro 学习交流群
关注公众号
SayHub
,带来更多原创内容。![](https://bucket.liruifengv.com/qrcode.png)