Skip to content

Instantly share code, notes, and snippets.

@rob-kistner
Last active October 9, 2020 01:24
Show Gist options
  • Select an option

  • Save rob-kistner/00d5746799d8eca20a220a3bfefc6041 to your computer and use it in GitHub Desktop.

Select an option

Save rob-kistner/00d5746799d8eca20a220a3bfefc6041 to your computer and use it in GitHub Desktop.
Boilerplate - Nunjucks

Nunjucks Boilerplate

For quick-starting a standard website nunjucks project.

Folder Hierarchy

.
├── html                        # Holds nunjucks templates with both `.html` and `.njk` extensions
│   ├── _layouts                # Template folder, for `extends`
│   │   └── layout-main.njk     # Main layout, note naming system for future layouts
│   ├── _partials               # Partials folder, for repeating bits of page design
│   │    └── nav-main.njk       # Main Navigation partial, `include`d on `layout-main.njk`
│   └── index.html              # Home page file
├── scss                        # sass styles folder
└── ...(etc)
{% extends "./layouts/layout-main.njk" %}
{% block content %}
<h1>
Home
</h1>
{% endblock %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Nunjucks Site</title>
{% block css %}
<link rel="stylesheet" href="./css/styles.css"/>
{% endblock %}
{% block scripts_header -%}
{%- endblock %}
</head>
<body>
{% block nav_main -%}
{% include "../partials/nav-main.njk" %}
{%- endblock %}
{% block content -%}
<h1>
Default content
</h1>
{%- endblock %}
{% block scripts_footer -%}
{%- endblock %}
</body>
</html>
<nav>
<div class="site-brand">
<p>Nunjucks Site</p>
</div>
<div class="menu-main">
<ul>
<li>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment