アイキャッチ画像

[Hugo] How to write a comment which for hidden (or shown) in HTML

アイキャッチ画像

My blog moving project from WordPress to Hugo is going well I guess. But taking long long time since I'm making the theme from ground up, and only 1% of posts was rewritten so far. Still I'm kinda getting used to Hugo's unique syntax. Yes, Hugo's syntax is quite unique... I have to google every each step while I'm trying write something. So here is how to write comments in Hugo.

Template HTML, Partial HTML, Shortcodes

If you want to write a comment in template files such as list.html or single.html, Partial HTML and Shortcodes, just a normal HTML comment <!-- --> would be suffice. FYI, Hugo will remove HTML comments from the output files. Therefore this comment will not be remained in files exported by hugo command.

1
<!-- Have you ever met a person who has a style which is "never write any comments"? -->

Comments for users which are shown

Like above Hugo remove comments in a kind spirit. But you might want to keep some comments intentionally time to time.
You can do that with combining Hugo's string literal and safeHTML function. If you forget safeHTML,  <>  will be escaped as  &lt;&gt;  and be shown in the web page so please don't forget it.

1
{{ "<!-- This comment will be remaining in HTML code so you don't want to write heedless things :P -->" | safeHTML }}

It is not necessary maybe but it might fit for displaying license text in the HTML code. (if it's allowed to do that)

Thinking “minify” is quite common in web development these years but before Web 2.0, the secret messages in HTML code was common fun wasn't it. The below is web design company in UK, hiding beautiful brand logo buffalo in it's HTML code.

Buffalo ascii art in Buffalo Web Design HTML code

Comments in Hugo code

HTML comments are enough for usage like "A note for future me" since HTML comment can be written in Templates, Shortcodes, Partials and also content itself (if it's HTML format). But there are way to write a comment in proper Hugo code style. Just write a common block comment surroundings /* */, inside of Hugo's unique double braces {{ }}.

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

Maybe no need to use this since Hugo's code (what's the official name for it? GO template...?) are tend to be prolix also doesn't fit well with VScode syntax highlighting. But I think using it makes clarify the whether the comment for HTML (and it's design) or for Hugo code itself. For me I feel a little uncomfortable writing HTML comment for explaining Hugo code's variable so I use both of them as much as I can even it makes to much double braces. But HTML comments looks stands out among shortcodes and well colorize by editors syntax highlighting so... I don't know which is good honestly :P

That's all. Hope it did help you a bit. Hugo is greaaaat!

Prev前の記事

アイキャッチ画像
【Hugo】見せない(見せる)コメントの書き方

Next次の記事

アイキャッチ画像
CSSで行間を広げない見栄えの良いルビと圏点を作る(そしてHugoでショートコードにまとめる)