Comments ใน PugJs

| PugJS | 393 | 636 วันที่แล้ว
เรามาดูวิธีการใช้ 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
848 D
[1]
Android
739 D
[40]
Animal
832 D
[1]
Apache
848 D
[2]
[10]
[2]
CMS-SMF
849 D
[1]
[3]
[1]
Database
847 D
[4]
[1]
Docker
743 D
[1]
Fruit
832 D
[2]
Git
635 D
[5]
HTML
635 D
[1]
Housework
837 D
[2]
IT
829 D
[2]
Imacro
849 D
[17]
Java
632 D
[1]
Java-Web
739 D
[1]
[2]
MQL5
661 D
[3]
MakeMoney
634 D
[18]
[1]
Maven
633 D
[1]
Mobile
846 D
[1]
NodeJs
634 D
[3]
Physics
630 D
[4]
PugJS
634 D
[2]
React
644 D
[132]
Science
831 D
[1]
[2]
Spring
633 D
[7]
[2]
[1]
[4]
Ubuntu
798 D
[1]
WebLogic
830 D
[4]