AstroでHTMLコメントを動的に出力する
AstroでHTMLコメント<!-- ${hoge} -->
を動的に出力したい場合を想定します。
安直に以下の様に記述すると文字列として、それもエスケープされた状態で出力されてしまいます。
---
const {text) = Astro.props
---
<body>
{`<!-- ${text} -->`} // <!-- hoge -->
</body>
こういった動的にHTMLコメントを文字列ではなく、HTMLとして出力したい場合は<Fragment />
が有効です。<Fragment />
はReactでいうところの<></>
と同じように機能します。
---
const {text) = Astro.props
---
<body>
<Fragment set:html={`<!-- ${text} -->`} /> // <!-- hoge -->
</body>
<Fragment />
に対してset:html
を指定することで、文字列ではなくHTMLとして出力することが出来ます。
動的にHTMLコメントを出力する場面はそう多くは無いでしょうが、例えばSSIの記述を出力をしたい場合などにはこの方法が有効でしょう。
以下の様なラッパーコンポーネントがあると幸せになれそうです。
Utils/SSIInclude.astro
---
const { path } = Astro.props
---
<Fragment set:html={`<!--#include virtual="${path}"-->`} /> // <!--#include virtual="parts/header.html"-->
index.astro
---
import SSIInclude from '@components/Utils/SSIInclude.astro'
---
<body>
<SSIInclude path="parts/header.html" />
</body>