I am new to 11ty and Nunjucks, but I cannot find this answer anywhere. I would like to add a page-specific style block in the template head tag from a page. I come from a Vue/Nuxt background, and I really like how you can scope a CSS block to the component/page, and they automatically put it in the head tag for you.
Here is my overall layout:
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>
It works to a point, but the style tag is in the body, not the head, and the block doesn't work as I understand it. What am I missing?
The problem is that you cannot use {% block %}
in a content file ... they can only be used in a file located in _includes
. Here is a version of your exmaple that does work ...
This is your base layout from which all other layouts "extend"
<!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>
This is the layout just for "simple" pages. Notice that it uses {% extends "default.njk" %}
and it uses the {% block customstyles %}
to provide a custom style.
{% 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 %}
This page is just the content, image and title and it is rendered using the "simple" layout.
---
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.