Eleventy Walk Through - Partials and Include

Partials and Include

Partials often refers to HTML that is not a complete web page, but is intended for re-use within multiple web pages. Common examples are the header and the footer of site pages. Some advantages of this are: not having to copy that code into every page of the site; and if a change has to be made, it only has to be done in one place.

Using Include

The tag {% include %} is how a partial is added to a page. By default, Eleventy looks for partials in the _includes folder. For example, to include header HTML that is in the file _includes/_head.html, the tag would be {% include _head.html %}. Note that it's common practice to start the filename of a partial with "_".

Create a file _includes/_head.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Included Header</title>
</head>
<body>

Create a file _includes/_foot.html

<p>Footer text</p>
</body>
</html>

Edit your index.html (in the project root) to remove the head and foot of the HTML, and add include tags, so it looks like this.

---
title: Eleventy Title from Data
flowers:
  - robin
  - finch
  - sparrow
---
{% include _head.html %}
    <h1>{{ title }}</h1>

    <ul>
        {% for bird in birds %}
        <li>{{ bird }}</li>
        {% endfor %}
    </ul>

{% include _foot.html %}

The HTML in the index.html should now look like

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Included Header</title>
</head>
<body>
<h1>Birds</h1>
<ul>
	<li>robin</li>
	<li>finch</li>
	<li>sparrow</li>
	</ul>
<p>Footer text</p>
</body>
</html>

Using Front Matter With Partials

Edit the _includes/head.html to use the title tag

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>

The title in index.html should now go back to matching that page's front matter variable title (Eleventy Title from Data).

This shows that the included partial will process the front matter of the including page. However, front matter that is in the partial will not be processed, and will just appear on the page as part of the HTML. Basically the partial is added to the page's HTML first, then Eleventy processes the tags. In other words, don't bother putting front matter in partials.