javascripthtmlnode.jsnunjuckseleventy

Why would 11ty ignore unescaped HTML code via Nunjucks?


I'm a new user of 11ty (and really, Javascript in general as Python and Matlab are my forte), and I'd like y'all's help in generating a static site for my personal portfolio.

I have an existing Django-based multi-page website where all pages have different content but are created from the same basic structure. I've been trying to follow the example on 11ty's documentation to convert my code -and in the spirit of legibility, get rid of every possible instance of {% block %}.

My understanding is that you can create one Nunjucks file to define a layout (for example, base.html), and you're supposed to be able to populate it with different content (for example, index.html). I recognize that its contents will be escaped unless you use the safe pipe. However, I am doing just that, but the HTML code in my template is being escaped, anyways, causing my layout to render it as uninterpreted text.

I understand that you can't have conflicts between Nunjucks' Template Inheritance and 11ty's Layout Chaining, but I don't believe that is a relevant issue here. What else could I do to ensure that my webpage gets rendered properly?

Here's my project directory as things stand now.

├─ _public
├─ .github
├─ data
├─ node_modules
│
├─ src
│   ├─ css
│   │
│   ├─ include
│   │   └─ header.html, footer.html, loading.html etc.
│   │
│   ├─ js
│   │
│   ├─ layouts
│   │   └─ base.html
│   │
│   └─ index.html
│
├─ .eleventy.js
│
└─ other files

.eleventy.js

My 11ty configuration is as follows. Other than following 11ty's notes on Nunjucks to ensure that my project's folder structure is recognized, I haven't done anything too crazy.

module.exports = function (eleventyConfig) {
    const Nunjucks = require('nunjucks');

    // Copy additional files to the output folder
    eleventyConfig.addPassthroughCopy("src/css/*.css");
    eleventyConfig.addPassthroughCopy("src/js");

    // Configure Nunjucks
    let nunjucksEnvironment = new Nunjucks.Environment(
        new Nunjucks.FileSystemLoader([
            "src/layouts",
            "src/include",
        ])
    );
    eleventyConfig.setLibrary("njk", nunjucksEnvironment);

    // some additional filters

    // Return Object
    return {
        dir: {
            input: "src",
            output: "_public",
            data: "data",
            includes: "include",
            layouts: "layouts",
        },
        markdownTemplateEngine: "njk",
        htmlTemplateEngine: "njk",
        pathPrefix: "/",
    }
};

src/index.html

While I intend to populate this template with a more complex set of HTML, I stripped it down to its bare bones to ensure that it's (not) working.

---
layout: base
title: Home
---
Helloooo <b>this should be bolded</b>

src/layouts/base.html

Interestingly, all of the {% include %} statements are rendering just fine, and my CSS, Javascript, and additional templates are rendered just fine.

---
title:
date: Last Modified
---
<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    {% include "header.html" %}
</head>
<body>
    {% include "loading.html" %}
    {% include "navbar.html" %}
    {% include "gototop.html" %}
    <main>
        {{ content | safe }}
    </main>
    {% include "footer.html" %}
</body>
</html>

_public/index.html

With the above code, this is the output I get. It's condensed for clarity.

<!DOCTYPE html>
<html>

<head>
<!--the CSS and JS in this part render as expected-->
</head>

<body>
    <!--the code in loading.html and navbar.html render as expected-->
    <main>
        Helloooo &lt;b&gt;this should be bolded&lt;/b&gt;
    </main>
    <!--the code in footer.html render as expected-->
</body>
</html>

I expect the code in <main> to render as proper, functional HTML. Why is this not happening?


Solution

  • Thanks to Zach Leatherman on the 11ty GitHub, I was able to get this resolved!

    It turned out that the issue was in .eleventy.js, where the redundant definition of let nunjucksEnvironment = new Nunjucks.Environment(...) seemed to have gotten rid of all the other configurations that I'd defined. Simply getting rid of that block of code allowed my HTML to render properly.