Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nunjucks layout is displaying HTML code literally instead of interpreting it #2725

Closed
keitaay opened this issue Jan 2, 2023 · 3 comments
Closed

Nunjucks layout is displaying HTML code literally instead of interpreting it #2725

keitaay opened this issue Jan 2, 2023 · 3 comments
Labels
education in-progress needs-reproduction Having trouble reproducing! Can anyone confirm?

Comments

@keitaay
Copy link

keitaay commented Jan 2, 2023

Operating system

macOS Monterey 12.6.2

Eleventy

1.0.2

Describe the bug

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?

Reproduction steps

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

Here are the contents of key 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>

Expected behavior

With the above code, this is the output I get.

<!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 here?

Reproduction URL

No response

Screenshots

No response
@zachleat zachleat self-assigned this Jan 5, 2023
@zachleat
Copy link
Member

zachleat commented Jan 5, 2023

Hmm, I have a few ideas, although I wasn’t able to reproduce with the example code you provided!

I would expect that the code you provided to be a result of {{ content }} in your layout file (not {{ content | safe }})

Is this part of the configuration necessary?

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

Eleventy should add the src/include folder for you by default. src/layouts should be reserved for Eleventy layout files (not other Nunjucks includes)

@zachleat zachleat removed their assignment Jan 5, 2023
@zachleat zachleat added the needs-reproduction Having trouble reproducing! Can anyone confirm? label Jan 5, 2023
@keitaay
Copy link
Author

keitaay commented Jan 6, 2023

Thanks for the reply, as well as for clarifying what you intended out of the layouts optional folder.

This commit to my project's repo should have the full version of what I'm struggling with (with the exception of only listing src/layouts in the part of the configuration that you mentioned, as opposed to also having src/include as well).

@keitaay
Copy link
Author

keitaay commented Jan 6, 2023

Actually.. I tried removing the let nunjucksEnvironment = new Nunjucks.Environment(...); eleventyConfig.setLibrary("njk", nunjucksEnvironment); bit out in its entirety, and it works as expected! Thank you for pointing out that flaw!

@keitaay keitaay closed this as completed Jan 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
education in-progress needs-reproduction Having trouble reproducing! Can anyone confirm?
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zachleat @keitaay