11ty 的页眉中的页面 <style>答案

【问题标题】：Page <style> in Header for 11ty11ty 的页眉中的页面 <style>
【发布时间】：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

标签： nunjucks jamstack eleventy

【解决方案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: ".container{background: red;}"

或者如果有长样式，那么做组件并在页眉中传递它的名字，这样你的模板就会在渲染中包含它。

【讨论】：