ทำ paging ใน Eleventy (11ty)

ทำ paging ใน Eleventy (11ty)

เรามาดูวิธีการทำ paging ใน 11ty กันครับ โดยเราจะมีไฟล์ json possums.json อยู่ใน path _data/possums.json โดยมีข้อมูลตามนี้

[
	{
		name: "Fluffy",
		age: 2,
	},
	{
		name: "Snugglepants",
		age: 5,
	},
	{
		name: "Lord Featherbottom",
		age: 4,
	},
	{
		name: "Pennywise",
		age: 9,
	},
];

จากนั้นเราก็สร้างไฟล์ possum-pages.njk เพื่อทำเป็นไฟล์ paging ตามตัวอย่างโค้ดด้านล่าง

---
pagination:
  data: possums
  size: 1
  alias: possum
permalink: "possums/{{ possum.name | slugify }}/"
---

{{ possum.name }} is {{ possum.age }} years old

จากโค้ด เราจะมี pagination โดยใช้ data จาก possums ซึ่งเป็น json ชื่อ possums.json อยู่ใน _data

ตรงส่วนของ size จะบอกว่า แต่ละ paging จะมี data size เท่าไหร่ จากตัวอย่างเราจะมี data 4 row จากนั้น เรากำหนด size = 1 เท่ากับว่า 11ty จะสร้าง page เท่ากับ 4 page

จากนั้น เราจะกำหนด alias ชื่อ possum

เรากำหนด permalink เวลาจะสร้างแต่ละ page เป็น possums/{{ possum.name | slugify }}/

ตรงชื่อ จะเห็นว่าเรามี slugify โดย slugify เป็นฟังก์ชันที่จะทำการแปลง string เป็น string ที่เป็น url ได้