11ty 的页眉中的页面 <style>
Posted
技术标签:
【中文标题】11ty 的页眉中的页面 <style>【英文标题】：Page <style> in Header for 11ty 【发布时间】：2020-12-18 05:05:38 【问题描述】：我是 11ty 和 Nunjucks 的新手，但我在任何地方都找不到这个答案。我想在页面的模板头标签中添加一个特定于页面的样式块。我来自 Vue/Nuxt 背景，我非常喜欢您如何将 CSS 块限定为组件/页面，并且他们会自动将其放入 head 标签中。
这是我的整体布局：
index.njk
---
layout: default.njk
title: Home
---
<img src="http://lorempixel.com/1200/300/sports/5" style="width: 100%;" />
<div class="container">
<h1>11ty Test</h1>
</div>
% block customstyles %
<style>
.container
background: red;
</style>
% endblock %
_includes/default.njk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> title
| 11ty Sandbox</title>
% block customstyles %
This is the default content
% endblock %
</head>
<body>
content | safe
</body>
</html>
它在一定程度上起作用，但样式标签在正文中，而不是头部，并且我理解的块不起作用。我错过了什么？
【问题讨论】：
我的回答对你有帮助吗？ 对于任何感兴趣的人，有一个很酷的插件可以做到这一点，另外还有一个叫做 Eleventy 插件头盔：npmjs.com/package/eleventy-plugin-helmet 【参考方案1】：问题是您不能在内容文件中使用% block %...它们只能在位于_includes 的文件中使用。这是您的示例的一个版本，它确实有效......
_includes/default.njk
这是所有其他布局“扩展”的基础布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> title
| 11ty Sandbox</title>
% block customstyles %
This is the default content
% endblock %
</head>
<body>
% block body %
content | safe
% endblock %
</body>
</html>
_includes/simple.njk
这只是“简单”页面的布局。请注意，它使用% extends "default.njk" % 并使用% block customstyles % 来提供自定义样式。
% extends "default.njk" %
% block customstyles %
<style>
.container
background: red;
</style>
% endblock %
% block body %
<img src=" image " style="width: 100%;" />
<div class="container">
<h1> title </h1>
content | safe
</div>
% endblock %
index.njk
这个页面只是内容、图像和标题，它使用“简单”布局呈现。
---
layout: simple.njk
title: Home
image: http://lorempixel.com/1200/300/sports/5
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed finibus, velit a tristique hendrerit, nisl nisi aliquet diam, a vulputate tortor quam et odio.
Vivamus vitae magna a eros suscipit luctus a quis lorem.
【讨论】：
不幸的是，这不起作用。它忽略了这些块并以与我以前相同的方式呈现内容。我尝试了其他一些方法，但没有帮助。 @NathanBlaylock 好的，我现在明白我做错了什么。我已经更新了我的答案。 好的，谢谢。这按我想要的方式工作。感谢您的帮助。 @NathanBlaylock 我很高兴能帮上忙。【参考方案2】：您可以尝试将您的特定样式放入前端数据中，然后将其显示在主模板上。
layout: default.njk
title: Home
style: ".containerbackground: red;"
或者如果有长样式，那么做组件并在页眉中传递它的名字，这样你的模板就会在渲染中包含它。
【讨论】：
以上是关于11ty 的页眉中的页面 <style>的主要内容，如果未能解决你的问题，请参考以下文章