สร้างฟังก์ชัน filter ใน Eleventy (11ty)

สร้างฟังก์ชัน filter ใน Eleventy (11ty)

เรามาดูวิธีการสร้างฟังก์ชัน หรือ filter ใน Eleventy (11ty) กันครับ โดยเราจะสร้างฟังก์ชันโดยใช้ addNunjucksFilter ใน eleventyConfig คับ ไปดูตัวอย่างโค้ดกัน

export default async function (eleventyConfig) {

    eleventyConfig.addNunjucksFilter("stringify", function (value) {
        return JSON.stringify(value, null, 2);
    });

    eleventyConfig.addNunjucksFilter("sortById", (value) => {
        return value.sort((a, b) => a.id - b.id)
    })

};

จากโค้ด เราได้สร้างฟังก์ชัน stringify กับ sortById โดย

• stringify จะเป็นฟังก์ชันที่จะ return JSON.stringify ออกไป
• sortById จะทำการ sort ข้อมูล โดยใช้ฟิลล์ id คับ

เมื่อตอนสร้างเราจะทำการ addNunjucksFilter เพื่อเพิ่มเข้าไปในส่วน filter คับ

ต่อไปเราไปดูวิธีการใช้งานกันบ้าง ตัวอย่างตามโค้ดด้านล่าง

{% set data_reverse = data_ex | sortById %}

จากโค้ดเราก็ใช้ | sortById เพื่อ sort ข้อมูลใน data_ex