Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Multiple layout inheritance front matter #834

Closed
luwes opened this issue Dec 23, 2019 · 2 comments
Closed

Multiple layout inheritance front matter #834

luwes opened this issue Dec 23, 2019 · 2 comments
Labels
education

Comments

@luwes
Copy link

luwes commented Dec 23, 2019

Describe the bug
When using front matter for multiple layout inheritance it seems not to be working.

To Reproduce
Try this layout base.njk:

---
layout: layouts/root.njk
---

{% block head %}
  <link rel="stylesheet" href="/css/styles.css">
  <script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js" integrity="sha384-qD/MNBVMm3hVYCbRTSOW130+CWeRIKbpot9/gR1BHkd7sIct4QKhT1hOPd+2hO8K" crossorigin="anonymous"></script>
{% endblock %}

{% block main %}
  {% include "header.njk" %}

  {% block content %}
    {{ content | safe }}
  {% endblock content %}

  {% include "footer.njk" %}
{% endblock %}

{% block foot %}
  <script src="/js/site.min.js"></script>
{% endblock %}

root.njk

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>

    <script>
      var API_URL = '{{ site.apiUrl }}';
    </script>

    {% block head %}
    {% endblock %}
  </head>
  <body {% if bodyClass %}class="{{ bodyClass }}"{% endif %}>
    {% block main %}
    {% endblock %}

    {% block foot %}
    {% endblock %}
  </body>
</html>

index.njk

---
layout: layouts/base.njk
---

Some content

Expected behavior
Not have an empty page.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment:

  • OS and Version: MacOS latest
  • Eleventy Version 0.10.0-beta.1

Additional context
Using Nunjucks inheritance it does work:

{% extends "layouts/root.njk" %}

{% block head %}
  <link rel="stylesheet" href="/css/styles.css">
  <script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js" integrity="sha384-qD/MNBVMm3hVYCbRTSOW130+CWeRIKbpot9/gR1BHkd7sIct4QKhT1hOPd+2hO8K" crossorigin="anonymous"></script>
{% endblock %}

{% block main %}
  {% include "header.njk" %}

  {% block content %}
    {{ content | safe }}
  {% endblock content %}

  {% include "footer.njk" %}
{% endblock %}

{% block foot %}
  <script src="/js/site.min.js"></script>
{% endblock %}
@zachleat
Copy link
Member

Yeah, sorry about that—this is by design. We don’t support mixing Nunjucks inheritance and Eleventy layout chaining in this way. Layouts are rendered independently, so you would need to use {% extends %} in order to make this feature work in an Eleventy layout.

There is a short note about this here:
https://www.11ty.dev/docs/layout-chaining/#addendum-about-existing-templating-features

This was important to sacrifice in order to get template language independence between templates and layout:

You can use any template language in your layout—it doesn’t need to match the template language of the content. An ejs template can use a njk layout, for example.

via https://www.11ty.dev/docs/layouts/

@zachleat
Copy link
Member

This is an automated message to let you know that a response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

@nhoizey nhoizey mentioned this issue Jan 14, 2020
Open
@KyleMit KyleMit mentioned this issue Jan 16, 2020
Closed
@tcurdt tcurdt mentioned this issue Apr 25, 2020
Open
precondition added a commit to precondition/keymapdb that referenced this issue Mar 16, 2022
@precondition
Insert keymap meta OG tags in <head> with computed front matter data
98fa99d 
The previous approach with Nunjuck's {% block %} and {% extends %} does
not work as you'd expect it to in 11ty.
See 11ty/eleventy#834 (comment)
@keitaay keitaay mentioned this issue Jan 2, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
education
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zachleat @luwes