Comments ใน PugJs

| PugJS | 607 | 891 วันที่แล้ว
เรามาดูวิธีการใช้ 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
1103 D
[1]
Android
994 D
[40]
Animal
1087 D
[1]
Apache
1103 D
[2]
[1]
[10]
CMS-Joomla
1104 D
[2]
CMS-SMF
1104 D
[1]
[1]
[1]
[3]
[1]
Database
1103 D
[4]
[1]
Docker
999 D
[1]
[1]
Fruit
1087 D
[2]
Git
890 D
[5]
HTML
890 D
[1]
Housework
1092 D
[2]
IT
1084 D
[2]
Imacro
1104 D
[17]
Java
887 D
[1]
Java-Web
994 D
[1]
[2]
MQL5
916 D
[3]
MakeMoney
889 D
[18]
[1]
[1]
Maven
888 D
[5]
[1]
Mobile
1101 D
[1]
NodeJs
890 D
[3]
Physics
885 D
[4]
PugJS
890 D
[2]
React
899 D
[132]
Science
1086 D
[1]
[2]
Spring
888 D
[12]
[7]
[2]
[1]
[4]
Ubuntu
1054 D
[1]
WebLogic
1085 D
[4]