Skip to main content

Askboon

Hugo - Open Link in New Tab

การสร้างเว็บใน Hugo จะใช้ภาษา markdown เป็นหลักในการ render หน้าเว็บ ซึ่ง Hugo มีการใช้ markdown render engine เปลี่ยนไปตลอด ซึ่งก่อนหน้านี้ ใช้ Blackfriday แต่เริ่มเปลี่ยนมาใช้ Goldmark ตั้งแต่ Hugo เวอร์ชั่น 0.62.0 ขึ้นไป ซึ่งการตั้งค่าให้เปิด external link ในแท็บใหม่ก็เปลี่ยนไป

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

เวลาคลิกลิงก์ภายนอกใน Hugo แล้วไม่ไปเปิดแท็บใหม่ ซึ่งสามารถแก้ไขได้โดยใช้วิธีตาม markdown render engine แต่ละแบบ ดังนี้ครับ

การตั้งค่าการเปิดลิงก์สำหรับ Blackfriday

ให้ไปตั้งค่าใน config.toml

1
2
[blackfriday]
  hrefTargetBlank = true

การตั้งค่าการเปิดลิงก์สำหรับ Goldmark ( hugo > 0.62)

  1. ให้ทำการสร้าง folder layouts/_default/_markup ในไซต์ของเรา
  2. สร้างไฟล์ชื่อ render-link.html ในโฟวเดอร์ข้างต้น
  3. ใส่โค้ดนี้เข้าไปในไฟล์ render-link.html
    1
    
    <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>
    

เพียงเท่านี้ external link ทั้งหมดก็จะเปิดในแท็บใหม่ครับ

อ้างอิง

https://agrimprasad.com/post/hugo-goldmark-markdown/