How to insert block of html into eleventy template

Question

I'm trying to move a website from python to eleventy. My file structure is in the screenshot above. I've been following some tutorials such as https://dev.to/loige/getting-started-with-eleventy-in-11-minutes-496j, as well as the eleventy docs (https://www.11ty.dev/docs/layouts/).

I tried to insert a block of html (in need3.njk) into a template called test.njk using the numchucks front matter:

---
title: hi
question: there
need3: need3.njk
---
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

But this does not add the actual html (only the filename). Please see below, How can I add the block of html into the template

score 1 · Accepted Answer · answered Jun 21 '22 at 19:18

I don't think you can do this with front matter. However, you can do it using the includes feature.

To see this create the files below in a folder, along with a logo.png file. If you run npx @11ty/eleventy --serve in the folder, and then navigate a browser to localhost:8080/test, then you'll see the header and image.

need3.njk

<img src="../logo.png">

test.njk

<h1>We can help:</h1>
{% include 'need3.njk' %}

.eleventy.js

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("*.png");
};

Note that I've copied the image file into the root of the site and then referenced it through a relative path going up a level, which you probably wouldn't want to do in code that isn't just a test.

How to insert block of html into eleventy template

1 Answers1