Render Hook ใน Hugo

Markdown Render Hook ใน Hugo ทำให้ปรับแต่งเทมเพลตที่ใช้เรนเดอร์ Markdown ได้ โดยตอนนี้มีให้ใช้ 4 ประเภทคือ รูปภาพ, ลิงก์, หัวเรื่อง และโค้ด บทความนี้ผมรวมการใช้งาน Render Hook ที่ผมใช้ในเว็บนี้ครับ

ลิงก์หัวเรื่อง

อันดับแรกคือหัวเรื่อง (Heading) ผมใช้ Render Hook เพิ่มลิงก์ไปยังหัวเรื่อง ถ้าลองเอาเมาส์วางหรือแตะบนหัวเรื่องข้างบนดู จะเจอ #️⃣ ลิงก์ให้คัดลอกไปใช้ได้ง่ายๆ

ในไฟล์ layouts/_default/_markup/render-heading.html ใช้โค้ดด้านล่างนี้

<h{{ .Level }} class="heading" id="{{ .Anchor | safeURL }}">
  {{ .Text | safeHTML }}<a class="heading-anchor" href="#{{ .Anchor | safeURL }}"></a>
</h{{ .Level }}>

และเพิ่ม CSS ในเว็บไซต์

.heading-anchor {
  padding-left: 0.5rem;
  opacity: 0;
}

.heading-anchor:after {
  content: '#';
}

.heading:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 100;
}

<h{{ .Level }} class="group" id="{{ .Anchor | safeURL }}">
  {{ .Text | safeHTML }}<a class="pl-2 opacity-0 after:content-['#'] focus:opacity-100 group-hover:opacity-100" href="#{{ .Anchor | safeURL }}"></a>
</h{{ .Level }}>

## ลิงก์หัวเรื่อง {#heading-anchor}

Lazy load รูปภาพ

ต่อมาคือรูปภาพ ใช้เพิ่ม loading="lazy" เพื่อโหลดรูปแบบ lazy load

ในไฟล์ layouts/_default/_markup/render-image.html ใช้โค้ดด้านล่างนี้

<img src="{{ .Destination | safeURL }}" loading="lazy" alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }} />

เปิดลิงก์ภายนอกในแท็บใหม่

สุดท้ายคือลิงก์ สิ่งที่ผมปรับแต่งคือการเปิดลิงก์ภายนอกในแท็บใหม่ โดยหากลิงก์ขึ้นต้นด้วย http จะเพิ่ม target="_blank" เพื่อเปิดลิงก์ในแท็บใหม่

[ลิงก์ภายใน](/blog/hugo-render-hook/)
[ติดต่อ](https://lazywasabi.com/contact/)

ในไฟล์ layouts/_default/_markup/render-link.html ใช้โค้ดด้านล่างนี้

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>