最新版本的 Astro 中引入了一些新的默认空白处理方式！

我注意到，当我将我的博客模板（就是这个博客！就在这里！）更新到新的 Astro 7.0 时，很多单词和间距以奇怪的方式被拆开了。

原来，在全新的 Rust 编译器中，有一些非常具体的 JSX 变更。以前，如果你有两个相邻的元素，像这样：

<
span
>
Howdy
</
span
>
<
span
>
y'all
</
span
>

它会在页面上渲染为“Howdy y’all”。

但是，在 7.0 版本中，它会渲染为“Howdyy’all”，没有空格。

如果你想修复它，你需要这样做：

<
span
>
Howdy
</
span
>
{' '}
<
span
>
y'all
</
span
>

这非常像 React 和其他类似框架中的 JSX 风格。

这对我来说是一个有点烦人的变更，因为我的博客模板在几个组件中有这样的行，现在渲染不正确了：

<
a
href
={
`
/post/
${
slug
}
/
`
}
class
=
"
title
"
>{
title
}</
a
>
<
time
datetime
={
date
}>
{
new
Date
(date)
.
toLocaleDateString
(
"
en-us
"
,
{
year
:
"
numeric
"
,
month
:
"
short
"
,
day
:
"
numeric
"
,
}
)
}
</
time
>

但是！如果你不想编辑所有的组件和模板（像我一样），这里有一个解决方案。在你的 astro.config.json 中，在 defineConfig 里添加以下 compressHTML：

export
default
defineConfig
(
{
// ...
compressHTML
:
true
,
}
)
;

如果你愿意，可以在这里的上下文中看到它。

希望这对你有帮助！更多详情请参阅升级指南！

转载声明：本文为转载整理，原文版权归原作者及原站点所有。

原文来源：Cassidy Williams

原创地址：https://cassidoo.co/post/astro-7-whitespace/

ITPub博客

Astro 7.0 中的空白处理

最新文章