-
-
Notifications
You must be signed in to change notification settings - Fork 484
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
What is the best way to pass a block from a layout to a parent layout? #853
Comments
If I recall correctly, in Eleventy, Nunjucks happily passes content through to the specified layout without using At least, this seems to work for me™ I'm struggling to find the documentation I thought had lead me to that conclusion. |
@philhawksworth what I see in your aforementioned So it looks like it's either one or the other:
The later seems to be the best (or even the only way) to "pass" an HTML fragment (a "block") to the parent (extended) layout. |
Oh, looks like @zachleat already answered this is "by design": That's not why I understood when reading the Addendum about existing Templating features, maybe we could rephrase it. |
Aha. Yeah, there it is. Nice one @nhoizey! |
Default support for blocks would be super nice. In the mean time, I've set up these tags to recreate similar functionality, maybe it's of help to someone else. module.exports = function (eleventyConfig) {
const layoutblocks = [];
eleventyConfig.addShortcode('renderlayoutblock', function(name) {
return (this.page.layoutblock || {})[name];
});
eleventyConfig.addPairedShortcode('layoutblock', (content, name) {
if (!this.page.layoutblock) this.page.layoutblock = {};
this.page.layoutblock[name] = content;
});
} Define a
Set the contents of
|
@rikschennink Thanks for the suggestion! module.exports = function (eleventyConfig) {
eleventyConfig.addShortcode('renderlayoutblock', function(name) {
return (this.layoutblock || {})[name];
});
eleventyConfig.addPairedShortcode('layoutblock', (content, name) {
if (!this.layoutblock) this.layoutblock = {};
this.layoutblock[name] = content;
});
} |
@gluecksmensch good one. Previous iteration I stored data in I guess with my templates |
@rikschennink @gluecksmensch as we showed before in the thread, you can use Nunjucks' I do this here for example: And here's the |
11ty newbie here. I hit this same issue, and followed the pattern from @nhoizey, however all the block sections are missing in the generated html. index.njk: {% extends "layout.njk" %}
{% block title %} Home page in HTML {% endblock %}
{% block header %}
<meta charset="utf-8" />
{% endblock %}
{% block content %}
<p>
Welcome to my 11ty website.
</p>
{% include "footer.njk" %}
{% endblock %} _includes/layout.njk <!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<style>
.active { background: yellow }
</style>
{{ header | safe }}
</head>
<body>
<div>
<a href="/" class="{{ 'active' if '/' == page.url }}">Home</a>
<a href="/README" class="{{ 'active' if '/README/' == page.url }}">README</a>
</div>
{{ content | safe }}
</body>
</html> Generated index.html: <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.active { background: yellow }
</style>
</head>
<body>
<div>
<a href="/" class="active">Home</a>
<a href="/README" class="">README</a>
</div>
</body>
</html> Full source code is here: |
@surferjeff Looking at @nhoizey's repo, I think you need to define your blocks in your _includes/layout.njk file, similar to this: - <title>{{ title }}</title>
+ {% block title %}
+ <title>{{ title }}</title>
+ <meta property="og:title" content="{{ title }}" />
+ {% endblock %} Then you can either set the {% block title %}
<title>Precious Prana, faire pétiller</title>
<meta property="og:title" content="Precious Prana, faire pétiller" />
{% endblock %} |
@surferjeff Try something like this: <!DOCTYPE html>
<html>
<head>
{% block title %}
<title>{{ title }}</title>
{% endblock %}
<style>
.active { background: yellow }
</style>
{% block header %}
{{ header | safe }}
{% endblock %}
</head>
<body>
<div>
<a href="/" class="{{ 'active' if '/' == page.url }}">Home</a>
<a href="/README" class="{{ 'active' if '/README/' == page.url }}">README</a>
</div>
{% block content %}
{{ content | safe }}
{% endblock %}
</body>
</html> And… {% extends "layout.njk" %}
{% block title %}
<title>Home page in HTML</title>
{% endblock %}
{% block header %}
<meta charset="utf-8" />
{% endblock %}
{% block content %}
<p>Welcome to my 11ty website.</p>
{% include "footer.njk" %}
{% endblock %} Or set the ---
title: Override title
---
{% extends "layout.njk" %}
{% block header %}
<meta charset="utf-8" />
{% endblock %}
{% block content %}
<p>Welcome to my 11ty website.</p>
{% include "footer.njk" %}
{% endblock %} |
Ah, I see now. Thanks for the quick replies! |
This is not well documented. Some starter projects examples use the |
(Edit: sorry, @gluecksmensch, it didn't work for me without the module.exports = function (eleventyConfig) {
eleventyConfig.addShortcode('renderlayoutblock', function(name) {
return (this.page.layoutblock || {})[name] || '';
});
eleventyConfig.addPairedShortcode('layoutblock', function(content, name) {
if (!this.page.layoutblock) this.page.layoutblock = {};
this.page.layoutblock[name] = content;
return '';
});
} Usage reminder (thanks again, @rikschennink):
Set the contents of
|
This worked for me. Previously, I was also getting "undefined" in the output. Now I don't. Thanks. |
Hello, this method using the global |
I'm using Nunjucks layouts, and the
layout
attribute in Front Matter for layout chaining, so that apage.njk
layout uses abase.njk
layout.As I read it, the Addendum about existing Templating features states that “Eleventy’s layout system exists a layer above Nunjucks' Template Inheritance exposed with
{% extends %}
“.So I thought
{% extends %}
was implicit when using layout chaining, but a{% block %}
defined in mypage.njk
layout never arrives intobase.njk
.I tried to add an explicit
{% extends %}
like I saw in Phil Hawksworth's code, but I get thebase.njk
included twice, kind of recursivelyIf I remove the
layout
attribute from the Front Matter of thepage.njk
layout, its content doesn't arrive intobase.njk
anymore.I must be missing something obvious, so how is it supposed to work?
Thanks
The text was updated successfully, but these errors were encountered: