Skip to main content

Askboon

วิธีแทรกรูปใน Hugo

การแทรกรูปใน Hugo นั้น สามารถทำได้มากกว่าหนึ่งวิธี แต่ละวิธีก็มีข้อดีข้อเสีย มาดูรายละเอียดกัน

การแทรกรูปใน Hugo

เป็นที่ทราบกันอยู่แล้วว่า Hugo ใช้ markdown ในการแสดงผล ซึ่งจริงๆแล้ว นอกจากการใช้ markdown แล้ว เราก็สามารถใช้ html ธรรมดาช่วยในการแสดงผลได้เช่นกัน แต่ในส่วนของการแสดงภาพนั้น มีเรื่องปลีกย่อยที่ต้องทราบกันอยู่บ้าง

การแทรกรูปด้วย markdown

เราสามารถทำได้ด้วยคำสั่ง markdown ดังนี้

1
![alternate text ที่ต้องการให้แสดง]( location ของภาพ )

ซึ่งวิธีนี้มีข้อดีคือใช้คำสั่งใน markdown เช่นเดียวกับคำสั่งอื่นๆในไฟล์เดียวกันนี้

การใช้ HTML

เราสามารถใช้คำสั่งในแท็ก img ปกติได้เลย ดังนี้

1
<img src="location ของภาพ">

ปัญหาที่เกิด

ด้วยวิธีข้างต้นทั้งสองวิธีนี้ เราไม่สามารถควบคุม properties อื่นของภาพได้ เช่น width ซึ่งจริงๆแล้วเป็นสิ่งที่ค่อนข้างจำเป็นเสียด้วย

แก้ปัญหาด้วย shortcode ของ Hugo

Hugo มีคำสั่งในการสร้าง shortcode ที่ช่วยขยายความสามารถของ markdown ได้ เช่น เกี่ยวกับภาพนี้ เราสามารถใช้ shortcode เพื่อกำหนดความกว้างของภาพได้อย่างง่ายดาย

{{< figure src="location ของภาพ” width="50%” >}}

อ้างอิง

https://gohugo.io/content-management/shortcodes/