PugでHTMLにレンダリングされないコメントアウトを記述しようとして迷ったのでメモ。
サンプルコード
HTMLにレンダリングしたくない場合、コメントの先頭に「-」を付けます。
Pug
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title テスト
body
// HTMLに残るコメント
//- HTMLに残らないコメント
//
ブロックコメントです。
このコメントはHTMLに残ります。
//-
ブロックコメントです。
このコメントはHTMLに残りません。
HTMLにコンパイルすると以下のように表示されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<!-- HTMLに残るコメント-->
<!--
ブロックコメントです。
このコメントはHTMLに残ります。
-->
</body>
</html>
条件付きコメントを使いたい場合、そのまま記述します。
Pug
doctype html
<!--[if IE 8]>
<html lang="ja" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ja">
<!--<![endif]-->
head
meta(charset="utf-8")
title テスト
body
p テストです。
以下のようにコンパイルされました。
HTML
<!DOCTYPE html><!--[if IE 8]> <html lang="ja" class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]--> <head> <meta charset="utf-8"> <title>テスト</title> </head> <body> <p>テストです。</p> </body>
注意点として、HTMLに残るコメントをする場合、コメントアウト内はHTMLにコンパイルされません。
例えば、サイトに掲載されている内容を一時的にコメントアウトで消したい場合があるとします。
Pug
ul.list
//
li.list_item
p.list_title 商品A
div.list_btn
a(href="") 詳細を見る
//-
li.list_item
p.list_title 商品B
div.list_btn
a(href="") 詳細を見る
li.list_item
p.list_title 商品C
div.list_btn
a(href="") 詳細を見る
HTMLにコンパイルすると、商品BはHTMLに残らないコメントアウトなので削除されていますが、商品AはPugで記述した内容がそのままコメントアウト内に残ります。
HTML
<ul class="list">
<!--
li.list_item
p.list_title 商品A
div.list_btn
a(href="") 詳細を見る
-->
<li class="list_item">
<p class="list_title">商品C</p>
<div class="list_btn"><a href="">詳細を見る</a></div>
</li>
</ul>
【参考サイト】
コメントが承認されるまで時間がかかります。