Comments ใน PugJs

| PugJS | 345 | 546 วันที่แล้ว
เรามาดูวิธีการใช้ 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
758 D
[1]
Android
649 D
[40]
Animal
742 D
[1]
Apache
758 D
[2]
[10]
[2]
CMS-SMF
759 D
[1]
[3]
[1]
Database
758 D
[4]
[1]
Docker
654 D
[1]
Fruit
742 D
[2]
Git
545 D
[5]
HTML
545 D
[1]
Housework
747 D
[2]
IT
739 D
[2]
Imacro
759 D
[17]
Java
542 D
[1]
Java-Web
649 D
[1]
[2]
MQL5
571 D
[3]
MakeMoney
544 D
[18]
[1]
Maven
543 D
[1]
Mobile
756 D
[1]
NodeJs
544 D
[3]
Physics
540 D
[4]
PugJS
544 D
[2]
React
554 D
[132]
Science
741 D
[1]
[2]
Spring
543 D
[7]
[2]
[1]
[4]
Ubuntu
709 D
[1]
WebLogic
740 D
[4]