Eleventy Recipes Wordmark

Eleventy Recipes

Add a layout

By Mike Aparicio

Adding a layout allows you to insert the content of multiple HTML or Markdown pages into a common template.

Directions

  1. Create a folder in the root of your project called _includes
  2. Create a file inside of _includes called base.njk
  3. In base.njk add a basic HTML boilerplate and inside of the body add {{ content | safe }}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Eleventy Project</title>
</head>
<body>
  {{ content | safe }}
</body>
</html>
  1. In index.md add some front matter to the top of the page.
---
layout: base
---

  1. Visit your index page and now it should be rendering as HTML instead of Markdown. https://localhost:8080/

  2. Let's make our title dynamic. In _includes/base.njk, Replace the content of the title with {{ title }}

<title>{{ title }}</title>
  1. Before {{ content | safe }}, add:
<h1>{{ title }}</h1>
  1. In index.md, add another line to your front matter:
title: My Eleventy Project
  1. Delete your title: # My Eleventy Project

Resources