页眉 <style> 第 11ty

Question

我是 11ty 和 Nunjucks 的新手，但我无法在任何地方找到这个答案。我想在页面的模板头标签中添加一个页面特定的样式块。我来自 Vue/Nuxt 背景，我真的很喜欢你如何将 CSS 块的范围限定到 component/page，他们会自动为你把它放在 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>

它在一定程度上起作用，但是样式标签在正文中，而不是在头部中，而且据我所知，该块不起作用。我错过了什么？

Answer 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.

Answer 2

您可以尝试将您的特定样式放入前端数据中，然后在主模板上显示。

layout: default.njk
title: Home
style: ".container{background: red;}"

或者如果有长样式，则执行组件并在页眉中传递其名称，这样您的模板就会将其包含在渲染中。

页眉 <style> 第 11ty

Page <style> in Header for 11ty

nunjucks

jamstack

eleventy

_includes/default.njk

_includes/simple.njk

index.njk