布局中的前沿数据不起作用十一
Posted
技术标签:
【中文标题】布局中的前沿数据不起作用十一【英文标题】：Front Matter Data in Layouts is not working Eleventy 【发布时间】：2021-11-07 00:35:04 【问题描述】：我在布局中使用前端问题时遇到了麻烦。它只是在页面上显示最前面的内容，而无需创建我的布局所需的数据。
代码如下：
/src/_includes/layouts/base.html
---
rightLinks : [
"icon": "mail_outline",
"href": "https://google.com"
]
---
<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> title </title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/global.css">
</head>
<body>
<!-- top-nav try to use rightLinks data from this layout -->
% include "partials/top-nav.html" %
% include "partials/main-nav.html" %
<main tabindex="-1" id="main-content">% block content %% endblock %</main>
</body>
</html>
/src/_includes/layouts/home.html
% extends "layouts/base.html" %
% block content %
<section class="hero is-black is-fullheight-with-navbar hero-home">
<div class="hero-body">
<div class="container">
<div>
<h1 class="title text-black text-huge">
Nexus Materiales Eléctricos
</h1>
<h2 class="subtitle is-4">
Somos mayoristas en insúmos eléctricos de calidad.
</h2>
</div>
<div class="mt-6">
<a href="/marcas" class="button is-rounded is-large is-dark is-uppercase text-semi-black">
ver marcas
</a>
</div>
</div>
</div>
</section>
<section class="section has-background-white">
<h2 class="title">Nuestras marcas destacadas</h2>
<h3 class="subtitle">Calidad y seguridad</h3>
</section>
% endblock %
/src/index.md
---
title: 'Hello World!'
layout: 'layouts/home'
---
我得到了顶部的实际字符串作为视觉结果：
在我看来，Eleventy 出于某种原因正在跳过前面的问题。
这是我的 Eleventy 配置文件：
module.exports = function(config)
config.addWatchTarget("./src/sass/");
config.addPassthroughCopy('./src/images')
// Return your Object options:
return
dir:
input: "src",
output: "dist"
,
markdownTemplateEngine: 'njk',
dataTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
;
有人可以向我解释为什么会发生这种情况，我该如何解决？谢谢
【问题讨论】：
我认为这不是问题，但 Eleventy 在 _includes 中查找布局。您的文件是 _includes/layouts/base.html。当您在模板中指定布局时，您是否在执行以下操作： layouts/base ？ 我自己无法重现此内容。也许分享你的模板调用它？ 你好 Raymond，我刚刚用新代码更新了这个问题。您会注意到，我在“基本”布局中定义数据。该 data 将被称为“top-nav”的部分使用。目前，我已将此信息移动到 _data 中，我可以在全局访问此信息，但这并不理想。我真的很想成为我的 base.html 布局中的头等大事。 我认为前面的问题是由 Eleventy 解析的，而不是 Nunjucks，这就是你看到它的原因。 【参考方案1】：Front-matter 数据仅在由带有 layout: front matter 键的页面直接引用的布局文件中可用，not 带有 Nunjucks % extends %。作为11ty's data cascade 的一部分，直接引用的布局文件中的前沿数据与其他数据合并。 (11ty docs: front matter in layouts)
例如：
<!-- index.md -->
---
layout: layouts/content
---
# some content here
# layouts/base.njk #
---
hello: "world"
---
# ^ the above will be printed as plain text and isn't available #
# layouts/content.njk #
---
someKey: "something"
---
% extends "layouts/base.njk" %
someKey
# ^ this will render "something" as expected #
这可能是因为% extends % 是 Nunjucks 的一个功能，而 Eleventy 不知道还引用了哪些其他 Nunjucks 文件。
根据您的情况，您有几个选择。首先，您可以将您的前沿数据放在layouts/home 中，因为这就是您在index.md 中引用的内容。另一种选择是只使用Nunjuck's set tag。
% set links = [
"icon": "mail_outline",
"href": "https://google.com"
] %
% for link in links %
link.icon
link.href
% endfor %
【讨论】：
您的回答非常好，对我帮助很大。在这种情况下，我将在部分内部使用set 来呈现这些链接。谢谢。以上是关于布局中的前沿数据不起作用十一的主要内容，如果未能解决你的问题，请参考以下文章