如何解决页眉中的页面<style>为11ty _includes / default.njk _includes / simple.njk index.njk
我是11ty和Nunjucks的新手，但是我找不到任何答案。我想在页面的模板head标签中添加特定于页面的样式块。我来自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>
它可以工作到一定程度，但是style标签位于身体中，而不是头部，按照我的理解，该块不起作用。我想念什么？
解决方法
问题是您不能在内容文件中使用{% block %} ...它们只能在_includes中的文件中使用。这是可以正常工作的exmaple版本...
_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.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。