【Hugo】見せない（見せる）コメントの書き方

WordPress からHugoへのお引越しもだいぶ進みました。テーマをイチから作ってるのでサイトの体裁を整えるのが精一杯、記事自体は 1% しか書き換えられてないわけですが、Hugo 独特の書き方はだいぶ慣れてきました。そう、Hugo の書き方は本当に独特……いちいち躓《つまず》いてしまうんですが、そんな中でもコメントの書き方などをば。

テンプレートHTML、パーシャルHTML、ショートコード

list.html, single.htmlなどのテンプレートファイル、パーシャル HTML 、それからショートコード中にコメントを書いておきたい時は、普通に HTML コメント<!--   -->で大丈夫です。なお、Hugo は出力時に HTML コメントを自動的に削除します。従って、このコメントはhugoコマンドで出力したファイルには残りません。

<!-- コードのコメントを絶対に書かない流儀の人に会ったことはありますか？僕はあります。 -->

ユーザーに見せたいコメント

上記の通り Hugo は親切心で HTML コメントを削除してくれますが、HTML コードに敢《あ》えて残しておきたいコメントもあると思います。
文字列状の HTML コメントに、Hugo のsafeHTML関数を組み合わせることで出力後の HTML にもコメントを残すことが出来ます。ちなみにsafeHTMLを忘れると  <>  が  <>  にエスケープされてしまうので Web ページにそのまま表示されてしまうので忘れないようにしましょう。

{{ "<!-- これはHTMLに残るので、 滅多なことを書かないようにしましょう -->" | safeHTML }}

How can I keep comments in HTML source? - support - HUGO
https://discourse.gohugo.io/t/how-can-i-keep-comments-in-html-source/1759/3

必要になることはあまり無いかもしれませんが、例えば画像素材やアイコン素材のライセンスを HTML コードに表示するといった使い方が考えられます（許されている場合）。

また、いわゆる“minify ”という考え方が広まった今では少なくなってしまいましたが、Web2.0 以前は HTML ソースを見てくれた人だけにこっそり秘密のメッセージを伝える遊びが盛んでした。下記はイギリスの Web 制作会社ですが、見事なアスキーアートのブランドロゴが HTML に隠されています。

Built By Buffalo | Award Winning Web Design & Creative Agency
https://builtbybuffalo.com/about

Hugoコード自体のコメント

HTML コメントはテンプレート HTML 、ショートコード、パーシャル HTML 、そしてもちろんコンテンツ内（ HTML の場合）でも使えるので、注意書きなどを将来の自分のために残しておきたいという用途であれば十二分に事足りるのですが、しっかりと Hugo のコードとしてコメントを記述する方法もあります。Hugo 特有のダブルブレース{{   }}で囲った中に、一般的な言語のブロックコメント的に/*   */で挟んで書けばコメントになります。

{{ /* ちなみに、HugoでHugoの事を書く時、{{があるとHugoのコードとして解釈され予期せぬ動作の原因になるので、できるだけ { } にエスケープした方が良さげです。 */ }}

Hugo のコードは（正式には何て言うんでしょう？  GO Template ……？）、ただでさえ冗長になりがちで、VScode なんかのシンタックスハイライトとの相性も悪いので、敢えてこれを使う必要はないかも知れません。その代わり HTML （のデザインなど）に対するコメントなのか、Hugo の処理に関するコメントなのかが明確になると思います。Hugo のコードの変数の説明などを HTML コメントで書くのはなんとなく気持ちが悪いので、できるだけ使い分けるようにしています。まあ、読み辛いと言えば読み辛いですが……それに、HTML コメントだとショートコードの中で目立つし、エディタの構文強調で綺麗に色分けされるので……  正直なところどっちがいいのかわかんないですねｗ

いじょ。お役に立ったでしょうか？  Hugo さいこー！