Comments ใน PugJs

| PugJS | 306 | 488 วันที่แล้ว
เรามาดูวิธีการใช้ 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
700 D
[1]
Android
591 D
[40]
Animal
684 D
[1]
Apache
700 D
[2]
[10]
[2]
CMS-SMF
701 D
[1]
[3]
[1]
Database
700 D
[4]
[1]
Docker
595 D
[1]
Fruit
684 D
[2]
Git
487 D
[5]
HTML
487 D
[1]
Housework
689 D
[2]
IT
681 D
[2]
Imacro
701 D
[17]
Java
484 D
[1]
Java-Web
591 D
[1]
[2]
MQL5
513 D
[3]
MakeMoney
486 D
[18]
[1]
Maven
485 D
[1]
Mobile
698 D
[1]
NodeJs
486 D
[3]
Physics
482 D
[4]
PugJS
486 D
[2]
React
496 D
[132]
Science
683 D
[1]
[2]
Spring
485 D
[7]
[2]
[1]
[4]
Ubuntu
650 D
[1]
WebLogic
682 D
[4]