如何在Astro中呈现双花括号

Question

在Astro中，我想在模板内呈现双花括号，但是它会错误，因为花括号内的任何内容都被解释为JS代码。

的例子:

.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text,
just to see how it is handled and to find out how it overflows;
}

为了呈现上面的代码，我是这样设置我的模板的:

<code>
.post-title {<br />
margin: 0 0 5px;<br />
font-weight: bold;<br />
font-size: 38px;<br />
line-height: 1.2;<br />
and here's a line of some really, really, really, really long text, just to
see how it is handled and to find out how it overflows;<br />
}
</code>

是否有任何干净/优雅的方式来渲染大括号直接在astro模板?

Answer 1

在.astro文件中，您可以使用is:raw指令来呈现标签的内容" as-is "，而无需任何模板逻辑等应用:

<code is:raw>
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text,
just to see how it is handled and to find out how it overflows;
}
</code>

否则，要像您的示例那样仅针对单个字符，您可以使用{'{'}或左花括号字符的HTML实体:{.

Answer 2

我找到了一种方法来解决这个问题，通过将字符包装为花括号语法中的字符串。{'{'}和/或{'}'}

这会使astro模板看起来像这样:

<code>
.post-title {'{'}<br />
margin: 0 0 5px;<br />
font-weight: bold;<br />
font-size: 38px;<br />
line-height: 1.2;<br />
and here's a line of some really, really, really, really long text, just to
see how it is handled and to find out how it overflows;<br />
{'}'}
</code>