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

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

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

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

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

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

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

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

การใช้ HTML

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

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

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

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

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

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

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

อ้างอิง

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