Layouts ใน Eleventy (11ty)

#11ty20 ต.ค. 2567

การใช้ Layouts ใน Eleventy (11ty)

มาดูวิธีการทำ layout ใน 11ty กันครับ

ก่อนอื่นเราก็มีไฟล์ที่เราจะอ้างอิงถึง นั่นคือไฟล์ที่เรียก layout ตามด้านล่าง

---
layout: mylayout.njk
title: My Rad Nunjucks Blog Post
---
<h1>{{ title }}</h1>

จากโค้ดด้านบน เรามีการเรียก layout ที่ชื่อ mylayout.njk

โค้ด mylayout.njk จะอยู่ใน path _includes/mylayout.njk

ตัวอย่าง path อื่น ๆ เช่น ถ้าเรากำหนดเป็น layout: "layouts/base.njk" มันจะไปเรียกใช้ที่ path _includes/layouts/base.njk

ต่อไปเราไปดูตัวอย่างไฟล์ mylayout.njk กันครับ ตามด้านล่าง

---
title: My Rad Blog
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>
← กลับหน้าหลัก