Astroのコード内でコメントを記述する方法について調べたことをメモ。
サンプルコード
公式のドキュメントによると、標準のHTMLコメントおよびJavaScriptコメントを使用することができ、HTMLコメントの場合はDOMに残り、JavaScriptのコメントは残らないという違いがあるようです。
それぞれのコメントを試してみます。
---
import Layout from '../../layouts/Layout.astro';
---
<Layout>
<p>コメントテスト</p>
<!-- HTMLコメント -->
{/* JavaScriptコメント */}
{// JavaScriptコメント2}
</Layout>
試してみた結果、HTMLコメントの場合も残りませんでした。
コメントアウト(compressHTML: false)のデモページ
今回HTMLを非圧縮に変更していたのでその影響かと思い圧縮した場合も試してみましたが、同様のようでした。
コメントアウト(compressHTML: true)のデモページ
いくつか試してみた結果、前述のデモの場合Layoutsを使っていましたが、使わない形にするとHTMLコメントが残るようでした。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>デモページ</title>
</head>
<body>
<p>コメントテスト</p>
<!-- HTMLコメント -->
{/* JavaScriptコメント */}
{// JavaScriptコメント2}
</body>
</html>
ただし関連する情報を確認できなかったので、環境やバージョンなどによっては結果が異なる場合があるかもしれません。
コメントアウト(compressHTML: false)のデモページ2
コメントアウト(compressHTML: true)のデモページ2
Layoutsを使った上でコメントを残したい場合、set:htmlを使ってHTML文字列として追加するとよさそうです。
---
import Layout from '../../layouts/Layout.astro';
const comment = '<!-- HTMLコメント -->';
---
<Layout>
<p>コメントテスト</p>
<Fragment set:html={comment} />
{/* JavaScriptコメント */}
{// JavaScriptコメント2}
</Layout>
これでコメントを残すことができました。
コメントアウト(compressHTML: false)のデモページ3
コメントアウト(compressHTML: true)のデモページ3
コメントが承認されるまで時間がかかります。