HTMLコメント

JSXの{/* コメント */}は、生成HTMLへ出力されません。納品物に区切りや補足を残したい場合は、pluginComment()とCommentを使います。

Table of Contents

プラグインを追加する

vite.config.ts
import { defineConfig, pluginSsg, pluginComment } from "minista"

export default defineConfig({
  plugins: [pluginSsg(), pluginComment()],
})

コメントを配置する

src/pages/index.tsx
import { Comment } from "minista/assets"

export default function Page() {
  return (
    <>
      <Comment text="メインコンテンツ開始" />
      <h1>My Site</h1>
      <Comment text="メインコンテンツ終了" />
    </>
  )
}

textの代わりに文字列のchildrenも使えます。出力先では通常のHTMLコメントになります。

dist/index.htmlの抜粋
<!-- メインコンテンツ開始 -->
<h1>My Site</h1>
<!-- メインコンテンツ終了 -->

出力を確認する

npm run buildで生成したHTMLを開き、コメントの位置を確認します。ブラウザの画面には表示されませんが、HTMLソースから読めるため、公開しない情報は書かないようにします。

プラグインにオプションはありません。propsの型はpluginCommentを参照してください。

次は納品コードの整形で成果物を読みやすくします。

前のページ静的サイト内検索
次のページ納品コードの整形