Creating a New Page Template

Creating a new page template in Eleventy is a straightforward process. This allows you to define a consistent structure and style for different types of pages in your project. Follow these steps to create a new page template:

Step 1

Create the Template File: Navigate to your _includes directory. This is where Eleventy looks for template files by default. Inside this directory, create a new file for your template. Name it appropriately, like my-template.njk for a Nunjucks template. You can also use one of the preexisting templates - base.njk or full-width.njk.

Step 2

Add Basic HTML Structure: Open the newly created template file and add the basic HTML structure. For example:


<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Template</title>
    <!-- Add any additional head elements here -->
    </head>
    <body>
        <!-- Page content goes here -->
    </body>
</html>

Step 3

Incorporate Eleventy Features: Utilize Eleventy's features, such as front matter data, template inheritance, and filters, to make your template dynamic. For instance, you might want to include a header and footer partial in your template:


{% include "partials/header.njk" %}
<!-- Page content goes here -->
{{ content | safe }}
{% include "partials/footer.njk" %}

Step 4

Create a Content Page: Now, create a content file (like my-page.njk) in src input directory. At the top of this file, specify your new template in the front matter:


---
layout: my-template.njk
title: My Custom Page
---

Then add your page-specific content below the front matter.

Step 5

Test Your Template: Run Eleventy (usually with npm run serve) and check if your new page (my-page.njk) renders correctly with the my-template.njk template.

Customization: Continue to expand and customize your template as needed, adding CSS, JavaScript, and more complex logic to suit your project's requirements.