Eleventy:Layouts

Example

우선 템플릿을 만들자. 여기선 Markdown 템플릿을 만든다:

---
layout: mylayout.njk
title: My Rad Markdown Blog Post
---
# {{ title }}

그러면 의 Include 폴더 에서 mylayout.njk Nunjucks 파일을 찾습니다. 결과적으로 _includes/mylayout.njk 경로가 된다.

레이아웃 파일에서는 어떤 템플릿 언어라도 사용할 수 있습니다. 콘텐츠의 템플릿 언어와 일치할 필요는 없습니다. 템플릿은 레이아웃 ejs을 사용할 수 있습니다 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>

content레이아웃 템플릿은 하위 템플릿의 콘텐츠로 데이터를 채웁니다. 또한 출력을 이중 이스케이프 처리하고 싶지 않으므로 safe를 사용. 여기서는 제공된 Nunjucks 필터를 사용함.

레이아웃에는 자신만의 머리말 데이터가 포함될 수 있습니다! 렌더링 시 콘텐츠 데이터와 병합됩니다. 키가 충돌하는 경우 콘텐츠 데이터가 우선적으로 적용됩니다. Eleventy가 데이터 캐스케이드(Data Cascade)라고 부르는 방식으로 데이터를 병합하는 방법 에 대해 자세히 알아보세요.

데이터 소스

Eleventy Data Cascade 에서 데이터가 병합될 때 데이터 소스의 우선순위는 다음과 같습니다 (가장 높은 우선순위에서 가장 낮은 우선순위까지).

Computed Data
Front Matter Data in a Template
Template Data Files
Directory Data Files (and ascending Parent Directories)
Front Matter Data in Layouts (this moved in 1.0)
Configuration API Global Data
Global Data Files

레이아웃 앨리어싱

eleventyConfig.addLayoutAlias(from, to)은 레이아웃 별칭을 추가하는 데 사용됩니다. .eleventy.js파일에 다음과 같이 수정:

module.exports = function(eleventyConfig) {
  eleventyConfig.addLayoutAlias('post', 'layouts/post.njk');
};

레이아웃 체이닝

여러 레이아웃을 함께 연결합니다. {{ content | safe }} 처럼 PIPE 로 연결하는 느낌.

레이아웃에서 이중 이스케이프 방지

원본 컨텐츠 그대로 출력하고 싶을 때 사용한다:

Template Language	Unescaped Content (for layout content)	Comparison with an Escaped Output
Nunjucks	`{{ content \| safe }}`	`{{ value }}`
EJS	`<%- content %>`	`<%= value %>`
Handlebars	`{{{ content }}}` (triple stash)	`{{ value }}` (double stash)
Mustache	`{{{ content }}}` (triple stash)	`{{ value }}` (double stash)
Liquid	is by default unescaped so you can use `{{ content }}`	`{{ value \| escape }}`
HAML	`! #{ content }`	`= #{ content }`
Pug	`!{content}`	`#{value}`

Favorite site

Layouts — Eleventy