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;
}
ถ้าใครใช้ Tailwind CSS แบบผม ใช้โค้ดด้านล่างนี้แทนได้เลย
<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 }}>
ใน Hugo เราสามารถกำหนดลิงก์หัวเรื่องเองได้ โดยเติม {#link}
ต่อท้ายหัวเรื่องใน Markdown
## ลิงก์หัวเรื่อง {#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"
เพื่อเปิดลิงก์ในแท็บใหม่
สำหรับลิงก์ภายในเว็บ ให้ใช้ URL แบบ relative หรือ ref / relref ใน Hugo แทน เพื่อป้องกันไม่ให้ลิงก์เปิดในแท็บใหม่
[ลิงก์ภายใน](/blog/hugo-render-hook/)
[ติดต่อ]({{< ref "pages/contact.md" >}})
ในไฟล์ 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>
ความคิดเห็น
แสดงความคิดเห็นได้โดยไม่ต้องเข้าสู่ระบบ พิมพ์ความคิดเห็นแล้วกด Post ได้เลยครับ