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
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: "/",
}
};
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>
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>
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 <b>this should be bolded</b>
</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?
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.