Skip to main content

Askboon

เพิ่มความสามารถให้ Hugo รู้จักไฟล์ภาพ Webp

ขั้นตอนต่อไปนี้ เป็นการสร้าง shortcode เพื่อให้ Hugo รู้จักไฟล์ WebP

สร้าง shortcode

ให้ทำการสร้างไฟล์ชื่อ webp.html ในโฟว์เดอร์ layouts/shortcodes ของ Hugo ด้วย code ดังนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{{ $image := .Get "image"}}
{{ $type_arr := split $image "." }}
{{ $srcbase := index $type_arr 0 }}

<figure>
    <picture>
        <source srcset="{{$srcbase}}.webp" type="image/webp">
        <img src="{{.Get `image`}}" alt="{{.Get `alt` }}" defer>
    </picture>
    <figcaption>
        <p class="caption">{{.Get "alt" }}</p>
    </figcaption>
</figure>

วิธีการใช้งาน

ให้ใช้คำสั่ง shortcode ในไฟล์ markdown ของเรา ด้วยรูปแบบดังนี้ ซึ่งเราจะต้องทำการ upload ไฟล์ภาพทั้งที่เป็นนามสกุล jpg และ webp ที่มีชื่อเดียวกันขึ้นไปไว้ในโฟวเดอร์เดียวกันด้วย หลังจากนั้น หากหน้าเว็บของเราถูกเปิดด้วยบราวเซอร์ที่รองรับ webp ก็จะแสดงภาพด้วยไฟล์ที่เป็น webp และหากบราวเซอร์ที่ไม่รองรับ webp เช่น Safari ก็จะแสดงภาพด้วยไฟล์ jpg แทน

Cr: