Skip to content

Instantly share code, notes, and snippets.

@jeromecoupe

jeromecoupe/template_inheritance.njk

Last active June 17, 2021 21:34
Show Gist options
  • Save jeromecoupe/89f4c12ac1cf7ed8f3c4f7d25c93787f to your computer and use it in GitHub Desktop.
Save jeromecoupe/89f4c12ac1cf7ed8f3c4f7d25c93787f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
template_inheritance.njk
{# Layout File: src/_includes/layouts/sidebar.njk (in 11ty, layouts have to be in src/_includes by default) #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ metaTitle }}</title>
</head>
<body>
{% block content %}{% endblock %}
{% block sidebar %}
<p>default sidebar content</p>
{% endblock %}
</body>
</html>
{# Template file: src/content/pages/about.njk #}
---
permalink: about/index.html
front: "matter"
---
{# layout to extend #}
{% extends "layouts/sidebar.njk" %}
{# variables are accessible to the whole context
this one will be accessible by the parent template #}
{% set metaTitle = "Nunjucks is great" %}
{# override content block in layout #}
{% block content %}
<p>my content</p>
{% endblock %}
{# override sidebar block in layout #}
{% block sidebar %}
<p>my sidebar</p>
{% endblock %}
@jeromecoupe
Copy link
Author

jeromecoupe commented Jun 17, 2021 •
edited
Loading

You can also use / download / inspect this starter repository. It pretty much covers the basics in terms of template inheritance with Nunjucks, and also covers how to include content coming from markdown files in layouts.
https://github.com/jeromecoupe/eleventy_starter

Basically:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment