开发者-导航 猿导航

Eleventy 布局链

发布时间:

您的布局也可以使用布局!将相同的 layout front matter 数据添加到布局模板文件中,它就会链接起来。您不必在布局和内容中使用相同的模板引擎,您可以混合搭配。

要链接布局,让我们看一个示例:

layout-chain-example.md

---
layout: mainlayout.njk
title: My Rad Blog
---

# My Rad Markdown Blog Post

我们希望在帖子内容周围添加一个主要元素,因为我们喜欢可访问性。

mainlayout.njk 如下所示:

_includes/mainlayout.njk

---
layout: mylayout.njk
myOtherData: hello
---
<main>
  {{ content | safe }}
</main>

然后,该布局本身将包装在我们在前面的示例中使用的相同 mylayout.njk 中:

_includes/mylayout.njk

<!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>

一起使用,这将输出:

输出 _site/layout-chain-example/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Rad Blog</title>
  </head>
  <body>
    <main>
      <h1>My Rad Markdown Blog Post<h1>
    </main>
  </body>
</html>

模板关联关系

layout-chain-example.md -> mainlayout.njk -> mylayout.njk

关于现有模板功能的附录 #

值得注意的是,您仍然可以使用内置于不同模板语言中的现有模板重用机制。例如,Nunjucks 将其称为模板继承并使用 {% extends %} 进行公开。Eleventy 的布局系统存在于其之上,并公开了一个很好的多模板语言机制来配置内容前面的布局并在它们之间共享数据。