页眉中的页面<style>为11
我对11和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 %}_包括/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>它工作到一定程度，但样式标签在身体中，而不是头部，而块不工作，正如我所理解的。我遗漏了什么？
回答 3
Stack Overflow用户
发布于 2020-08-30 01:01:23
问题是您不能在内容文件中使用{% block %} .它们只能在位于_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>_包括/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.Stack Overflow用户
发布于 2021-10-08 22:21:56
您可以尝试将您的特定样式放到前面的数据中，然后在主模板上显示它。
layout: default.njk
title: Home
style: ".container{background: red;}"或者，如果有很长的样式，那么就执行组件，并将其名称传递到页面标题中，因此您的模板将在呈现中包含它。
Stack Overflow用户
发布于 2022-11-14 11:54:37
您应该使用下面的块来输出站点头中的数据
{% block head %}
{{ yourCode | safe }}
{% endblock %}
https://stackoverflow.com/questions/63647751
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号