Comments ใน PugJs

| PugJS | 503 | 768 วันที่แล้ว
เรามาดูวิธีการใช้ Comments ใน Pug JS กันดีกว่า เพราะที่ผมเขียนมาก็มีบางครั้งที่ต้องใช้ comments

ในบางครั้งเราอยากจะใส่ Comments ใน Pug JS หรือบางครั้ง เราอยากให้แสดง comments แบบ HTML ตอน render ด้วย


เราสามารถใส่ Comments แบบ JavaScript ได้ใน Pug JS เรามาลองใส่แล้วลองให้มัน Render กันดูครับ

div
	// howtoclicks comments
	div How To Clicks Output
เมื่อรองนำไป render แล้วจะพบว่าได้ Output แบบนี้
<div><!-- howtoclicks comments--><div>How To Clicks Output</div></div>
pug สามารถ supports unbuffered comments ได้ ดังนั้นเราสามารถใส่เครื่องหมาย ขีด(-) ได้ เรามาลองใส่แล้วลองให้มัน Render กันดูครับ
div
	//- howtoclicks comments
	div How To Clicks Output
เมื่อรองนำไป render แล้วจะพบว่าได้ Output แบบนี้
<div><div>How To Clicks Output</div></div>
จะเห็นว่าเราสามารถใส่ comments แบบ JavaScript ได้ แต่ถ้าใส่แบบนั้น Pug จะทำการ render ด้วย แต่จะทำการ render ในรูปแบบของ comments html ส่วนถ้าไม่อยากให้มัน render ให้เราใส่เครื่องหมายขีด - เพิ่มเข้าไปด้วย

Block Comments

เราได้เห็นการ Comments แบบบรรทัดเดียวกันไปแล้ว เราลองมาดูแบบ Block กันดูบ้าง โดย Block Comments นั้นก็สามารถทำได้ง่าย ๆ โดยให้เราขึ้นบันทัดใหม่ แล้วก็ให้ Tab เข้าไป เพื่อบอกว่า code ชุดนั้นได้อยู่ภายใน Comments ดังตัวอย่างโค้ด
div
	//-
		howtoclicks comments 1 unbuffered comments
		howtoclicks comments 2 unbuffered comments
		howtoclicks comments 3 unbuffered comments

	//
		howtoclicks comments 1 javascrit format comments
		howtoclicks comments 2 javascrit format comments
		howtoclicks comments 3 javascrit format comments

	div How To Clicks Output
เมื่อลอง View source แล้วก็จะได้แบบนี้
<div><!--howtoclicks comments 1 javascrit format comments
howtoclicks comments 2 javascrit format comments
howtoclicks comments 3 javascrit format comments
--><div>How To Clicks Output</div></div>
comments

[1]
Adobe-PDF
980 D
[1]
Android
871 D
[40]
Animal
964 D
[1]
Apache
980 D
[2]
[10]
[2]
CMS-SMF
981 D
[1]
[3]
[1]
Database
980 D
[4]
[1]
Docker
875 D
[1]
Fruit
964 D
[2]
Git
767 D
[5]
HTML
767 D
[1]
Housework
969 D
[2]
IT
961 D
[2]
Imacro
981 D
[17]
Java
764 D
[1]
Java-Web
871 D
[1]
[2]
MQL5
793 D
[3]
MakeMoney
766 D
[18]
[1]
Maven
765 D
[1]
Mobile
978 D
[1]
NodeJs
766 D
[3]
Physics
762 D
[4]
PugJS
766 D
[2]
React
776 D
[132]
Science
963 D
[1]
[2]
Spring
765 D
[7]
[2]
[1]
[4]
Ubuntu
930 D
[1]
WebLogic
962 D
[4]